Share
În acest tutorial vom crea un efect de ploaie dinamic folosind ActionScript 3.0. Efectul poate fi personalizat în mai multe moduri prin schimbarea doar a câtorva linii de cod. Să începem!
Să aruncăm o privire asupra efectului final la care vom lucra:
Vom desena o picătură de ploaie simplă, apoi folosind abilitățile noastre ActionScript vom duplica, muta și poziționa filmul pentru a obține un efect ploios de ploaie.
Creați un nou document ActionScript 3 (Fișier> Nou ...). Setați dimensiunea Stage la dimensiunile dorite, am folosit 600 x 300 px.
Adăugați sau desenați o imagine pe care să o utilizați ca fundal, am folosit o imagine modificată de JinThai, licențiată sub Creative Commons.
Redenumiți primul strat pe "Fundal", apoi creați altul și denumiți-l "Cod" (îl vom folosi pe acesta pentru a plasa ActionScript-ul pe acesta). Puteți bloca stratul "Cod" pentru a evita plasarea desenelor nedorite acolo.
Creați un grafic care să fie utilizat ca picătură de ploaie. Setați culoarea la alb și utilizați un gradient liniar pentru alfa, a mea este de 40 la 15. Conversia la un MovieClip și numiți-o "Drop", nu uitați să bifați caseta de selectare "Export pentru ActionScript".
Să începem un cod într-un fișier ActionScript separat:
pachete de clase / * Import clase necesare * / import flash.display.MovieClip; importul flash.events.Event;
Aici introducem clasele pe care le vom folosi. Amintiți-vă că cuvântul de lângă "pachet" este numele directorului în care se află clasa noastră.
// Trebuie să extindem clasa astfel încât să putem folosi metoda addChild (). clasa publica Rain extinde MovieClip
Extinderea clasei MovieClip va permite claselor noastre să moștenească toate metodele, proprietățile și funcțiile pe care le are filmul. În acest caz îl folosim pentru a obține accesul la metoda addChild ().
Aici vom folosi o clasă exclusiv Flash Player 10 "Vector". Puneți pur și simplu, Vector Class funcționează ca un Array, dar este mult mai rapid.
privat var offset: int = 50; // Aceasta este zona de offset în pixeli care va avea efectul. Fără aceasta, colțurile zonei cu efecte vor fi ploi libere private dropsNumber: int; // Numărul de picături de ploaie; valoarea sa este stabilită în parametrii privat var dropsVector: Vector.= Vector nou. (); // Vectorul care va stoca fiecare picătură de ploaie
funcția publică init (picături: int, fallSpeed: int, windSpeed: int, hArea: int, vArea: int, dir: String): void dropsNumber = drops;
Funcția principală, cu câțiva parametri care fac ca efectul să fie ușor de adaptat la nevoile dvs. Puteți schimba numărul de picături, viteza la care cad picăturile, viteza cu care picăturile se vor mișca orizontal, dimensiunea zonei de efect și direcția ploii (stânga sau dreapta).
Am setat valoarea dropsNumber aici.
În mod prestabilit, offsetul var este setat să funcționeze cu partea stângă, așa că trebuie să verificăm unde se va deplasa ploaia și să schimbe offsetul dacă direcția este corectă.
dacă (dir == "dreapta") offset * = -1;
Pentru a afișa diferitele instanțe ale Drop MovieClip trebuie să creăm un nou Drop Object în interiorul unei instrucțiuni "For":
pentru (var i: int = 0; i < drops; i++) var drop:Drop = new Drop(); drop.fallSpeed=fallSpeed; drop.windSpeed=windSpeed; drop.dir=dir; drop.hArea=hArea; drop.vArea=vArea;
Utilizăm variabila "picături" pentru a obține numărul de picături definite de utilizator și setați variabilele din interiorul filmului pentru o utilizare ulterioară.
Setați o poziție aleatoare inițială pentru picături.
drop.x = Math.random () * (hArea + offset); drop.y = Math.random () * Varea;
drop.scaleX = Math.round (((Math.random () * 0,8) + 0,3) * 10) / 10; drop.scaleY = drop.scaleX;
Aceasta stabilește scala picăturilor între 0,3 și dimensiunea originală.
dropsVector.push (picătură); addChild (picătură); // Sfârșit pentru InTheDirection (); // Sfârșitul funcției init
Acest cod adaugă Drop MovieClip la Vector și apoi la scenă. Se mai numește și funcția "direcție".
Accentsconagua
funcția privată inTheDirection (): void pentru (var i: int = 0; i < dropsNumber; i++) switch (dropsVector[i].dir) case "left" : dropsVector[i].addEventListener(Event.ENTER_FRAME, moveLeft); break; case "right" : dropsVector[i].scaleX*=-1; //Our Drop was created going to the left, so we flip it to make it look like it's going to the right dropsVector[i].addEventListener(Event.ENTER_FRAME, moveRight); break; default : trace("Error"); În această funcție folosim un alt "Pentru" pentru a avea acces la filmul MovieClips din interiorul vectorului. Apoi verificăm parametrul direcției și adăugăm un receptor la funcția corespunzătoare. Toate acestea vor avea grijă de mișcare și de poziția.
funcția privată moveLeft (e: Event): void e.target.x- = e.target.windSpeed; e.target.y + = Math.random () * e.target.fallSpeed; dacă (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; funcția privată moveRight (e: Event): void e.target.x + = e.target.windSpeed; e.target.y + = Math.random () * e.target.fallSpeed; dacă (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;
Aceasta mișcă picăturile pe baza parametrilor funcției principale. Apoi se resetează poziția atunci când picăturile se deplasează în afara zonei de efect.
Aceasta este clasa terminată, pentru ao folosi, vom reveni la Flash IDE, vom deschide panoul de acțiuni și vom scrie:
clasele de import. var ploaie: ploaie = ploaie nouă (); rain.init (200, 50, 5, 600, 300, "stânga"); addChild (ploaie);
Acest lucru va crea un nou obiect de ploaie, apoi apelați funcția principală pentru a începe efectul. În cele din urmă, adăugăm efectul pe scenă.
Amintiți-vă că puteți juca cu parametrii pentru a obține diferite efecte și că puteți schimba și picăturile prin desenarea a ceea ce vă place. Continuați să încercați diferite combinații pentru a obține efectul exact pe care îl doriți.
Sper că vă place să citiți tututul la fel de mult ca și cum l-am scris. Vă mulțumim pentru lectură!
