Macromédia Flash

Programmation : Bouton et programmation

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 à ce moment ([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. Penser à bien positionner 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 aurait le problème de reprendre 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 être plus 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 ». Le faire pivoter et insérer une image clé sur l’image 24 (la bouée fera un va et vient en 2 secondes). Insérer une image clé sur l’image 12 et la faire pivoter dans l’autre sens. Penser à 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… Double cliquer sur le bouton bouée de la bibliothèque pour l’ouvrir. 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 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 (voire 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.

Notion de programmation

Il n’est pas question ici de cours de programmation, mais uniquement de découvrir la programmation de façon pragmatique et ludique, sans utiliser de méthode d’analyse…
Il y est préférable d’utiliser l’animation 10_programmation_debut.fla afin d’être certain de démarrer avec les bons objets (dont la taille du poisson en mouvement).

Objet et programmation

Il serait plus judicieux de faire sauter le poisson à chaque clic que de revenir à l’image 1. Noter d’ailleurs qu’avec la technique utilisée précédemment le poisson continue imperturbablement sa trajectoire, contrairement aux goéland, bateau et mer, car c’est le clip animé (cas du poisson) qui est positionné dans la barre des temps et non l’objet (bateau) qui est animé dans la ligne de temps de la séquence courante.

De la même façon, supprimer le code lié au bouton bouée et le remplacer par un Stop. Au clic sur la bouée les clips goéland, bateau et mer s’arrêtent, mais le poisson continue sa route imperturbable et le goéland continue son animation interne (battre des ailes) tout en restant sur place. Le bouton bouée est lui aussi fonctionnel.

Reprendre l’animation précédente et l’enregistrer sous un autre nom. Le poisson sera géré par programmation, donc supprimer le calque poisson en l’envoyant à la poubelle. Cliquer sur le bouton bouée dans l’animation et enlever la programmation (cliquer sur on (release) et appuyer sur la touche Suppr). Ou cliquer ici pour charger le fichier flash résultant.

Ouvrir la bibliothèque ([Crtl] [L] ou [F11], plus conforme au reste des produits MX).

Dans le dossier poisson, faire un clic-droit Propriété sur le clip « poisson mouvement ».

Cocher la case « Exporter pour ActionScript » et donner un nom dans identifiant (pesket dans l’exemple).

Cette technique permettra d’appeler le « pesket » par la programmation. Toutes les occurrences de pesket auront les propriétés de pesket et, comme pour les écailles du poisson, le fait d’en modifier une modifiera toutes les occurrences.

Premier code en syntaxe à point

Cliquer sur le bouton bouée sur la scène (séquence 1) pour le sélectionner. La programmation qui va être mise en œuvre consiste à faire sauter un pesket quand on clique sur la bouée. Dans la fenêtre Action (touche [F9]), vous devez avoir Action – Bouton et en dessous : action sur … (bouée). Si ce n’est pas le cas, il faut cliquer sur la bouée dans la scène.

Choisir l’action « Objets – Animation – MovieClip – Méthodes – attachMovie ». Le double clic sur attachMovie permet d’écrire le code. L’évènement on (release) est correct dans ce cas.
Certaines parties du code ne sont pas définies et apparaissent en rouge. Il faut attacher un movieclip à un objet avec un certain nombre de paramètres.
L’environnement ressemble aux fonctions assistants de certains logiciels, comme les tableurs…

Cliquer dans la zone de saisie objet. Ceux qui travaillent avec Macromedia Dreamweaver, auront remarqué l’icône cible qui s’active. Cliquer sur l’icône cible et la boîte de dialogue « Insérer un chemin cible » apparaît.

L’instance de l’objet « pesket » va être crée mais sera dans le vide, aussi elle doit se rattacher à quelque chose. Dans le cas présent on le rattache à l’animation de départ qui a pour nom « _root » (c’est d’ailleurs la seule cible disponible).
En cochant la case d’option « relatif », This apparaît (que reconnaîtront ceux qui connaissent Javascript).
Il est préférable d’utiliser la syntaxe à Points.
La syntaxe à point utilise le point comme séparateur d’objet, par exemple une touche de clavier peut s’écrire :
clavier.touche
La syntaxe indique après validation : _root.attachMovie();. Ce qui signifie qu’il faut créer une instance d’un clip et l’attacher à la racine de la scène de l’animation.

Il faut donc maintenant définir l’occurrence de quel objet (nomID) est crée et lui donner un nom (nouveauNom).
NomID = "pesket" et nouveau Nom = "pesket1".
Mettre les guillemets pour ne pas les confondre avec des variables.
Pour la scène de « la pêche miraculeuse », plutôt que de créer chaque occurrence nommée de poisson, il est possible d’utiliser une variable à la place du chiffre concaténé avec le texte « pesket » à l’intérieur d’une boucle de type « for » par exemple.
Il ne faut pas oublier d’indiquer la profondeur qui correspond à la « couche » sur laquelle est crée l’objet. Plus le chiffre est petit, plus il est près de la scène et plus il est grand, plus il est près de « l’internaute ». Lancer l’animation ([Ctrl] [Entrée]) et cliquer sur la bouée. Le poisson semble sortir de la bouée et disparaît dans le ciel.
Le fichier final est visible ici.

Repères sur la scène

La scène de notre animation a les dimensions de départ, à savoir 550 x 400 pixels. Le repérage des pixels se fait dans un repère orthonormé. L’axe des X est horizontal et orienté vers la droite. L’axe des Y est vertical, mais orienté vers le bas (comme toujours en informatique).
Quand un objet est positionné sur la scène depuis la bibliothèque, il est, comme tous les objets, circonscrit dans un rectangle et possède un centre qui sert d’accroche pour les trajectoires et de point de symétrie pour les transformations. Dans le cas de notre poisson, il se trouve au zénith de la trajectoire du poisson.

Si un symbole est positionné sur la scène et que dans les propriétés de l’objet soit inscrit 0 en X et en Y, le coin supérieur gauche sert de référence.

Dans la programmation, comme on peut le noter sur le dessin ci-dessus, c’est le point central de « poisson mouvement » alias « pesket » qui est utilisé. Toute occurrence créée est positionnée par son centre au point (0,0)

Pour notre animation il faut calculer l’endroit où doit se trouver le point central de pesket. Il peut se trouver au milieu de la scène horizontalement soit x=225 et à une position sur l’axe des Y qui permette de le voir. En se servant de l’image ci-dessous et en utilisant une règle de trois, il est facile de voir que le positionnement « idéal » de l’occurrence est de 220 (à 10 pixels près), donc y=220.

Il faut maintenant apprendre à notre poisson, non pas à sortir de la bouée, mais de la mer en utilisant les coordonnées (225,220).

Propriétés de l'objet

Pour rajouter au code lié au bouton bouée de notre animation :
Cliquer sur la bouée et afficher la fenêtre Actions ([F9]). Cliquer sur la ligne définissant l’attachement de pesket à l’animation.
Sélectionner l’action « Actions – Contrôle sur les clips – setProperty »
La ligne de code apparaît sous la précédente, si ce n’est pas le cas, voir en fin de page.

En cliquant sur la liste déroulante, toutes les propriétés accessibles apparaissent avec, entre parenthèse, leur traduction en français. Dans le cas de pesket il faut sélectionner les positions en X et en Y.

Après avoir défini la position en X, il faut ensuite définir la position en Y. Dans la génération du code, des guillemets se mettent autour du mot pesket. Pour la position en X, taper 225 et des guillemets se mettent de chaque côté. Comme 225 est un chiffre et pas du texte, il suffit de cocher la case expression, pour voir les guillemets disparaître. Jouer l’animation et vous constatez que le pesket est toujours dans le ciel, mais qu’il s’est déplacé de 225 pixels vers la droite.

Pour positionner en Y, il est possible de recommencer l’opération, mais il est plus simple de déplacer la ligne contenant le positionnement en X en-dessous en ayant soin d’appuyer sur « [Ctrl] déplacement de l’objet » qui permet de dupliquer la (les) ligne(s).
Faire les modifications pour obtenir un code équivalent à ci-dessous :

on (release) {
_root.attachMovie("pesket", "pesket1", 0);
setProperty("pesket1", _x, 225);
setProperty("pesket1", _y, 220);
}

Le fichier final est visible en cliquant ici.

Si au lieu de cliquer sur la ligne _root.attachMovie… vous aviez sélectionné l’accolade de fin, la ligne setProperty se trouve ajoutée dans une nouvelle syntaxe on (realse). Il est possible de compléter la syntaxe et de changer l’instruction on (relase) par une autre : on (rollOver) par exemple.
Sur un bouton (ou un autre symbole) il est possible de définir différentes actions qui seront exécutée en fonction de l’événement qui se produit. Les boutons pouvant incorporer des clip (bouée bouge est un clip incorporé dans l’image haut du bouton bouée) les possibilités de programmation événementielle sont nombreuses.

on (release) {
_root.attachMovie("pesket", "pesket1", 0);
}
on (rollOver) {
setProperty("pesket", _x, 225);
}

Variables et étiquettes

Le poisson saute dès que l’on clique sur la bouée à l’endroit souhaité. Néanmoins, un nouveau clic sur la bouée fait disparaître le poisson qui saute de nouveau. Il est souhaitable d’empêcher le saut du poisson tant que le saut précédent n’est pas terminé.

Il est possible d’utiliser une variable qui peut s’appeler « nage ». Le nom des variables est assez large, mais ne doit pas utiliser les mots-clés du langage… Le fait de donner un nom français évite ce genre de problème et permet d’être explicite pour la suite du traitement. Flash n’est pas un langage fortement typé où le type de la variable est bien défini une fois pour toute. Notre variable est de type booléen (vraie/faux). Il est possible de lui affecter la valeur « oui » quand le poisson peut nager et la valeur « non » quand il ne peut pas nager, car il nage déjà (ce n’est plus du booléen, mais cela convient pour notre exemple).

Dès le début de l’animation, la variable nage doit être initialisée à oui pour permettre au poisson de sauter. Lors du clic sur la bouée, effectuer un test conditionnel pour connaître l’état de la variable nage et, si le poisson peut nager, lancer le movieclip. Ce test est de type Si-Alors-Sinon (If-Then-Else) que l’on retrouve dans les tableurs.

Cliquer sur le calque bouée et insérer un nouveau claque appelé programme (ou prg). Il est souhaitable d’avoir ce calque en haut de l’animation et de n’y mettre que de la programmation. Si l’animation à besoin, comme dans les premiers essais du bouton d’aller à une étiquette d’image. Il est souhaitable de créer un calque étiquette sous le calque prg qui rends les étiquettes bien visibles sans avoir à les chercher dans tous les calques. Bien que non utilisé dans cette animation, il est possible de créer une étiquette de début et une de fin. Les étiquettes par rapport au numéro d’images ont l’avantage en cas d’ajout ou de retrait d’images dans l’animation de ne pas changer et donc d’appeler toujours la bonne séquence quelles que soient les modifications apportées. Pour mettre une étiquette : cliquer sur l’image clé vide sur le calque étiquette et dans propriété donner un nom à l’étiquette.

Concernant la variable nage, elle doit être présente dans toute l’animation. Il faut donc la définir comme une variable dite globale, par rapport à une variable locale qui n’est disponible qu’à un endroit, comme par exemple un compteur dans une boucle.

Pour que la variable soit accessible depuis n’importe où, il est possible de l’appeler _root.nage.

Sur l’image 1 du calque programme, utiliser le menu « Actions – Variables – set variable ». Dans les zones de saisie mettre nage pour le nom de la variable

Le résultat final est visible sur l’image ci-dessous où l’étiquette est représentée par un drapeau avec le nom écrit s’il n’y a pas dans la case contiguë une autre image clé vide avec une étiquette.

La programmation dans l’image est représentée par un a (comme action) même si l’image clé est vide (rond blanc).

Tests conditionnels

Maintenant que la variable est créée, il faut la gérer au niveau du clic sur la bouée.
Le test conditionnel sera du type :
Tester si la variable nage est égale à oui.
Si c’est le cas, faire les opérations suivantes :

• Basculer la variable nage à non.
• Attacher le movieClip et le positionner au bon endroit.

Dans le cas contraire ne rien faire.

Utiliser (Actions – Conditions/boucles – If) sur on (release).
Il existe d’autres conditions et boucles comme dans tous les langages évolués.
Il faut tester si la variable est égale à « oui ». Écrire dans condition :

« _root.nage=="oui" »

Nous retrouvons la variable _root.nage.
Le doublement du signe égal peut surprendre, mais = a 2 significations distinctes dont il faut lever l’ambiguïté en programmation :

• Symbole d’affection de valeur (ex : _root.nage="oui" affecte la valeur oui à la variable _root.nage)
• Opérateur de comparaison (ex : _root.nage=="oui" qui teste si la variable _root.nage est égale à oui)

Dans le cas d’ActionScript (idem javascript, mais ce n’est pas le cas dans tous les langages), la différentiation du test se fait par le doublement du signe = pour la comparaison, l’affectation gardant le signe égal simple.
Maintenant, changer la variable nage à non pour empêcher le poisson de sauter, et mettre les 3 lignes liées au clip pesket à l’intérieur des acolades du test IF.
Le code ressemble à ci-dessous :

on (release) {
if (_root.nage=="oui") {
_root.nage = "non";
_root.attachMovie("pesket", "pesket1", 0);
setProperty("pesket1", _x, 225);
setProperty("pesket1", _y, 220);
}
}

Comme il n’y a rien à signaler dans le cas contraire, il est inutile de définir le else ou le else if logique dans cette structure de langage.
La différence n’est pas notable, hormis le fait qu’il est impossible de cliquer pour relancer le saut du poisson. Mais le poisson continue à sauter sans s’arrêter. La bouée ne sert donc qu’à déterminer le point de départ de l’action.
Plusieurs possibilités existent pour que le poisson arrête de sauter. Nous retiendrons celle qui consiste à effacer le clip et à remettre la variable nage à non quand le poisson a fini son premier saut.
Ouvrir « poisson mouvement » dans la bibliothèque. Créer un calque « programme » et sur la dernière image de ce calque, créer une image clé vide.
Modifier la variable _root.nage avec « Action – Variable » pour la définir à « oui »
Pour détacher le clip, sélectionner «Objets – Animation – MovieClip – Methods » et choisir « RemoveMovieClip » ou « unloadMovie ». Le code ressemble à :

_root.nage = "oui";
_root.pesket1.removeMovieClip();

En chargeant l’animation, le poisson saute quand on clique sur la bouée et ne saute plus tant qu’il n’a pas fini de sauter.

Le fichier final est visible ici.

Programmation et loi de Pareto

L’animation semble fonctionner, mais en regardant plus attentivement, on s’aperçoit qu’en cliquant sur le poisson après le passage de l’animation sur l’image 1, le poisson recommence à sauter sans avoir fini son saut. Ceci est compréhensible dans la mesure où à chaque passage sur l’image 1, la variable nage est remise à « oui ».

Nous touchons là un des problèmes fondamentaux de la programmation que l’on peut appréhender par la loi des 20/80 (ou loi de Pareto), déduit du concept d’ophélimité. Adaptée en informatique, elle dit qu’il faut 20% du temps pour réaliser 80% du programme. Se pose alors de façon corollaire le problème du « Good-enough developper » : jusqu’où doit-on développer un programme pour qu’il soit acceptable. Le temps passé en supplément pour augmenter son acceptabilité se traduit par un surcoût financier trop important.
Notre exemple est simple, il est facile de trouver une solution au problème : trouver un système permettant d’initialiser la variable nage à « oui », sans qu’elle repasse inopinément à « oui ».
Comme souvent en programmation, plusieurs solutions sont envisageables. Seules 2 seront abordées pour clore ce chapitre.

Utilisation d’un clip vide

En vérifiant dans le chapitre « Action et boutons », les propriétés des clips ont une case « chargée » on (load) qui correspond à notre cas. Cette syntaxe n’est utilisée qu’au chargement du clip, donc il ne faut pas prendre les objets « poisson » qui sont rechargés à chaque clic sur la bouée.

Si aucun clip n’est chargé dans le temps imparti, il faut soit mettre un clip existant dans l’image 1 de prg ou créer un clip vide (type rectangle converti en clip). Le poser sur la scène et le faire disparaître (taille, alpha, en-dehors de la scène…). Ajouter sur le clip une action « Actions – Variables – set variable » pour définir _root.nage = "oui";. Ne pas oublier de supprimer la programmation sur l’image 1 du calque Programme. Résultat ici.

Goto again

Cette solution relativement simple consiste à déplacer l’étiquette début placée précédemment et qui n’avait pas d’utilité, pour la mettre sur l’image 2. Sur l’image de fin (image 120) du calque programme, créer une image clé vide. En programmation choisir « Actions – Contrôle de l’animation – Goto » et choisir dans le type « Etiquette d’image » et dans image « Debut », soit la ligne de commande :

gotoAndPlay("debut");

Résultat ici.