Créez votre propre effet d'explosion de pixels ActionScript 3.0

Dans ce tutoriel, vous apprendrez à créer un effet qui a sûrement attiré votre attention auparavant (par exemple dans des fichiers tels que celui-ci), le Pixel Explosion. Pendant le processus de création, nous allons apprendre à extraire BitmapData d'un MovieClip, à utiliser un moteur d'interpolation et à utiliser des écouteurs d'événement..

Commençons alors!

Étape 1: Configuration de la scène

La première chose à faire est de créer un fichier flash AS3. Ensuite, nous allons configurer notre scène à 400px x 400px et 30 fps. Nous allons coder sur la timeline pour simplifier les choses, mais ceux qui savent programmer en POO sont invités à écrire ce code dans des classes. Vous aurez besoin de connaissances de base en AS3 pour comprendre tous les processus impliqués dans ce tutoriel. Cependant, je vais essayer de rester très simple. Les boutons bleus survolés sont ceux que vous devrez appuyer dans votre IDE. Cela peut sembler beaucoup de travail au début, mais c'est vraiment très simple…

Étape 2: Dessiner notre image principale

Nous allons maintenant dessiner une image vectorielle de ce dont nous avons besoin. Vous pouvez vraiment configurer n'importe quelle image avec cet effet (.jpg, .png), mais les vecteurs sont plus froids. Comme vous le constaterez, je ne suis pas vraiment un designer. Tout ce que vous avez à faire est de dessiner votre image (ou d'importer un fichier jpg de votre ordinateur), de la sélectionner et de la convertir en MovieClip (appuyez sur F8 sous Windows)..

Étape 3: Préparation du code

Une fois que vous avez transformé votre image en Movieclip, vous pouvez la préparer pour le code qui la ciblera. Nous allons créer un nouveau calque pour les actions (1.), puis lui attribuer le nom d'occurrence mcLogo (2.). Ensuite, nous allons importer les classes pour les utiliser dans notre couche d’actions. Pour cet effet, nous aurons besoin d'un bon moteur d'interpolation. Le meilleur que j'ai trouvé qui gère à la fois la vitesse et la stabilité est TweenMax. Vous pouvez le télécharger depuis http://blog.greensock.com/tweenmaxas3/ (faites un don si vous l’aimez). N'oubliez pas de copier le répertoire classes dans le même répertoire que votre fichier .fla (comme vous pouvez le voir dans la zone bleue). Enfin, importez la classe TweenMax dans votre timeline (3.).

Étape 4: Préparer l'action

Nous allons maintenant configurer la scène et nos principales variables. Nous allons aligner la scène sur le coin TOP_LEFT et la configurer pour qu’elle ne redimensionne pas le contenu. Du côté des variables, nous allons créer un conteneur pour contenir tous les pixels qui vont exploser. Nous allons également créer un GlowFilter (optionnel bien sûr), mais cela renforcera l’effet génial de cet effet. "Animation" est un commutateur qui devient vrai lorsque l'effet se produit et "pixelBMP" correspond aux données bitmap de votre image..

 stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; var pixelContainer: MovieClip = new MovieClip (); var glow: GlowFilter = nouveau GlowFilter (0xFFFF00, 1, 10, 10,5,2); var animating: Boolean = false; var pixelBMP: BitmapData;

Ensuite, nous allons créer des variables de répétition et attribuer la position du conteneur de pixels à la même chose que votre image..

 var i: int = 0; var j: int = 0;

Étape 5: Créer les porte-pixels

Nous allons maintenant extraire les données bitmap (couleurs de pixel) de l'image que vous avez configurée (1.). N'oubliez pas ces deux lignes, elles vous aideront également dans d'autres projets. Nous allons créer un nouveau symbole à partir de la bibliothèque (2.) et cliquer sur le bouton Avancé. Une fois cliqué, sélectionnez Exporter pour Actionscript (3.). Recherchez le champ de texte Classe et tapez "myPixel".

Étape 6: Configurer la classe MyPixel

Nous allons maintenant configurer le conteneur de pixels. Nous allons entrer dans notre effet de pixel nouvellement créé et faire un calque nommé "action".

Étape 7: Configuration des pixels pour recevoir des couleurs

Sur la couche d'actions, nous allons configurer le bitmap. Ce petit morceau de code vous aidera à chaque fois que vous voudrez manipuler le bitmapData d'un objet (par exemple, avec d'autres effets utiles comme la désaturation et le flou)..

pixelBMP = new BitmapData (mcLogo.width, mcLogo.height, true, 0x000000) pixelBMP.draw (mcLogo)

J'ai créé un cercle contenant la couleur de chaque pixel, mais vous pouvez le personnaliser à votre guise. carré, triangle ou même un simple pixel. Nous ajoutons l’effet pixel glow du paramètre function:

var orgX: int = 0; var orgY: int = 0; var bmpImg: Bitmap; fonction setUpPixel (bdData: BitmapData, glow: GlowFilter) var mc: MovieClip = new MovieClip (); mc.graphics.beginFill (bdData.getPixel (0,0)); mc.graphics.drawCircle (0,0,2) mc.graphics.endFill (); mc.filters = [lueur]; addChild (mc);

Étape 8: Traverser tous les pixels

Nous allons créer deux instructions "for" couvrant tous les pixels de notre image. Le premier pour (i) est pour vertical et le second (j) pour horizontal. La méthode getPixel renvoie une unité représentant la couleur du pixel à cette position. Si ce n'est pas nul, les opérations présentées à l'étape 9 seront démarrées. Nous allons traverser les pixels deux à deux à cause de la gestion de la mémoire..

 pour (i = 0; i < mcLogo.height; i+=2) for(j = 0; j < mcLogo.width; j+=2)

Étape 9: Donner de la couleur aux pixels

Nous allons commencer par attribuer la couleur de pixel au filtre de rayonnement. Ensuite, nous allons créer un nouveau myPixel que nous nommerons "pixel_mc". Nous appellerons la fonction "setUpPixel" définie à l'étape 7. Cela transmet bitmapData - 2 pixels de large, 2 pixels de hauteur, couleur du pixel actuel, originalX, originalY et le filtre de rayonnement. Enfin, nous ajoutons ce pixel au conteneur de pixels (ligne 12)

pour (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 (new BitmapData (2, 2, false, pixelBMP.getPixel (j, i)), lueur) pixel_mc.y = i; pixel_mc.x = j; pixelContainer.addChild (pixel_mc); pixelContainer.visible = false;

Étape 10: Tester ce que nous avons fait jusqu'à présent.

De petites erreurs sont très courantes en programmation, c'est pourquoi nous devons tester notre MovieClip de temps en temps. Cela nous donne notre image, mais aussi un peu de flou. Le flou est dû au filtre anti-lueur, donc pas d'inquiétude. Comme vous le savez peut-être déjà, nous n’avons pas besoin que ces pixels soient visibles, sauf lorsque notre effet est appliqué. Jusque là nous avons notre belle image. Il ne vous reste donc plus qu'à décommenter la ligne 13 à cette étape. - pixelContainer.visible = false; et vous récupérerez votre image d'origine.

Étape 11: Configuration de l'effet d'explosion

Nous avons les pixels en place, il ne nous reste plus qu'à les animer. C’est là que TweenMax entre en scène. Nous commençons la fonction en rendant l'image originale invisible et les pixels visibles. Ensuite, nous allons définir l'image d'origine et le bouton que nous créerons plus tard (pour activer la fonction) en haut de l'index. Rappelez-vous cette fonction - setChildIndex (yourmc, numChildren-1) cela vous aidera dans d'autres projets.

 fonction explode () pixelContainer.alpha = 1; mcLogo.visible = false; setChildIndex (mcLogo, numChildren - 1) setChildIndex (btn_mc, numChildren-1) pixelContainer.visible = true;

Étape 12

C'est là que les pixels prendront vie. Le "pour" traverse chaque enfant du pixelContainer. Le pixel est extrait à travers le getChildAt (i) méthode. Le xdest et le ydest sont des destinations aléatoires vers lesquelles nos pixels vont voler (puisque Math.random () renvoie un nombre compris entre 0 et 1, il est nécessaire de le multiplier). Enfin, nous ajoutons la transition et un type de facilité via TweenMax.

 fonction explode () pixelContainer.alpha = 1; mcLogo.visible = false; setChildIndex (mcLogo, numChildren - 1) setChildIndex (btn_mc, numChildren-1) pixelContainer.visible = true; pour (var i: int = 0; i Étape 13: Implosion
 Pour l'implosion, bien sûr, nous devons stocker nos valeurs initiales quelque part. Nous allons créer (1.) 2 tableaux - xArray et yArray qui stockent ces valeurs. Après cela (2.) nous insérerons dans le pour (j = 0; j le code pour pousser les valeurs dans l'index suivant.
  var xArray: Array = new Array (); var yArray: Array = new Array (); pour (i = 0; i0) glow.color = pixelBMP.getPixel (j, i); var pixel_mc: myPixel = new myPixel () pixel_mc.setUpPixel (new BitmapData (2, 2, false, pixelBMP.getPixel (j, i)), éclat) pixel_mc.y = i; pixel_mc.x = j; xArray.push (j); yArray.push (i); pixelContainer.addChild (pixel_mc); pixelContainer.visible = false; 
 Étape 14
 Nous allons maintenant ajouter un effet de retrait. C'est essentiellement la même chose que l'effet d'explosion, sauf qu'il utilisera les valeurs stockées dans le tableau créé précédemment.
  Étape 15: le bouton
 Créons notre bouton. Commencez par dessiner (1.). Faire un MovieClip (comme vous l'avez appris à l'étape 2. Créer un nouveau calque d'actions et taper stop (); (2.). Cela empêche notre mc de boucler. Nous allons maintenant insérer une image clé pour le moment où le bouton aura été enfoncé ( 3.). Cela changera le texte et montrera que maintenant, quand vous cliquez dessus, le processus sera inversé.
  Étape 16: exportation de notre bouton pour ActionScript
 Nous aurons besoin de faire la même chose que nous avons fait à notre image, en donnant au bouton un nom d'instance.
  Étape 17: Configuration du bouton
 La propriété buttonMode définit le curseur normal pour changer dans l'action un. 
 La propriété mouseChildren, lorsqu'elle est définie sur false, empêche les enfants de boutons de voler mouseEvents..
 La méthode addEventListener permet au bouton de lancer la fonction clickHandler lorsque vous cliquez dessus (MouseEvent.CLICK)..
  function initbutton () btn_mc.buttonMode = true; btn_mc.mouseChildren = false; btn_mc.addEventListener (MouseEvent.CLICK, clickHandler);  initbutton ();
 Étape 18: Le détonateur
 Nous allons maintenant configurer la fonction qui déclenche l'explosion. "animer" est la valeur qui indique si les pixels doivent exploser ou imploser.
  fonction clickHandler (e: MouseEvent) if (animating == false) explode (); animant = vrai; btn_mc.gotoAndStop (2);  else implode () btn_mc.gotoAndStop (1); 
 Étape 19: Personnalisation
 L'ajout de filtres, la modification des valeurs des filtres et la modification des types d'accélération des transitions sont d'excellents éléments. Pour changer les types d'accélération, vous devez importer les classes d'accélération. Vous pouvez prévisualiser les types d'interpolation ici.
  importer gs.easing. *;
 Étape 20: Lisser la transition
 Si vous avez testé le film au fur et à mesure, vous avez peut-être remarqué que la transition entre les pixels et l'image réelle est assez difficile. Nous pouvons ajouter un paramètre onComplete sur le tween implode pour appeler une fonction qui adoucit cette transition:
 onComplete: fonction smoothit smoothit () mcLogo.visible = true; TweenMax.to (pixelContainer, 1, alpha: 0, onComplete: function () pixelContainer.visible = false; mcLogo.visible = true; animating = false;
 Étape 21: Révision
 Alors, qu'avons-nous couvert aujourd'hui?
  Importer nos classes principales.
 Aligner la scène.
 Déclarer les variables principales.
 Ajout d'un conteneur de pixels sur scène.
 Extraire les données bitmap de notre image.
 Création d'une classe MyPixel et envoi de la couleur de chacun des pixels de l'image à ces pixels.
 Créer une fonction qui sélectionne tous les pixels, puis les interpelle dans une position aléatoire.
 Créer une fonction qui réinterprète les pixels à la position initiale.
 Faire un bouton qui appelle ces fonctions.
 
 Code final
  importer gs.TweenMax; importer gs.easing. *; stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; var pixelContainer: MovieClip = new MovieClip (); var glow: GlowFilter = nouveau GlowFilter (0xFFFF00, 1, 10, 10,5,2); var animating: Boolean = false; var pixelBMP: BitmapData; var i: int = 0; var j: int = 0; var xArray: Array = new Array (); var yArray: Array = new Array (); addChild (pixelContainer) pixelContainer.x = mcLogo.x; pixelContainer.y = mcLogo.y; pixelBMP = new BitmapData (mcLogo.width, mcLogo.height, true, 0x000000) pixelBMP.draw (mcLogo) pour (i = 0; i0) glow.color = pixelBMP.getPixel (j, i); var pixel_mc: myPixel = new myPixel () pixel_mc.setUpPixel (new BitmapData (2, 2, false, pixelBMP.getPixel (j, i)), éclat) pixel_mc.y = i; pixel_mc.x = j; xArray.push (j); yArray.push (i); pixelContainer.addChild (pixel_mc); pixelContainer.visible = false;  function initbutton () btn_mc.buttonMode = true; btn_mc.mouseChildren = false; btn_mc.addEventListener (MouseEvent.CLICK, clickHandler); fonction clickHandler (e: MouseEvent) if (animating == false) explode (); animant = vrai; btn_mc.gotoAndStop (2);  else implode () btn_mc.gotoAndStop (1);  initbutton (); fonction explode () pixelContainer.alpha = 1; mcLogo.visible = false; setChildIndex (mcLogo, numChildren - 1) setChildIndex (btn_mc, numChildren-1) pixelContainer.visible = true; pour (var i: int = 0; i J'espère que vous avez apprécié ce tutoriel. Merci d'avoir lu!



		
			
	   
	




Code