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. 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 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: Opprett en ny klasse for effekten selv. Når vi er ferdig, vil legge effekten på scenen være svært enkel: Du er sannsynligvis tenker "det er en pokker for mange variabler, hva alt er de brukt til?": 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: Det neste trinnet er å skape de to hendelsen lyttere . Vi vil begynne med lettere av de to, enterframe funksjon: Det kan ikke gjøre total følelse akkurat nå, men dette bør hjelpe kaste lys Etter det ... Det er på tide å legge til hendelsen lytteren for tidtakeren. 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: 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 de er likeverdige legger vi et torg, plasser den tilsvarende, og skyv den inn på squaresArray slik at den kan skaleres: 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: 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: 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: Dette fungerer omtrent som fadeSquaresInTimer (), men denne gangen er vi kaller funksjonen fadeSquaresOut (): 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: 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 (): 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 Nå kommer den enkle delen. Legg til følgende kode i dokumentet klassen konstruktør å legge effekten: 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: 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 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
.
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; }}}
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 () {}}}
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
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 () {}}}
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
fadeinTimer.addEventListener ("timer", fadeSquaresInTimer); fadeinTimer.start (); addEventListener (Event.ENTER_FRAME, enterframe);
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;}
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.
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)
offentlig funksjon fadeSquaresInTimer (e: hendelse) {fadeSquaresIn (fadeArray [Transitions.val]); currentSquares + = 1;}
offentlig funksjon fadeSquaresIn (s: Array) { for (var rad = 0; rad < s [0] .length; rad ++) {for (var col = 0; col < s.length; col ++) {}}}
Hvis (int (s [col] [rad ]) == currentSquares) {}
Var s1: Sprite = new Square (); s1.x = 20 + (rad * 40); s1.y = 20 + (col * 40); addChild (s1), squaresArray.push (s1);
if (squaresArray.length == (s [0] .length * s.length)) {fadeinTimer.stop (); addEventListener (Event.ENTER_FRAME, pauseBetween);}
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); }}
offentlig funksjon fadeSquaresOutTimer (e: Hendelses) {fadeSquaresOut (fadeArray [Transitions.val]); currentSquares + = 1;}
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; }}}}
Hvis (currentFadeOut == (s [0] .length * s.length)) {fadeoutTimer.stop (); pauseTime = 01; addEventListener (Event.ENTER_FRAME, delayedRemove);}
offentlig funksjon delayedRemove (e: Hendelses) {pauseTime + = 1; if (pauseTime == 30) {Transitions.transitionAttached = false; removeEventListener (Event.ENTER_FRAME, delayedRemove); stage.removeChild (denne); }}
Trinn 4:. Legge til Effect
if (transitionAttached == false) {transitionAttached = true; Var f1: Sprite = new FadeEffect; stage.addChild (f1);}
Trinn 5: Opprette Flere oppskrifter
[//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]]];
Konklusjon