Share
Imaginez que vous ayez promis à votre client qu'il aurait cette idée de menu dont vous lui avez parlé plus tard aujourd'hui, lorsque vous vous rencontrerez. Vous ouvrez Flash et commencez un exemple approximatif mais formidable, que vous pourrez coder ou étendre ultérieurement. Au cours de cette discussion, nous nous concentrerons sur la création d’un tel menu; aussi personnalisable que possible, sans utiliser de classes, juste des paramètres de composant.
Créez un nouveau fichier Flash ActionScript 3 et définissez les dimensions sur 960 x 70 pixels. Le menu ira très bien sur un modèle HTML 960.gs pour le site Web de votre client. Réglez le nombre d'images par seconde sur 25 images par seconde. Pour garder les choses rapidement, nous n'utiliserons pas une classe de document ici; nous nous en tiendrons à l'IDE Flash.
Nous aurons cinq boutons principaux avec des sous-menus, comme dans le schéma ci-dessous:
Créez un rectangle aux dimensions 192 x 40px. Je suis venu avec la largeur en divisant 960 par 5 boutons. Colorez-le avec un dégradé linéaire avec les couleurs suivantes:
Appuyez sur "F8" pour transformer le rectangle en clip, et nommez-le "bouton".
Double-cliquez sur le bouton que vous venez de créer et ajoutez deux autres cadres. Ce seront les plus de et vers le bas états du bouton. Nous utiliserons un clip et y ajouterons des actions au lieu d'un bouton afin de rendre les boutons de sous-menu cliquables. Si vous deviez utiliser un bouton, un clic sur un bouton de sous-menu déclencherait un clic sur le bouton du menu principal..
Pour le deuxième cadre (l'état "survolté" du menu), modifiez les couleurs du dégradé comme dans l'image:
Faites la même chose pour la troisième image (l'état "bas" du menu) avec les couleurs suivantes:
Renommez le premier calque en "arrière" et au-dessus, créez trois calques supplémentaires nommés "label", "bar" et "actions", respectivement..
Verrouillez le calque actions, puis créez un nouveau champ de texte dynamique nommé "label_txt" dans le calque label. Ce sera l'étiquette du bouton. Le texte du bouton sera différent en fonction du réglage du MovieClip sur la scène. Pour cela, nous allons utiliser les paramètres de composant. Ainsi, au lieu de copier le bouton cinq fois, nous pouvons réutiliser le composant et n’aurons besoin que de changer une variable..
Avec l'outil Ligne, créez deux lignes adjacentes avec les couleurs suivantes et transformez-les en un seul clip appelé "barre". Placez ce MovieClip exactement à 190px sur l’axe des x (utilisez le panneau Propriétés). Ce sera le séparateur de boutons, ce qui ajoutera une séparation spatiale entre les boutons de menu. Nous transformons cela en un MovieClip pour pouvoir le cacher plus tard, pour le dernier bouton.
Retournez sur la scène principale et dans la bibliothèque, cliquez avec le bouton droit de la souris sur le bouton MovieClip et sélectionnez "Définition du composant…".
Ajoutez les paramètres de composant suivants:
Ces paramètres sont ensuite accessibles dans les actions du clip en tant que variables. Nous allons utiliser la chaîne "textvar" pour nommer le menu, la "hidebar" booléenne pour masquer le séparateur et la chaîne "submenu" en tant que nom de liaison du clip du sous-menu correspondant..
Maintenant, retournez dans le clip "bouton" et dans le calque actions, appuyez sur "F9" pour ouvrir la fenêtre Actions, puis entrez le code suivant:
this.useHandCursor = true; this.trackAsMenu = true; this.stop (); if (this.textvar) label_txt.text = this.textvar; if (this.hidebar) bar.visible = false; label_txt.mouseEnabled = false; var sb = false; this.addEventListener (MouseEvent.ROLL_OVER, terminé); this.addEventListener (MouseEvent.ROLL_OUT, out); this.addEventListener (MouseEvent.MOUSE_DOWN, en bas); this.addEventListener (MouseEvent.MOUSE_UP, up); fonction sur (e: MouseEvent) gotoAndStop (2); function out (e: MouseEvent) gotoAndPlay (1); function down (e: MouseEvent) gotoAndStop (3); function up (e: MouseEvent) gotoAndStop (2);
Laissez-moi vous expliquer le code:
Nous définissons la propriété "useHandCursor" sur true et "trackAsMenu" sur true. Le premier fait que le curseur se transforme en une main lorsque le curseur est placé sur le bouton et le second indique au clip de se comporter comme un menu. Cela garantit que les événements ultérieurs sur les enfants n'affecteront pas le clip principal.
Nous arrêtons la chronologie afin que nous puissions avoir la fonctionnalité des boutons et définir "mouseEnabled" sur false pour le champ de texte "label_txt". Sinon, le champ de texte affichera les événements ROLL_OVER et le menu sera soudainement déployé. Fondamentalement, cela désactive l'interactivité avec la souris pour le champ de texte.
Ensuite, nous vérifions si la variable "textvar" est définie, et si c'est le cas, nous l'affectons au champ de texte texte propriété. Assez simple. Nous faisons la vérification parce que nous pouvons laisser le paramètre vide et dans ce cas nous obtenons une erreur.
Nous faisons la même vérification avec la propriété "hidebar". Si nous sélectionnons true, nous masquerons le clip de la barre.
Enfin, nous faisons le plus de, en dehors, vers le bas et en haut fonctions et ajouter des événements au clip en le transformant en bouton. Il est important d'utiliser les événements "ROLL_OVER" et "ROLL_OUT" au lieu des événements "MOUSE_OVER". J'ai essayé ceci avec "MOUSE_OVER" et c'était un désordre, parce que "MOUSE_OVER" était déclenché à chaque fois que la souris bougeait, créant ainsi un effet de scintillement.
Nous sommes prêts à effectuer un test. Supprimez le bouton de la scène et ajoutez-le à nouveau à la bibliothèque à (0,0) px. Pour le type de paramètre "textvar" Accueil:
Ajoutez les autres boutons, avec une distance de 192px entre eux, les valeurs "textvar" suivantes et définissez "hidebar = true" pour le dernier bouton:
Nous pouvons tester le film pour le voir fonctionner jusqu'à présent:
Génial! Les légendes apparaissent et les boutons réagissent à la souris.
Nous allons commencer à créer le sous-menu. Ce sous-menu sera dupliqué pour chaque sous-menu possible. Créez un rectangle de 550 x 30 comme sur la photo, appuyez sur "F8" et nommez-le "sbmenu1". Assurez-vous de cocher la case Exporter pour Actionscript et attribuez-lui un nom de liaison (Classe) de "sbmenu1"..
Encore une fois, comme dans le premier MovieClip, créez trois couches supplémentaires et nommez-les "cercle", "boutons" et "actions".
Déplacez le rectangle à 30px sur l'axe des x. Nous utiliserons le 30px pour construire l'arrondi du sous-menu.
Créez un cercle de 60 pixels (maintenez la touche «Shift» enfoncée pour créer un cercle parfait. Vous pouvez également utiliser l'outil de cercle et maintenez la touche Alt enfoncée tout en cliquant sur la scène pour obtenir un dialogue demandant la taille exacte) et positionnez-le à (-30, -30) px. . Tracez une ligne verticale passant par (0,0) px pour traverser le milieu du cercle, sélectionnez la moitié droite du cercle et supprimez-le, comme sur l'image ci-dessous..
Supprimez la ligne, puis avec le demi-cercle sélectionné, appuyez à nouveau sur «F8» et transformez-le en symbole graphique. Veillez à sélectionner le bon point d’inscription central, car nous voudrons animer la rotation du cercle à partir de son centre..
Faites pivoter le graphique du cercle de 90 ° par rapport aux boutons, mais avant cela, utilisez l'outil Transformation libre pour faire glisser le point central de la rotation vers le centre du cercle, comme dans l'image, et définissez sa position sur 30 sur l'axe des x:
Créez une autre image avec "F6" après quatre images et faites-la pivoter d'un quart dans le sens anti-horaire. Puis faites un clic droit sur la ligne de temps entre les images et sélectionnez "Créer une interpolation".
Verrouillez les autres calques et sélectionnez le calque "retour". Déplacez la première image en même temps avec la dernière image circulaire et prolongez le montage avec une autre image clé ("F6"), comme dans l'image. Sélectionnez la première image et modifiez la taille du rectangle en 5 pixels, puis cliquez avec le bouton droit de la souris sur les images clés et sélectionnez "Créer une interpolation de forme":
Si vous déplacez la tête de lecture, le sous-menu s'anime, mais le cercle est toujours visible. Créez un rectangle de 30 x 30 pixels sur le calque de masque à (0,0) px, puis cliquez avec le bouton droit sur le calque de masque et sélectionnez Masque:
Dans le calque "actions", créez une image vide dans la même image que l'animation se terminera, appuyez sur "F9" pour ouvrir le panneau Actions et écrivez un "stop ();" commande, de sorte que l'animation du menu ne se répète pas. Vous devriez avoir une belle animation de sous-menu.
Créez un rectangle noir de 130 x 30 pixels et appuyez sur "F8" pour le convertir en un nouveau symbole. Appeler menuubtn. Cette fois, nous choisirons Button comme type. Nous faisons en fait la même chose qu'au début: créer un bouton avec trois états, puis l'enrouler dans un moveiclip principal contenant un champ de texte d'étiquette, que nous contrôlerons avec un paramètre personnalisé..
Déplacez le rectangle sur la deuxième image (Plus de) et dupliquer le cadre. Vous pouvez créer différentes couleurs pour le survol et le bas, mais je suis pressé maintenant :). Lorsque vous revenez au sous-menu, sélectionnez le bouton et appuyez à nouveau sur "F8" pour en faire un clip vidéo. Appeler sub_btn. Vous remarquerez que le bouton est un bleu transparent; cela signifie qu'il n'a pas l'état "Up", c'est un bouton transparent.
Comme auparavant, entrez le MovieClip "sub_btn" et créez deux autres calques: un calque "label" et un calque "actions". Dans la couche d'étiquettes, créez un champ de texte dynamique, définissez l'alignement sur le centre, la couleur sur le blanc (ce texte sera noir) et nommez-le "label_txt"..
Dans le calque actions, collez le code ActionScript suivant:
Arrêtez(); this.label_txt.mouseEnabled = false; this.label_txt.text = this.textvar;
Cliquez avec le bouton droit sur le sous-bouton MovieClip, sélectionnez "Définition du composant" et ajoutez le paramètre "textvar":
Maintenant que nous avons créé le bouton personnalisé, créons plus de boutons de sous-menu et attribuez-leur un nom:
Les choses vont bien maintenant, mais le sous-menu n'apparaît pas, dites-vous. C'est parce que nous devons coder l'apparence du sous-menu dans le plus de fonction du bouton principal. Déclarez une nouvelle variable "sb" qui contiendra notre sous-menu après la ligne "label_txt.mouseEnabled = false;"
var sb = false;
Remplacez les deux derniers écouteurs d'événement par ce code:
if (! this.submenu) this.addEventListener (MouseEvent.MOUSE_DOWN, bas); this.addEventListener (MouseEvent.MOUSE_UP, up);
Cela ajoutera les auditeurs "bas" et "haut" uniquement lorsque le bouton n'a pas de sous-menu.
Dans la fonction "over ()", ajoutez ce morceau de code:
if (this.sousmenu! == "&&! sb) var cn = getDefinitionByName (this.sousmenu); sb = new cn (); sb.y = 40; sb.x = (this.offset)? this.offset : 0; this.addChild (sb); if (sb) sb.visible = true;
Laissez-moi vous expliquer le code:
Nous vérifions si le paramètre de sous-menu est défini; Si tel est le cas, nous obtenons une référence à un nom de classe en utilisant "getDefinitionByName". Cette fonction affecte à la variable "cn" un type de classe. C'est le moyen d'instancier une classe à partir d'un nom de chaîne. Si vous essayez d'instancier une variable chaîne avec le mot clé "new", cela ne fonctionnera pas.
Après avoir instancié le sous-menu, nous le configurons sur 40px sur l’axe des y pour qu’il se trouve en dessous du bouton et nous l’ajoutons à la liste d’affichage du bouton..
Enfin, nous vérifions à nouveau si sb existe et nous le rendons visible. En effet, l'instanciation ne se produit qu'une seule fois, mais si la souris entre dans un autre bouton, la fonction out () sera appelée et nous masquerons le MovieClip "sb". La prochaine fois que vous appuierez sur le bouton, le MovieClip existe déjà. si la condition est ignorée et nous ne la montrons que. Cette optimisation accélère notre menu en réduisant la consommation de mémoire..
Nous sommes prêts! Entrez simplement "sbmenu1", le nom de liaison du deuxième bouton, comme sous-menu paramétrer et tester le menu. Vous devriez avoir un bon menu. A partir de là, vous pouvez configurer des gestionnaires de clic pour les boutons, afin de leur permettre de faire ce que vous voulez..
Pour vous montrer la puissance de l'extensibilité, dupliquez le clip vidéo "sbmenu1" et renommez-le "sbmenu2". Nous allons ajouter ceci au bouton Contact.
J'ai changé les boutons pour autre chose, et mis le cercle arrondi au bon endroit en modifiant les tweens.
Il ne nous reste plus qu'à configurer le paramètre de sous-menu pour le bouton de contact et nous aurons un bon menu!
Nous avons un beau croquis à montrer à notre client. Il se fera un plaisir de l'utiliser pour représenter son entreprise d'architecture et m'accordera éventuellement un rabais sur ma nouvelle maison :)
Nous avons atteint la fin du tutoriel. Si vous avez aimé, s'il vous plaît commenter! J'ai essayé de le rendre aussi intuitif que possible. Merci de rester jusqu'à la fin!
Accentsconagua