Consulté 94,537 fois

Créer un bouton en Flash 5

Créer un bouton en Flash 5 - Votre premier bouton animé et interactif simple

Django (Oznog) Blais, Trucsweb (28 novembre 2000)

Les boutons en Flash sont des symboles interactifs composés de quatre images. Lorsque vous créez un bouton, Flash lui désigne un scénario avec quatre images. Les trois premières images affichent les trois différents états du bouton et la quatrième définit la zone active du bouton. Le bouton ne fait pas partie du déroulement temporel de votre animation mais il réagi simplement aux mouvements et aux actions de la souris. Pour le rendre interactif dans une animation vous devez le placer sur la scène et lui affecter des actions. C’est très important de ne pas affecter d’actions dans le scénario du bouton mais bien directement sur la scène.

Chaque image dans le scénario d’un symbole de bouton possède une fonction spécifique :
- HAUT / UP : La première image quand la souris n’est pas au-dessus du bouton.
- DESSUS / OVER : La deuxième image quand la souris se trouve au-dessus du bouton.
- ABAISSÉ / DOWN : La troisième image quand vous cliquez sur le bouton ou plutôt sur la zone sensible.
- CLIQUÉ / HIT : La quatrième image, l’état Cliqué, définit la zone sensible qui réagit au clic de la souris.
Cette zone est invisible dans l’animation.

Enfin, lors de la création du bouton, vous pouvez attribuer un son à chaque état.

Exemple des deux boutons que nous allons réaliser. Ils ont 3 états (clip, MovieClip) et deux sons.

Notes
Dans le tutoriel suivant, les touches de raccourci sont indiquées pour les systèmes Windows, pour Macintosh vous n’avez qu’à remplacer la touche " Ctrl " par " Commande ". Pour le clic de droit, sur Macintosh vous devez faire "Commande+Clic". Les commandes sont en français suivit par les commandes anglaises pour ceux qui utilisent un logiciel en anglais. Malheureusement les exemples de fenêtre sont en anglais.

La création d’un bouton nécessite des images ou des symboles de clip (MovieClip) et des sons. Personnellement, je ne passe pas beaucoup de temps sur la scène. Le travail de la scène est un peu comme la répétition générale. Je travail surtout en mode d’édition de symboles pour créer ou importer mes images, construire mes symboles de clip (MovieClip) qui seront ensuite utilisés pour créer mes boutons. L’exemple ci-dessous montre les trois symboles que j’ai créés pour construire le premier et le deuxième bouton. Il s’agit de trois symboles de clip (MovieClip). Si vous ne savez pas comment créer un clip vous pouvez utiliser des images simples.

La création du bouton

1. Choisissez INSERTION => Nouveau symbole [Ctrl+F8]. (INSERT => New symbol).
   
   

   

2. Dans la boîte de dialogue Propriétés du symbole, entrez le nom du nouveau symbole de bouton et dans Comportement, choisissez " Bouton " (button).
   
   

   

3. Flash bascule en mode édition de symboles. L’en-tête du scénario change pour afficher quatre cadres consécutifs intitulés Haut (up), Dessus (over), Abaissé (down) et Cliqué (hit). La première image, Haut, est une image-clé vide (Keyframe).
   
   
4. Pour créer l’image du bouton dans un état Haut, utilisez les outils de dessin, importez un graphique ou placez l’occurrence d’un autre symbole comme un clip sur la scène. Pour voir vos images et autres symboles disponibles, ouvrer la bibliothèque (library) FENÊTRE => Bibliothèque [Ctrl-L]. (WINDOW => Library). Et glisser le symbole sélectionné sur la scène. Utiliser le " + " pour centrer l’image.
   
   Dans un bouton, vous pouvez utiliser un symbole graphique ou un symbole de clip, mais vous ne pouvez pas utiliser un autre bouton dans un bouton. Si vous souhaitez créer un bouton animé, utilisez un symbole de clip.
   
   



5. Cliquez sur le deuxième cadre, intitulée Dessus (OVER), et choisissez INSERTION => Image-clé [F6]. (INSERT => Keyframe). Flash insère une image-clé et copie l’image Haut dans ce nouveau cadre.
   
   
6. Remplacez l’image du bouton par l’image de l’état Dessus en vous assurant qu’elle est à la même position (à moins de vouloir faire un effet de mouvement).
   
   
7. Répétez les étapes 5 et 6 pour les images " Abaissé et Cliqué ".
   
   L’image de l’état Cliqué (HIT) n’est pas visible sur la scène, mais elle définit la zone sensible du bouton qui réagit au clic. Assurez-vous que le graphique de l’image Cliqué est une zone pleine suffisamment large pour englober tous les éléments graphiques des images Haut, Abaissé et Dessus. Elle peut aussi être plus large que le bouton visible. Si vous ne spécifiez pas d’image pour l’état Cliqué, l’image de l’état Haut sert alors d’image pour l’état Cliqué. C’est pourquoi un bouton réalisé avec du texte oublige l’usager à cliquer sur le texte. Donc, si votre bouton à été créé avec du texte, assurez-vous d’ajouter une image sur le cadre Cliqué (HIT).

1. Assurez-vous d’être sur le Calque (layer) de votre bouton, cliquer le bouton de droit de la souris et sélectionner Propriétés (Properties).
   
   
2. Dans l’onglet Action, pour les versions Flash 3 et 4, sélectionnez, à l’aide du symbole " + ", l’action Lors d’un événement souris (OnMouseEvent) . Avec la version de Flash 5, dans la liste de zone d’outils, à gauche du panneau Actions, cliquez sur la catégorie Actions de base pour afficher les actions de base. Sélectionnez l’action On Mouse Event.
   
   

   

3. Version Flash 3 et 4, dans Événement (event) : Cliquer l’événement " Release " (quand le bouton de la souris est relâché sur le bouton). Pour la version Flash 5, dans la section Paramètres, pour Événement, sélectionnez l’événement de souris ou de clavier " Relâcher " (quand le bouton de la souris est relâché sur le bouton).
   
   
4. Une fois l’événement déterminé, vous devez ajouter l’action à exécuter pendant l’événement. Cliquer de nouveau sur le symbole " + " et choisissez l’action.
   
   - Avec un lien URL
   Pour ouvrir une nouvelle page HTML. Sélectionner l’action Get URL. Dans la section Paramètres, entrer l’URL de la nouvelle page HTML à charger. Vous pouvez utiliser un chemin relatif, par exemple : mapage.html (qui doit se trouver dans le même répertoire) ou un chemin absolu, par exemple : http:///www.adresse.com/mapage.html. Noter qu’un chemin relatif part du répertoire où se trouve la page actuelle. Vous pouvez aller vers d’autres pages en parcourant les répertoires, par exemple : répertoire1/répertoire2/mapage.html. Pour revenir dans la hiérarchie des répertoires, utiliser deux point, par exemple : ../../mapage.html (revient de deux répertoires).

   
   
   Dans Fenêtre, spécifiez la fenêtre (window) où la page HTML sera chargée, de la manière suivante :
   
   Choisissez parmi la liste des noms de cibles réservés suivants :
   _self : la fenêtre courante.
   _blank : une nouvelle fenêtre.
   _parent : Le parent de la page courante (pour les pages HTML avec cadre ou frame).
   _top : La fenêtre du plus haut niveau dans la fenêtre courante.
   
   Ou, entrez le nom d’une fenêtre ou d’un cadre spécifique tel qu’il apparaît dans le fichier HTML.
   
   Dans Variable, choisissez une méthode d’envoi des variables pour l’animation chargée à l’emplacement indiqué dans le champ URL. Cette option est seulement utilisée pour l’envoi de variable par un formulaire ou une commande FSCommand à un programme serveur. Ne rien mettre si le bouton ne fait qu’un lien.
   
   - Lien interne
   Pour un lien vers un autre cadre de votre animation ou une autre scène, sélectionner GO TO au lieu de GET URL. Choisissez la scène et le cadre où l’animation devra se poursuivre ET N’OUBLIEZ PAS de cliquer en bas l’option " And play ".

Partager |

Dernière mise à jour : 2010-01-05