Dans les trois premiers tutoriaux, nous avons créé un bouton pouvant réagir à la souris, idéal pour faire un menu par exemple.
Jusqu’ici, nous faisions le visuel dans l’IDE Flash, et le « label » du bouton était rentré dans un champ de texte statique.
L’inconvénient de cette façon de faire est que la mise à jour d’un menu complexe, composé d’une multitude de boutons de ce type, devient très laborieuse et la bibliothèque de Flash devient vite encombrée, dégradant la lisiblité générale de votre source.
Nous allons donc voir comment faire, par code, pour dynamiser la création de votre bouton.
Nous allons reprendre le bouton créé dans le tutorial 3/6.
Dans le clip qui contient notre bouton, et ses différentes animations, nous avons un calque réservé au « label » du bouton (« Accueil » dans mes exemples).
Sur ce calque, nous avons deux interpolations consécutives, la première pour le survol du bouton, la seconde pour la sortie du survol. Les transformations réalisées pendant ces interpolations se font sur un clip contenant un champ de texte statique.
Rentrez dans ce clip, et sélectionnez le champ de texte.
Dans le panneau de Propriétés, sélectionnez dans le menu déroulant de gauche l’option « Texte dynamique ». Les différences avec le « Texte statique » sont nombreuses :
- il vous permet de « piloter » les propriétés de ce champ par code (texte affiché, taille, position, couleur, appliquer des CSS, etc.)
- la surface du champ texte n’est plus entièrement auto-ajustable, à vous de délimiter une zone à sa création
- la typo associée à ce champ texte DOIT être intégrée à votre animation, impliquant une augmentation du poid de votre animation (dans mon exemple, le poid augmente de 25 Ko), et ceci par typographie intégrée, mais évitant des réactions imprévisibles lors de l’exécution de votre animation
- il n’est possible d’appliquer des rotations à votre champ de texte dynamique QUE si la typographie est intégrée
- etc.
ATTENTION : la combinaison de champ de texte dynamique et de masque peut avoir des comportements imprévisibles. Imbriquez bien vos éléments dans des movieclips, et si le problème persiste, n’hésitez pas à effacer et recréer vos éléments.
Maintenant que notre champ de texte est du bon type, il nous faut le paramètrer. Dans notre exemple, nous allons voir les six options les plus importantes :
1 – Nom de l’occurence : mot clé permettant à notre code de cibler ce champ texte
2 – Type de ligne : précise le comportement du champ de texte lorque le texte dépasse la surface définit à la création du champ texte
3 – Sélectionnable : précise si le texte pourra être sélectionnable à la souris pendant l’exécution de l’animation
4 – Rendre le texte au format HTML : précise si le texte à afficher comportera ou pas des balises HTML (balises supportées : voir doc « Présentation des balises HTML prises en charge » - touche F1)
5 – Méthode de rendu des polices : selon que votre champ texte soit animé (déplacé ou animation de filtres) ou pas, vous pouvez adapter son type de rendu pour améliorer son affichage (« pour l’animation » si animé, « pour la lisibilité » sinon)
6 – Intégrer : intègre la police dans l’animation
Vous avez la possiblité de sélectionner précisement les packs de glyphes nécessaires à votre champ de texte, pour éviter de vous retrouver avec de milliers de glyphes intégrés pour un champ qui n’affichera que des chiffres par exemple.
Pour un champ de texte affichant du texte courant (avec des caractères accentués/spéciaux), les packs à intégrer sont les suivants :
- majuscules
- minuscules
- chiffres
- ponctuations
- latin basique
- latin I
- latin étendu A
- latin étendu B
- latin étendu supplémentaire
Dans notre exemple, nous allons nommer notre occurrence « txt_bouton », laisser le type de ligne à « une seule ligne », décocher « sélectionnable » ainsi que « html », mettre l’anti-aliasing sur «animation» et intégrer tous les packs de glyphe cités plus haut.
Notre champ texte étant paramétré, vous pouvez supprimer le texte qu’il contient, son enveloppe ne se redimmensionnera pas.
Revenez sur le clip parent, et donnez un nom d’occurence au clip contenant le champ texte.
ATTENTION : sur le calque contenant le « label » du bouton, nous avons quatre image-clés, chacune contenant le clip que l’on vient de nommer. Il est obligatoire de donner le même nom d’occurence à chacun des clips (les quatre), sinon le code n’arrivera pas à le cibler correctement.
Nous avons fini les modifications dans la partie visuelle, nous allons maintenant nous occuper du code.
Dans le code présent sur la première frame de la scène principale de votre animation, nous allons modifier le code déjà présent :
// référence au bouton var bouton:MovieClip = this.bt_exemple; // détermine si on est sorti du survol du bouton pendant l'animation de survol bouton.sortie = false; // détermine si une animation de survol est en cours bouton.anim = false; // gestion du survol bouton.onRollOver = function():Void { // lance l'animation de survol this.gotoAndPlay("ON"); // réinitialise la variable drapeau this.sortie = false; // déclare l'animation de survol en cours this.anim = true; }; // gestion de la sortie du survol bouton.onRollOut = function():Void { // si la souris n'est pas sortie du bouton pendant l'animation de survol ET que l'animation de survol n'est plus en cours if ((!this.sortie) && (!this.anim)) { // lance l'animation de sortie de survol this.gotoAndPlay("OFF"); } else if (this.anim) { // si l'animation de survol est en cours, on déclare que l'animation de survol doit directement enchaîner avec celle de sortie de survol this.sortie = true; } }; // gestion du clic (déclenchement au relâché) bouton.onRelease = function():Void { // ouvre dans une nouvelle page le lien renseigné getURL("index.htm", "_self"); }; Déjà, nous allons créer, au dessus du code présent, une variable qui va être de type « String » et qui va définir le « label » de notre bouton. var nomBouton:String = "ACCUEIL"; Ensuite, nous allons créer un variable, toujours de type « String », qui mémorisera le lien du bouton. var lienBouton:String = "<a href="http://www.google.fr/">http://www.google.fr</a>"; Pour afficher le label du bouton, juste après la création de la variable « bouton » (référence au bouton), nous allons cibler notre champ texte et utiliser sa méthode « text » : bouton.mc_texte.txt_bouton.text = nomBouton;
Si vous compilez à ce stade votre animation, vous verrez s’afficher « ACCUEIL » sur votre bouton.
Il faut maintenant associer le lien « lienBouton » au bouton, pour cela, à la suite du code tapé juste au-dessus, nous allons utiliser la propriété dynamique de la classe MovieClip pour créer une propriété à la volée :
bouton.lien = lienBouton;Dans le gestionnaire d’événement « onRelease » du bouton, nous allons récupérer cette valeur :
getURL(this.lien, "_blank");
Le « this » ici cible l’occurence de la classe MovieClip correspondant à notre bouton.
Donc, le « this.lien » correspond à la valeur de « lienBouton » au moment où on l’a associer au bouton.
bouton.lien = lienBouton; lienBouton = « index.htm »;
Si nous avions tapé ce code, la valeur récupérée dans le gestionnaire « onRelease » aurait été la même, i.e. “http://www.google.fr“.
Résumé du code :
// nom du bouton var nomBouton:String = "ACCUEIL"; // lien du bouton var lienBouton:String = "http://www.google.fr"; // référence au bouton var bouton:MovieClip = this.bt_exemple; // affiche le nom du bouton bouton.mc_texte.txt_bouton.text = nomBouton; // mémorise le lien du bouton bouton.lien = lienBouton; // détermine si on est sorti du survol du bouton pendant l'animation de survol bouton.sortie = false; // détermine si une animation de survol est en cours bouton.anim = false; // gestion du survol bouton.onRollOver = function():Void { // lance l'animation de survol this.gotoAndPlay("ON"); // réinitialise la variable drapeau this.sortie = false; // déclare l'animation de survol en cours this.anim = true; }; // gestion de la sortie du survol bouton.onRollOut = function():Void { // si la souris n'est pas sortie du bouton pendant l'animation de survol ET que l'animation de survol n'est plus en cours if ((!this.sortie) && (!this.anim)) { // lance l'animation de sortie de survol this.gotoAndPlay("OFF"); } else if (this.anim) { // si l'animation de survol est en cours, on déclare que l'animation de survol doit directement enchaîner avec celle de sortie de survol this.sortie = true; } }; // gestion du clic (déclenchement au relâché) bouton.onRelease = function():Void { // ouvre dans une nouvelle page le lien renseigné (mettre "_self" pour ouvrir dans la même page) getURL(this.lien, "_blank"); };
Ce tutorial est fini, il n’est qu’une étape, on verra la prochaine fois comment récupérer le nom des « labels » et la valeur des liens depuis la page HTML, puis comment générer des boutons à la volée !
