Les jeux flash sont le pain quotidien de la culture indie pop-nerd. Si vous considérez les tranches de pain comme le menu et le jeu lui-même, que reste-t-il? Le beurre - la substance même qui donne au pain un goût beaucoup plus délicieux. Et en termes de jeu Flash, ce qui vient entre les menus et les jeux, ce sont les transitions.!
Aperçu du résultat final
Voici un exemple de motif de l'effet de transition sur lequel nous allons travailler:
Étape 1: Mise en place
Comme d’habitude, nous devons créer un nouveau fichier Flash (ActionScript 3.0). Définissez sa largeur sur 400 px, sa hauteur sur 200 px et la cadence de prise de vue sur 30 images par seconde. La couleur d'arrière-plan peut être laissée par défaut. Enregistrez le fichier. il peut être nommé comme vous voulez. J'ai nommé le mien Transitions.fla.
Ensuite, nous devons créer une classe de document. Accédez aux propriétés de votre fichier Flash et définissez sa classe sur Les transitions. Créez ensuite la classe de document:
package import flash.display. *; importer flash.events. *; classe publique Transitions s´étend de MovieClip static public var val: Number = new Number (); static public var transitionAttached: Boolean = new Boolean (); fonction publique Transitions () val = 0; transitionAttached = false;
Le code vient d'introduire deux variables. Le premier sera utilisé pour sélectionner le motif de l'effet, et le second pour vérifier s'il existe plusieurs occurrences de l'effet sur la scène..
Étape 2: Création du sprite carré
Notre prochaine étape consiste à créer le sprite qui sera utilisé comme chaque carré de la transition. Créez une nouvelle classe et enregistrez-la sous Square.as:
package import flash.display. *; importer flash.events. *; public class Square étend Sprite public var squareShape: Shape = new Shape (); fonction publique Square ()
Nous utilisons le forme carree variable pour dessiner notre forme à l'intérieur du Sprite. Dessinez un rectangle de 40 pixels sur 40 pixels (taille normale) et définissez son échelle sur 0,1, un dixième de sa taille - cela nous aidera plus tard:
Créez une autre nouvelle classe pour l'effet lui-même. Une fois que nous avons terminé, ajouter l'effet à la scène sera très simple:
package import flash.display. *; importer flash.events. *; import flash.utils. *; public class FadeEffect étend Sprite public var currentFadeOut: int = 00; public var currentSquares: int = 01; public var pauseTime: int = 01; public var tempNum: int = 00; public var fading: String = "in"; public var fadeinTimer: Timer = new Timer (100); public var fadeoutTimer: Timer = new Timer (100); public var fadeArray: Array = [// début [01,01,01,01,01,01,01,01,01,01], [02,02,02,02,02,02,02,02, 02,02], [03,03,03,03,03,03,03,03,03,03], [04,04,04,04,04,04,04,04,04,04,04], [ 05,05,05,05,05,05,05,05,05,05]], // bottom [[05,05,05,05,05,05,05,05,05,05], [04 , 04,04,04,04,04,04,04,04,04], [03,03,03,03,03,03,03,03,03,03], [02,02,02,02 , 02,02,02,02,02,02], [01,01,01,01,01,01,01,01,01,01]]]; public var squaresArray: Array = new Array (); fonction publique FadeEffect ()
Vous pensez probablement "qu'il y a énormément de variables, à quoi servent-elles toutes?":
currentFadeOut - utilisé comme un chèque pour tempNum pour voir combien de carrés doivent être mis à l'échelle
currentSquares - la valeur actuelle indiquant quels carrés doivent être attachés et / ou mis à l'échelle
temps de pause - un simple entier pour donner une légère pause entre les transitions et se supprimer
tempNum - utilisé pour vérifier quels nombres du tableau doivent être mis à l'échelle
décoloration - une chaîne pour vérifier si la transition s'estompe ou disparaît
fadeinTimer - une minuterie appelée pour commencer le fondu en entrée de la valeur actuelle de currentSquares
fadeoutTimer - une autre minuterie appelée pour commencer le fondu en sortie de la valeur actuelle de currentSquares
fadeArray - le tableau 3D qui contient tous les motifs de transition
carrés - un tableau pour les sprites Square
Notre effet commencera par l’initiation d’un auditeur d’événement pour fadeInTimer et le démarrer. Nous devons également ajouter un écouteur d'événement pour redimensionner en permanence toutes les images-objets à leur taille correcte. Utilisez le code suivant dans le constructeur:
L'étape suivante consiste à créer ces deux écouteurs d'événement. Nous allons commencer par le plus facile des deux, le enterFrame une fonction:
fonction publique enterFrame (e: Event) pour chaque (var s1 dans squaresArray) tempNum + = 1; if (fading == "in") if (s1.scaleX<=1) s1.scaleX+=0.05; s1.scaleY+=0.05; else if(fading=="out") if(tempNum<=currentFadeOut) if(s1.scaleX>= 0,1) s1.scaleX- = 0,05; s1.échelleY- = 0,05; else if (s1.visible == true) s1.visible = false; tempNum = 00;
Cela n’a peut-être pas de sens total pour le moment, mais cela devrait aider à jeter un peu de lumière.
s1 est le nom d'instance qui sera donné aux carrés lorsque nous les créerons dans une fonction ultérieure.
Ils sont ajoutés à un tableau appelé carrés pour garder une trace de leur nombre et nous effectuons la même opération pour chaque objet du tableau.
Ensuite nous augmentons tempNum (utilisé dans l'instruction if de fading out) utilisé pour redimensionner les sqaures dans l'ordre dans lequel elles ont été ajoutées au tableau. Cela signifie que cela ne dépend pas du motif et fonctionnera avec n'importe quel motif.
Après ça…
Nous vérifions si décoloration est vrai ou pas.
Si true, il redimensionne tous les carrés jusqu'à ce qu'ils atteignent leur taille maximale (ils commencent à se redresser immédiatement après que currentSquares ait augmenté).
Une fois que cela commence à s'estomper, les choses deviennent un peu plus difficiles. nous réduisons uniquement les carrés inférieurs à la valeur actuelle de currentFadeOut (Ce sont ceux qui devraient être en train de s'échelonner, tous les autres doivent rester à l'échelle jusqu'à ce que la valeur augmente.
Une fois qu’ils ont été réduits au dixième de la taille, nous rendons ces carrés invisibles (ils seront supprimés avec l’ensemble de l’effet)..
Il est temps d'ajouter l'écouteur d'événements pour le minuteur:
À première vue, cela semble moins compliqué, mais vous remarquerez que nous appelons une fonction avec le fadeArray comme paramètre. Le modèle sélectionné dans le tableau dépend de ce que vous définissez val égal à dans la classe Transitions; en ce moment il faut utiliser le premier motif parce que val est mis à 0.
La prochaine étape consiste à créer le fadeSquaresIn fonction appelée depuis la minuterie précédente:
fonction publique fadeSquaresIn (s: Array) pour (var row = 0; row
La première chose que nous accomplissons est de parcourir le motif sélectionné. Nous commençons à la ligne 1, colonne 1 et parcourons chaque colonne jusqu'à atteindre la fin de la ligne. Ensuite, nous passons à la rangée suivante et répétons le processus.
La prochaine chose à faire est de comparer l’élément actuel du tableau à la valeur de currentSquares:
if (int (s [col] [ligne]) == currentSquares)
Si elles sont équivalentes, nous ajoutons un carré, le positionnons en conséquence et le poussons sur le carrés afin qu'il puisse être mis à l'échelle:
Nous avons presque fini avec cette fonction, nous devons juste vérifier s'il y a autant de carrés que d'éléments dans le motif. Nous le faisons en ajoutant l'instruction if suivante en dehors des deux boucles for:
if (squaresArray.length == (s [0] .length * s.length)) fadeinTimer.stop (); addEventListener (Event.ENTER_FRAME, pauseBetween);
Auto-explicatif - nous avons arrêté le minuteur et appelé un écouteur d'événements pour la pause entre les fondus en entrée et en sortie. Cette fonction est utilisée pour lancer le fondu et peut également être utilisée pour modifier votre jeu:
Nous ne passerons pas beaucoup de temps sur cette fonction en raison de sa simplicité. Ici, nous augmentons la valeur de temps de pause, et une fois qu'il est égal à 60 (ce qui signifie deux secondes se sont écoulées), nous définissons la valeur de currentSquares retour à 1, set décoloration à "en dehors" pour que les carrés puissent être redimensionnés à l’arrière, supprimez l’auditeur. pauseEntre () lui-même et ajouter un écouteur d'événements pour cette nouvelle fonction:
Cela fonctionne beaucoup comme fadeSquaresInTimer (), bien que cette fois nous appelons la fonction fadeSquaresOut ():
fonction publique fadeSquaresOut (s: Array) pour (var row = 0; row
Nous parcourons, mais cette fois quand nous trouvons un article équivalent, nous augmentons la valeur de currentFadeOut afin que le prochain élément de la carrés peut commencer à disparaître.
Presque fini maintenant; tout ce qui reste à faire est d'arrêter le chronomètre et de supprimer l'effet. Ajoutez cette instruction if en dehors des deux boucles for:
if (currentFadeOut == (s [0] .length * s.length)) fadeoutTimer.stop (); pauseTime = 01; addEventListener (Event.ENTER_FRAME, delayRemove);
Ceci vérifie si tous les éléments ont commencé à s'estomper. Si tel est le cas, il arrête le chronomètre, définit temps de pause retour à 1 et ajoute un écouteur d'événement pour la fonction retardéRetirer ():
Comme avant, nous augmentons la valeur de temps de pause, et une fois égal à 30 (1 seconde), nous remettons le booléen à faux afin que l'effet puisse être ajouté à nouveau. Nous supprimons cet écouteur d'événement et cet effet de la scène..
Étape 4: Ajout de l'effet
Maintenant vient la partie facile. Ajoutez le code suivant dans le constructeur de la classe de document pour ajouter l'effet:
if (transitionAttached == false) transitionAttached = true; var f1: Sprite = new FadeEffect; stage.addChild (f1);
Étape 5: Créer plus de motifs
N'hésitez pas à créer vos propres modèles! C'est extrêmement simple, il suffit de créer un nouveau tableau 2D à l'intérieur du tableau 3D. Voici le tableau que j'ai créé (remplacez simplement votre tableau 3D par celui-ci). Il comprend 8 transitions différentes:
[// top [[01,01,01,01,01,01,01,01,01,01], [02,02,02,02,02,02,02,02,02,02,02], [ 03,03,03,03,03,03,03,03,03,03], [04,04,04,04,04,04,04,04,04,04], [05,05,05, 05,05,05,05,05,05,05]], // bottom [[05,05,05,05,05,05,05,05,05,05], [04,04,04,04 , 04,04,04,04,04,04], [03,03,03,03,03,03,03,03,03,03], [02,02,02,02,02,02,02 , 02,02,02], [01,01,01,01,01,01,01,01,01,01]], // à gauche [[01,02,03,04,05,06,07, 08,09,10], [01,02,03,04,05,06,07,08,09,10], [01,02,03,04,05,06,07,08,09,10] , [01,02,03,04,05,06,07,08,09,10], [01,02,03,04,05,06,07,08,09,10]], // à droite [ [10,09,08,07,06,05,04,03,02,01], [10,09,08,07,06,05,04,03,02,01], [10,09,08 , 07,06,05,04,03,02,01], [10,09,08,07,06,05,04,03,02,01], [10,09,08,07,06,05 , 04,03,02,01]], // en haut à gauche [[01,02,03,04,05,06,07,08,09,10], [02,03,04,05,06, 07,08,09,10,11], [03,04,05,06,07,08,09,10,11,12], [04,05,06,07,08,09,10,11, 12,13], [05,06,07,08,09,10,11,12,13,14]], // en haut à droite [[10,09,08,07,06,05,04,03 , 02,01], [11,10,09,08,07,06,05,04,03,02], [12,11,10,09,08,07,06,05,04,03], [13,12,11,1 0,09,08,07,06,05,04], [14,13,12,11,10,09,08,07,06,05]], // en bas à gauche [[05,06,07 , 08,09,10,11,12,13,14], [04,05,06,07,08,09,10,11,12,13], [03,04,05,06,07,08 , 09,10,11,12], [02,03,04,05,06,07,08,09,10,11], [01,02,03,04,05,06,07,08,09 , 10]], // en bas à droite [[14,13,12,11,10,09,08,07,06,05], [13,12,11,10,09,08,07,06, 05,04], [12,11,10,09,08,07,06,05,04,03], [11,10,09,08,07,06,05,03,03,02], [ 10,09,08,07,06,05,04,03,02,01]];
Vous pouvez changer la valeur de Transitions.val choisir un autre motif - par exemple, si val est 3, la transition va balayer de la droite.
Conclusion
Merci d'avoir pris le temps de lire ce tutoriel. Si vous avez des questions s'il vous plaît laissez un commentaire ci-dessous. Et si vous souhaitez un défi, essayez d’effacer l’effet en fondu avec un motif et en fondu avec un motif opposé..
Share
Accentsconagua
