Cet ensemble d'exercices va permettre d'explorer la mise en place et la gestion de bouton dans nos animations ainsi que l'interaction et la navigation au sein d'une TimeLine
Gestion d'un Rollover par TimeLine
Cet exercice est identique à l'exercice de navigation détaillé dans le chapitre Boutons & Navigation , à la différence qu’il utilise des boutons invisible servant de capteur, et que les actions sont placés sur les entrées en survol et sortie de survol de la souris. Vous pouvez télécharger les fichiers nécessaires flash_as_3_1.fla, ici.
Voici a quoi ressemble code d’un des capteurs bouton:
on (rollOver) {
gotoAndStop("poire");
}
on (rollOut) {
gotoAndStop(1);
}
Deux choses peuvent être détaillés dans cet exercice. La mise en place et la réalisation de boutons invisible pouvant donc être utilisés comme capteurs et le changement d’evenement de souris. Ce dernier s’opère en selectionnant la ligne d’evenement dans le code directement, a ce moment là divers choix se présentent sous forme de case a cocher dans la partie supérieure.
Un bouton invisible est ni plus ni moins qu’un bouton ne possédant qu’une zone de detection cliquable. Flash les matérialisera sur la scene par une délimitation bleu clair, similaire aux zones de mapimage en HTML.
Remarque:
Dans l’exemple de l’exercice fourni, la deuxième partie du code, celle concernant le rollout, n’est pas présente. Si vous desirez le rajouter, il faudra alors la Copier/Coller aux scripts attachés aux divers capteurs. De même afin d’éviter toutes erreurs, il est conseillé de placer les capteurs sur un calque a part et autonome. Ceci evitera lors d’ajout d’images clé de scinder les boutons en deux parties (ceux ayant un type de code, et ceux ayant un autre type de code...)
Autre approche du RollOver par TimeLine
Exercice équivalent si ce n’est que cette fois ci nous utiliserons un capteur, c’est a dire un bouton invisible. Vous pouvez télécharger les fichiers nécessaires flash_as_3_3.fla, ici.
De plus nous ferons appel aux évenements de souris liés au survol. L’astuce ici est aussi de ne pas oublié les diverses manipulations que l’utilisateur peut faire, par exemple cliquer sur la zone, et glisser en restant cliquer à l’extérieur de la zone. Ceci peut être contourné en ajoutant un événement dragout (faire glisser en éloignant)... De même pour le phénomène inverse si par exemple l’utilisateur reglisse sur une zone en étant toujours cliqué. etc.. etc...
Voici une copie des codes du boutons
on (rollOver, dragOver) {
_parent.gotoandstop(_name);
}
on (rollOut, dragOut) {
_parent.gotoandstop (1);
}
Par contre cette fois ci pas besoin d’encapsuler notre bouton dans un clip conteneur, car il n’y a pas de ClipEvent.
Bouton Complet
Cet exercice permet de reproduire de manière différente un effet similaire a l’exercice précédent. Vous pouvez télécharger les fichiers nécessaires flash_as_3_2.fla, ici.
Cette fois ci, aucune ligne de code ne sera utilisée. Simplement l’animation sera placée à l’intérieur même du bouton dans sa partie ”dessus” et ”abaissé”, alors que sera placé une zone délimitant le capteur dans la partie ”Cliquable”.
Gestion du survol
La meilleure façon de procéder, reste de se placer sur l’image de fond, de selectionner l’outil plume et de tracer un détourage de la zone que l’on veut sensible directement sur l’image. Une fois le tracet refermé et rempli, nous pouvons le selectionner et le convertir en symbole par le menu Insertion --> Convertir en symbole (F8). En double cliquant dessus ce nouveau symbole nous allons pouvoir le modifier en place, il sufira alors de selectionner sa premiere image clé et de la faire glisser vers le quatrième secteur correspondant a la zone cliqauble. Il ne nous restera plus qu’a créer un calque suplementaire pour recommencer l’operation, mais cette fois ci pour mettre en place l’animation qui se produira durant le survol.
Ne pas oublier que si cette animation possède un effet de fondu alpha, il faudra imbriquer un MovieClip dans un MovieClip. le premier MovieClip permettra d’affecter une propriété alpha, le second gerera l’interpolation de mouvement. Ici encore la règle des poupées russes ne fera pas defaut.
Bouton à deux états - Notion d'Interupteur
Jusqu’à présent nous avons vu qu’il était possible d’utiliser des boutons ou des capteurs pour envoyer une instruction a une TimeLine. Nous allons voir au cour de cet exercice comment permettre a un même bouton d’envoyer un jeux d’instruction différent à chaque clik. Vous pouvez télécharger les fichiers nécessaires flash_as_3_4.fla, ici.
Imaginons une animation où une balle traverse l’écran, un bouton placé sur la scène permettra tour à tour de lancer ou stopper l’animation. A chaque fois le libéllé du bouton changera indiquant soit ”Play”, soit ”Stop”.
Détails du clip interupteur
Voyons ceci plus en détail. En fait il s’agit de créer un MovieClip contenants deux occurences du même bouton sur deux images distinctes et possédant chacun une image clé. Sur la première image la premiere occurence du bouton surplombe le texte ”Play”, et sur la deuxième image l’occurence surplombe cette fois ci le texte ”Stop”. Notez au passage que du fait de la présence des images clé distinctes sur chacune des images, le code pourra être différent pour chcun des boutons.
Il ne nous reste plus qu’a nommer l’occurence de l’animation de la balle, par exemple ”laboule”, et de placer les scripts sur chacun des boutons. Le script se decomposera en deux étapes, premièrement il doit demander a l’occurence ”laboule” de soit s’activer soit s’arreter, mais aussi a la TimeLine de son propre MovieClip de permutter ses images.
Détails de l'interaction
Les chemins de cible peuvent être recupérer par l’outil cible de la fenetre Actions. Par contre, il n’est pas nécessaure de preciser un chemin de cible lorsqu’un bouton affecte la TimeLine du MovieClip dans lequel il est imbriqué. Une action Stop(); est nécessaire sur la prmière image de la TimeLine du MovieClip ”Inter” afin d’eviter une mise en boucle de ce MovieClip lors du chargement. Il est à noter que le type ”Image suivante” et ”Image précédente” de l’action GoTo placer sur chacun des boutons, equivaut à un GotoandStop(), et ne nécéssite donc aucun stop(); sur la TimeLine.
Voici l’aspect du code, tour à tour pour chacun des boutons:
on (release) {
_root.laboule.play();
nextFrame();
}
et
on (release) {
_root.laboule.stop();
prevFrame();
}
Bouton glissière à tiroir
Navigation dans la TimeLine
La navigation dans une interface Flash peut se faire de diverses manière. La manière la plus intuitive et la plus logique reste de demander à la tête de lecture de se déplacer dans le temps et d’atteindre une image particulière. Nous allons au cour de cet exercice voir une manière de proceder. Vous pouvez télécharger les fichiers nécessaires flash_as_4_1.fla, ici.
Imaginons que nous ayons trois boutons (Sommaire, Download, et Accueil) et que chacun d’entre eux nous amène vers une interface animée différente.
La totalité de l’animation est ramenée à la TimeLine principale. En fait les boutons sont sur un calque présent tout au long de l’animation. Un calque ‘contenu’ est composé d’autant d’image clé que de boutons plus une première image vide. Chacune des images clé contient un MovieClip permettant ainsi d’introduire une animation autonome et independante de la TimeLine principale. Un calque ‘Labels’ contenant lui aussi autant d’image clé que de boutons permet quant à lui d’attribuer des noms d’etiquette pour chacune des images clés. Enfin, un calque action permet de stopper la tête de lecture des la première image de la TimeLine principale.
Si nous regardons de plus pres chacun des MovieClip présents dans la bibliothèque, on s’apercevra qu’il ne s’agit que de simple animation permettant de simuler des effets de transitions entre chacune des pages. La seule particularité réside dans le fait que chacun des MovieClips possède une action stop(); sur sa dernière image, afin d’eviter une lecture en boucle.
Les actions sur les boutons sont GoTo avec comme option de type ”Etiquette”. Cette action se trouve dans le menu Actions --> Contrôle de l’animation --> Goto.
Dans les divers menus déroulants nous selectionnerons pour chaque bouton, l’étiquette appropriée parmis ”Sommaire”, ”Download” et ”Accueil”. Nous opterons également pour l’option ”Atteindre et Arrêter”, ceci afin d’immobiliser la tête de lecture de la TimeLine principale une fois l’etiquette atteinte. Cela n’affectera aucunement le bon déroulement des animations des divers MovieClips du claque ‘Contenu’, celles ci se trouvant dans une autre TimeLine.
Voici le code du bouton sommaire:
on (release) {
gotoAndStop("sommaire");
}
Flash permet de naviguer aussi bien entre des images, qu’entre des scenes. Les scenes peuvent être créer, ou suprimer par l’intermédiaire du panneaux Fenêtre --> Séquence (Shift F2). Il est à noter trois choses importantes:
- Les scenes ne peuvent pas être affichées simultanément. En d’autres termes dans notre cas, les éléments du menu composés des 3 boutons, s’ils doivent être présents dans chacune des scènes doivent être répétés dans chacune des scènes.
- Lorsque’un bouton est imbriqué dans un clip, il est impossible de lui donner une action goto (une autre scène). Pour cela il faut faire appel au nom d’etiquette. En fait les diverses scènes ne sont qu’une continuité du grande TimeLine virtuelle unique.
- La totalité des éléments composants les diverses scènes font partis de la même bibliothèque. Ceci est tres important en terme d’optimisation pour le telechargement sur le web.
Navigation par Variable
Nous allons voir une exercice trés facile et rapide qui est un mélange entre l’exercice sur la Boutons & Navigation et celui sur les variables. Nous utiliserons le même principe de navigation, à la différence que cette fois ci l’action GoTo, devra utiliser une expression qui est équivalente à la valeur de la variable texte plaçée sur la scène. Vous pouvez télécharger les fichiers nécessaires flash_as_4_2.fla, ici.
La seule difficulté reside dans le fait que la variable et le bouton sont imbriqués dans des MovieClip différents. Soit nous passons par une commande Objet, soit directement en ajoutant une commande evaluate qui nous permet d’accéder à une ligne d’expression que nous aurons libre choix de remplir. Actions --> Actions diverses --> Evaluate.
La commande aposé sur le bouton devra affecter directement la scène, car c’est la TimeLine de la scène qui doit se déplacer. Nous pouvons saisir _root.gotoAndStop(). Il est préferable de faire référence à la scène au travers de _root, car _level0 serait trop limitatif dans le cas où nous devions utiliser cette animation avec un chargement de scène. En clair si nous chargions ultérieurement cette animation en _level10, le code ne fonctionnerait plus.
Le gotoandstop(), lui, est obtenu par le menu Objets --> Animation --> Movie Clip --> Méthodes --> GotoAndStop. Comme paramètre, nous devons aller identifier la variable ”destination” contenu dans l’occurence ”texte”, donc nous tapons entre les parenthèse le chemin d’accés texte.destination.
Voici le code du bouton:
on (release) {
_root.gotoAndStop(texte.destination);
}
Navigation par Variables Dynamiques
Cette fois ci nous allons inclure la variable de destination à l’interieur du bouton, de cette manière cela optimisera ainsi l’ensemble de l’animation. Vous pouvez télécharger les fichiers nécessaires flash_as_4_3.fla, ici.
L’idée est donc de construire le bouton contenant, en plus de son graphisme, un champs variable ”lenom”. Afin de faciliter la mise en place nous allons demander à Action Script d’en écrire le contenu. Pour cela nous allons nous aider, d’une troisième famille de script qui sont les ClipEvent.
Jusqu’à présent nous avions vu les Script d’image, placés directement sur la TimeLine et interprétés par la tête de lecture, et les scripts d’actions apposés sur les occurences de boutons. Les ClipEvent quand à eux se placent directement sur les occurences de MovieClip. Les évenements declencheurs pour ce type de script sont pour les plus utilisés on clipevent(load), clipevent(enterframe), et clipevent(unload), il est aussi possible de gerer les evenements utilisateurs souris et clavier.
L’avantage de ces scripts reste leur grande souplesse d’utilisation et l’apparition de la gestion d’evenement comme ‘load’ et ‘enterframe’. Par contre leur gros inconvénient est qu’ils sont apposés sur la scène et donc ne font pas partie du MovieClip lui-même, donc ils disparaissent de la bibliothèque. La solution reste d’encapsuler le MovieClip porteur de script à l’intérieur d’un autre MovieClip conteneur.
Nous allons voir sur le scéma ci-contre le détail de la logique à mettre en place pour automatiser nos boutons. L’idée sera d’utiliser le nom d’occurence du MovieClip conteneur principal pour initialiser la variable du bouton ainsi que définir l’action concernant le déplacement de la tête de lecture principale.
De ce fait il nous sufira ensuite de deposer un bouton conteneur sur la scene, de lui donner un nom d’occurence identique au nom de l’etiquette a atteindre et le tour sera joué.
Le bouton sera un simple bouton possédant deux calques, le premier pour le graphisme même du bouton et l’autre contenant une variable texte dynamique. Il faut prendre soin de désactiver les propriétés ‘selectionnable, contour et bordure, HTML’ du texte qui peuvent interferer avec les propriétés du bouton.
Voici les codes du clip:
onClipEvent (load) {
lenom = _parent._name;
}
, puis du bouton:
on (release) {
_parent._parent.gotoAndstop(lenom);
}
Nous pourrions dans certain cas éviter de siter _parent._parent.... et de faire directement appel à la racine de la scène _root. Cela allège les lignes de codes, mais cela ne gène pas au fonctionnement
