Share
De două ori pe lună, revizuim câteva postări preferate ale cititorilor noștri de-a lungul istoriei Activetuts +. Acest tutorial a fost publicat pentru prima oară în mai 2009.
Folosind ActionScript 3.0, vom crea un animat fundal animat pe care îl putem folosi în ecranele de meniu sau ca vizualizator de muzică.
Să aruncăm o privire la ceea ce vom lucra:
Vom crea o clasă care va avea grijă de întregul efect. Când apelați clasa, veți putea schimba numărul luminilor, culorilor, alfa, dimensiunilor, direcției, vitezei și calității filtrului Blur. În acest fel, este posibil să se obțină multe rezultate diferite atunci când se utilizează. De asemenea, puteți utiliza orice fundal doriți.
Creați un nou document ActionScript 3.0 (Fișier> Nou ...). Setați dimensiunea Stage la dimensiunile dorite, am folosit 600 x 300 px.
Adăugați sau desenați o imagine de utilizat ca fundal, am folosit un gradient albastru simplu (# 02C7FB, # 1F63B4).
Redenumiți primul strat pe "Fundal" apoi creați altul și denumiți-l "Cod". Puteți bloca stratul "Cod" pentru a evita plasarea desenelor nedorite acolo.
Salvează-ți munca și să intrăm în cod!
Presupun că aveți deja o înțelegere de bază a ActionScript 3.0, dacă aveți îndoieli specifice cu privire la cuvinte cheie, vă rugăm să consultați Ajutorul Flash (F1).
Creați un nou fișier ActionScript (Fișier> Nou ...).
pachete de clase / * Import clase necesare * / import flash.display.MovieClip; import flash.filters.BitmapFilter; import flash.filters.BlurFilter; importul flash.events.Event;
Aici vom importa 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 Lights extinde MovieClip
Extinderea clasei MovieClip va permite ca clasa noastră să moștenească toate metodele, proprietățile și funcțiile pe care le are MovieClip, în acest caz îl folosim pentru a obține accesul la metoda addChild ().
Deși au nume destul de mult explicative, voi adăuga comentarii scurte pe fiecare var pentru a vă asigura că este clar. Ei obțin valorile lor din parametrii funcției principale.
private var lightsNumber: int; // Numărul de Lights on Stage private var xSpeed: int; // Viteza orizontală a Luminilor are privat var ySpeed: int; // Valoare verticală de viteză privată varDir: String; // Direction Lights merge, aceasta poate fi Sus, Jos, Stanga sau Dreapta private var areaW: int; // Lățimea zonei în care efectul va avea loc privat var areaH: int; // Luminile private var var: Array = Array nou (); // Această matrice va stoca toate Luminile MovieClips astfel încât să le putem folosi în afara Pentru unde le vom crea.
/ * Funcția principală * / funcția publică init (areaWidth: int, areaHeight: int, numberOfLights: int, lightSize: int, lightColor: uint, minimumScale: Number, hSpeed: int, : void zonaW = zona Lățime; zonaH = suprafața ridicată; lightsNumber = numberOfLights; lightsDir = dir;
Aceasta este funcția de care avem nevoie pentru a începe efectul, de asemenea, setăm valorile variabilelor din acest cod.
pentru (var i: int = 0; i < numberOfLights; i++) /* Create the specified number of lights */ var light:MovieClip = new MovieClip(); /* Set random speed to x and y based on the params */ xSpeed = Math.floor((Math.random() * (hSpeed - -hSpeed + 1)) + -hSpeed); ySpeed = Math.round((Math.random() * vSpeed) + 0.5); light.xSpeed = xSpeed; light.ySpeed = ySpeed; /* Create lights */ light.graphics.beginFill(lightColor); light.graphics.drawCircle(0, 0, lightSize / 2); light.graphics.endFill();
În acest cod folosim o instrucțiune "For" pentru a crea numărul de Luminări pe care utilizatorul le stabilește în parametru și a calcula o viteză semi-aleatoare pentru fiecare Lumină.
Aceasta stabilește o poziție aleatorie de pornire pentru Lumini pe baza parametrilor Area.
light.x = Math.floor (Math.random () * zona Lățimea); light.y = Matematica (Math.random () * areaHeight);
var b: int = matematică (Math.random () * 10) + 5; // Calculează un Blur arbitrar între 0-9 și adaugă 5 la rezultatul. var blur: BitmapFilter = BlurFilter nou (b, b, calitate); Obiectul BlurFilter. var filtruArray: Array = array nou (estompare); // Pentru a aplica filtrul avem nevoie de o serie de filtre. light.filters = filterArray; // Setează matricea filtrelor la Lumină
Codul de mai sus aplică Blur. Amintiți-vă că acest cod este încă parte a Forului, astfel încât Luminile obțin diferite Blururi.
light.alpha = Math.random () * 0.6 + 0.1;
O ușoară; aceasta stabilește proprietatea alfa între 0,1 și 0,6.
light.scaleX = Math.round (((Math.random () * (1-minimumScale)) + minimumScale) * 100) / 100; light.scaleY = light.scaleX;
Aceasta stabilește scara luminoasă între dimensiunea originală și parametrul minim al scării. Utilizăm o metodă rotundă pentru a salva procesorul.
addChild (lumina); / * Depozitați lămpile într-o matrice pentru ao folosi mai târziu * / lights.push (lumină); / * Verificarea direcției luminilor * / checkDirection ();
Aceasta adaugă Luminile pe scenă, apoi le salvăm într-o matrice pentru a le folosi mai târziu. De asemenea, funcția checkDirection pentru a vedea în ce direcție vor merge Lumina.
Accentsconagua
funcția privată checkDirection (): void pentru (var i: int = 0; i < lights.length; i++) switch ( lightsDir ) case "up" : lights[i].addEventListener(Event.ENTER_FRAME, moveUp); break; case "down" : lights[i].addEventListener(Event.ENTER_FRAME, moveDown); break; case "right" : lights[i].addEventListener(Event.ENTER_FRAME, moveRight); break; case "left" : lights[i].addEventListener(Event.ENTER_FRAME, moveLeft); break; default : trace("Invalid Direction!"); Aici folosim a pentru pentru a avea acces la toate Luminile din matrice, apoi verificați variabila direcției pentru a determina unde să mutați Luminile. În funcție de direcție, adăugăm ascultătorului la funcția corespunzătoare.
Această secțiune următoare poate părea puțin complicată, dar este mai ușor decât credeți. În principiu, deplasează Lumina în funcție de viteza calculată în funcția Principală, apoi verifică dacă Lumina "a lăsat" Zona efectului. Dacă este cazul, acesta stabilește o poziție aleatorie contrară direcției în care se îndreaptă Lumina.
funcția privată moveUp (e: Event): void e.target.x + = e.target.xSpeed; e.target.y- = e.target.ySpeed; / * Resetați poziția luminii, Y mai întâi, apoi X * / dacă (e.target.y + (e.target.height / 2) < 0) e.target.y = areaH + (e.target.height / 2); e.target.x=Math.floor(Math.random()*areaW); if ((e.target.x + e.target.width / 2) < 0 || (e.target.x - e.target.width / 2) > zona W) e.target.y = zonaH + (e.target.height / 2); e.target.x = Math.floor (Math.random () * areaW); / * Funcția Move Down * / move privat (e: Event): void e.target.x + = e.target.xSpeed; e.target.y + = e.target.ySpeed; / * Resetați poziția luminii, Y mai întâi, apoi X * / dacă (e.target.y - (e.target.height / 2)> zonaH) e.target.y = 0 - (e.target.height / 2 ); e.target.x = Math.floor (Math.random () * areaW); dacă ((e.target.x + e.target.width / 2) < 0 || (e.target.x - e.target.width / 2) > zona W) e.target.y = zonaH + (e.target.height / 2); e.target.x = Math.floor (Math.random () * areaW); / * Mutare Funcția dreapta * / funcția privată moveRight (e: Event): void e.target.x + = e.target.ySpeed; e.target.y + = e.target.xSpeed; / * Resetați poziția luminii, Y mai întâi, apoi X * / dacă (e.target.y - (e.target.height / 2)> areaH || e.target.y + (e.target.height / 2) < 0) e.target.x = 0 - (e.target.height / 2); e.target.y = Math.floor(Math.random()*areaH); if ((e.target.x - e.target.width / 2) > zona W) e.target.x = 0 - (e.target.height / 2); e.target.y = Math.floor (Math.random () * zonaW); / * Mută funcția stânga * / funcția privată moveLeft (e: Event): void e.target.x- = e.target.ySpeed; e.target.y- = e.target.xSpeed; / * Resetați poziția luminii, Y mai întâi, apoi X * / dacă (e.target.y - (e.target.height / 2)> areaH || e.target.y + (e.target.height / 2) < 0) e.target.x = areaW + (e.target.width / 2); e.target.y=Math.floor(Math.random()*areaH); if ((e.target.x + e.target.width / 2) < 0) e.target.x = areaW + (e.target.width / 2); e.target.y=Math.floor(Math.random()*areaW);
Salvați clasa (amintiți-vă că fișierul trebuie să aibă același nume ca și clasa) și să revenim la Fla. Deschideți Panoul de acțiuni și scrieți:
clasele de import. lampa var: lumini = lumini noi (); light.init (600, 300, 40, 60, 0xFFFFFF, 0,3, 3, 3, "sus", 2); addChild (lumina);
Asta e! Testați-vă filmul pentru a vedea fundalul animat!
Redarea cu parametrii din clasă va avea ca rezultat multe efecte diferite, încercați să schimbați fundalul, să setați viteze mai lente sau mai rapide, să utilizați mai multe Lumini, mai puțin Blur și așa mai departe!
Sper că ai învățat ceva ce poți folosi, mulțumesc pentru lectură!
