Lag Flash Screen overgangseffekter helt med Code

Create Flash Screen overgangseffekter helt med Kode
Del
Del
5
Del

Dette Cyber ​​Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

Flash-spill er veldig mye brød og smør av indie pop-nerd kultur. Hvis du vurdere brødskiver menyen og selve spillet, hva er igjen? Smør - selve stoffet som gjør brødet smaker så mye mer deilig. Og i form av en Flash spill, hva som kommer i mellom menyer og spill er overgangene!




Endelig resultat Forhåndsvisning

Dette er et eksempel mønster av overgangseffekt som vi skal jobbe mot:



Trinn 1: Klar

Per vanlig vi trenger for å lage en ny Flash-fil (Actionscript 3.0). Sette bredden til 400px, høyden til 200px, og bildefrekvens 30 bilder i sekundet. Bakgrunnsfargen kan stå som standard. Lagre filen; det kan navngis hva du vil. Jeg heter min Transitions.fla
.

Neste vi trenger for å lage et dokument klasse. Gå til din Flash filens egenskaper og sette sin klasse Transitions. Deretter oppretter dokumentet klassen.
Pakke {import flash.display *; import flash.events. *; public class Transitions strekker MovieClip {statisk offentlig Var val: Number = new Number (); statisk offentlig Var transitionAttached: Boolean = new Boolean (); offentlig funksjon Transitions () {val = 0; transitionAttached = false; }}}

Koden nettopp introdusert to variabler. Den første vil bli brukt til å velge effekten mønster, og den andre vil bli brukt til å sjekke mot å ha flere forekomster av effekten på scenen



Trinn 2:. Opprette Square Sprite
< p> Vårt neste skritt er å skape sprite som vil bli brukt som hver rute for overgangen. Opprett en ny klasse og lagre den som Square.as Bilde:
pakke {import flash.display. *; import flash.events. *; public class Square strekker Sprite {public Var squareShape: Shape = new Shape (); offentlig funksjon Square () {}}}

Vi bruker squareShape variabel for å trekke våre formen inne Sprite. Tegn et rektangel 40px av 40px (Som er det full størrelse) og sette skala til 0,1, en tiendedel av sin størrelse - dette vil hjelpe oss i effekten later:
addChild(squareShape);squareShape.graphics.beginFill(0x000000,1);squareShape.graphics.drawRect(-20,-20,40,40);squareShape.graphics.endFill();this.scaleX = 0,1; this.scaleY = 0,1;



Trinn 3: Opprette Effect

Opprett en ny klasse for effekten selv. Når vi er ferdig, vil legge effekten på scenen være svært enkel:
pakke {import flash.display. *; import flash.events. *; import flash.utils. *; public class FadeEffect strekker Sprite {public Var currentFadeOut: int = 00; offentlige Var currentSquares: int = 01; offentlig Var pauseTime: int = 01; offentlig Var tempNum: int = 00; offentlig Var fading: String = "in"; offentlig Var fadeinTimer: Timer = new Timer (100); offentlig Var fadeoutTimer: Timer = new Timer (100); offentlig Var fadeArray: Array = [//toppen [[01,01,01,01,01,01,01,01,01,01], [02,02,02,02,02,02,02,02, 02,02], [03,03,03,03,03,03,03,03,03,03], [04,04,04,04,04,04,04,04,04,04], [ ,,,0],05,05,05,05,05,05,05,05,05,05]], //bunnen [[05,05,05,05,05,05,05,05,05,05], [04 , 04,04,04,04,04,04,04,04,04], [03,03,03,03,03,03,03,03,03,03], [02,02,02,02 , 02,02,02,02,02,02], [01,01,01,01,01,01,01,01,01,01]]]; offentlig Var squaresArray: Array = new Array (); offentlig funksjon FadeEffect () {}}}

Du er sannsynligvis tenker "det er en pokker for mange variabler, hva alt er de brukt til?":

currentFadeOut - brukt som et sjekk for tempNum å se hvor mange firkanter som skal skaleres

currentSquares - den nåværende verdien angir hvilke ruter skal være festet og /eller skalert

pauseTime - en enkel heltall for å gi en liten pause i mellom overganger og fjerne seg

tempNum - brukes til å sjekke hva tallene i matrisen er å bli skalert

fading - en streng for å sjekke om overgangen er fading inn eller ut

fadeinTimer - en timer som er kalt til å begynne falming i av den nåværende verdien av currentSquares

fadeoutTimer - en annen tidsinnstilling som er kalt til å begynne falming ut av den nåværende verdien av currentSquares

fadeArray - 3D-matrise som inneholder alle overgangs mønstre

squaresArray - en matrise for Square sprites

Vår effekten vil begynne med å initiere en hendelse lytteren for fadeInTimer og starter den. Vi må også legge til en hendelse lytteren å kontinuerlig skalere alle sprites til deres riktige størrelser. Bruk følgende kode inne i konstruktøren:
fadeinTimer.addEventListener ("timer", fadeSquaresInTimer); fadeinTimer.start (); addEventListener (Event.ENTER_FRAME, enterframe);

Det neste trinnet er å skape de to hendelsen lyttere . Vi vil begynne med lettere av de to, enterframe funksjon:
offentlig funksjon enterframe (e: Hendelses) {for hver (var s1 i squaresArray) {tempNum + = 1; if (fading == "in") {if (s1.scaleX < = 1) {s1.scaleX + = 0,05; s1.scaleY + = 0,05; }} Else if (fading == "ut") {if (tempNum < = currentFadeOut) {if (s1.scaleX > = 0,1) {s1.scaleX- = 0,05; s1.scaleY- = 0,05; } else {if (s1.visible == true) {s1.visible = false; }}}}} TempNum = 00;}

Det kan ikke gjøre total følelse akkurat nå, men dette bør hjelpe kaste lys

s1 er forekomsten navn som vil bli gitt til den. firkanter når vi lager dem i en senere funksjon.

De blir lagt til en rekke kalt squaresArray å holde oversikt over hvor mange av dem, og vi utføre den samme operasjonen for hvert objekt i rekken.

Neste vi øke tempNum (brukes i det svinnende ut if-setning) som brukes til å skalere sqaures i den rekkefølgen de ble lagt til array. Dette betyr at det ikke mønsteret avhengig og vil jobbe med noe mønster.

Etter det ...

Vi sjekker om fading er sant eller ikke.
< li> Hvis sant, skalerer det alle rutene opp til de når sin fulle størrelse (de begynner å skalere umiddelbart etter currentSquares øker)

Når det begynner falming ut ting blir litt vanskeligere.; vi bare skalere ned rutene som er lavere enn den nåværende verdien av currentFadeOut (disse er de som skal skalere, bør alle andre fortsatt i full skala før verdien øker).

Når de har skalert ned til en tiendedel av størrelsen vi gjøre disse rutene usynlig (de vil bli slettet med hele effekten)

Det er på tide å legge til hendelsen lytteren for tidtakeren.
offentlig funksjon fadeSquaresInTimer (e: hendelse) {fadeSquaresIn (fadeArray [Transitions.val]); currentSquares + = 1;}

Ved første øyekast ser det mindre komplisert, men du bør legge merke til at vi kaller en funksjon med fadeArray som parameter. Hvilket mønster er valgt fra gruppen avhenger av hva man setter val lik i overganger klassen; akkurat nå skal den bruke det første mønsteret fordi val er satt til 0.

Det neste trinnet er å opprette fadeSquaresIn funksjon som kalles fra forrige timeren:
offentlig funksjon fadeSquaresIn (s: Array) { for (var rad = 0; rad < s [0] .length; rad ++) {for (var col = 0; col < s.length; col ++) {}}}

Første som vi oppnå er å iterere gjennom valgt mønster. Vi starter på rad 1, coloseum en og bla gjennom hver coloseum til slutten av raden er nådd. Da kan vi gå til neste rad og gjenta prosessen

Det neste du må gjøre er å sammenligne gjeldende element i matrisen til verdien av currentSquares.
Hvis (int (s [col] [rad ]) == currentSquares) {}

Hvis de er likeverdige legger vi et torg, plasser den tilsvarende, og skyv den inn på squaresArray slik at den kan skaleres:
Var s1: Sprite = new Square (); s1.x = 20 + (rad * 40); s1.y = 20 + (col * 40); addChild (s1), squaresArray.push (s1);

Vi er nesten ferdig med denne funksjonen, vi må bare for å utføre en sjekk for når det er det samme antall ruter som det er elementer i mønsteret. Vi gjør det ved å legge til følgende if-statement utenfor både for-løkker:
if (squaresArray.length == (s [0] .length * s.length)) {fadeinTimer.stop (); addEventListener (Event.ENTER_FRAME, pauseBetween);}

Selvforklarende - vi stoppet tidtakeren og kalles en hendelse lytteren for pause mellom falming og fading ut. At funksjonen brukes for å starte fading ut, og kan også brukes til å føre til endring i spillet ditt:
offentlig funksjon pauseBetween (e: Hendelses) {pauseTime + = 1; if (pauseTime == 60) {currentSquares = 01; fading = "ut"; fadeoutTimer.addEventListener ("timer", fadeSquaresOutTimer); fadeoutTimer.start (); removeEventListener (Event.ENTER_FRAME, pauseBetween); }}

Vi vil ikke bruke mye tid på denne funksjonen på grunn av sin enkelhet. Her øker vi verdien av pauseTime, og når den er lik 60 (som betyr to sekunder har passert) vi sett verdien av currentSquares tilbake til 1, satt falming til "ut", slik at rutene kan skalere bakover, tar lytteren for pauseBetween ( ) selv, og legge til en hendelse lytteren for denne nye funksjonen:
offentlig funksjon fadeSquaresOutTimer (e: Hendelses) {fadeSquaresOut (fadeArray [Transitions.val]); currentSquares + = 1;}

Dette fungerer omtrent som fadeSquaresInTimer (), men denne gangen er vi kaller funksjonen fadeSquaresOut ():
offentlig funksjon fadeSquaresOut (s: Array) {for (var rad = 0; rad < s [0] .length; rad ++) {for (var col = 0; col < s.length; col ++) {if (int (s [col] [rad]) == currentSquares) {currentFadeOut + = 1; }}}}

Vi sykler gjennom, men denne gangen når vi finner et tilsvarende element vi øke verdien av currentFadeOut slik at det neste elementet i squaresArray kan begynne fading ut

Nesten ferdig nå.; alt som gjenstår er å stoppe tidtakeren og fjerne effekten. Legg denne if-statement utenfor de to for-løkker:
Hvis (currentFadeOut == (s [0] .length * s.length)) {fadeoutTimer.stop (); pauseTime = 01; addEventListener (Event.ENTER_FRAME, delayedRemove);}

Dette sjekker om alle elementene har begynt falming ut. Hvis ja, så stopper det timeren setter pauseTime tilbake til en og legger til en hendelse lytteren for funksjonen delayedRemove ():
offentlig funksjon delayedRemove (e: Hendelses) {pauseTime + = 1; if (pauseTime == 30) {Transitions.transitionAttached = false; removeEventListener (Event.ENTER_FRAME, delayedRemove); stage.removeChild (denne); }}

Som før vi øke verdien av pauseTime, og når den er lik 30 (1 sekund) vi satt boolsk tilbake til false slik at effekten kan legges igjen. Vi vil fjerne denne hendelsen lytteren og vi fjerner denne effekten fra scenen



Trinn 4:. Legge til Effect

Nå kommer den enkle delen. Legg til følgende kode i dokumentet klassen konstruktør å legge effekten:
if (transitionAttached == false) {transitionAttached = true; Var f1: Sprite = new FadeEffect; stage.addChild (f1);}



Trinn 5: Opprette Flere oppskrifter

gjerne lage dine egne mønstre! Det er svært enkelt, bare lage en ny 2D matrise inne i 3D array. Her er tabellen som jeg har laget (bare erstatte din 3D matrise med det). Det inkluderer 8 forskjellige transitions:
[//top[[01,01,01,01,01,01,01,01,01,01],[02,02,02,02,02,02,02,02,02,02],[03,03,03,03,03,03,03,03,03,03],[04,04,04,04,04,04,04,04,04,04],[05,05,05,05,05,05,05,05,05,05]],//bottom[[05,05,05,05,05,05,05,05,05,05],[04,04,04,04,04,04,04,04,04,04],[03,03,03,03,03,03,03,03,03,03],[02,02,02,02,02,02,02,02,02,02],[01,01,01,01,01,01,01,01,01,01]],//left[[01,02,03,04,05,06,07,08,09,10],[01,02,03,04,05,06,07,08,09,10],[01,02,03,04,05,06,07,08,09,10],[01,02,03,04,05,06,07,08,09,10],[01,02,03,04,05,06,07,08,09,10]],//right[[10,09,08,07,06,05,04,03,02,01],[10,09,08,07,06,05,04,03,02,01],[10,09,08,07,06,05,04,03,02,01],[10,09,08,07,06,05,04,03,02,01],[10,09,08,07,06,05,04,03,02,01]],//top-left[[01,02,03,04,05,06,07,08,09,10],[02,03,04,05,06,07,08,09,10,11],[03,04,05,06,07,08,09,10,11,12],[04,05,06,07,08,09,10,11,12,13],[05,06,07,08,09,10,11,12,13,14]],//top-right[[10,09,08,07,06,05,04,03,02,01],[11,10,09,08,07,06,05,04,03,02],[12,11,10,09,08,07,06,05,04,03],[13,12,11,10,09,08,07,06,05,04],[14,13,12,11,10,09,08,07,06,05]],//bottom-left[[05,06,07,08,09,10,11,12,13,14],[04,05,06,07,08,09,10,11,12,13],[03,04,05,06,07,08,09,10,11,12],[02,03,04,05,06,07,08,09,10,11],[01,02,03,04,05,06,07,08,09,10]],//bottom-right[[14,13,12,11,10,09,08,07,06,05],[13,12,11,10,09,08,07,06,05,04],[12,11,10,09,08,07,06,05,04,03],[11,10,09,08,07,06,05,03,03,02],[10,09,08,07,06,05,04,03,02,01]]];

You kan endre verdien av Transitions.val å velge et annet mønster - for eksempel hvis val er tre, vil overgangen feie inn fra høyre



Konklusjon

Takk for at du tok. tid til å lese denne opplæringen. Hvis du har spørsmål kan du legge igjen en kommentar under. Og hvis du ønsker en utfordring, kan du prøve å lage effekten svekkes på med ett mønster og fade ut med en motstander en. Anmeldelser