Share
În tutorial, vom învăța cum să creați un afișaj de imagine dinamic, blând, utilizând motorul cu particule FLiNT și flash.
Această aplicație va selecta aleator imagini dintr-o matrice și le va plasa în bule plutitoare. Vom adăuga, de asemenea, un fundal interactiv imaginii cu ajutorul fizicii particulelor FLiNT.
Să aruncăm o privire asupra rezultatului final pe care îl vom strădui:
Hai să începem. Deschideți versiunea preferată a Adobe Flash (trebuie să lucrați cu AS3). Voi folosi Flash CS5 în acest tutorial, dar nu va trebui să faceți asta. Creați un nou document AS3 și asigurați-vă că setările sunt după cum urmează:
Acum, să stabilim motorul FLiNT. Dacă nu ați făcut-o deja, descărcați-l de la github.com. Apoi dezarhivați conținutul în directorul rădăcină al proiectului dvs..
Dacă doriți să vă prindeți pe utilizarea FLiNT, aș recomanda să verificați Crearea unui Cursor de Mouse Bomb Sparkling cu FLiNT Particles out. Este minunat pentru cei care încep doar cu motorul.
Acum mergeți în panoul de proprietăți al Flash. Setați clasa de documente la "Main". Deschideți editorul dvs. de acțiuni preferat. Creați un nou fișier de clasă în directorul în care se află FLA. Setați-i numele în "Main". Aici este tot ce trebuie să aveți în acest moment:
pachet public class Principal functie publica Main ()
Adăugați următoarele declarații de import în codul dvs. sub pachet Aceasta va importa fișierele .as necesare în programul dvs. pentru utilizarea sa.
import flash.display.MovieClip; importul flash.events.Event; importul flash.events.MouseEvent; import flash.geom.Point; import org.flintparticles.common.actions.Age; import org.flintparticles.common.actions.ScaleImage; import org.flintparticles.common.counters.Blast; import org.flintparticles.common.counters.Steady; import org.flintparticles.common.displayObjects.RadialDot; import org.flintparticles.common.emitters.Emitter; import org.flintparticles.common.initializers.ImageClass; import org.flintparticles.common.initializers.Initializer; import org.flintparticles.common.initializers.ScaleImageInit; import org.flintparticles.common.particles.Particle; import org.flintparticles.threeD.initializers.RotateVelocity; import org.flintparticles.twoD.actions.DeathZone; import org.flintparticles.twoD.actions.Explosion; import org.flintparticles.twoD.actions.MouseAntiGravity; import org.flintparticles.twoD.actions.Move; import org.flintparticles.twoD.actions.RotateToDirection; import org.flintparticles.twoD.emitters.Emitter2D; import org.flintparticles.twoD.initializers.Position; import org.flintparticles.twoD.initializers.Velocity; import org.flintparticles.twoD.renderers.DisplayObjectRenderer; import org.flintparticles.twoD.zones.DiscSectorZone; import org.flintparticles.twoD.zones.DiscZone; import org.flintparticles.twoD.zones.LineZone; import org.flintparticles.twoD.zones.PointZone; import org.flintparticles.twoD.zones.RectangleZone;
Uau! Știu că este o tona de fișiere, putem să-i mulțumim lui FLiNT pentru organizarea lor minunată pe acest site :)
Acum, să deschidem IDE-ul Flash. Depinde de tine să creați o casetă de gradient de 800x600 ca fundal. Scopul principal al acestui tutorial nu este de a învăța noi abilități de desenare flash, dar vă pot arăta ceea ce am desenat în propria mea aplicație. Acest context este, de asemenea, inclus în sursa tutorialului.
Acum putem selecta imaginile pe care dorim să le afișeze aplicația noastră. Partea bună cu privire la proiectarea aplicației este aceea că poate funcționa cu cât mai multe imagini doriți, atâta timp cât le menționați în matricea aplicației? Dar putem ajunge la asta mai târziu.
Pentru moment, să selectăm doar patru imagini de pe internet. Iată cele patru imagini pe care le-am selectat:
Acum trageți fiecare pe scena. Apăsați F8 pentru a crea un clip video. Iată setările pe care ar trebui să le alegeți pentru fiecare clip video. Acum înlocuiți doar "1" cu numărul imaginii în fiecare caz.
Odată ce ați ales un număr de imagini care vă satisface, treceți la pasul următor :)
Acum, să creăm o listă a tuturor imaginilor noastre din interiorul nostru Principal clasă. Adăugați linia evidențiată de cod în clasă
pachet import flash.display.MovieClip; importul flash.events.Event; importul flash.events.MouseEvent; import flash.geom.Point; import org.flintparticles.common.actions.Age; import org.flintparticles.common.actions.ScaleImage; import org.flintparticles.common.counters.Blast; import org.flintparticles.common.counters.Steady; import org.flintparticles.common.displayObjects.RadialDot; import org.flintparticles.common.emitters.Emitter; import org.flintparticles.common.initializers.ImageClass; import org.flintparticles.common.initializers.Initializer; import org.flintparticles.common.initializers.ScaleImageInit; import org.flintparticles.common.particles.Particle; import org.flintparticles.threeD.initializers.RotateVelocity; import org.flintparticles.twoD.actions.DeathZone; import org.flintparticles.twoD.actions.Explosion; import org.flintparticles.twoD.actions.MouseAntiGravity; import org.flintparticles.twoD.actions.Move; import org.flintparticles.twoD.actions.RotateToDirection; import org.flintparticles.twoD.emitters.Emitter2D; import org.flintparticles.twoD.initializers.Position; import org.flintparticles.twoD.initializers.Velocity; import org.flintparticles.twoD.renderers.DisplayObjectRenderer; import org.flintparticles.twoD.zones.DiscSectorZone; import org.flintparticles.twoD.zones.DiscZone; import org.flintparticles.twoD.zones.LineZone; import org.flintparticles.twoD.zones.PointZone; import org.flintparticles.twoD.zones.RectangleZone; clasa publica principala private var imageList: Array = [Image1, Image2, Image3, Image4] functie publica Main ()
Să facem un obiect care să ascundă imaginea selectată de programul nostru. Acesta va fi doar un cerc negru, care este forma pe care dorim ca imaginile noastre să le ia. Dacă vrei, poți face ceva mai creativ ca o stea? Totul funcționează.
Desenați cercul, selectați-l și apăsați F8 pentru a crea un nou videoclip. Asigurați-vă că setați punctul de înregistrare în colțul din dreapta sus. De asemenea, setați numele clasei la MaskMC. Acum, ștergeți obiectul din etapă. Iată o captură de ecran a ceea ce poate arăta obiectul:
Plasați această variabilă deasupra constructorului. Această variabilă va fi utilizată ca un cronometru pentru a verifica când să faceți un nou bule:
privat var countDown: int = 30
Acum, să adăugăm un ENTER_FRAME ascultător de evenimente și o funcție pentru apelare. Adăugați următorul cod la constructorul dvs..
addEventListener (Event.ENTER_FRAME, enterFrame)
Acum putem crea această funcție pentru ca ascultătorul evenimentului să se leagă de:
funcția privată enterFrame (e: Event): void // Creare bule
Acum, când am stabilit ascultătorii evenimentului, putem modifica funcția noastră de a face ceva de fiecare dată când contorul ajunge la zero. Modificați funcția astfel încât să arate astfel:
// 30 de ori într-o secundă: funcția privată enterFrame (e: Event): void // Scădere unul din countDown countDown-- // Dacă numărătoarea inversă este la 0 if (countDown == 0) // Efectuați o nouă bubble // Repornire inversă la 30 countDown = 30
Acum putem introduce doar codul cu bulele potrivite în funcție și vom fi setați!
Să facem următoarea parte a funcției enterFrame (). În acest pas, vom crea balon MovieClip. Adăugați următoarele în funcția dvs.:
/ / Crează un nou videoclip care va fi bubble-ul meu myNewBubble: MovieClip = new MovieClip () // Adăugă masca la bubble myNewBubble.addChild (noul MaskMC ()) // Alege un MovieClip aleator din tabloul de imagini. // [Math.floor (Math.random () * imageList.length)] doar alege numărul // imaginii, pe baza numărului de elemente din listă var myImageInBubble: MovieClip = new imageList [Math.floor ( Math.random () * imageList.length)] () // Adaugă imaginea în bule myNewBubble.addChild (myImageInBubble) // Maschează imaginea în mască .getChildAt (0) este primul // obiect adăugat la un MovieClip myImageInBubble.mask = myNewBubble.getChildAt (0)
Acesta este modul în care funcția dvs. ar trebui să arate acum:
funcția privată enterFrame (e: Event): void countDown-- if (countDown <= 0) var myNewBubble:MovieClip = new MovieClip() myNewBubble.addChild(new MaskMC()) var myImageInBubble:MovieClip = new imageList[Math.floor(Math.random() * imageList.length)]() myNewBubble.addChild(myImageInBubble) myImageInBubble.mask = myNewBubble.getChildAt(0)
Și acum putem adăuga finisajele funcției enterFrame (). Iată lucrurile pe care trebuie să le adăugăm sub ceea ce am făcut mai devreme:
// Plasează bulele din partea de jos a ecranului myNewBubble.y = 800 // Mută bula la întâmplare pe axa X myNewBubble.x = Math.random () * stage.width // Adaugă un ascultător al evenimentului la bubble myNewBubble. addEventListener (Eveniment.ENTER_FRAME, bubbleFrameEnter) addChild (myNewBubble)
Iată o imagine a ceea ce ar trebui să arate funcția dvs. de intrare:
funcția privată enterFrame (e: Event): void countDown-- if (countDown <= 0) var myNewBubble:MovieClip = new MovieClip() myNewBubble.addChild(new MaskMC()) var myImageInBubble:MovieClip = new imageList[Math.floor(Math.random() * imageList.length)]() myNewBubble.addChild(myImageInBubble) myImageInBubble.mask = myNewBubble.getChildAt(0) myNewBubble.y = 800 myNewBubble.x = Math.random() * stage.width myNewBubble.addEventListener(Event.ENTER_FRAME, bubbleFrameEnter) addChild(myNewBubble) countDown = 30
Dacă vă aduceți aminte de ultima noastră etapă, am adăugat un alt ascultător al evenimentului de intrare în noul nostru balon. Adăugați această funcție la clasa principală astfel încât bulele să se miște:
funcția privată bubbleFrameEnter (e: Event): void // Deplasați ținta funcției noastre încet e.target.y - = 7 // Dacă bula Y este mai mică decât zero dacă (e.target.y < 0) //Pop and remove bubble
S-ar putea să știți că acest lucru reduce performanța SWF-ului. Dacă da, încercați să adăugați fiecare bule într-o matrice când este creată și să mutați fiecare bule în matrice cu până la 7 pixeli în funcția enterFrame ().
Încă nu ne-am făcut bubble-urile pop cu motorul FLiNT, dar putem cel puțin să le scoatem și să salvăm o memorie. Iată ce putem adăuga la handler-ul ENTER_FRAME al bulei noastre pentru a șterge obiectele din scenă și a elimina ascultătorul evenimentului atașat acestora.
// Găsiți părintele bubble-ului nostru (target) // și spuneți-i să elimine ținta noastră e.target.parent.removeChild (e.target) // Eliminați evenimentul țintă al lui țintă (bubble's) // listener, nu mai faceți nimic e.target.removeEventListener (Event.ENTER_FRAME, bubbleFrameEnter)
Iată ce ești tu bubbleFrameEnter funcția ar trebui să arate ca:
funcția privată bubbleFrameEnter (e: Event): void e.target.y - = 7 if (e.target.y < 0) //FLiNT explosion FX here //_______________________ e.target.parent.removeChild(e.target) e.target.removeEventListener(Event.ENTER_FRAME, bubbleFrameEnter)
Dacă utilizați o matrice, va trebui să eliminați bulele din matrice aici.
Felicitări pentru finisare Prima parte a cererii noastre! Acum trebuie să adăugăm câteva efecte FLINT programului nostru pentru a deveni mai realist și mai distractiv să urmăriți!
Acum, să adăugăm câteva efecte de bule de fundal la scena noastră. Pentru a face acest lucru avem nevoie pentru a proiecta un filmClip pentru a utiliza cu FLiNT. Asigurați-vă că următoarele setări sunt setate în noul dvs. MovieClip:
Desenați un balon pe care doriți să îl utilizați. Rețineți că acest lucru este diferit de bulele de fotografie cu care ne-am ocupat. Am selectat imaginea de mai jos (mărite de 8 ori). Dimensiunea nu contează atâta timp cât este suficient de mică pentru a se multiplica de câteva ori și încă arată bine.
Acum putem începe cu motorul FLiNT. Pentru a începe, trebuie să creăm Emitter și Renderer. Adăugați următorul cod deasupra constructorului clasei dvs. de documente.
// Creează un nou DisplayObjectRenderer privat var myRenderer: DisplayObjectRenderer = new DisplayObjectRenderer (); // Crează un emițător 2D FLiNT pentru efecte standard 2D privat var myEmitter: Emitter2D = nou Emitter2D ()
De la emițător, putem atașa toate proprietățile corecte bulelor pentru a le face să se comporte așa cum vrem noi. Redactorul va scoate bulele pe scenă.
Acum că am creat emițătorul nostru, putem continua și atașăm toate acțiunile și proprietățile pe care le dorim să le facă să se comporte așa cum dorim. Pentru aceasta, adăugați următorul cod oriunde în constructor.
// Spune emițătorului să creeze 10 bule în fiecare secundă myEmitter.counter = new Steady (10); // Spune emițătorului să folosească bubble_mc MovieClip ca particulă myEmitter.addInitializer (noul ImageClass (bubble_mc)); // Spune emițătorului să creeze bule într-un anumit interval de // linie. Locațiile cu bule variază de la (0,700) la (830,700), // care se întind de la o parte a fundului ecranului la altul myEmitter.addInitializer (noua poziție (noul LineZone (nou punct (0,700), punct nou (830,700) ) // Setează viteza particulelor la X: 0, Y: -65, // făcându-le să meargă într-o direcție dreaptă în sus. myEmitter.addInitializer (noul Velocity (nou PointZone (nou punct (0, -65)))); // Spune emițătorului să scadă aleatoriu imagini de la .75x la 5x myEmitter.addInitializer (noul ScaleImageInit (0.75, 5)); // Spune particulelor să înceapă mișcarea myEmitter.addAction (new Move ()); // Elimină un dreptunghi din colțul din stânga sus (-40, -40), // în colțul din dreapta jos (850,750). Aceasta va fi zona sigură pentru bule. Orice bule care ies din aceste limite // sunt distruse myEmitter.addAction (noul DeathZone (new RectangleZone (-40, -40,850,750), true)); // Spune bulelor să se îndepărteze de mouse, specificând // forța mișcării (10), rendererul conectat // la emițător (myRenderer) și episodul gravitației (1) myEmitter.addAction (noul MouseAntiGravity (10, myRenderer, 1)) / / Incendiază toate lucrurile pe care tocmai le-am specificat :) myEmitter.start ()
O treabă plăcută de a face niște efecte minunate de particule cu FLiNT. Oh, așteptați? nu le puteți vedea? Se pare că va trebui să acopere asta în pasul următor :)
Și acum * drumroll * vine piesa finală a puzzle-ului în acest puzzle. (erm) Adică tutorial. Acum, tot ce trebuie să facem este să facem efectele particulelor noastre cu emițătorul nostru. Pentru aceasta, adăugați următorul cod în partea de jos a constructorului nostru:
// Conectați emițătorul de particule la redactorul myRenderer.addEmitter (myEmitter); // Adăugați redarea la scenă. addChild (myRenderer);
În Pasul 15 am lăsat un loc gol în codul nostru pentru explozii când baloanele noastre de imagine au părăsit scena. Acum este timpul să adăugați câteva efecte FLiNT la mix pentru a face să pară că bulele sunt într-adevăr popping.
Să începem prin extragerea particulei noastre de explozie. Du-te în IDE Flash și creați un nou bule mai închis, mai mic și (Selectați + F8). Acum, setați numele clasei la "bubble_mc2".
Modificați-vă bubbleFrameEnter () funcția de a arăta ca mai jos. Consultați comentariile pentru o explicație detaliată a ceea ce facem:
funcția privată bubbleFrameEnter (e: Event): void // Chestii vechi de circulație e.target.y - = 7 // Verificați când bubble-ul ajunge la vârf dacă (e.target.y < 0) //Create a new particle emitter for the explosion var newE:Emitter2D = new Emitter2D(); //Add the emitter to the renderer myRenderer.addEmitter(newE); //This time we want to use a "blast" //counter. Blast(20) tells the emitter to //create 20 pieces in the explosion newE.counter = new Blast(20); //Give the emitter our particle MovieClip newE.addInitializer(new ImageClass(bubble_mc2)); //Set the position of the created particles to be a //"DiscZone". This is basically a circular area //where particles can be created. //DiscZone(centerPoint:Pointer,innerRadius,outerRadius) //We are setting the center point to be approximately //the center of the bubble and both radius's shall be //set to "50" newE.addInitializer(new Position(new DiscZone(new Point(e.target.x + 75, e.target.y + 75),50,50))); //Creates a new explosion //(power:Number, x:Number, y:Number, expansionRate:Number, depth:Number, epsilon:Number) //The explosion has a power of 5, starts at the center of our DisZone, //has a expansionRate of 2000, depth of 20, and an epislon of 1 newE.addAction(new Explosion(5, e.target.x + 75 , e.target.y + 75, 2000,20, 1)); //Tells the emitter to start moving the particles newE.addAction(new Move()); //Sets the death zone of particles outside of the screen newE.addAction(new DeathZone(new RectangleZone(-30, -30, 820, 620), true)); //Starts the emitter newE.start(); e.target.parent.removeChild(e.target) e.target.removeEventListener(Event.ENTER_FRAME, bubbleFrameEnter)
Felicitări pentru utilizarea FLiNT pentru a crea un afișaj dinamic de imagini. Acum că ați creat acest lucru, puteți începe să utilizați tehnicile prezentate în acest tutorial pentru propriile proiecte personale pentru a crea ceva cu adevărat unic cu FLiNT.
Vă mulțumim pentru lectură și sper că tutorialul a fost util pentru dvs. :)
Accentsconagua