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 En MovieClip vil bli brukt som et Snowflake, jeg brukte denne grunnleggende Snowflake bitmap: Konverter bitmap til en MovieClip, markere Eksporter for Action 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. Opprett en ny Actionscript dokument og lagre det som Snow.as 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 Dette er de nødvendige klasser, for en mer detaljert beskrivelse om hver klasse, kan du se Flash-hjelp (trykk F1 innen Flash) strekker Vår dokumentet klassen kommer til å forlenge MovieClip klasse La oss ta en titt på de variablene vi vil bruke (Hvis du bruker Flash CS3, kan du bruke en Array i stedet for en Vector) 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 En for 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 Flytt hvert snøfnugg horisontalt. Ved første hvert vil bare flytte til høyre, men timeren hendelseshåndterer vil endre det Den snøfnugg vil bli flyttet ned hver ramme av sin VEL Hvis snøfnugg klippet får nedenfor scenen, det vil bli flyttet tilbake til toppen og tildelt med et nytt tilfeldig x-postition 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 Gå tilbake til FLA fil, og i Properties Panel skrive Snow Test filmen for å se effekten i aksjon Du kan endre Snowflake MovieClip slik at den ser slik du vil, Dette er et eksempel på de resultatene du kan få! Spill med parametere til klassen og opprette egendefinerte movieclips å lage din egen snø Effect. Takk for at lesing!
Trinn 5:.. Lag din Snowflake Anmeldelser
boksen, og gi den navnet Snowflake
.
Trinn 6: Lag din Document Class
Trinn 7:. Start Kode
pakke {
Trinn 8:. Import Obligatoriske Classes
import flash.display.MovieClip;. import flash.events.Event, import flash.utils.Timer, import flash.events. Timerevent;
Trinn 9: Erklærer Class
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
public class snø strekker MovieClip {
Trinn 10:.. Sett opp Variabler
//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);
Trinn 11:. Skriv Constructor
offentlig funksjon Snow. (hastighet: int = 3, flakesNumber = 150): void {
Steg 12: Dupliser Snowflakes
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
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
flakesVector [i] .x + = flakesVector [i] .xSpeed;
Trinn 15:. Vertikal bevegelse
(hastighet) variabel, som har en annen verdi for hver flake
flakesVector [i] .Y + = flakesVector [i] .vel.;
Trinn 16:. Reset Posisjoner
if (flakesVector [i] .Y > stage.stageHeight) {flakesVector [i] .x = Math.random () * stage.stageWidth; flakesVector [i] .Y = -flakesVector [i] .height;}
Trinn 17: Change Movement
privat funksjon changeMovement (e: Timerevent): void {for (var i: int = 0; i < flakesVector.length; i ++). {FlakesVector [i] .xSpeed * = 1; }}}}
Trinn 18: Sett Document Class
i Class-feltet for å gjøre dette dokument Klasse
Trinn 19:.. Prøv Custom Snowflakes
Konklusjon