Share
În acest tutorial vei învăța cum să creezi un efect care ți-a prins ochiul înainte (de exemplu, în fișiere precum acesta), Explosionul Pixel. În timpul procesului de realizare, vom afla cum să extragem BitmapData dintr-un filmClip, cum să folosim un motor tweening și cum să folosim ascultători de evenimente.
Să începem atunci!
Primul lucru pe care îl vom face este să creați un fișier flash AS3. Apoi, vom seta etapa noastră la 400px x 400px și 30 fps. Vom codifica linia de timp pentru a face lucrurile simple, dar cei care știu să programeze în PLO sunt bineveniți să scrie acest cod în clase. Veți avea nevoie de o cunoaștere de bază a AS3 pentru a înțelege toate procesele implicate în acest tutorial; cu toate acestea, voi încerca să o păstrez foarte simplu. Butoanele cu albastru plutind sunt cele pe care trebuie să le apăsați în IDE. Ar putea părea la început multă muncă, dar este foarte simplu ...
Acum vom desena o imagine vectorala a ceea ce avem nevoie. Puteți seta cu adevărat orice imagine cu acest efect (.jpg, .png), dar vectorii sunt mai reci. După cum veți observa, nu prea sunt un designer. Tot ce trebuie să faceți este să desenați imaginea (sau să importați un jpg de pe computerul dvs.), să o selectați și să o convertiți la un MovieClip (apăsați pe F8 pe Windows).
Odată ce ați transformat imaginea într-un Movieclip, îl puteți pregăti pentru codul care o va viza. Vom crea un strat nou pentru acțiuni (1.) și apoi vom da un nume de instanță al mcLogo (2.). Apoi vom importa clasele pentru utilizare în stratul nostru de acțiuni. În acest sens, vom avea nevoie de un motor bun de îmbunătățire. Cel mai bun pe care l-am găsit că ocupă viteza și stabilitatea este TweenMax. Puteți să o descărcați de la http://blog.greensock.com/tweenmaxas3/ (faceți donație dacă vă place). Nu uitați să copiați directorul de clase în același director ca fișierul .fla (după cum puteți vedea în caseta albastră). În cele din urmă, importați clasa TweenMax în cronologie (3.).
Acum vom stabili scena și variabilele noastre principale. Vom alinia etapa în colțul TOP_LEFT și o vom seta astfel încât să nu scadă conținutul. Pe partea de variabile, vom crea un container pentru a ține toți pixelii care vor exploda. De asemenea, vom crea un GlowFilter, acesta este opțional, desigur, dar va spori amprenta efectului. "Animarea" este un comutator care va deveni real în momentul în care efectul are loc și "pixelBMP" este datele bitmap ale imaginii dvs..
stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; var pixelContainer: MovieClip = nouClipClip (); var strălucire: GlowFilter = nou GlowFilter (0xFFFF00, 1, 10, 10,5,2); var animating: Boolean = false; var pixelBMP: BitmapData;
Apoi, vom crea variabile repetate și vom asocia poziția containerului pixelului ca fiind aceeași cu cea a imaginii.
var i: int = 0; var j: int = 0;
Acum vom extrage datele bitmap (culori pixel) din imaginea pe care ați configurat-o (1.). Amintiți-vă aceste două linii, vă va ajuta și în alte proiecte. Vom crea un nou simbol din bibliotecă (2.) și vom face clic pe butonul Avansat. Odată ce faceți clic pe, selectați Export pentru acțiuni (3). Căutați câmpul de text Clasă și tastați "myPixel".
Acum vom instala rezervorul de pixeli. Vom introduce efectul pixel nou creat și vom face un strat numit "acțiune".
În stratul de acțiuni vom configura bitmap-ul. Această mică bucată de cod vă va ajuta de fiecare dată când doriți să manipulați bitmapData unui obiect (de exemplu, cu alte efecte utile, cum ar fi desaturarea și neclaritatea).
pixelBMP = BitmapData nouă (mcLogo.width, mcLogo.height, true, 0x000000) pixelBMP.draw (mcLogo)
Am creat un cerc care să aibă culoarea fiecărui pixel, dar îl puteți personaliza oricui doriți; pătrat, triunghi sau chiar un pixel simplu. Adăugăm efectul de strălucire a pixelilor din parametrul funcției:
var orgX: int = 0; var orgY: int = 0; var bmpImg: Bitmap; funcția setUpPixel (bdData: BitmapData, strălucire: GlowFilter) var mc: MovieClip = new MovieClip (); mc.graphics.beginFill (bdData.getPixel (0,0)); mc.graphics.drawCircle (0,0,2) mc.graphics.endFill (); mc.filters = [strălucire]; addChild (mc);
Vom crea două declarații "pentru" pentru a acoperi toți pixelii imaginii noastre. Primul pentru (i) este pentru verticale și cel de-al doilea (j) pentru orizontală. Metoda getPixel returnează o unitate reprezentând culoarea pixelului în acea poziție. Dacă nu este nulă, va începe operațiile prezentate la pasul 9. Vom traversa pixelii două câte două din cauza gestionării memoriei.
pentru (i = 0; i < mcLogo.height; i+=2) for(j = 0; j < mcLogo.width; j+=2)
Vom începe prin atribuirea culorii pixelului filtrului de strălucire. Apoi vom crea un nou myPixel pe care îl vom numi "pixel_mc". Vom numi funcția "setUpPixel" pe care am definit-o la pasul 7. Aceasta transmite bitmapData - 2 pixeli lățime, 2 pixeli înălțime, culoarea pixelului curent, originalX, originalY și filtrul strălucire. În final, adăugăm acest pixel în containerul pixel (linia 12)
pentru (i = 0; i < mcLogo.height; i+=2) for(j = 0; j < mcLogo.width; j+=2) if(pixelBMP.getPixel(j, i)>0) glow.color = pixelBMP.getPixel (j, i); var pixel_mc: myPixel = new myPixel () pixel_mc.setUpPixel (noul BitmapData (2, 2, false, pixelBMP.getPixel (j, i)) pixel_mc.y = i; pixel_mc.x = j; pixelContainer.addChild (pixel_mc); pixelContainer.visible = false;
Micile greșeli sunt foarte frecvente în programare, de aceea trebuie să încercăm din când în când filmele noastre. Acest lucru ne oferă imaginea noastră, dar și o neclaritate. Blurul este datorat filtrului strălucitor, deci nu vă faceți griji acolo. După cum probabil știți deja, nu avem nevoie ca acești pixeli să fie vizibili, cu excepția cazului în care au aplicat efectul nostru. Până atunci avem imaginea noastră frumoasă. Deci, tot ce trebuie să faceți în acest pas este linia de necunoaștere 13 - pixelContainer.visible = false; și veți obține imaginea originală înapoi.
Avem pixelii în loc, acum tot ce trebuie să facem este să-i animăm. Acest lucru a fost au fost TweenMax intră în scenă. Pornim funcția făcând imaginea originală invizibilă și pixelii vizibili. Apoi vom seta imaginea originală și butonul pe care îl vom crea ulterior (pentru a activa funcția) la cel mai înalt index. Amintiți-vă această funcție - setChildIndex (yourmc, NUMCHILDREN-1) vă va ajuta în alte proiecte.
funcția explode () pixelContainer.alpha = 1; mcLogo.visible = false; setChildIndex (mcLogo, numChildren - 1) setChildIndex (btn_mc, numChildren-1) pixelContainer.visible = true;
Aici pixelii vor veni la viață. "Pentru" traversează fiecare copil al containerului pixel. Pixelul este extras prin getChildAt (i) metodă. Cele xdest și ydest sunt câteva destinații aleatorii unde pixelii noștri vor zbura (din moment ce Math.random () returnează un număr între 0 și 1, este necesar să îi multiplicăm). În final, adăugăm tranziția și un tip de ușurință prin TweenMax.
Accentsconagua
