Nous allons aborder ici le sujet des boutons dans une animation flash.
L’API de flash propose le type d’élément « bouton » (comme « clip » ou « graphique »), ainsi que toute une bibliothèque de composants gérant des actions liées au comportement de la souris (le survol, l’enfoncement ou le relâchement du bouton gauche, etc.).
ou
Ceux-ci sont rapides à utiliser, mais alourdissent votre animation car ils gèrent beaucoup plus de paramètres que nécessaire dans la plupart des cas.
Il est recommandé d’utiliser au maximum le type « clip », car très flexible, plus léger et il génère moins de bugs mystérieux.
Pour commencer, nous allons voir comment créer un bouton reproduisant tous les comportements d’un élément de type « bouton » mais qu’avec des clips. Ce sera la base pour les tutoriaux suivants.
Pour commencer, créez un bouton, vu sous sa forme au repos (sans être survolé par la souris).
Ensuite créez ce même bouton, mais avec l’état qu’il aura lorsqu’il votre souris sera dessus.
Créez maintenant un clip vide sur votre scène qui contiendra ces deux graphismes. Ce sera votre bouton à proprement parlé. Soyons originaux, appelons-le « bouton ». Les deux états seront «repos» et l’autre « survol ».
Dans « bouton », vous allez, sur un même calque, créer deux frames vides d’affilées (F7). Sur la première, positionnez votre état « repos » et sur la seconde l’état « survol ».
Vous pouvez créer plusieurs calques si votre bouton se décompose en plusieurs éléments, comme le graphisme de votre bouton ET le texte du bouton. Chaque « colonne » doit correspondre au visuel entier de chaque état.
Le but est que selon la position de la souris par rapport au bouton, l’un ou l’autre des états apparaissent. Afin de pouvoir cibler la bonne “frame” à afficher, nous allons leur associer une « étiquette » ou « label », une sorte de référence utilisable en ActionScript.
Pour cela, créez ensuite un nouveau calque que vous nommerez «label» et que vous verrouillerez afin d’éviter de mettre des éléments graphiques par mégarde dessus. Créez aussi deux frames vides, juste au-dessus de chaque état du bouton. Cliquez sur la première frame, et dans le panneau « Propriétés », dans le champ « Image » tapez « ON ». Répétez cette opération pour la seconde frame, et tapez « OFF ».
Pour finir, créez un nouveau calque, nommez le « script » et verrouillez-le aussi. Cliquez sur la première frame créée par défaut, ouvrez le panneau « Actions - Image » (F9) et tapez le code suivant :
stop();
Ce code évitera que la tête de lecture ne lise en boucle les deux frames en continu. L’animation reste ainsi arrêtée sur l’état « repos ».
Revenez sur la racine de votre animation.
Afin de pouvoir désigner ce bouton avec du code, il lui faut un « identifiant », un nom d’occurrence.
Pour cela, sélectionnez sur votre scène le clip « bouton », puis dans le panneau « Paramètres », dans le champ « nom de l’occurrence », tapez « bt_exemple » (il est préférable de nommez vos noms d’occurrence avec en préfixe, ou suffixe, le « type » de votre élément, afin qu’en lisant votre code, on comprenne qu’il s’agit d’un objet qui va avoir le comportent d’un bouton, « bt_ »).
Votre bouton est prêt, il ne reste plus qu’à créer le code qui « pilotera » ce bouton.
Au-dessus du calque qui contient votre bouton, créez un nouveau calque « script » et verrouillez-le.
Selectionnez la frame créée et ouvrez le panneau « Actions - Image ».
Les clips peuvent recevoir une écoute à certains évènements, dont ceux qui nous intéressent (survol, sortie de survol et relâché du clic, que nous préférerons au clic en lui même).
Il ne nous reste plus qu’à associer ces comportements à la colonne du clip « bouton » à lire.
D’abord, on va désigner le bouton.
Notre bouton est au même niveau que le code que vous êtes en train de taper, et non dans un autre clip, donc on peut dire qu’il est « ici », soit « this » en anglais. Ensuite, on le nomme, ce qui nous donne :
this.bt_exemple
Vous désignez votre bouton, maintenant, vous allez lui demander de réagir au survol avec une méthode supportée par les éléments « clip », “onRollOver” :
this.bt_exemple.onRelease
Ensuite, vous allez indiquer ce que vous voulez que ce bouton fasse lorsqu’il est survolé, en gros quelle va être la fonction de ce comportement :
this.bt_exemple.onRollOver = function():Void{ // ici vous donnerez les instructions à suivre lors du survol };
On veut que lorsque la souris passe sur le bouton, l’état de survol s’affiche, celui qui a comme référence « ON ».
Pour cela, il suffit de dire au bouton d’aller sur la colonne désignée par l’étiquette « ON ».
Vous pouvez donc taper :
this.bt_exemple.gotoAndStop("ON");
Mais comme les instructions sont dans une fonction relative au bouton lui-même, et non une fonction relative à la racine de votre animation, le « this » ne représente plus cette dernière, mais le bouton lui-même.
Par conséquent, le code à taper est :
this.gotoAndStop("ON");
Ce qui vous donne :
this.bt_exemple.onRollOver = function():Void{ this.gotoAndStop("ON"); };
Si vous testez votre animation, vous verrez que lorsque vous passez la souris au-dessus du bouton, il change bien de visuel.
Mais il ne revient pas à la normale lorsque vous sortez du survol !
Pour ce faire, vous allez configurer le comportement de sortie de survol, “onRollOut“.
Même principe, mais avec l’autre étiquette :
this.bt_exemple.onRollOut = function():Void this.gotoAndStop("OFF"); };
Maintenant le changement de visuel bascule sans problème.
Pour finir, vous allez gérer le clic avec le comportement “onRelease“, qui se déclenche au relâché du clic souris. Il est préférable au “onPress” qui détecte juste la pression du bouton gauche de la souris (testez et vous comprendrez). Nous voulons que lorsqu’on clique, la page « index.htm » par exemple s’ouvre. La méthode « getURL » permet cette action.
this.bt_exemple.onRelease = function():Void{ getURL("index.htm","_self"); };
Le paramètre « _self » est optionnel (il s’agit de sa valeur par défaut), il indique que vous voulez ouvrir la page demandée dans la même fenêtre. Si vous mettez « _blank » à la place, la page s’ouvrira dans une nouvelle fenêtre.
Résumé du code :
this.bt_exemple.onRollOver = function():Void { this.gotoAndStop("ON"); }; this.bt_exemple.onRollOut = function():Void { this.gotoAndStop("OFF"); }; this.bt_exemple.onRelease = function():Void { getURL("index.htm","_self"); };
Et voilà, vous avez un bouton en flash, très léger et flexible.
Même s’il vous semble plus difficile à créer qu’un bouton de type « bouton », il est plus léger, plus flexible et aussi sera la base pour les prochains tutoriaux, permettant de créer des boutons beaucoup plus intelligents !
