Share
Les premières impressions sont très importantes sur un portail de jeux Flash; Si votre jeu n'attrape pas le joueur dans les premières secondes, il a beaucoup d'autres jeux à choisir. Comme le menu est le premier point d'interface, tout ce que vous pouvez faire pour le rendre moins ennuyeux aidera. Dans ce didacticiel, nous allons créer un menu intégrant la profondeur d’échange, des effets de renversement lisses et deux conceptions de transition différentes..
Ce sont les deux modèles sur lesquels nous allons travailler:
La première conception verra les écrans suivants passer de différentes directions, en fonction de l’option choisie.
La deuxième conception transforme tous les écrans à partir du bas: un choix plus flexible si vous avez plus de quatre options..
Deux éléments principaux rendent ce menu "actif". Le premier concerne les effets de substitution sur les boutons: quelle que soit leur réduction lors de leur déploiement, ils sont réduits à partir de cette taille (contrairement à une interpolation créée sur la timeline). La seconde est que le code du second style est conçu pour être flexible et facile à étendre pour vos propres besoins..
La première chose à créer est un nouveau fichier Flash (ActionScript 3.0). Définissez sa largeur sur 600 pixels, sa hauteur sur 300 pixels et le nombre d'images par seconde sur 30. La couleur d'arrière-plan peut être laissée en blanc..
Maintenant, enregistrez le fichier. vous pouvez le nommer comme vous voulez, mais j'ai nommé le mien menuBounce.fla.
Dans la section suivante, nous allons créer les huit MovieClips utilisés dans le menu. Pour référence, voici une liste de toutes les couleurs utilisées dans ce didacticiel:
Accentsconagua
0xffffff)0xe8a317)0xfbb917)0x1569c7)0x1389ff)0x347235)0x3e8f1b)0x990000)0xc10202)0x222222)Pour commencer, nous allons créer les "dos" (les clips qui remplaceront les écrans réels), mais avant de commencer, activons certaines fonctionnalités très utiles de Flash..
Cliquez avec le bouton droit sur la scène et sélectionnez Grille> Afficher la grille. Par défaut, il créera une grille de 10 pixels sur 10 pixels sur la scène. Ensuite, cliquez à nouveau avec le bouton droit de la souris sur la scène et cette fois-ci, sélectionnez Alignement> Aligner sur la grille..
Maintenant nous pouvons commencer à dessiner! Sélectionnez l'outil Rectangle et tracez un rectangle en or clair de 600 x 300 pixels. Sélectionnez ensuite ce remplissage, cliquez avec le bouton droit de la souris et choisissez Convertir en symbole. Nommez le MovieClip goldBack, définir le type sur MovieClip et l'enregistrement en haut à gauche.
Cliquez ensuite sur le MovieClip avec le bouton droit de la souris et sélectionnez Dupliquer trois fois pour en faire trois copies supplémentaires. Maintenant, recolorez-les en bleu clair, vert clair et rouge clair. Puis nommez-les blueBack, dollar et RedBack, respectivement.
Pour finir, nous devons ajouter un texte dans chaque MovieClip: sur goldBack, écrivez "PLAY", sur blueBack, écrivez "INSTRUCTIONS", sur greenBack, écrivez "OPTIONS" et sur redBack, "CREDITS". Une fois que vous avez écrit le texte, je vous recommande de le séparer jusqu'à ce qu'il devienne un remplissage (cela élimine le besoin d'incorporer des polices et rend la transition plus lisse). Votre dos devrait ressembler à celui ci-dessous:
Commençons maintenant par les carrés cliquables! Sélectionnez l'outil Rectangle et dessinez un carré en or clair de 100 x 100 pixels. Sélectionnez le remplissage, cliquez avec le bouton droit et Convertir en symbole. Nommez le MovieClip goldSquare, réglez le type sur MovieClip et l'enregistrement en haut à gauche. Il est maintenant temps d'écrire du texte sur le carré, sauf que cette fois, au lieu de séparer le texte, laissez-le pour le moment. Insérez une image clé et changez la couleur de remplissage en or. Maintenant, séparez le texte sur les deux cadres jusqu'à ce qu'ils deviennent remplis.
Maintenant, cliquez avec le bouton droit sur le MovieClip et choisissez le symbole Dupliquer trois fois. Répétez ensuite le même processus que précédemment pour les trois autres couleurs, en nommant les MovieClips. blueSquare, greenSquare et carré rouge, respectivement. Vos carrés devraient ressembler à celui ci-dessous:
Commencez par tout supprimer de la scène. Ensuite, allez à Insérer> Nouveau symbole. Nomme le menuBounceMC, définissez le type sur MovieClip, l’enregistrement en haut à gauche et exportez-le sous MenuBounceMC.
Maintenant, faites-y glisser tous les dos de la bibliothèque et positionnez-les comme suit:
Si vous souhaitez utiliser la conception à une direction, placez les quatre arrières à l'une de ces positions. J'ai utilisé (0, 300).
Maintenant, faites glisser tous les carrés de la bibliothèque dans le MovieClip et posez-les de la manière suivante:
La dernière chose à faire avant de commencer à coder est d’affecter les noms d’instance. Définissez les noms d’occurrence des carrés comme square0, square1, square2, square3, à partir de la gauche. Ensuite, définissez les noms d'occurrence pour les dos en fonction de leur correspondance avec le carré de la même couleur. Alors goldBack obtiendrait le nom de l'instance retour0 parce que le goldSquare a le nom de l'instance square0.
Maintenant que nous avons fini de créer et de positionner les MovieClips, nous pouvons commencer à configurer les deux classes que nous allons utiliser..
Tout d'abord, allez dans les propriétés de votre fichier Flash et définissez sa classe sur MenuBounce; puis, créez un nouveau fichier ActionScript 3.0 et enregistrez-le sous le nom suivant: MenuBounce.as.
Maintenant, copiez le code suivant dans celui-ci; Je vais l'expliquer après:
package import flash.display.MovieClip; import flash.events.Event; classe publique MenuBounce étend MovieClip public var menuBounceMC: MenuBounceMC = new MenuBounceMC (); fonction publique MenuBounce () addChild (menuBounceMC);
Il s'agit d'une classe de document de base à laquelle nous avons ajouté un petit code supplémentaire qui crée une instance de MenuBounceMC et l'ajoute à la scène..
Créez maintenant un nouveau fichier ActionScript 3.0 et enregistrez-le sous. MenuBounceMC.as. Maintenant, copiez le code suivant afin que nous puissions le configurer.
package import flash.display.MovieClip; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; Classe publique MenuBounceMC étend MovieClip public var activeSquare: MovieClip; public var activeBack: MovieClip; public var squaresArray: Array = new Array (); public var backsArray: Array = new Array (); public var speed: Number = 20; fonction publique MenuBounceMC ()
Chaque variable a un but spécifique:
activeSquare: Quel carré est retournéactifBack: Quel dos a été sélectionné pour se déplacercarrés: Un tableau contenant tous les carrés MovieClipsbacksArray: Un tableau contenant tous les MovieClips précédentsla vitesse: Combien de pixels le dos est déplacé par chaque imageToutes ces variables ont été définies, à l'exception de topSquare (qui est défini dans d'autres fonctions) et les tableaux. Nous devons donc pousser tous les MovieClips sur le tableau. Ajoutez les lignes suivantes dans le constructeur:
squaresArray = [square0, square1, square2, square3]; backsArray = [back0, back1, back2, back3];
Cependant, cette méthode peut être un peu fastidieuse si vous allez utiliser un nombre élevé de MovieClips dans le menu - par exemple 50. Une alternative serait de créer les MovieClips complètement à l'aide de code et de les pousser lorsque vous les ajoutez au menu. Mais dans le but d'utiliser seulement huit MovieClips, cela fonctionne bien..
La dernière série d'éléments à ajouter pour achever la configuration est constituée par les écouteurs d'événements, qui déclencheront toutes les transitions et les effets de substitution. Ajoutez ces lignes sous la pousser() lignes.
addEventListener (MouseEvent.MOUSE_OVER, bounceOver); addEventListener (MouseEvent.MOUSE_OUT, bounceOut); addEventListener (MouseEvent.CLICK, bounceClick); addEventListener (Event.ENTER_FRAME, bounceUpdate);
Commençons par créer les trois fonctions les plus simples:
fonction publique bounceOver (événement: MouseEvent): void fonction publique bounceOut (événement: MouseEvent): void fonction publique bounceClick (événement: MouseEvent): void
À l'intérieur de bounceOver () function commence par ajouter une instruction if pour s'assurer qu'aucun dossier n'est actuellement "actif" - c'est-à-dire qu'il effectue une transition, une transition vers l'extérieur ou une position assise au-dessus:
if (activeBack == null)
Le reste de tout le code dans la bounceOver () fonction sera écrit à l'intérieur de cette if-statement. Maintenant, nous déterminons si l’objet est retourné (le event.target) est un carré, en vérifiant si c'est dans le squaresArray []:
if (squaresArray.indexOf (event.target)! = -1)
En supposant que ce soit le cas, nous remplissons réellement la fonction:
activeSquare = event.target en tant que MovieClip; activeSquare.gotoAndStop (2); setChildIndex (activeSquare, numChildren - 1);
D'abord nous définissons la variable activeSquare pointer sur la place en question. Après cela, nous mettons en pause l'animation de ce carré sur la deuxième image, qui affiche son "image de survol". Enfin, nous déplaçons l'image-objet pour qu'elle soit au-dessus de tout le reste, en utilisant setChildIndex ().
Nous entrons maintenant dans le bounceOut () une fonction. Cette fois, nous commençons par vérifier si l’objet à partir duquel la souris est en train d’être déployée est celui actuellement actif. carré:
if (event.target == activeSquare)
Dans le bloc if, ajoutez le code suivant. il met à nouveau en pause l'animation du carré sur la première image, puis remet activeSquare à nul afin que nous puissions rouler sur un autre:
activeSquare.gotoAndStop (1); activeSquare = null;
Puis aller au bounceClick () une fonction. Cette fonction sera utilisée pour initier toutes les transitions. Commencez par vérifier s'il y a déjà un dos actif:
if (activeBack == null)
Cela empêche l'utilisateur de cliquer sur un autre carré lors d'une transition. S'il y a un dos actif, alors un clic devrait annuler cela, afin que nous puissions cliquer sur un autre carré:
if (activeBack == null) else activeBack = null;
En supposant qu'il n'y ait pas de retour actif, ajoutez à nouveau un if-block pour vérifier si l'objet sur lequel vous avez cliqué était un carré:
if (activeBack == null) if (squaresArray.indexOf (event.target)! = -1) else activeBack = null;
Si l'utilisateur a cliqué sur un carré, nous devons définir le dos correspondant comme étant le dos "actif". Depuis l'index de chaque élément dans backsArray [] correspond à l'index de chaque élément dans carrés, c'est simple:
if (activeBack == null) if (squaresArray.indexOf (event.target)! = -1) activeBack = backsArray [squaresArray.indexOf (event.target)] en tant que MovieClip; else activeBack = null;
Maintenant, nous avons juste besoin de déplacer l’actuel actif pour qu’il soit au-dessus de tout le reste:
if (activeBack == null) if (squaresArray.indexOf (event.target)! = -1) activeBack = backsArray [squaresArray.indexOf (event.target)] en tant que MovieClip; setChildIndex (activeBack, numChildren - 1); else activeBack = null;
C'est la dernière fonction que nous allons créer. Commençons par ajouter l’effet de mise à l’échelle lorsqu’un carré est survolé ou retiré:
fonction publique bounceUpdate (event: Event): void pour chaque (var square dans squareArray) if (square == activeSquare) if (square.scaleX <= 1.5) square.scaleX +=0.05; square.scaleY +=0.05; else if(square.scaleX >= 1) square.scaleX - = 0,05; square.scaleY - = 0,05;
Ici, nous avons créé une boucle for-each pour parcourir chaque carré du tableau et vérifier si c'est le carré actuellement actif. Si c'est le cas, nous le mettons à l'échelle jusqu'à ce qu'il soit supérieur ou égal à 1,5 fois sa taille normale; si ce n'est pas le cas, nous le réduisons jusqu'à ce qu'il retrouve sa taille normale. (Techniquement, ce code pourrait lui permettre d’être très légèrement plus petit que sa taille habituelle, mais cela est imperceptible en pratique.)
Maintenant, c’est là que certains d’entre vous iront à votre guise; Si vous créez Design 1, passez à l'étape 7a et si vous créez Design 2, passez à l'étape 7b..
Félicitations, vous avez choisi le design 1! Cette conception est simple et facile à suivre - en supposant que vous avez exactement quatre carrés et dos. Plus, et il devient un désordre de maintenir.
Nous allons utiliser une longue série de déclarations imbriquées if-else - très désordonnées, je sais. Mais laissez-moi vous dire le raisonnement derrière cela! Chaque dossier a une position de départ et une direction de transition différentes. En un mot, vous ne pouvez pas utiliser une seule boucle for pour déplacer tous les MovieClips à moins que vous ne disposiez d'une instruction if pour vérifier quel dossier bouge, d'une autre pour définir l'axe du mouvement (x ou y) et d'une troisième pour définir la vitesse (positive ou négative). D'accord, nous pourrions stocker toutes ces informations dans les propriétés des carrés ou quelque chose du genre, mais je pense que c'est une approche où "Keep It Simple, Stupid" s'applique.
if (activeBack == back0) if (back0.x < 0) back0.x += speed; else if(back0.x > -600) back0.x - = speed; if (activeBack == back1) if (back1.y < 0) back1.y += speed; else if(back1.y > -300) back1.y - = speed; if (activeBack == back2) if (back2.y> 0) back2.y - = vitesse; else if (back2.y < 300) back2.y += speed; if(activeBack == back3) if(back3.x > 0) back3.x - = speed; else if (back3.x < 600) back3.x += speed;
Le code est facile à comprendre. il regarde chaque arrière et le déplace sur la scène ou hors de la scène, dans la bonne direction, selon qu'il soit actif ou non.
Félicitations, vous avez choisi Design 2! Cette conception est beaucoup plus flexible et facilite grandement l'ajout de dos et l'utilisation de moins de code. Pour cette conception, nous utiliserons une autre boucle for-each pour examiner chaque retour dans la backsArray:
pour chaque (var dans backsArray) if (back == activeBack) if (back.y> 0) back.y - = speed; else if (back.y < 300) back.y += speed;
Maintenant, cela devrait être assez facile à comprendre. Il parcourt les dossiers et vérifie chacun pour voir s’il est actif. Si tel est le cas, le code le déplace vers le haut sur la scène et cesse de le faire une fois qu’il est complètement allumé (c’est-à-dire une fois qu’il est en mode lecture). y = 0 ou plus). Si le dos n'est pas actif, le code le redescend jusqu'à ce qu'il atteigne sa position de départ.
Voici un défi: étant donné 16 carrés (et 16 arrières), pouvez-vous faire en sorte que les carrés 1, 5, 9 et 13 effectuent la transition des arrières correspondants à partir de la gauche, les carrés 2, 6, 10 et 14 en font une transition à partir du haut, et ainsi de suite? Vous aurez besoin de combiner les deux approches, ainsi que de vérifier la position du carré actif / arrière dans son tableau.
Merci d'avoir pris le temps de lire ce tutoriel. J'espère que vous avez apprécié le produit fini et que vous avez appris quelque chose à faire des menus actifs et flexibles!
