Share
Arrêtez d'utiliser des menus statiques! La plupart des joueurs basent immédiatement leur impression initiale d'un jeu Flash sur le menu qu'ils voient lorsqu'ils le chargent. Démarquez-vous de la foule avec un menu actif!
Ce tutoriel a été publié pour la première fois en décembre 2011, mais a depuis été mis à jour avec des étapes supplémentaires expliquant comment rendre le code plus flexible.!
Le mot "statique" signifie essentiellement l'absence de changement. La majorité des menus que nous voyons dans les jeux Web manquent de changement, vous appuyez simplement sur Play et le jeu commence. De tels menus sont trop utilisés et font preuve de peu de créativité ou d'innovation..
Pour rendre un menu "actif", nous devons continuellement provoquer des changements. Donc, dans ce tutoriel, c’est exactement ce que nous allons accomplir: un menu qui change continuellement.
La première chose à créer est un nouveau fichier Flash (ActionScript 3.0). Définissez sa largeur sur 650 pixels, sa hauteur sur 350 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 menuSlides.fla.
Dans la section suivante, nous allons créer les neuf MovieClips utilisés dans le menu. Pour référence, voici une liste de toutes les couleurs utilisées dans ce didacticiel:
Pour commencer, nous allons créer les diapositives utilisées dans les transitions, mais avant de commencer, activons quelques 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 sur la scène et sélectionnez cette fois Aligner> Aligner sur la grille.
Maintenant nous pouvons commencer à dessiner! Sélectionnez l'outil Rectangle et dessinez un rectangle Light Gold de 650 pixels de large et de 350 pixels de haut (vous pouvez cliquer sur la scène en maintenant la touche Alt enfoncée pour faciliter la tâche). Maintenant, changez la couleur en or et dessinez des groupes de trois carrés de 20 x 20 pixels chacun, pour former la forme d'un L dans chaque coin:
Sélectionnez toute la scène, faites un clic droit et choisissez Convertir en symbole. Nommez le MovieClip goldSlide et assurez-vous que le type est MovieClip et l'enregistrement est en haut à gauche.
Pour gagner du temps et faciliter les choses, cliquez avec le bouton droit de la souris sur goldSlide MovieClip dans la bibliothèque et sélectionnez Dupliquer le symbole trois fois pour faire trois autres copies. Changez les couleurs des nouveaux MovieClips en bleu, vert et rouge, puis renommez les MovieClips en blueSlide, greenSlide et redSlide.
Avant de continuer, nous devrions ajouter du texte à chaque diapositive. Sur goldSlide, écrivez JOUER, sur blueSlide write INSTRUCTIONS, sur greenSlide écrire OPTIONS et sur redSlide écrire CRÉDITS.
Maintenant que le texte est en place, nous pouvons le séparer en faisant un clic droit dessus et en sélectionnant Briser deux fois; cela décomposera le texte en un remplissage qui facilitera la transition. De plus, en bonus, il n'y aura pas besoin d'intégrer une police si vous ne l'utilisez que pour le menu.!
Maintenant que nous avons dessiné les 4 diapositives, nous pouvons nous concentrer sur la sideButton MovieClip utilisé pour déplacer les diapositives à gauche ou à droite.
Tout d’abord, dessinez un rectangle de 30x60 pixels avec seulement un trait (sans remplissage), puis tracez des lignes diagonales à 45 degrés des coins supérieur droit et inférieur droit jusqu’à ce qu’elles s’emboîtent au milieu du côté opposé. Appliquez maintenant un remplissage gris mat au triangle:
Ensuite, supprimez les lignes, puis cliquez avec le bouton droit sur le triangle et sélectionnez Convertir en symbole. Nomme le sideButton, définir le type à Bouton et assurez-vous que l'enregistrement est dans le coin en haut à gauche.
Insérez maintenant trois images clés dans la timeline en cliquant dessus avec le bouton droit de la souris et en sélectionnant Insérer une image clé. Dans le cadre supérieur, sélectionnez le remplissage du triangle, accédez à l'onglet Windows et sélectionnez Couleur. Changer l'alpha à 50%. Sur le survol, répétez le même processus, mais définissez cette fois l'alpha sur 75%.
Nous pouvons maintenant commencer par les quatre boutons de cercle numérotés, pour passer directement à une diapositive particulière..
Pour commencer, dessinez un cercle blanc de 30 pixels sans trait. Convertissez-le en un symbole, nommez-le circleOne, et définir son type à Bouton et son point d'enregistrement au centre. Insérez trois images clés comme précédemment, puis passez au cadre supérieur..
Tracez un cercle noir de 25 pixels sans trait et centrez-le au centre en utilisant les coordonnées ou en utilisant le menu Aligner. Désélectionnez ensuite le cercle noir, resélectionnez-le et supprimez-le. Vous devriez maintenant avoir un anneau blanc restant. Maintenant, prenez l'outil texte et mettez un "1" blanc au centre de la bague. Puis séparez ce nombre jusqu'à ce que le remplissage soit complet.
Accédez au cadre supérieur et tracez un "1" noir. Centrez-le et brisez-le jusqu'à ce qu'il devienne un remplissage. Désélectionnez et resélectionnez le remplissage, puis supprimez-le. Sélectionnez tout ce qui est sur le cadre et copiez-le, puis allez dans le cadre bas, sélectionnez tout ce qui se trouve dessus et appuyez sur Supprimer. Coller dans ce que nous avons copié.
Maintenant, créez trois autres MovieClips de cercle, en suivant le même processus, pour les numéros 2, 3 et 4.
Ok, nous avons presque terminé! Faites d'abord glisser toutes les diapositives sur la scène et positionnez-les avec les coordonnées suivantes:
Maintenant, faites glisser et déposez deux copies du sideButton. Le premier exemplaire doit être placé à (10 145); avant de pouvoir positionner la deuxième copie, nous devons d'abord la retourner!
Sélectionnez la deuxième copie et appuyez sur Ctrl-T. Changer le gauche-droite à -100% et laisser le haut-bas à 100%. Maintenant, déplacez la deuxième copie vers (640,145).
Enfin, faites glisser les quatre clips MovieClips et positionnez-les comme suit:
Votre scène devrait maintenant ressembler à ceci:
Les diapositives bleue, verte et rouge sont cachées juste à droite de la scène. Sélectionnez maintenant tout sur la scène et convertissez-le en symbole. Nomme le menuSlidesMC, définissez le type sur MovieClip et l'enregistrement dans le coin supérieur gauche, puis exportez-le au format ActionScript en tant que MenuSlidesMC.
Avant de terminer, nous devons donner chacun des MovieClips à l'intérieur menuSlidesMC un nom d'instance. Sélectionnez chaque diapositive dans leur ordre de gauche et nommez-les. slide1, slide2, slide3 et slide4 respectivement. Nommez les boutons du cercle un, deux, Trois et quatre, et enfin nommer les boutons latéraux la gauche et droite.
Maintenant que tous nos MovieClips ont été créés, 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 réglez sa classe sur menuSlides; puis, créez un nouveau fichier ActionScript 3.0 et enregistrez-le sous le nom suivant: menuSlides.as.
Maintenant, copiez le code suivant dans celui-ci; Je vais l'expliquer après:
package import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; classe publique menuSlides étend MovieClip public var menuSlidesMC: MenuSlidesMC = new MenuSlidesMC (); fonction publique menuSlides () addChild (menuSlidesMC);
Assez basique - c'est une classe de document dans laquelle nous avons importé les MovieClips et les événements que nous allons utiliser. Ensuite, nous avons créé une instance de MenuSlidesMC, et l'a ajouté à la scène.
Créez maintenant un nouveau fichier ActionScript 3.0 pour le menuSlidesMC exemple. Enregistrez-le sous MenuSlidesMC.as et copiez-y le code suivant:
package import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; Classe publique MenuSlidesMC étend MovieClip public var speed: Number = new Number (); public var activeSlide: Number = new Number (); fonction publique MenuSlidesMC () speed = 10; activeSlide = 1; addEventListener (MouseEvent.CLICK, slidesClick); addEventListener (Event.ENTER_FRAME, slidesMove);
Comme la dernière fois, nous avons importé ce dont nous aurons besoin, mais nous avons créé deux variables numériques. La première variable, la vitesse, est en fait le nombre de pixels des diapositives déplacées par chaque image. (Remarque: ce nombre doit être divisé de manière égale dans la largeur de votre scène pour permettre une transition en douceur). La deuxième variable, activeSlide, nous dit quelle diapositive est actuellement configurée pour être à l'écran.
Nous avons également ajouté deux écouteurs d'événements pour les fonctions que nous allons créer. l'un d'eux est appelé sur un clic de souris, et l'autre est appelé au début de chaque image.
Pour commencer, la fonction de clic de souris sera désactivée. Commencez par créer une fonction publique nommée slidesClick ():
fonction publique slidesClick (event: MouseEvent): void
Ensuite, nous allons créer des déclarations if concernant la event.target.name. Fondamentalement, cette propriété stocke le nom de l'objet ciblé par le clic de souris. Nous pouvons l'utiliser pour vérifier quel bouton est enfoncé:
if (event.target.name == "left") if (activeSlide> 1) activeSlide- = 1; else if (event.target.name == "right") if (activeSlide<4) activeSlide+=1; if(event.target.name == "one") activeSlide=1; else if(event.target.name == "two") activeSlide=2; if(event.target.name == "three") activeSlide=3; else if(event.target.name == "four") activeSlide=4;
Le code ci-dessus va dans le slidesClick () une fonction. Le premier ensemble d'instructions if concerne les boutons gauche et droit; ils augmentent ou diminuent la valeur de activeSlide, mais ne permettez jamais à la valeur de devenir inférieure à 1 ou supérieure à 4 (puisque nous n’avons que quatre diapositives). La deuxième série d’instructions if concerne les boutons de cercle; au lieu d’incrémenter ou de décrémenter la valeur de activeSlide ils le mettent à la valeur sélectionnée.
Commençons par le ENTER_FRAME fonction de gestionnaire:
fonction publique slidesMove (event: event): void
Ajouter le slidesMove () fonctionner en dessous de votre slidesClick () fonction et nous allons commencer à ajouter du code. Tout d'abord, nous allons utiliser un commutateur vérifier quelle diapositive doit apparaître à l'écran, en fonction de la valeur de activeSlide:
commutateur (activeSlide) cas 1: pause; cas 2: pause; cas 3: pause; cas 4: pause;
Maintenant, dans chaque cas, nous allons créer un bloc if / else qui vérifiera la position x actuelle de cette diapositive et tout des diapositives soit à gauche, à droite ou pas du tout, selon l'emplacement actuel de la diapositive souhaitée.
Le premier cas ressemble à ceci:
si (slide1.x<0) slide1.x+=speed; slide2.x+=speed; slide3.x+=speed; slide4.x+=speed; else if(slide1.x>0) slide1.x- = speed; slide2.x- = vitesse; slide3.x- = vitesse; slide4.x- = vitesse;
Il ne nous reste plus qu'à répéter le même processus pour les autres cas! Une fois que vous avez terminé votre swtich devrait ressembler à ceci:
commutateur (activeSlide) cas 1: if (slide1.x<0) slide1.x+=speed; slide2.x+=speed; slide3.x+=speed; slide4.x+=speed; else if(slide1.x>0) slide1.x- = speed; slide2.x- = vitesse; slide3.x- = vitesse; slide4.x- = vitesse; Pause; cas 2: si (slide2.x<0) slide1.x+=speed; slide2.x+=speed; slide3.x+=speed; slide4.x+=speed; else if(slide2.x>0) slide1.x- = speed; slide2.x- = vitesse; slide3.x- = vitesse; slide4.x- = vitesse; Pause; cas 3: si (slide3.x<0) slide1.x+=speed; slide2.x+=speed; slide3.x+=speed; slide4.x+=speed; else if(slide3.x>0) slide1.x- = speed; slide2.x- = vitesse; slide3.x- = vitesse; slide4.x- = vitesse; Pause; cas 4: si (slide4.x<0) slide1.x+=speed; slide2.x+=speed; slide3.x+=speed; slide4.x+=speed; else if(slide4.x>0) slide1.x- = speed; slide2.x- = vitesse; slide3.x- = vitesse; slide4.x- = vitesse; Pause;
Et c'est tout! Nous avons tous terminé avec le code et le menu devrait bien fonctionner en ce moment.
… Mais attendez, si nous voulons ajouter plus de diapositives ou en enlever?
Pour le moment, notre code n’est pas très flexible à cause de tous ces codes codés en dur. si déclarations. Faisons donc quelque chose de gras: supprimez tout le code de la fonction slidesMove () car nous n'en aurons plus besoin, et supprimez également les instructions if des boutons de cercle, car nous allons également les optimiser..
Maintenant, déclarez une nouvelle variable (en dessous de la vitesse et activeSlides):
public var slidesArray: Array = new Array ();
La première variable, slidesArray, sera un tableau contenant toutes nos diapositives, ce qui nous permettra d’y accéder en référençant un élément du tableau (afin que nous puissions utiliser slidesArray [2] au lieu de slide3).
Une chose à noter est que le premier élément d'un tableau reçoit un index de 0, nous devrons donc apporter des modifications à nos noms d'instance.
Sélectionnez chaque diapositive dans leur ordre de gauche et nommez-les. slide0, slide1, slide2 et slide3, respectivement. Et pour nous aider à réduire le nombre de lignes de code que nous utilisons, sélectionnez chaque bouton de cercle dans leur ordre de gauche et nommez-les. cercle0, cercle1, cercle2 et cercle3, respectivement.
Si vous souhaitez ajouter plus de diapositives et de boutons, le moment est venu de le faire. Il suffit de positionner les diapositives supplémentaires à la fin de la rangée de diapositives, puis de leur donner des noms d'occurrences du même ordre. Faites de même pour les boutons de cercle.
Maintenant que les noms d'instance sont corrects, nous devons ajouter les diapositives au tableau. Faites-le en ajoutant le code suivant à votre constructeur:
slidesArray = [slide0, slide1, slide2, slide3, slide4, slide5];
Maintenant, les diapositives sont dans le tableau et sont accessibles par leur index dans le tableau. Par exemple, slidesArray [0] est équivalent à slide0 parce que c'est le premier élément de la liste.
Ensuite, dans la déclaration "right" else-if, remplacez la condition par:
si (activeSlide < slidesArray.length-1)
La valeur de slidesArray.length est égal au nombre d'éléments dans le tableau, cette nouvelle condition va donc nous permettre d'appuyer sur le bouton et de décaler les diapositives tant que la diapositive active n'est pas la diapositive finale.
Maintenant, quand on clique sur un bouton de cercle, nous devons déterminer de quoi il s'agit (et à quelle diapositive il fait référence).
Créez un tableau pour contenir tous les boutons de cercle. Tout d’abord, définissez-le sous le tableau de diapositives:
public var slidesArray: Array = new Array (); public var circlesArray: Array = new Array ();
Ensuite, ajoutez les boutons de cercle au tableau dans le constructeur:
circlesArray = [circle0, circle1, circle2, circle3, circle4, circle5];
Passons maintenant au slidesClick () fonction, sous le bloc if-else entier. Nous allons vérifier si le bouton sur lequel vous avez cliqué est dans le tableau des boutons de cercle:
if (circlesArray.indexOf (event.target)! = -1)
La fonction indexOf () du tableau vérifie si un objet est présent dans le tableau. sinon ça retourne -1. Donc, nous vérifions si c'est ne pas égal à -1, qui vérifiera pour voir si est dans le tableau.
En supposant que ce soit le cas, le Indice de() fonction retournera l’index du bouton dans le tableau des boutons de cercle - donc, si cercle3 a été cliqué, circlesArray.indexOf (event.target) sera égal à 3. Cela signifie que nous pouvons simplement définir activeSlide à 3, et nous avons terminé!
if (circlesArray.indexOf (event.target)! = -1) activeSlide = circlesArray.indexOf (event.target);
La seule chose qui reste à faire est de déplacer toutes les diapositives. Commencez par ajouter la même boucle que précédemment, dans le slidesMove () une fonction:
pour (var i: int = 0; i < slidesArray.length; i++)
Une déclaration if-else doit être ajoutée maintenant; cela utilisera la variable activeSlide sélectionner une diapositive dans le tableau et vérifier où se trouve sa position x, comme avant.
if (slidesArray [activeSlide] .x<0) else if(slidesArray[activeSlide].x>0)
Puisque activeSlide est un numéro, slidesArray [activeSlide] fait référence à une diapositive spécifique, donc slidesArray [activeSlide] .x est égal à la position x de cette diapositive.
Dans le premier cas, nous ajouterons un pour boucle pour déplacer tous les clips à droite, et dans le second cas nous ajouterons un pour boucle pour déplacer tous les clips à gauche.
Droite:
pour (var j: int = 0; j < slidesArray.length; j++) slidesArray[j].x+=speed;
La gauche:
pour (var k: int = 0; k < slidesArray.length; k++) slidesArray[k].x-=speed;
Si vous testez cela maintenant, vous remarquerez que notre code optimisé a conduit à une interface beaucoup plus rapide.!
Si vous voulez aller encore plus loin, vous pouvez utiliser un pour boucle pour positionner les diapositives et les cercles, sans avoir à les glisser-déposer dans l'IDE Flash. Par exemple, pour positionner les diapositives, nous aurions d'abord la position slide0 dans le constructeur:
slidesArray = [slide0, slide1, slide2, slide3, slide4, slide5]; slidesArray [0] .x = 0; slidesArray [0] .y = 0;
Ensuite, nous parcourions toutes les autres diapositives en commençant par slide1:
slidesArray = [slide0, slide1, slide2, slide3, slide4, slide5]; slidesArray [0] .x = 0; slidesArray [0] .y = 0; pour (var i: int = 1; i < slidesArray.length; i++)
Nous pouvons donner à toutes les diapositives une position y de 0:
slidesArray = [slide0, slide1, slide2, slide3, slide4, slide5]; slidesArray [0] .x = 0; slidesArray [0] .y = 0; pour (var i: int = 1; i < slidesArray.length; i++) slidesArray[i].y = 0;
… Et ensuite nous pouvons définir la position x de chaque diapositive à 620px à droite de la diapositive précédente:
slidesArray = [slide0, slide1, slide2, slide3, slide4, slide5]; slidesArray [0] .x = 0; slidesArray [0] .y = 0; pour (var i: int = 1; i < slidesArray.length; i++) slidesArray[i].x = slidesArray[i-1].x + 620; slidesArray[i].y = 0;
Si vos diapositives ne font pas 620 pixels de large, vous pouvez même détecter automatiquement leur largeur.!
slidesArray = [slide0, slide1, slide2, slide3, slide4, slide5]; slidesArray [0] .x = 0; slidesArray [0] .y = 0; pour (var i: int = 1; i < slidesArray.length; i++) slidesArray[i].x = slidesArray[i-1].x + slidesArray[i-1].width; slidesArray[i].y = 0;
Vous pouvez faire la même chose avec les boutons de cercle, mais je vous laisse le soin d’expérimenter.
L'avantage, c'est que vous pouvez ajouter autant de diapositives que vous le souhaitez au menu. tout ce que vous avez à faire est de les ajouter au tableau, et ils seront traités par ce code.
(Vous pouvez également supprimer des diapositives du tableau, mais elles ne seront affectées par aucun code, vous aurez donc probablement besoin de les repositionner dans l'IDE Flash.)
Merci d’avoir pris le temps de lire le didacticiel, j’espère que cela a été utile et que vous avez appris quelque chose sur les menus de jeux actifs..
Accentsconagua