Share
Dans le didacticiel, nous allons apprendre à créer un afficheur de photos dynamique et bouillonnant à l’aide du moteur de particules FLiNT et du flash..
Cette application sélectionnera de manière aléatoire les images d'un tableau et les placera dans des bulles flottantes. Nous allons également ajouter un fond interactif à l'image avec la physique des particules FLiNT.
Jetons un coup d'œil au résultat final sur lequel nous allons travailler:
Commençons. Ouvrez votre version préférée d'Adobe Flash (doit fonctionner avec AS3). J'utiliserai Flash CS5 dans ce tutoriel, mais vous n'en aurez pas besoin. Créez un nouveau document AS3 et assurez-vous que les paramètres sont les suivants:
Maintenant, configurons le moteur FLiNT. Si vous ne l'avez pas déjà fait, téléchargez-le sur github.com. Puis décompressez le contenu dans le répertoire racine de votre projet.
Si vous souhaitez vous familiariser avec l'utilisation de FLiNT, nous vous recommandons de cocher Créer un curseur de souris pétillant de bombe avec des particules FLiNT. C'est génial pour les gens qui commencent tout juste avec le moteur.
Allez maintenant dans le panneau des propriétés de Flash. Définissez Document Class sur "Main". Ouvrez votre éditeur d'actionscript préféré. Créez un nouveau fichier de classe dans le répertoire dans lequel se trouve votre FLA. Définissez son nom sur "Main". Voici tout ce que vous devriez avoir pour le moment:
package public class Main fonction publique Main ()
Ajoutez les instructions d’importation suivantes à votre code sous le paquet Cela importera les fichiers .as nécessaires dans votre programme pour son utilisation..
import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; import flash.geom.Point; importer org.flintparticles.common.actions.Age; import org.flintparticles.common.actions.ScaleImage; importer org.flintparticles.common.counters.Blast; importer org.flintparticles.common.counters.Steady; importer 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; importer org.flintparticles.common.particles.Particle; import org.flintparticles.threeD.initializers.RotateVelocity; import org.flintparticles.twoD.actions.DeathZone; import org.flintparticles.twoD.actions.Explosion; importer org.flintparticles.twoD.actions.MouseAntiGravity; importer org.flintparticles.twoD.actions.Move; importer org.flintparticles.twoD.actions.RotateToDirection; importer org.flintparticles.twoD.emitters.Emitter2D; importer org.flintparticles.twoD.initializers.Position; importer org.flintparticles.twoD.initializers.Velocity; importer org.flintparticles.twoD.renderers.DisplayObjectRenderer; importer org.flintparticles.twoD.zones.DiscSectorZone; importer org.flintparticles.twoD.zones.DiscZone; importer org.flintparticles.twoD.zones.LineZone; import org.flintparticles.twoD.zones.PointZone; import org.flintparticles.twoD.zones.RectangleZone;
Ouf! Je sais que c'est une tonne de fichiers, nous pouvons remercier FLiNT pour leur merveilleuse organisation sur celui-ci :)
Maintenant ouvrons l'IDE Flash. C'est à vous de créer une zone de dégradé 800x600 comme arrière-plan. L'objectif principal de ce didacticiel n'est pas d'apprendre de nouvelles compétences en dessin flash, mais je peux vous montrer ce que j'ai dessiné dans ma propre application. Ce fond est également inclus dans la source du tutoriel.
Nous pouvons maintenant sélectionner les images que nous voulons que notre application affiche. La bonne partie de la conception de l’application est qu’elle peut fonctionner avec autant d’images que vous le souhaitez, à condition que vous les mentionniez dans le tableau de l’application. Mais on peut y arriver plus tard.
Pour l'instant, sélectionnons simplement quatre images sur Internet. Voici les quatre images que j'ai sélectionnées:
Maintenant, faites glisser chacun sur la scène. Pousser F8 créer un MovieClip. Voici les paramètres que vous devez choisir pour chaque MovieClip. Il suffit maintenant de remplacer le "1" par le numéro de l'image dans chaque cas.
Une fois que vous avez sélectionné un nombre d'images qui vous convient, passez à l'étape suivante :)
Créons maintenant une liste de toutes nos images dans notre Principale classe. Ajouter la ligne de code en surbrillance à votre classe
package import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; import flash.geom.Point; importer org.flintparticles.common.actions.Age; import org.flintparticles.common.actions.ScaleImage; importer org.flintparticles.common.counters.Blast; importer org.flintparticles.common.counters.Steady; importer 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; importer org.flintparticles.common.particles.Particle; import org.flintparticles.threeD.initializers.RotateVelocity; import org.flintparticles.twoD.actions.DeathZone; import org.flintparticles.twoD.actions.Explosion; importer org.flintparticles.twoD.actions.MouseAntiGravity; importer org.flintparticles.twoD.actions.Move; importer org.flintparticles.twoD.actions.RotateToDirection; importer org.flintparticles.twoD.emitters.Emitter2D; importer org.flintparticles.twoD.initializers.Position; importer org.flintparticles.twoD.initializers.Velocity; importer org.flintparticles.twoD.renderers.DisplayObjectRenderer; importer org.flintparticles.twoD.zones.DiscSectorZone; importer org.flintparticles.twoD.zones.DiscZone; importer org.flintparticles.twoD.zones.LineZone; import org.flintparticles.twoD.zones.PointZone; import org.flintparticles.twoD.zones.RectangleZone; classe publique principale private var imageList: Array = [Image1, Image2, Image3, Image4] de la fonction publique Main ()
Faisons un objet qui masquera l'image sélectionnée par notre programme. Ce sera juste un cercle noir qui est la forme que nous voulons que nos images prennent. Si tu veux, tu peux faire quelque chose de plus créatif qu'une star? Tout fonctionne.
Tracez le cercle, sélectionnez-le et appuyez sur F8 pour créer un nouveau MovieClip. Assurez-vous de définir le point d’enregistrement dans le coin supérieur droit. Définissez également le nom de la classe sur MaskMC. Supprimez maintenant l'objet de la scène. Voici une capture d'écran de ce à quoi l'objet peut ressembler:
Placez cette variable au-dessus du constructeur. Cette variable sera utilisée comme compte à rebours pour vérifier quand créer une nouvelle bulle:
compte var privéDown: int = 30
Ajoutons maintenant un ENTER_FRAME écouteur d'événement et une fonction à appeler. Ajoutez le code suivant à votre constructeur.
addEventListener (Event.ENTER_FRAME, enterFrame)
Maintenant, nous pouvons créer cette fonction pour que notre écouteur d’événements établisse un lien vers:
fonction privée enterFrame (e: Event): void // Créer des bulles
Maintenant que nous avons configuré notre écouteur d'événements, nous pouvons modifier notre fonction pour qu'elle fasse quelque chose chaque fois que le compteur atteint zéro. Modifiez votre fonction pour qu'elle ressemble à ceci:
// 30 fois en une seconde: fonction privée enterFrame (e: Event): void // Soustrayez une du compte à rebours countDown-- // Si le compte à rebours est à 0 if (countDown == 0) // Créer une nouvelle bulle // Redémarrage du compte à rebours à 30 countDown = 30
Maintenant, nous pouvons simplement insérer le code de création de bulle approprié dans la fonction et nous serons tous prêts!
Faisons la prochaine partie de notre fonction enterFrame (). Dans cette étape, nous allons créer le bulle MovieClip. Ajoutez ce qui suit dans votre fonction:
// Crée un nouveau MovieClip qui sera notre bulle var myNewBubble: MovieClip = new MovieClip () // Ajoute le masque à la bulle myNewBubble.addChild (new MaskMC ()) // Choisit un MovieClip aléatoire dans le tableau d'images. // [Math.floor (Math.random () * imageList.length)] choisit simplement le nombre // d'image, en fonction du nombre d'éléments de la liste var myImageInBubble: MovieClip = new imageList [Math.floor ( Math.random () * imageList.length)] () // Ajoute l'image à la bulle myNewBubble.addChild (myImageInBubble) // Masque l'image au masque .getChildAt (0) est le premier // objet ajouté à un MovieClip myImageInBubble.mask = myNewBubble.getChildAt (0)
Voici à quoi devrait ressembler votre fonction:
fonction privée 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)
Et maintenant, nous pouvons ajouter la touche finale à notre fonction enterFrame (). Voici les choses à ajouter sous ce que nous avons fait précédemment:
// Place la bulle en bas de l'écran myNewBubble.y = 800 // Déplace la bulle de manière aléatoire sur l'axe X myNewBubble.x = Math.random () * stage.width // Ajoute un écouteur d'événement à la bulle myNewBubble. addEventListener (Event.ENTER_FRAME, bubbleFrameEnter) addChild (myNewBubble)
Voici un aperçu de ce à quoi votre fonction d’image devrait ressembler:
fonction privée 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
Si vous vous souvenez de notre dernière étape, nous avons ajouté un autre écouteur d’événement enterframe à notre nouvelle bulle. Ajoutez cette fonction à votre classe principale pour que les bulles bougent:
fonction privée bubbleFrameEnter (e: Event): void // déplace lentement la cible de notre fonction e.target.y - = 7 // Si le Y de la bulle est inférieur à zéro if (e.target.y < 0) //Pop and remove bubble
Vous constaterez peut-être que cela réduit les performances de votre fichier SWF. Si c'est le cas, essayez d'ajouter chaque bulle à un tableau lors de sa création et de déplacer chaque bulle du tableau de 7 pixels vers le haut dans la fonction enterFrame ()..
Nous n'avons pas encore fait apparaître nos bulles avec le moteur FLiNT, mais nous pouvons au moins les supprimer et économiser de la mémoire. Voici ce que nous pouvons ajouter au gestionnaire ENTER_FRAME de notre bulle pour supprimer nos objets de la scène et supprimer l'écouteur d'événements qui leur est associé..
// Trouver le parent de notre bulle (cible) // et lui dire de supprimer notre cible e.target.parent.removeChild (e.target) // Supprimer l'événement de notre cible (la bulle) // écouteur, donc il ne ' ne plus rien faire e.target.removeEventListener (Event.ENTER_FRAME, bubbleFrameEnter)
Voici ce que votre bubbleFrameEnter la fonction devrait ressembler à:
fonction privée 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)
Si vous utilisez un tableau, vous devez supprimer la bulle du tableau ici..
Félicitations pour la finition Première partie de notre application! Nous devons maintenant ajouter quelques effets FLiNT à notre programme pour le rendre plus réaliste et plus amusant à regarder.!
Ajoutons maintenant quelques effets de bulles d’arrière-plan à notre scène. Pour ce faire, nous devons concevoir un MovieClip à utiliser avec FLiNT. Assurez-vous que les paramètres suivants sont définis dans votre nouveau MovieClip:
Dessine une bulle que tu voudrais utiliser. Notez que ceci est différent des bulles photo que nous avons traitées. J'ai choisi l'image suivante ci-dessous (zoomée 8 fois). La taille n'a pas d'importance tant qu'elle est suffisamment petite pour se multiplier plusieurs fois et avoir toujours fière allure.
Nous pouvons maintenant commencer avec le moteur FLiNT. Pour commencer, nous devons créer notre émetteur et notre moteur de rendu. Ajoutez le code suivant au-dessus du constructeur de votre classe de document.
// Crée une nouvelle variable privée DisplayObjectRenderer myRenderer: DisplayObjectRenderer = new DisplayObjectRenderer (); // Crée un émetteur 2D FLiNT pour les effets 2D standard private var myEmitter: Emitter2D = new Emitter2D ()
À partir de l'émetteur, nous pouvons associer toutes les propriétés correctes aux bulles pour les faire se comporter comme nous le souhaitions. Le moteur de rendu attirera les bulles sur la scène.
Maintenant que nous avons créé notre émetteur, nous pouvons continuer et attacher toutes les actions et propriétés que nous souhaitons pour qu’il se comporte exactement comme nous le voulons. Pour ce faire, ajoutez le code suivant n'importe où dans votre constructeur.
// demande à l'émetteur de créer 10 bulles toutes les secondes myEmitter.counter = new Steady (10); // Indique à l'émetteur d'utiliser bubble_mc MovieClip comme particule myEmitter.addInitializer (new ImageClass (bubble_mc)); // Indique à l'émetteur de créer des bulles dans une certaine // ligne. Les emplacements des bulles vont de (0,700) à (830 700), // s’étendant d’un côté à l’autre du bas de l’écran à l’autre myEmitter.addInitializer (nouvelle position (nouvelle zone (nouveau point (0,700), nouveau point) (830 700))). ) // Définit la vitesse des particules à X: 0, Y: -65, // les faisant aller dans une direction droite. myEmitter.addInitializer (new Velocity (new PointZone (nouveau Point (0, -65)))); // Indique à l'émetteur de redimensionner de manière aléatoire les images de 0,75x à 5x myEmitter.addInitializer (new ScaleImageInit (0.75, 5)); // Indique aux particules de commencer à déplacer myEmitter.addAction (new Move () (nouveau) ()); // Dessine un rectangle du coin supérieur gauche (-40, -40), // au coin inférieur droit (850 750). Ce sera la // zone de sécurité pour les bulles. Toutes les bulles sortant de ces limites // sont détruites myEmitter.addAction (new DeathZone (new RectangleZone (-40, -40 85050), true)); // Indique aux bulles de s'éloigner de la souris, en spécifiant // la force du mouvement (10), le rendu associé // à l'émetteur (myRenderer) et l'épislon de la gravité (1) myEmitter.addAction (nouveau MouseAntiGravity (10, myRenderer, 1)) // Lance tout ce que nous venons de spécifier :) myEmitter.start ()
Beau travail pour créer des effets de particules impressionnants avec FLiNT. Oh, attendez? tu ne peux pas les voir? On dirait que nous devrons couvrir cela dans la prochaine étape :)
Et maintenant, * roulement de tambour * est la dernière pièce du puzzle. (erm) je veux dire tutoriel. Il ne nous reste plus qu'à rendre nos effets de particules avec notre émetteur. Pour ce faire, ajoutez le code suivant au bas de notre constructeur:
// Connecte l'émetteur de particules au rendu myRenderer.addEmitter (myEmitter); // Ajoute le rendu à la scène. addChild (myRenderer);
Dans Étape 15 nous avons laissé un point blanc dans notre code pour les explosions lorsque notre image a quitté la scène. Il est maintenant temps d'ajouter quelques effets FLiNT au mélange pour donner l'impression que les bulles éclatent vraiment.
Commençons par dessiner notre particule d'explosion. Allez dans l'IDE Flash et créez une nouvelle bulle plus sombre, plus petite et (Sélectionnez + F8). Définissez maintenant le nom de la classe sur "bubble_mc2".
Modifier votre bubbleFrameEnter () fonction pour ressembler à celle ci-dessous. Consultez les commentaires pour une explication détaillée de ce que nous faisons:
fonction privée bubbleFrameEnter (e: Event): void // Anciens mouvements e.target.y - = 7 // Vérifie quand la bulle atteint le sommet si (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)
Félicitations pour l’utilisation de FLiNT pour créer un afficheur d’images dynamique. Maintenant que vous avez créé ceci, vous pouvez commencer à utiliser les techniques présentées dans ce tutoriel pour vos propres projets personnels afin de créer quelque chose de vraiment unique avec FLiNT..
Merci de votre lecture et j'espère que le tutoriel vous a été utile :)
Accentsconagua