Share
Nel tutorial, impareremo come creare un visualizzatore di foto dinamico e bubbling che utilizza il motore e il flash delle particelle FLiNT.
Questa applicazione selezionerà casualmente le immagini da una matrice e le inserirà in bolle galleggianti. Aggiungeremo anche uno sfondo interattivo all'immagine con la fisica delle particelle FLiNT.
Diamo un'occhiata al risultato finale su cui lavoreremo:
Iniziamo. Apri la tua versione preferita di Adobe Flash (deve funzionare con AS3). Userò Flash CS5 in questo tutorial, ma non è necessario. Crea un nuovo documento AS3 e assicurati che le impostazioni siano le seguenti:
Ora configuriamo il motore FLiNT. Se non lo hai già fatto, scaricalo da github.com. Quindi decomprimere i contenuti nella directory principale del progetto.
Se vuoi farti coinvolgere dall'uso di FLiNT, ti consiglio di selezionare Crea un berretto del mouse con una bomba scintillante con le particelle FLiNT. È fantastico per le persone che stanno appena partendo con il motore.
Ora vai nel pannello delle proprietà di Flash. Imposta la Document Class su "Main". Apri il tuo editor di actionscript preferito. Crea un nuovo file di classe nella directory in cui si trova il tuo FLA. Imposta il suo nome su "Principale". Ecco tutto quello che dovresti avere al momento:
pacchetto public class Main public function Main ()
Aggiungi le seguenti istruzioni di importazione al tuo codice sotto il pacchetto Ciò importerà i file .as necessari nel tuo programma per il suo utilizzo.
import flash.display.MovieClip; import flash.events.Event; import 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;
Meno male! So che sono un sacco di file, possiamo ringraziare FLiNT per la loro meravigliosa organizzazione su questo :)
Ora apriamo l'IDE Flash. Spetta a te creare una sfumatura di 800 x 600 come sfondo. Lo scopo principale di questo tutorial non è quello di apprendere nuove abilità di disegno in flash, ma posso mostrarti cosa ho disegnato nella mia applicazione. Questo sfondo è anche incluso nella fonte del tutorial.
Ora possiamo selezionare le immagini che vogliamo che la nostra applicazione visualizzi. La buona parte del design dell'applicazione è che può funzionare con tutte le immagini che vuoi, purché le menzioni nell'array dell'applicazione? Ma possiamo arrivarci più tardi.
Per ora, selezioniamo solo quattro immagini da internet. Ecco le quattro immagini che ho selezionato:
Ora trascina ognuno sul palco. Spingere F8 per creare un Movie Clip. Ecco le impostazioni che dovresti scegliere per ogni Movie Clip. Ora basta sostituire "1" con il numero dell'immagine in ciascun caso.
Una volta scelto un numero di immagini che ti soddisfa, vai al passaggio successivo :)
Ora creiamo un elenco di tutte le nostre immagini all'interno del nostro Principale classe. Aggiungi la linea di codice evidenziata alla tua classe
package import flash.display.MovieClip; import flash.events.Event; import 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; public class Main private var imageList: Array = [Immagine1, Immagine2, Immagine3, Immagine4] Funzione pubblica Principale ()
Facciamo un oggetto che maschera l'immagine selezionata dal nostro programma. Questo sarà solo un cerchio nero che è la forma che vogliamo che le nostre immagini prendano. Se vuoi, puoi fare qualcosa di più creativo come una star? Funziona tutto.
Disegna il cerchio, selezionalo e premi F8 per creare un nuovo MovieClip. Assicurati di impostare il punto di registrazione nell'angolo in alto a destra. Imposta anche il nome della classe su MaskMC. Ora elimina l'oggetto dallo stage. Ecco uno screenshot di come può apparire l'oggetto:
Posiziona questa variabile sopra il costruttore. Questa variabile verrà utilizzata come timer per il conto alla rovescia per verificare quando creare una nuova bolla:
countdown privato var: int = 30
Ora aggiungiamo un ENTER_FRAME ascoltatore di eventi e una funzione per chiamare. Aggiungi il seguente codice al tuo costruttore.
addEventListener (Event.ENTER_FRAME, enterFrame)
Ora possiamo creare questa funzione per il nostro listener di eventi per il collegamento a:
funzione privata enterFrame (e: Event): void // Crea bolle
Ora che abbiamo impostato il listener degli eventi, possiamo modificare la nostra funzione per fare qualcosa ogni volta che il contatore raggiunge lo zero. Modifica la tua funzione in questo modo:
// 30 volte in un secondo: funzione privata enterFrame (e: Event): void // Sottrai uno dal countDown countDown-- // Se il conto alla rovescia è a 0 if (countDown == 0) // Crea un nuovo bubble // Restart countdown at 30 countDown = 30
Ora possiamo semplicemente inserire il corretto codice per creare bolle nella funzione e saremo tutti pronti!
Facciamo la prossima parte della nostra funzione enterFrame (). In questo passaggio, creeremo il bolla Un filmato. Aggiungi il seguente nella tua funzione:
// Crea un nuovo Movie Clip che sarà il nostro bubble var myNewBubble: MovieClip = new MovieClip () // Aggiunge la maschera al bubble myNewBubble.addChild (new MaskMC ()) // Scegli un MovieClip casuale dalla serie di immagini. // [Math.floor (Math.random () * imageList.length)] sta semplicemente scegliendo il numero di // l'immagine, in base al numero di elementi nell'elenco var myImageInBubble: MovieClip = new imageList [Math.floor ( Math.random () * imageList.length)] () // Aggiunge l'immagine alla bolla myNewBubble.addChild (myImageInBubble) // Maschera l'immagine alla maschera. GetChildAt (0) è il primo // oggetto aggiunto a un MovieClip myImageInBubble.mask = myNewBubble.getChildAt (0)
Ecco come dovrebbe essere la tua funzione ora:
funzione privata 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)
E ora possiamo aggiungere i tocchi finali alla nostra funzione enterFrame (). Ecco le cose da aggiungere sotto quello che abbiamo fatto prima:
// Posiziona la bolla nella parte inferiore dello schermo myNewBubble.y = 800 // Sposta la bolla casualmente sull'asse X myNewBubble.x = Math.random () * stage.width // Aggiunge un listener di eventi alla bolla myNewBubble. addEventListener (Event.ENTER_FRAME, bubbleFrameEnter) addChild (myNewBubble)
Ecco un'istantanea di come dovrebbe essere la tua funzione enterframe:
funzione privata 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
Se ricordi dal nostro ultimo passaggio, abbiamo aggiunto un altro listener di eventi enterframe alla nostra nuova bolla. Aggiungi questa funzione alla tua classe principale in modo che le bolle si muovano:
funzione privata bubbleFrameEnter (e: Event): void // Sposta lentamente la destinazione della nostra funzione e.target.y - = 7 // Se la bolla Y è inferiore a zero se (e.target.y < 0) //Pop and remove bubble
Potresti scoprire che questo riduce le prestazioni del tuo SWF. In tal caso, prova ad aggiungere ogni bolla a un array quando viene creato e sposta ogni bolla nell'array di 7 pixel nella funzione enterFrame ().
Dobbiamo ancora far esplodere le nostre bolle con il motore FLiNT, ma possiamo almeno rimuoverle e risparmiare un po 'di memoria. Ecco cosa possiamo aggiungere al gestore ENTER_FRAME del nostro bubble per eliminare i nostri oggetti dallo stage e rimuovere l'ascoltatore di eventi ad essi associato.
// Trova il genitore della nostra bolla (obiettivo) // e dillo per rimuovere il nostro target e.target.parent.removeChild (e.target) // Rimuovi il listener dell'evento // del nostro target (la bolla), quindi non lo fa non fare più nulla e.target.removeEventListener (Event.ENTER_FRAME, bubbleFrameEnter)
Ecco ciò che è tuo bubbleFrameEnter la funzione dovrebbe essere simile a:
funzione privata 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)
Se stai usando una matrice, qui dovrai rimuovere la bolla dall'array.
Congratulazioni per aver finito Parte prima della nostra applicazione! Ora abbiamo bisogno di aggiungere alcuni effetti FLiNT al nostro programma per renderlo più realistico e divertente da guardare!
Ora aggiungiamo alcuni effetti di sfondo alla nostra scena. Per fare ciò abbiamo bisogno di progettare un MovieClip da utilizzare con FLiNT. Assicurati che le seguenti impostazioni siano impostate nella tua nuova MovieClip:
Disegna una bolla che vorresti usare. Nota che questo è diverso dalle bolle fotografiche con cui abbiamo avuto a che fare. Ho scelto la seguente immagine qui sotto (ingrandita 8 volte). Le dimensioni non contano a condizione che siano abbastanza piccole da moltiplicarsi un paio di volte e siano ancora belle.
Ora possiamo iniziare con il motore FLiNT. Per iniziare, dobbiamo creare il nostro emettitore e il renderer. Aggiungi il seguente codice sopra il costruttore della tua classe di documento.
// Crea un nuovo DisplayObjectRenderer private var myRenderer: DisplayObjectRenderer = new DisplayObjectRenderer (); // Crea un emitter FLiNT 2D per effetti 2D standard private var myEmitter: Emitter2D = new Emitter2D ()
Dall'emettitore, possiamo allegare tutte le proprietà corrette alle bolle per farle comportare come vogliamo. Il renderer disegnerà le bolle sul palco.
Ora che abbiamo creato il nostro emettitore, possiamo andare avanti e allegare tutte le azioni e le proprietà che vogliamo ad esso per farlo comportarsi esattamente come lo vogliamo. Per fare ciò, aggiungi il seguente codice ovunque all'interno del tuo costruttore.
// Indica all'emettitore di creare 10 bolle ogni secondo myEmitter.counter = new Steady (10); // Indica all'emettitore di usare il bubble_mc MovieClip come particella myEmitter.addInitializer (new ImageClass (bubble_mc)); // Indica all'emettitore di creare bolle all'interno di un certo intervallo di righe //. Le posizioni delle bolle variano da (0,700) a (830,700), // spanning da un lato della parte inferiore dello schermo all'altro myEmitter.addInitializer (nuova posizione (nuova LineZone (nuovo punto (0,700), nuovo punto (830,700))) // Imposta la velocità delle particelle su X: 0, Y: -65, // facendole andare in una direzione diritta verso l'alto. myEmitter.addInitializer (new Velocity (new PointZone (new Point (0, -65)))); // Indica all'emettitore di ridimensionare casualmente le immagini da .75x a 5x myEmitter.addInitializer (new ScaleImageInit (0.75, 5)); // Indica alle particelle di iniziare a spostare myEmitter.addAction (new Move ()); // Disegna un rettangolo dall'angolo in alto a sinistra (-40, -40), // all'angolo in basso a destra (850,750). Questa sarà la // zona sicura per le bolle. Qualsiasi bolla che esce da questi limiti // viene distrutta myEmitter.addAction (new DeathZone (new RectangleZone (-40, -40,850,750), true)); // Indica alle bolle di allontanarsi dal mouse, specificando // la forza del movimento (10), il renderer connesso // all'emettitore (myRenderer) e l'episodio della gravità (1) myEmitter.addAction (new MouseAntiGravity (10, myRenderer, 1)) // Fa scattare tutte le cose che abbiamo appena specificato :) myEmitter.start ()
Bel lavoro nel realizzare alcuni fantastici effetti particellari con FLiNT. Oh aspetta? non puoi vederli? Sembra che dovremo coprirlo nel prossimo passaggio :)
E ora * drumroll * arriva l'ultimo pezzo del puzzle in questo puzzle. (erm) Intendo tutorial. Ora tutto ciò che dobbiamo fare è rendere i nostri effetti particellari con il nostro emettitore. Per fare ciò, aggiungi il seguente codice alla fine del nostro costruttore:
// Collega l'emettitore di particelle al renderer myRenderer.addEmitter (myEmitter); // Aggiungi il renderer allo stage. addChild (myRenderer);
Nel Passaggio 15 abbiamo lasciato un punto vuoto nel nostro codice per le esplosioni quando le nostre bolle di immagine hanno lasciato il palco. Ora è il momento di aggiungere alcuni effetti FLiNT al mix per far sembrare che le bolle stiano davvero scoppiando.
Iniziamo disegnando la nostra particella di esplosione. Entra nell'IDE di Flash e crea una nuova bolla più scura, più piccola e (Seleziona + F8). Ora imposta il nome della classe su "bubble_mc2".
Modifica il tuo bubbleFrameEnter () funzione per apparire come sotto. Dai un'occhiata ai commenti per una spiegazione approfondita di ciò che stiamo facendo:
funzione privata bubbleFrameEnter (e: Event): void // Old movement stuff e.target.y - = 7 // Verifica quando la bolla raggiunge la cima se (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)
Congratulazioni per aver utilizzato FLiNT per creare un visualizzatore di immagini dinamico. Ora che hai creato questo, puoi iniziare a utilizzare le tecniche mostrate in questo tutorial per i tuoi progetti personali per creare qualcosa di veramente unico con FLiNT.
Grazie per la lettura, e spero che il tutorial sia stato utile per te :)
Accentsconagua