Create en Rain Effect i Flash Bruke Actionscript 3.0
4
Del
Del
Del

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

I denne opplæringen vil vi skape en dynamisk regn effekt ved hjelp av Actionscript 3.0. Effekten kan tilpasses på mange måter bare ved å endre noen få linjer med kode. La oss komme i gang

Endelig resultat Forhåndsvisning

La oss ta en titt på den endelige effekten vi skal jobbe mot:

Trinn 1 - Kort oversikt

Vi vil trekke en enkel regn dråpe, deretter bruke våre Action ferdigheter vi vil kopiere, flytte og plassere MovieClip å få en fin regnfull effekt

Trinn 2. - FLA Document

Opprett en ny Actionscript 3 dokument (Fil > New ...). Sett Stage størrelse på dine ønskede dimensjoner, har jeg brukt 600 x 300 px

Trinn 3 -. Velg et bilde

Legg til eller trekke et bilde som skal brukes som bakgrunn, brukte jeg en endrede bildet av JinThai, lisensiert under Creative Commons

Trinn 4 -. Layers

Gi nytt navn det første laget til "Bakgrunn" og deretter opprette en ny og gi den navnet "Code" (vi vil bruke dette man å plassere vår Action på). Du kan låse "Code" lag for å unngå plassering av uønskede tegninger der

Trinn 5 -. Opprette Drop

Lag en grafisk å bruke som regn dråpe. Satt sin farge til hvit og bruke en lineær gradient for alfa, mine er 40 til 15. konvertere den til en MovieClip og gi den navnet "Drop", må du huske å sjekke "Export for Action" boksen.

Trinn 6 - Importere Obligatoriske Classes

La oss starte noen kode i en egen Actionscript-fil:
pakke Classes {/* Import nødvendig klasser * /import flash.display.MovieClip, importere flash.events.Event; < p> Her importerer vi klassene som vi skal bruke. Husk at ordet ved siden av "pakken" er navnet på mappen der vår Class ligger

Trinn 7 -. Utvide Class
//Vi trenger å utvide klassen slik at vi kan bruke addChild () -metoden. public class Rain strekker MovieClip {

Utvide MovieClip klasse vil tillate klassen vår å arve alle metoder, egenskaper og funksjoner som den MovieClip har. I dette tilfellet bruker vi den til å få tilgang til addChild () -metoden

Trinn 8 -. Variablene

Her vil vi bruke en eksklusiv Flash Player 10 Class "Vector". . Enkelt sagt, fungerer Vector klasse som en Array, men er betydelig raskere
privat Var offset: int = 50; //Dette er offset-området i piksler at effekten vil ta. Uten dette, vil hjørnene av effekten området være regn freeprivate Var dropsNumber: int; //Antall regndråper; sin verdi er satt i parametersprivate Var dropsVector. Vector < MovieClip > = New Vector. ≪ MovieClip > (); //Vector som vil lagre hvert regn dråpe
Trinn 9 - Hovedfunksjon
offentlig funksjon init (dråper: int, fallSpeed: int, Windspeed: int, hArea: int, vArea: int, dir: String): void {dropsNumber = drops;

Hovedfunksjonen, med noen parametere gjør effekten lett å tilpasse til dine behov. Du kan endre antall dråper, hastigheten ved hvilken dråpene faller, hastigheten ved hvilken dråpene vil bevege seg horisontalt, størrelsen av effekten området og retningen av regn (venstre eller høyre).

Vi setter dropsNumber verdi her

Trinn 10 -.? Venstre eller Høyre

Som standard er offset Var satt til å arbeide med venstre side, så vi trenger å sjekke hvor regn vil gå og endre motregnes dersom retningen er riktig
if (dir == "riktig") {offset * = 1;}
Trinn 11 - Bruke Drop MovieClip

For å. viser ulike forekomster av Drop MovieClip vi må lage en ny Drop Object inne i en "For" statement:
for (var i: int = 0; i < drops; i ++) {var dråpe: Drop = new Drop();drop.fallSpeed=fallSpeed;drop.windSpeed=windSpeed;drop.dir=dir;drop.hArea=hArea;drop.vArea=vArea;

We bruke "faller" variable for å få brukerdefinert antall dråper og sett variablene inne i MovieClip for senere bruk

Trinn 12 -. Posisjon

Definer et start tilfeldig posisjon for Drops.
drop.x = Math.random () * (hArea + offset); drop.y = Math.random () * vArea;
Trinn 13 - Scale
drop.scaleX = Math.round (( (Math.random () * 0,8) + 0,3) * 10) /10; drop.scaleY = drop.scaleX;.

Dette setter omfanget av Drops mellom 0,3 og den opprinnelige størrelsen

Trinn 14 - Legge til Drops til Stage
dropsVector.push (drop); addChild (drop);} //End of ForinTheDirection (); } //Slutt på init funksjon

Denne koden legger Drop MovieClip til Vector og deretter til scenen. Det kaller også "retning" -funksjonen

Trinn 15 - Direction
privat funksjon inTheDirection (): void {for (var i: int = 0; i < dropsNumber; i ++) {switch (dropsVector. [i] .dir) {case "venstre": dropsVector [i] .addEventListener (Event.ENTER_FRAME, moveLeft); gå i stykker; case "riktig": dropsVector [i] .scaleX * = - 1; //Vår Drop ble opprettet skal til venstre, så vi snu den slik at den ser ut som det kommer til høyre dropsVector [i] .addEventListener (Event.ENTER_FRAME, moveRight); gå i stykker; standard: trace ("Feil"); }}}

I denne funksjonen vi bruker en annen "For" for å få tilgang til de movieclips inne i Vector. Så vi sjekke retningen parameter og legge en List til tilsvarende funksjon. Dette vil alle ta seg av bevegelsen og stillingen.

Trinn 16 - flytte funksjoner
privat funksjon moveLeft (e: Hendelses): void {e.target.x- = e.target.windSpeed; e.target.y + = Math.random () * e.target.fallSpeed; if (e.target.y > e.target.vArea + e.target.height) {e.target.x = Math.random () * (e.target.hArea + (offset * 2)); e.target.y = - e.target.height; }} Privat funksjon moveRight (e: Hendelses): void {e.target.x + = e.target.windSpeed; e.target.y + = Math.random () * e.target.fallSpeed; if (e.target.y > e.target.vArea + e.target.height) {e.target.x = Math.random () * (e.target.hArea - offset * 2) + offset * 2; e.target.y = - e.target.height; }}}}

Dette flytter Drops basert på parametrene i hovedfunksjon. Det tilbakestiller deretter posisjonen når dråpene beveger seg utenfor effekten området

Trinn 17 -. Bruke Class

Det er den klassen er ferdig, for å gjøre bruk av det vi går tilbake til Flash IDE, åpen Handlinger panelet og skrive:
import Classes.Rain; Var regn: Regn = new Rain (); rain.init (200, 50, 5, 600, 300, "venstre"); addChild (regn);

Dette vil skape en ny Rain Object, og kaller den viktigste funksjonen for å starte effekt. Til slutt legger vi effekten til scenen.

Konklusjon

Husk at du kan spille med parametrene for å få ulike effekter, og at du også kan endre dråper ved å tegne hva du vil. Fortsette å prøve forskjellige kombinasjoner for å få den eksakte effekten du ønsker.

Jeg håper du likte å lese tut så mye som jeg gjorde å skrive den. Takk for lesing!