Create en passelig snø Effect med Actionscript 3.0
Del
Del
Del
Del
Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Det har vært en kald vinter over alt, så la oss erkjenne det faktum med en fin vinterlig scene. I denne opplæringen vil vi skape en fallende snø effekt ved hjelp av Flash og Actionscript 3.0
Endelig resultat
La oss ta en rask titt på den endelige effekten.
Trinn 1: Kort oversikt
Bruke et bilde som bakgrunn vil vi skape en fallende snø effekt. Snøen vil være en brukerdefinert MovieClip som skal eksporteres til å bli brukt som en klasse. Vi vil duplisere og animere dette klippet med AS3
Trinn 2:. Sett opp
Åpne Flash og opprette en ny Flash-fil (Actionscript 3.0)
Sett scenen størrelse. 500 x 375 px og sett bildefrekvens til 24fps
Trinn 3:.. Får Bakgrunn
En snødekt scene vil være nødvendig for denne effekten
Du kan opprette din egen eller tilpasse en egendefinert bakgrunn. I dette eksempelet brukte jeg et bilde fra Andy Armstrong, som har en Creative Commons-lisens
Trinn 4:. Importere bilde
Når du er ferdig velger bakgrunnen gå tilbake til Flash, klikk Fil > Import > Import Stage Hotell og velg bildet du lastet ned
Plasser bildet i midten av scenen og gå til neste trinn
Trinn 5:.. Lag din Snowflake Anmeldelser
En MovieClip vil bli brukt som et Snowflake, jeg brukte denne grunnleggende Snowflake bitmap:
Konverter bitmap til en MovieClip, markere Eksporter for Action
boksen, og gi den navnet Snowflake
.
Alternativt kan du lage en ny MovieClip heter Snowflake Hotell og bare tegne en sirkel inni, med en gradient fyll slik at den ser myk og rund.
Trinn 6: Lag din Document Class
Opprett en ny Actionscript dokument og lagre det som Snow.as
Trinn 7:. Start Kode
Pakken søkeord lar deg organisere koden din inn i grupper som kan importeres av andre scripts; det er anbefalt å navngi dem starter med en liten bokstav og bruke intercaps for etterfølgende ord - for eksempel: myClasses
Hvis du ikke ønsker å gruppere filene dine i en pakke eller deg. har bare én klasse du kan bruke den rett fra kilden mappen, men ideen her er å være organisert
pakke {
Trinn 8:. Import Obligatoriske Classes
Dette er de nødvendige klasser, for en mer detaljert beskrivelse om hver klasse, kan du se Flash-hjelp (trykk F1 innen Flash)
import flash.display.MovieClip;. import flash.events.Event, import flash.utils.Timer, import flash.events. Timerevent;
Trinn 9: Erklærer Class
strekker
søkeord definerer en klasse som er en underklasse av en annen klasse. Underklasse arver alle metoder, egenskaper og funksjoner; på den måten vi kan bruke dem i klassen vår
Vår dokumentet klassen kommer til å forlenge MovieClip klasse
public class snø strekker MovieClip {
Trinn 10:.. Sett opp Variabler
La oss ta en titt på de variablene vi vil bruke
//En Vector objekt som vil lagre snøflak movieclipsprivate Var flakesVector: Vector < MovieClip >.. . = New Vector < MovieClip > (); //Timer objekt som styrer den horisontale movementprivate Var timer: Timer = new Timer (2000);
(Hvis du bruker Flash CS3, kan du bruke en Array i stedet for en Vector)
Trinn 11:. Skriv Constructor
Konstruktøren er en funksjon som kjøres når et objekt er opprettet fra en klasse; denne koden er den første som skal utføres når du gjør en forekomst av et objekt eller kjøring ved å bruke dokument Class. I dette tilfellet er det den første kode kjøres når vår SWF startes
Her har vi spesifisert to parametere som har verdier som standard:. Hastigheten parameter, som lagrer pikslene hvert snøfnugg beveger seg ned med hver ramme og flakesNumber, som er antall snøflak som presenteres på skjermen
offentlig funksjon Snow. (hastighet: int = 3, flakesNumber = 150): void {
Steg 12: Dupliser Snowflakes
En for
uttalelse håndterer denne handlingen
for. (var i: int = 0; i < flakesNumber; i ++) {//instantiates snøfnugg klippet Var flake: Snowflake = new Snowflake (); //Gir en unik og tilfeldig faller hastigheten til hvert snøfnugg flake.vel = (Math.random () * hastighet) + 0,5; //Picks en tilfeldig verdi mellom 0,5 og -0,5, er dette den horisontale bevegelseshastigheten flake.xSpeed = Math.floor (Math.random () * (0,5 - -0,5 + 1)) + -0,5; flake.scaleX = (Math.random () * 1) + 0,3; //Skalerer snøfnugg flake.scaleY = flake.scaleX; flake.x = Math.random () * stage.stageWidth; //Tilfeldig posisjon flake.y = Math.random () * stage.stageHeight; addChild (flake); //Legger klippet til scenen //Legger klippet til Vector objektet slik at den kan nås av andre funksjoner flakesVector.push (flake); } //Legger en lytter til scenen for å utføre høsten funksjon hver ramme addEventListener (Event.ENTER_FRAME, fall); timer.addEventListener (TimerEvent.TIMER, changeMovement); timer.start (); //Starter tidtakeren}
Trinn 13: Tilsett Fall Function
Den fallende funksjon
Dette vil bli utløst hver ramme, på grunn av ENTER_FRAME hendelsen lytteren.. Det vil bevege snøflak horisontalt og nedover hver ramme i henhold til hastigheten beregnet i xSpeed og VEL. . Det vil også re-posisjon snøflak på toppen når de passerer bunnen av scenen
privat funksjon høst (e: Hendelses): void {//Dette for looper gjennom snøflak å bruke koden til hvert klipp for (var i: int = 0; i < flakesVector.length; i ++) {
Trinn 14: Horisontal bevegelse
Flytt hvert snøfnugg horisontalt. Ved første hvert vil bare flytte til høyre, men timeren hendelseshåndterer vil endre det
flakesVector [i] .x + = flakesVector [i] .xSpeed;
Trinn 15:. Vertikal bevegelse
Den snøfnugg vil bli flyttet ned hver ramme av sin VEL
(hastighet) variabel, som har en annen verdi for hver flake
flakesVector [i] .Y + = flakesVector [i] .vel.;
Trinn 16:. Reset Posisjoner
Hvis snøfnugg klippet får nedenfor scenen, det vil bli flyttet tilbake til toppen og tildelt med et nytt tilfeldig x-postition
if (flakesVector [i] .Y > stage.stageHeight) {flakesVector [i] .x = Math.random () * stage.stageWidth; flakesVector [i] .Y = -flakesVector [i] .height;}
Trinn 17: Change Movement
En Timer objektet vil endre den horisontale bevegelsen av flak ved å multiplisere xSpeed av hvert fnugg av - 1 hvert par sekunder. Denne funksjonen er utløst av TIMER arrangementet lytteren vi lagt tidligere
privat funksjon changeMovement (e: Timerevent): void {for (var i: int = 0; i < flakesVector.length; i ++). {FlakesVector [i] .xSpeed * = 1; }}}}
Trinn 18: Sett Document Class
Gå tilbake til FLA fil, og i Properties Panel skrive Snow
i Class-feltet for å gjøre dette dokument Klasse
Test filmen for å se effekten i aksjon
Trinn 19:.. Prøv Custom Snowflakes
Du kan endre Snowflake MovieClip slik at den ser slik du vil, Dette er et eksempel på de resultatene du kan få!
Konklusjon
Spill med parametere til klassen og opprette egendefinerte movieclips å lage din egen snø Effect.
Takk for at lesing!