Share
Ce tutoriel est né après avoir cherché en ligne de l'aide sur le même sujet. Beaucoup de gens semblent poser la même question, mais il était difficile de trouver un ensemble d'instructions bien emballé à suivre..
Donc, comme n'importe quel internaute décent, j'ai bricolé cet article, m'inspirant de quelques autres blogs et utilisant l'expérience de quelques essais et erreurs par moi-même. Et maintenant je vous l'offre, espérant que cela mettra fin à votre propre recherche.
Ce tutoriel utilise Flash CS4 en combinaison avec ActionScript 3.0, mais vous pouvez appliquer ces principes dans Flash CS3. Cela suppose que vous maîtrisez déjà très bien la création d’animations dans la chronologie et que vous compreniez bien comment appliquer du code ActionScript à la chronologie..
L’objectif est d’avoir un bouton de navigation en forme d’onglet, niché sur le côté, pour revenir en arrière dans une présentation d’image. Je veux qu'il s'ouvre, change de couleur et affiche son étiquette. Lorsque l'utilisateur clique dessus, il recule d'une diapositive. Si l'utilisateur passe la souris avant de cliquer dessus, il reviendra à sa position et à sa couleur d'origine..
Remarque: n'oubliez pas de sauvegarder souvent pour éviter de repartir de zéro en cas de problème..
Flash vous permet de créer un symbole de bouton, mais il est limité à trois états: Au-dessus de et Vers le bas. Il y a aussi Frappé qui définit la zone interactive autour du bouton. C'est bien pour la plupart des utilisations d'un simple bouton. En fait, ce symbole de bouton est en fait un membre du SimpleButton classe. Mais que se passe-t-il si vous souhaitez modifier l'apparence du bouton ou l'animer lorsque l'utilisateur survole la souris, puis quitte la souris sans cliquer? Dans ce cas, vous aurez besoin d’un quatrième état appelé En dehors.
Le symbole du bouton intégré n'a malheureusement pas d'état sortant.
À retenir: tout symbole, comme un symbole graphique ou un symbole de clip, peut devenir un bouton. Vous devez simplement appliquer le code ActionScript approprié. Dans ce didacticiel, un clip sera transformé en un bouton à quatre états..
Votre vie sera beaucoup plus facile si vous avez déjà une idée claire de la façon dont votre bouton se comportera dans chacun des quatre états. Dessinez-le sur du papier ou utilisez Illustrator ou Photoshop pour créer un prototype des éléments visuels qui peuvent à leur tour être importés dans Flash. C’est un peu le travail à l’avant, mais c’est bien mieux que de travailler à l’aveugle et de devoir réparer quelque chose parce que le concept n’a pas été pensé de manière logique..
Créez un nouveau document et choisissez Fichier Flash (ActionScript 3.0). Configurez la scène avec la taille et la couleur de fond appropriées.
Au lieu de créer un symbole de bouton, nous allons créer un nouveau symbole de clip. Appuyez sur Ctrl-F8 (Commande-F8 sur Mac) ou choisissez Insertion> Nouveau symbole dans le menu. Nous l'appellerons "bouton à quatre états".
Dans le clip "bouton d'état", ajoutez un nouveau calque et appelez-le "actions"..
Créez un autre calque et appelez-le "étiquettes". Insérez quatre images clés vierges à des intervalles à peu près égaux, juste assez pour laisser assez d’espace pour lire chaque étiquette. Ici, je les ai mis à 20 images par intervalles. Donnez les noms d'étiquette de haut, bas, bas et en dehors dans le panneau Propriétés. Ce seront vos états de bouton.
Ajouter des images clés dans la couche d'actions correspondant aux quatre états de la couche d'étiquettes.
Pour chaque image clé vide du calque actions, ajoutez this.stop (); dans l'éditeur ActionScript. Cela garantira que le clip ne sera pas lu par d'autres états de bouton.
Créez un nouveau symbole de clip en appuyant sur Ctrl-F8 (Commande-F8 sur un Mac) ou choisissez Insertion> Nouveau symbole dans le menu et appelez-le "animation vers le haut"..
Pour le bouton, tracez une case verte dans un calque et ajoutez une flèche blanche dans un calque au-dessus. Assurez-vous qu'il est inscrit dans le coin supérieur gauche. Comme ceci est statique, il n’est pas nécessaire de recourir à une série d’images pour l’animation, mais vous avez toujours la possibilité de l’animer, par exemple une boîte qui apparaît en fondu..
Créez un nouveau calque et appelez-le "actions". Assurez-vous que c'est au sommet. Sélectionnez l'image clé vide et ajoutez this.stop (); dans l'éditeur ActionScript. Ce n'est pas tout à fait nécessaire dans ce cas car il ne s'agit que d'une image statique, mais il est recommandé de garder chaque état en boucle..
La seule chose qui manque au mode d’édition des symboles de bouton que vous n’avez pas avec les clips est une image spéciale réservée à la zone d’attaque. Cela définirait les limites où les événements de la souris se produisent comme des clics et des survols. Créez un nouveau calque et appelez-le "zone active".
Dessinez une forme sur le calque et définissez sa valeur alpha sur 0 dans le panneau Propriétés, ce qui la rend invisible. Cette zone active sera aussi grande que le bouton lorsqu'il sera complètement étendu. Remarque: si vous avez une séquence animée, assurez-vous que les images de la zone active couvrent toute la longueur de l'animation..
Créer un nouveau calque dans le bouton quatre états symbole de clip appelé états des boutons. Faites glisser une instance du animation haut symbole du panneau Bibliothèque et dans le bouton quatre états zone d'édition de symbole de clip dans la états des boutons couche. Assurez-vous que ses coordonnées X et Y sont définies sur 0. Insérez un cadre dans le cadre 20..
Appuyez sur Ctrl-F8 (Commande-F8 sur un Mac) ou choisissez Insertion> Nouveau symbole dans le menu, puis choisissez Clip. Nous l'appellerons "sur l'animation".
Retournez dans le clip "up animation", cliquez sur le bouton vert et copiez-le. Retournez dans le clip "over animation" et ajoutez un nouveau calque appelé "morph morph". Cliquez avec le bouton droit de la souris pour coller le bouton vert en place dans l'image clé vide..
Créez une autre image clé vierge à l'image 20 et cliquez à l'aide du bouton droit de la souris pour coller à nouveau. Avec cette forme, augmentez sa largeur et changez sa couleur en orange. Sa taille doit être identique à celle de la zone d'accès créée à l'étape 10. Sélectionnez toute la plage d'images et cliquez avec le bouton droit de la souris pour créer une interpolation de forme..
Pour ajouter une étiquette de bouton, créez un nouveau calque appelé "text apparente" et utilisez l'outil Texte pour créer un objet texte statique, dans ce cas, PREVIOUS dans une image clé vide..
Cliquez avec le bouton droit de la souris pour insérer une image dans l'image 20. Sélectionnez une image dans le calque et cliquez avec le bouton droit de la souris pour créer une interpolation de mouvement. Je veux que le label disparaisse progressivement au milieu de l'animation. Je vais donc dans l'éditeur de mouvement et créer des images clés au milieu et à la fin, en créant trois images clés. La première image clé ajoutera un effet de couleur avec un alpha de 0% et les deux dernières auront un alpha de 100%.
Ajoutez une nouvelle couche appelée "zone active". Vous pouvez sélectionner la forme orange la plus longue à partir de la fin de l’interpolation de forme, la copier et la coller à la place dans une image-clé vierge sur le calque "Zone touchée". Sélectionnez-le et attribuez-lui une valeur alpha de 0% dans le panneau Propriétés. Insérez une image à l'image 20 pour que la zone active couvre toute l'animation..
Ajoutez un nouveau calque en haut et appelez-le "actions". Ajouter une image clé vide à l’image 20 et ajouter un this.stop (); action dans le panneau des actions. Cela empêchera l'animation de boucler.
Retournez au clip "Bouton à quatre états". Insérez une image clé vierge dans l'image 21 du calque d'états des boutons et faites glisser une occurrence du sur l'animation clip de la bibliothèque. Assurez-vous que ses coordonnées sont définies sur 0. Insérer un cadre dans le cadre 40.
Créez un nouveau symbole graphique en appuyant sur Ctrl-F8 (Commande-F8 sur Mac) ou choisissez Insertion> Nouveau symbole dans le menu, puis appelez-le "graphisme vers le bas". Aucune animation explicite n'est requise car elle ne sera affichée instantanément que lorsque vous cliquerez sur le bouton de la souris..
Pour cet état, il suffit éventuellement de changer la couleur du bouton entièrement étendu. Vous pouvez copier et coller à la place la zone orange ainsi que l'étiquette PREVIOUS du clip "over animation" dans leurs calques respectifs. Changer la boîte orange en rouge. Une seule image est requise, il n’est pas nécessaire de définir une zone active, car le bouton couvre toute la zone. Et comme c'est un symbole graphique, non Arrêtez(); il faut agir.
Retournez au clip "Bouton à quatre états". Insérez une image clé vierge dans l'image 41 du calque "Etats des boutons" et faites glisser une occurrence du symbole "Graphique en bas" de la bibliothèque. Assurez-vous que ses coordonnées sont définies sur 0. Insérer un cadre dans le cadre 60.
Appuyez sur Ctrl-F8 (Commande-F8 sur un Mac) ou choisissez Insertion> Nouveau symbole dans le menu, puis choisissez Clip. Nous l'appellerons "out animation".
L'état sortant sera essentiellement une version inversée de l'état over. Revenez au clip "par dessus l'animation" et copiez les images entre les formes, puis revenez à "l'animation en sortie", créez un calque appelé "morph morph" et collez les images dans l'image clé vide. Sélectionnez ensuite toutes les images de ce calque et choisissez Modifier> Scénario> Inverser les images dans le menu..
Revenez au clip "over animation" et copiez l'objet de texte précédent, puis revenez à "out animation", créez un nouveau calque appelé "texte disparaît" et collez-le à la place..
Insérez une image à l'image 20, puis sélectionnez la plage d'images et créez une interpolation de mouvement. Vous ferez l'inverse de l'interpolation de mouvement créée à l'étape 15 et créerez des images clés au milieu et à la fin dans l'éditeur de mouvement, mais les images clés première et moyenne auront un alpha de 100%, tandis que la dernière image clé aura un alpha de 0%.
Pour rétablir l'aspect initial du bouton, ajoutez un calque appelé "flèche" et placez une image clé dans l'image 20, en laissant les 19 premières images vierges. Copiez la flèche de "l'animation" et collez-la à la place de "l'animation" dans la dernière image clé..
Encore une fois, nous devons créer un nouveau calque appelé "zone active" et placer une boîte assez grande pour couvrir la taille complète du bouton étendu. Donnez-lui un alpha de 0 pour le rendre invisible.
Encore une fois, pour empêcher l’animation de sortir de la boucle, nous devons ajouter un calque appelé "actions", placer une image clé vide dans l’image 20 et ajouter un calque. this.stop (); action dans le panneau Actions.
Retournez au clip "Bouton à quatre états". Insérez une image clé vierge dans l'image 61 du calque "Etats des boutons" et faites glisser une occurrence du symbole "animation sortante" de la bibliothèque. Assurez-vous que ses coordonnées sont définies sur 0. Insérer un cadre dans le cadre 80.
Vient maintenant le code ActionScript pour que tout fonctionne. Pour détecter des événements de souris tels que des clics et des survols, nous devons ajouter des écouteurs d'événements..
Cliquez sur la première image clé du calque d'actions dans le clip du bouton "Quatre états", à laquelle nous avons d'abord ajouté une action d'arrêt et ouvrons le panneau Actions. Nous allons ajouter des écouteurs d'événements, comme indiqué ci-dessous, pour détecter un souris ROLL_OVER, un MOUSE_UP (lorsque le bouton de la souris est relâché) et un MOUSE_DOWN (lorsque le bouton de la souris est enfoncé)..
Nous utilisons l'événement ROLL_OVER au lieu de l'événement MOUSE_OVER en raison de la façon dont il traite les éléments enfants du clip en contexte avec le clip parent qui convient mieux à cette configuration. Nous ajoutons false, 0, true aux paramètres comme bonne pratique pour marquer ces écouteurs pour la récupération de place quand ils ne sont plus nécessaires..
this.addEventListener (MouseEvent.ROLL_OVER, onMouseRollover, false, 0, true); this.addEventListener (MouseEvent.MOUSE_UP, onMouseClick, false, 0, true); this.addEventListener (MouseEvent.MOUSE_DOWN, onMouseDownButton, false, 0, true);
Une fonction sera appelée pour chaque écouteur d'événement. Chaque fonction fait essentiellement avancer la timeline à l'état approprié dans le clip du bouton à quatre états et lit cette section en se référant au nom de l'étiquette..
Vous remarquerez qu'aucun écouteur d'événement n'a été créé pour un événement MOUSE_OUT. Au lieu de créer un écouteur d'événement autonome, nous utiliserons simplement l'événement ROLL_OVER pour appeler une fonction qui supprimera à son tour son propre écouteur d'événement et ajoutera un nouvel écouteur d'événement pour un événement ROLL_OUT. Dans cette configuration, un événement ROLL_OUT fonctionnera mieux qu'un événement MOUSE_OUT.
Il en va de même pour un événement ROLL_OUT qui supprime son propre écouteur et le rétablit pour un événement ROLL_OVER. En basculant ces rollovers et rollouts, nous gardons le code propre et exempt de conflits potentiels.
Accentsconagua
fonction onMouseRollover (e: MouseEvent): void e.target.gotoAndPlay ("over"); this.removeEventListener (MouseEvent.ROLL_OVER, onMouseRollover); this.addEventListener (MouseEvent.ROLL_OUT, onMouseRollout, false, 0, true); function onMouseRollout (e: MouseEvent): void e.target.gotoAndPlay ("out"); this.removeEventListener (MouseEvent.ROLL_OUT, onMouseRollout); this.addEventListener (MouseEvent.ROLL_OVER, onMouseRollover, false, 0, true); Pour lire l'état inactif, créez une fonction qui correspond à l'événement MOUSE_DOWN défini par l'écouteur d'événements..
fonction onMouseDownButton (e: MouseEvent): void e.target.gotoAndPlay ("down"); Enfin, nous devons indiquer au bouton ce qu'il doit faire lorsqu'il clique dessus. Ajoutez une fonction qui correspond à l'événement MOUSE_UP. Un événement MOUSE_UP est essentiellement la même chose que la dernière partie d'un événement CLICK (bas, puis haut).
À des fins de test, j'ai créé un lien Web dans une variable URL (dans ce cas, sur le site Web d'Adobe), puis ajouté la méthode browseToURL () à la fonction afin que je puisse vérifier son fonctionnement. Cependant, vous pouvez substituer cette méthode à un appel pour naviguer vers une autre étiquette, numéro ou scène, à l'aide de gotoAndPlay ou toute autre méthode que vous préférez.
var linkToAdobe: URLRequest = new URLRequest ("http://www.adobe.com"); fonction onMouseClick (e: MouseEvent): void e.target.gotoAndPlay ("up"); browseToURL (linkToAdobe); // vous pouvez le remplacer par n'importe quelle autre méthode ou fonction Le bouton quatre états est maintenant prêt à être utilisé. Revenez au scénario principal et faites glisser le symbole de clip de quatre boutons d'état sur la scène, sur son propre calque. Un arrière-plan de remplacement est ajouté sur un autre calque pour mieux voir l'effet dans le contexte d'autres éléments de la scène.
Assurez-vous que le fichier est enregistré et appuyez sur Ctrl-Entrée (Commande-Entrée sur un Mac) pour tester le film..
Nous remercions chaleureusement Alex de Sanctified Studios d’avoir inspiré l’idée originale d’utiliser un clip vidéo comme bouton et de Dominic Gelineau de Zedia Flash Blog d’avoir montré le meilleur moyen de créer des survols et des déroulements dans ActionScript 3..
