[Etape 1]
Créez un nouveau document (20 frames par seconde), puis
sélectionnez l'outil cercle de la barre d'outils ().
Sélectionnez
une couleur de remplissage, ainsi qu'une couleur de contour.
Modifiez l'épaisseur du contour grâce au panneau Trait (Stroke)
:
[Etape 2] Ensuite,
tracez le cercle sur votre document. Pour avoir un cercle
et non pas un ovale, appuyez en même temps sur la touche
Shift : vous devez obtenir ceci --> (les couleurs peuvent différer ;-))
Appuyez sur F8 pour lui attribuer les propriétés d'un bouton
(pour plus de précision, référez-vous au tutorial
sur la création des boutons en Flash). Ne lui attribuez
pas d'état dessus, abaissé ou autre : nous allons construire
une petite animation qui se déclenchera au passage de la
souris.
[Etape 3]
Pour ceci, dans la ligne de temps (timeline), faites un
clic droit sur la première image-clé (keyframe), puis copier
l'image (copy frame). Collez la copie (clic droit, puis
coller (paste)) à l'image 2. Collez-la aussi à l'image 40.
Vous remarquez l'apparition d'une ligne grise entre les
deux dernières images-clés créées (images 2 et 40) :
Cliquez sur l'image 2, puis, en maintenant la touche Shift
enfoncée, sur l'image 40 : la ligne grise devient noire.
Faites un clic droit sur la ligne, puis sélectionnez "Créer
une animation" (Create Motion Tween) : la ligne devient
violette et est parcourue d'une flèche sur sa longueur.
Cliquez à l'image 20, puis faites un clic droit et sélectionnez
"Insérer une image-clé" (Insert Keyframe). Vous devez obtenir
ceci :
[Pause]
Récapitulons maintenant ce que nous voulons qu'il se passe
: quand l'utilisateur passe sa souris sur ce bouton, celui-ci
doit changer de forme et de couleur, et un texte doit apparaître.
Quand l'Internaute enlève la souris du botuon, celui-ci
doit retrouver son état initial.
[Etape 4]
Commençons par créer l'animation qui s'exécutera lorsque
l'on bougera le curseur de la souris sur le bouton.
Cliquez sur l'image 20, puis sur le bouton : il apparaît
encadré par un carré bleu. Nous allons le modifier. Commencez
par faire un clic droit sur le bouton, et choisissez "Echelle"
(Scale). Changez sa forme (ici, nous avons choisi de le
faire "s'aplatir" vers le bas).
Vous remarquez que le bouton s'aplatit, mais reste au milieu
de l'image.
A l'aide de la touche "Down" (flèche vers le bas) du pavé
numérique, déplacez le bouton "aplati" vers le bas, sans
sortir de l'image. Vous
devez voir ceci sur votre écran -->
Dans le panneau Effect (Effect), sélectionnez ensuite
"Teinte" (Tint), et sélectionnez une couleur de votre choix.
Si vous faites jouer l'animation, vous remarquez que le
bouton s'aplatit en changeant de couleur, comme ici -->
[Etape 5] Nous
voulons, en plus, qu'un texte apparaisse progressivement.
Créez un nouveau calque, en cliquant sur le bouton "Plus",
en-dessous de la liste des calques.
Cliquez sur la première image-clé, puis, en maintenant la
touche Shift enfoncée, sur la dernière, puis faites Ctrl+X
(couper).
Créez ensuite une nouvelle image-clé à l'image 2 : clic
droit sur l'image 2 , puis "Insérer une image-clé".
[Etape 5 suite]
Créez votre texte (voir
le tutorial sur les textes et boutons réactifs), puis
créez une nouvelle image-clé à l'image 20, et une autre à
l'image 40.
Sélectionnez le tout comme précédemment pour créer une animation,
puis cliquez sur l'image 2.
A l'aide du panneau "Effets", sélectionnez l'effet
"Alpha" dans le menu déroulant, et attribuez-lui une valeur
de zéro. Faites la même chose pour l'image 40.
Vous devez obtenir ceci -->
[Etape 6]
Il nous reste à définir les différentes actions qui vont
enclencher l'animation.
Faites un clic droit sur la première image de la ligne de
temps du calque "Bouton", et sélectionnez "Action".
Le panneau "Action" s'ouvre. Cliquez sur le bouton, puis
dans "Actions de base" (Basic Action), double-cliquez sur
"Action de la souris" (On mouse event).
La case "Relâché" (Release) est cochée par défaut. Décochez-la,
puis cochez la case Roll Over.
Vous remarquez aussi que, plutôt qu'une action de la souris,
vous pouvez choisir une pression sur une touche du clavier,
au choix. Cela nous sera utile pour d'autres tutoriaux.
Il est possible que, lorsque vous sélectionnez le bouton
à l'image 1, il apparaisse grisé, et non pas encadré d'un
fin trait bleu. Faites simplement Ctrl+G (Grouper), pour
résoudre ce problème.
Vous voyez apparaître, dans la partie droite du panneau
Action, une ligne de programmation (en bleu). Dans le même
temps, à l'image-clé concernée, apparaît un petit "a" minuscule,
pour signaler une action.
Double-cliquez sur Goto, et, dans le champ "Image" (Frame),
entrez la valeur "2". Cela signifie que, lorsque l'internaute
pointera sa souris sur le bouton, l'animation, qui commence
à l'image 2, se jouera.
Cependant, si vous faites un test (Ctrl + Entrée), vous
ne voyez pas de changement. Il vous suffit de re-sélectionner
l'image 1 du calque Texte, et de lui adjoindre l'action
Stop. Ainsi, l'animation ne s'effectue que lorsque l'Internaute
amène sa souris sur le bouton.
Par contre, lorsque le pointeur de la souris est sur le
bouton, l'animation tourne en boucle. Or, nous voulons qu'elle
s'arrête sur l'image 20.
Sélectionnez cette image, puis cliquez sur le texte, et
insérez une nouvelle action Stop. A la même image, sur le
bouton, sélectionnez une nouvelle fois "Action de la souris",
mais cochez la case "Roll Out".
Puis, sur le bouton, cliquez à la case 21, ajoutez une nouvelle
image-clé, et revenez sur le bouton, puis, à la suite de
l'action "Roll Out", double-cliquez sur Goto, et entrez
"21", comme valeur de l'image.
Voici ce que vous obtenez :
Vous remarquez qu'il faut se placer sur le bouton pour que
ledit bouton reviennne à son état initial.
[Etape 7]
Une solution pour remédier à cela est de créer l'animation
comme nous venons de le décrire, mais en ajoutant un troisième
calque avec un carré de la couleur du fond, que l'on place
en-dessous des autres.
Puis, on le définit comme bouton, et on lui applique les mêmes
instructions qu'au bouton initial. auquel cas, le bouton ne
sert plus qu'à l'animation, le "vrai bouton" étant en réalité
le carré.
Voici un aperçu de la ligne de temps après ce tutorial :
Et voici le résultat final :
Voilà, vous êtes maintenant en mesure de créer
des boutons et des menus dynamiques !
Pour information, le menu de FreeGaïa est construit sur
ce principe ;-)
Nous vous proposons, dans ce tutorial, d'apprendre
à créer des boutons réactifs évolués. 
Logiciel : 
Flash 5.0
Niveau : 
Auteur : 
[Etape 1] 
).
Sélectionnez
une couleur de remplissage, ainsi qu'une couleur de contour.
Modifiez l'épaisseur du contour grâce au panneau Trait (Stroke)
: 
Ensuite,
tracez le cercle sur votre document. Pour avoir un cercle
et non pas un ovale, appuyez en même temps sur la touche
Shift : vous devez obtenir ceci -->
Vous
devez voir ceci sur votre écran -->
Nous
voulons, en plus, qu'un texte apparaisse progressivement.
Créez un nouveau calque, en cliquant sur le bouton "Plus",
en-dessous de la liste des calques.
cliquez ici pour imprimer la page
