Macromédia Flash

Animation : Bouton et action

Etats du bouton

Ouvrir l’animation « Bouee.fla » : elle contient un objet « bouee_base » accessible depuis la bibliothèque qu’il est souhaitable d’ouvrir actuellement ([Ctrl] [L]). Repasser dans l’animation de base, sans fermer la bibliothèque de « bouee.fla ». Vous pouvez également dessiner un symbole clip bouée. Créer un calque bouée et déplacer la bouee_base de la bibliothèque sur la scène, dans ce calque. Utiliser le menu « Insertion – Convertir en symbole… » et demander un symbole de type bouton ayant pour nom « bouée bouton ».
Ouvrir la bibliothèque et faire un double clic sur le symbole « bouée bouton ». Le symbole apparaît en plein écran avec ses 4 états de boutons. Seul le premier état « haut » est rempli (un point rond est visible sur l’image « haut » du calque).
Faire un clic droit sur l’image « Dessus » (quand l’utilisateur passe la souris dessus) et demander « insérer une image clé ». Avec l’outil rotation ( Outil transformation libre) faire une rotation de la bouée. Positionner bien le centre de gravité de la bouée sur la croix de l’image pour un rendu plus réaliste. Faire de même sur l’image abaissée (quand l’utilisateur clique) et changer l’inclinaison de côté. L’image cliquable indique la zone réactive à l’action (sensible au clic). Dans le cas de la bouée, n’insérer pas une image clé qui poserait problème en reprennant la dernière image, mais insérer une image clé vide et dessiner une forme rectangulaire englobant les 3 étapes du bouton. Pour plus de réalisme, il est possible de modifier la forme pour qu’elle ressemble à un diabolo expansé. L’objet est fonctionnel sur la scène en lançant l’animation.
Pour plus de naturel (une bouée bouge en fonction des vagues), utiliser le menu « Insertion – Nouveau symbole » pour créer un clip « bouee bouge ». Sur l’image 1 du clip, mettre « bouee_base ». Faire pivoter le clip et insérer une image clé sur l’image 24 (la bouée effectuera un va et vient en 2 secondes). Insérer une image clé sur l’image 12 et la faire pivoter dans l’autre sens. Ne pas oublier de bien positionner le centre de gravité. Cliquer sur le mot calque 1 du clip « bouée bouge » et, dans le panneau propriété, demander une interpolation de mouvement. En regardant les images du clip, la bouée bouge progressivement pour revenir à son état initial… Pour l’ouvrir, do^uble cliquer sur le bouton bouée de la bibliothèque. Supprimer la bouée de l’image « Haut » et déposer à la place la « bouee bouge ». En lisant la scène, la bouée « bouge ». Quand l’utilisateur se déplace dessus, elle se fige d’un côté et au clic elle se fige de l’autre côté. Le bouton est fonctionnel mais inefficace, tout comme un interrupteur non relié au courrant. Le fichier final est visible en cliquant ici.

Action et bouton

L’action du designer peut s’arrêter ici pour laisser place au programmeur. Quelles que soient ses préférences, il est utile (voir important) d’appréhender quelques-unes des contraintes de l’autre monde (il n’y a pas 2 côtés obscurs de la force ;-).
Pour plus de détails sur ce chapitre et le suivant, voir le cours « Flash programmation ».
Notre bouton « bouée » doit se voir attribuer une action lors du clic pour ressembler à un bouton. Cependant, dans flash la programmation peut s’effectuer sur différents types d’objets. Elle est relativement proche de la programmation javascript, même si l’approche en est plus conviviale et déroutante pour le débutant. A chaque « objet » : bouton, clip, image… peut être associée une programmation. Cependant il faut toujours avoir présent à l’esprit que les méthodes (comportement) de l’objet seront fonction de la nature de l’objet auxquelles s’applique la programmation. Si vous êtes en mode designer, il faut demander la fenêtre « Actions » ([F9]) qui se trouve au-dessus des propriétés dans l’univers programmeur. Le panneau action regroupe, sur la gauche, les différentes catégories d’actions regroupées en sous-catégories… A la fin de la liste, la dernière catégorie (en jaune et nommée index) inclue l’ensemble des « actions » listées alphabétiquement.
Certaines « actions » regroupées dans la catégorie « Eléments déconseillés » (surlignés en vert dans Flash 5) ne doivent pas être utilisées sous peine de voir l’animation ne fonctionne pas avec les prochains lecteurs flash.

En cliquant sur l’image 1 du calque « bouée », un double clic sur l’action « goto » dans la catégorie « Actions – Contrôle de l’animation » entraîne l’apparition, en bas et à droite du panneau, d’une ligne de code de type « gotoAndPlay(1); ». Comme dans d’autres langages, il existe un symbole de fin d’instruction (ici le «point-virgule ») qui permet au programmeur de mettre plusieurs lignes de code sur une même ligne dactylographiée. De même, pour faciliter le repérage de fonction ou de variable (l’espace étant prohibé dans beaucoup de langages), la première lettre de chaque mot est en majuscule. Au-dessus de « gotoAndPlay(1); », des listes déroulantes, cases d’options ou à cocher… sont à disposition. Ce mode Normal (assisté) et très pratique pour les débutants car il vérifie la syntaxe tapée.
En cliquant sur l’icône ci-contre il est possible de passer en mode expert, de type éditeur de texte. En lançant l’animation il ne se passe rien. Flash, comme d’autres langages plus ou moins orientés objet, attend qu’un évènement se produise. Si l’action Goto est lancée sur un clip, une instruction comme ci-contre apparaît. Au-dessus de l’instruction « gotoAndPlay(1); », une instruction de type « onClipEvent (load)) { ». Flash attend donc qu’un événement de clip se produise et plus particulièrement un événement de chargement de l’animation. La parenthèse en fin de ligne indique que si l’événement se produit, la ou les action(s) contenue(s) jusqu’à la fin de la parenthèse seront effectuées. Il est possible de cocher un autre événement comme « Entre Image ». Cet événement est intéressant car, même avec une instruction « Stop », la lecture du temps qui passe continue et à la sortie de l’image courante le programme retourne au début de l’image courante, permettant de tester si certains événements se produisent.

Sur un bouton (utiliser le bouton bouée) les évènements sont comme ci-contre. Plusieurs actions différentes des clips sont possibles. Par défaut, avec une souris, l’action s’exécute quand l’utilisateur relâche le clic de la souris et non quand il appuie. Sur « gotoAndPlay(1); », il est possible de choisir la séquence, le type d’accès (dont étiquette) et, au final, l’endroit où va pointer l’action. Pour l’instant, lancer l’instruction en place qui renvoie à l’image 1. Chaque clic sur la bouée fait retourner l’animation à l’image 1. Le résultat est un peu stupide, mais ce n’est qu’un début. Le fichier final est visible ici.

Pour en savoir plus sur la programmation avec Flash, regarder le cours "Macromedia Flash - actionscript"