Share
Dans cette astuce, vous apprendrez à utiliser la classe Tween d'AS3 pour créer un menu avec une barre de défilement sympa. Excellent pour la navigation!
Jetons un coup d'œil au résultat final sur lequel nous allons travailler:
Démarrer un nouveau document Flash Actionscript 3.0 au format 600 x 300 pixels.
Tout d'abord, sélectionnez l'outil Texte et tapez votre menu de navigation. Par souci de ce tutoriel, j'ai utilisé Bouton 1 | Bouton 2 | Bouton 3 | Bouton 4, en utilisant "Arista Light" à 30pt pour la police et # 999999 pour la couleur.
Ensuite, allez dans l’onglet d’alignement (si vous ne le voyez pas, cliquez sur Fenêtre> Aligner) puis alignez le texte verticalement et horizontalement sur votre scène.
Renommez le calque existant en "Texte" et verrouillez-le pour éviter tout déplacement accidentel du texte. Créez ensuite un nouveau calque appelé "Boutons". Sélectionnez l'outil Rectangle et faites glisser un rectangle (de n'importe quelle couleur) sur le "Bouton 1" afin qu'il soit parfaitement ajusté aux bords. Ce sera la zone de succès pour votre élément de menu.
Sélectionnez le rectangle que vous venez de dessiner, cliquez sur Modifier> Convertir en symbole et nommez-le bouton. Assurez-vous que le point d’inscription est au centre (vous devrez peut-être utiliser à nouveau le panneau Aligner)..
Ensuite, dans le panneau Propriétés, attribuez à ce bouton le nom d’instance suivant: bouton1 et mettre l'alpha à 0%.
Copiez et collez votre nouveau bouton "invisible" sur les trois autres boutons et donnez-leur le nom d'occurrence de bouton2, bouton3 et bouton4 respectivement. Utilisez l'outil Free Transform pour les étirer ou les réduire de sorte que chacun d'eux s'ajuste parfaitement sur son élément de menu, sans espace entre eux..
Sélectionnez à nouveau l'outil Rectangle, définissez les coins arrondis sur 5 pixels et tracez un rectangle de 4 pixels de haut et de la largeur du premier bouton..
Placez-le sous votre premier bouton, cliquez sur Modifier> Convertir en symbole et nommez-le bar. Encore une fois, assurez-vous que le point d’inscription est au centre.
Donnez-lui un nom d'instance de bar et un alpha de 0%, tout comme les boutons. Verrouillez le calque des boutons et créez un nouveau calque appelé actes; verrouiller ceci aussi. Maintenant, faites un clic droit sur la première image de votre nouvelle actes couche et cliquez actes.
// Les classes d'importation nécessaires pour l'interpolation import fl.transitions.Tween; import fl.transitions.easing. *;
Nous allons utiliser le Tween classe pour déplacer la barre à l’aide de code, importez-la. le assouplissementpackage est également nécessaire, afin que nous puissions spécifier le type exact de mouvement d'interpolation à utiliser.
// Définit la variable d'interpolation pour la position "x" de la barre. Var barX: Tween; // Définit la variable d'interpolation pour le fade-in var de la barre barAlphaIn: Tween; // Définit la variable tween pour le fondu de sortie de la barre var barAlphaOut: Tween; // Définit la variable d'interpolation pour la largeur des barres var barWidth: Tween;
Définir les variables que nous allons utiliser pour interpoler la barre.
// Ajoute un écouteur d'événement pour le survol du bouton 1 button1.addEventListener (MouseEvent.ROLL_OVER, rollOverHandler); // Ajouter un écouteur d'événement pour le déploiement du bouton 1 button1.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler); // Ajoute un écouteur d'événement pour le survol du bouton 2 button2.addEventListener (MouseEvent.ROLL_OVER, rollOverHandler); // Ajoute un écouteur d'événement pour le déploiement du bouton 2 button2.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler); // Ajoute un écouteur d'événement pour le survol du bouton 3 button3.addEventListener (MouseEvent.ROLL_OVER, rollOverHandler); // Ajoute un écouteur d'événement pour le déploiement du bouton 3 button3.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler); // Ajoute un écouteur d'événement pour le survol du bouton 4 button4.addEventListener (MouseEvent.ROLL_OVER, rollOverHandler); // Ajoute un écouteur d'événement pour le déploiement du bouton 4 button4.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler);
Cela peut ressembler à beaucoup de code mais il est en réalité très simple.
Nous ajoutons d’abord un écouteur d’événement qui écoute la souris pour survoler button1, puis exécute le rollOverHandler une fonction. Ensuite, nous ajoutons un autre écouteur d'événement qui écoute la souris pour lancer en dehors de button1 et exécute le rollOutHandler une fonction.
Nous venons de répéter ces auditeurs pour les quatre boutons.
// Fonction d'exécution pour la fonction d'événement de substitution rollOverHandler (e: MouseEvent): void // Ajuste la position "x" de la barre sur la même chose que le bouton. Les paramètres sont les suivants: // objet à interpoler (c'est-à-dire animer) // propriété de l'objet à interpoler // type d'accélération (type de mouvement) à utiliser // valeur initiale (c'est-à-dire valeur pour interpoler la propriété de) // fin valeur (c'est-à-dire la valeur avec laquelle la propriété se retrouvera une fois l'interpolation terminée) // durée de l'interpolation // s'il faut mesurer la durée en secondes (true) ou en images (false) barX = new Tween (bar, "x", Back. easyOut, bar.x, e.target.x, 1, true); // Tween l'alpha de la barre pour la faire disparaître barAlphaIn = new Tween (bar, "alpha", Regular.easeOut, bar.alpha, 1, 1, true); // Tween la largeur de la barre pour qu'elle devienne identique à celle du boutonWidth = new Tween (barre, "width", Regular.easeOut, bar.width, e.target.width, 1, true); // Fonction d'exécution pour la fonction d'événement de déploiement rollOutHandler (e: MouseEvent): void // Tween l'alpha de la barre pour le faire disparaître progressivement barAlphaOut = new Tween (bar, "alpha", Regular.easeOut, bar.alpha, 0, 1, vrai);
Quand on survole un bouton, la fonction rollOverHandler est exécuté, ce qui va interpoler la barre de sa position x actuelle à la position x du bouton en cours de survol. (Remarque: e.target fait toujours référence au bouton qui a déclenché la rollOverHandler fonction.) Ceci donne à la barre un bon mouvement horizontal lisse.
Ensuite, il passe l'alpha de la barre de son alpha actuel à 1 (100% alpha) et la largeur de sa largeur actuelle à la largeur du bouton qui a déclenché la fonction de gestionnaire..
Lorsque nous sortons du bouton, la fonction rollOutHandler est exécuté et la barre est effacée de son alpha actuel à 0 (totalement transparent).
Étant donné que les boutons s’emboîtent parfaitement les uns dans les autres, vous ne verrez la barre disparaître que si vous la sortez de la mémoire. tout les éléments de menu à la fois, sinon il va fondre à nouveau trop tôt pour que vous puissiez le repérer!
Vous devriez maintenant avoir quelque chose de similaire à l'aperçu. Génial! Vous avez appris à utiliser la classe Tween dans ActionScript 3.0 pour créer une animation de menu efficace qui attirera l'attention des visiteurs et se démarquera des menus classiques. Les possibilités sont infinies.
Etape suivante: pourquoi pas ajouter un MouseEvent.CLICK écouteur et gestionnaire à chaque bouton pour permettre à l'utilisateur de déclencher différentes actions en un clic?
J'espère que vous avez apprécié ce tutoriel et merci d'avoir lu.
Accentsconagua