Méthode avec les actions dans le scénario du lien

Nous présentons d’abord la solution qui consiste à placer les actions des liens imbriqués, dans les liens eux-mêmes. Cette technique est la plus simple à appréhender. Elle permet de placer les objets dans le scénario uniquement lorsqu’ils doivent être actifs. Elle convient parfaitement pour des actions localisées, comme la lecture du scénario à partir d’un objet ajouté localement, sur une image-clé isolée, par exemple. Exemples > ch13_systemesNavigation_2.fla Exemples > ch13_systemesNavigation_2b.fla Dans le document ch13_systemesNavigation_2.fla, nous pouvons voir une interface où des liens, en forme de poids, sont positionnés au-dessus de la partie gauche du décor. Un MovieClip canalise ces objets et porte le nom d’occurrence menu_mc (voir Figure 13.6). À l’intérieur de ce menu, trois symboles de type MovieClip, respectivement nommés bouton1_mc, bouton2_mc et bouton3_mc sont répartis distinctement vers les calques (voir Figure 13.7). Figure 13.6 Aperçu de la scène principale. Figure 13.7 Scénario à l’intérieur du menu. À l’intérieur du symbole bouton1_mc, nous accédons maintenant à une animation où la surface du lien s’étend jusqu’à dessiner une fenêtre. Cette animation prend fin à l’image 24 où la fenêtre est totalement déployée. Le reste de l’animation représente la fermeture de cette fenêtre. La lecture de cette animation est contrôlée par des actions. Un stop, placé à l’image 1 et 24, interrompt la lecture. C’est uniquement, lorsque la tête de lecture atteint l’image 24, que de nouveaux boutons apparaissent à l’écran (voir Figure 13.8). Dans la fenêtre de scénario du bouton 1, un autre objet apparaît également à l’image 24, un movieClip transparent nommé zoneOut_mc et de propriété alpha à 0 %. C’est lui qui permet d’activer la fermeture de la fenêtre, lorsque le pointeur le dépasse. Afin d’activer l’ouverture animée de cette fenêtre, nous avons placé des actions sur la scène principale, en direction de l’objet bouton1_mc lui-même. Pour que les liens situés localement à l’image 24 du symbole bouton1_mc soient actifs, nous avons placé d’autres actions directement dans ce scénario, à l’image 24. Les autres MovieClip boutons de ce document ne contiennent pas de liens isolés. Ils ont été mis en forme uniquement pour illustrer le mécanisme, dans un système plus global, avec plusieurs entrées de menu. Leur scénario ne possède pas les calques menuBouton1_mc ni zoneOut_mc (voir Figure 13.9). Mais le mécanisme adopté pour le premier bouton pourrait y être reproduit. Les actions du calque de la scène principale sont les suivantes : //——————— initialisation var boutonActif:String; //——————— actions //over menu_mc.addEventListener(MouseEvent.MOUSE_OVER,over); function over (evt:MouseEvent) { if (evt.target.currentFrame==1) { evt.target.gotoAndPlay(« _over »); } Figure 13.8 Scénario à l’intérieur du bouton 1. Figure 13.9 Scénario à l’intérieur des boutons 2 et 3. LivreActionScript.book Page 398 Vendredi, 15. janvier 2010 12:34 12 LES SYSTÈMES DE NAVIGATION AVANCÉS 399 } //down menu_mc.addEventListener(MouseEvent.MOUSE_DOWN,down); function down (evt:MouseEvent) { boutonActif=evt.target.name; // if (evt.target.name== »bouton1_mc ») { trace(« action 1″); } if (evt.target.name== »bouton2_mc ») { trace(« action 2″); } if (evt.target.name== »bouton3_mc ») { trace(« action 3″); } } //out menu_mc.addEventListener(MouseEvent.MOUSE_OUT,out); function out (evt:MouseEvent) { if (evt.target.name!= »bouton1_mc ») { if (evt.target.currentFrame==24) { evt.target.gotoAndPlay(« _out »); } } } Les actions localisées dans le symbole bouton1_mc, à l’image 24, sont les suivantes : stop(); // menuBouton1_mc.addEventListener(MouseEvent.CLICK,actionsMenuBouton1); function actionsMenuBouton1 (evt:MouseEvent) { if (evt.target.name== »lien1_mc ») { trace(« action 1 du menu bouton 1″); } if (evt.target.name== »lien2_mc ») { trace(« action 2 du menu bouton 1″); } if (evt.target.name== »lien3_mc ») { trace(« action 3 du menu bouton 1 »); } } // zoneOut_mc.addEventListener(MouseEvent.MOUSE_OUT,sortirBouton1); function sortirBouton1 (evt:MouseEvent) { play(); } Dans la fenêtre d’actions de la scène principale, nous associons une fonction sur le conteneur menu_mc qui accueille les trois boutons : //——————— actions //over menu_mc.addEventListener(MouseEvent.MOUSE_OVER,over); function over (evt:MouseEvent) { if (evt.target.currentFrame==1) { evt.target.gotoAndPlay(« _over »); } }  Dans cette fonction, nous activons la lecture du scénario du bouton cliqué, uniquement si l’image courante du bouton cliqué est l’image 1. Ceci évite que l’animation soit relancée intempestivement lorsque l’utilisateur navigue au sein de la fenêtre, si elle est déployée. Plus bas, dans la fonction associée à l’événement MOUSE_DOWN, nous reprenons le même type d’actions que celles présentées dans la section précédente. En revanche, dans le gestionnaire MOUSE_OUT, nous précisons que l’action de restauration de l’état du bouton ne peut avoir lieu que si le nom du bouton actif est différent de celui qui contient d’autres liens. Autrement dit, l’action de restauration n’apparaît que pour les liens simples. L’action de fermeture de la fenêtre, dans notre exemple, est contrôlée directement à l’image 24, dans le scénario du MovieClip bouton : //out menu_mc.addEventListener(MouseEvent.MOUSE_OUT,out); function out (evt:MouseEvent) { if (evt.target.name!= »bouton1_mc ») { if (evt.target.currentFrame==24) { evt.target.gotoAndPlay(« _out »); } } } Dans le scénario du MovieClip, à l’image 24, nous affectons d’abord un écouteur sur l’enveloppe menuBouton1_mc qui rassemble les trois sous-entrées locales. Pour chaque lien de ce conteneur, nous définissons une action trace spécifique : menuBouton1_mc.addEventListener(MouseEvent.CLICK,actionsMenuBouton1); function actionsMenuBouton1 (evt:MouseEvent) { if (evt.target.name== »lien1_mc ») { trace(« action 1 du menu bouton 1″); } if (evt.target.name== »lien2_mc ») { trace(« action 2 du menu bouton 1″); } if (evt.target.name== »lien3_mc ») { trace(« action 3 du menu bouton 1 »); } } Il n’y a pas de contradiction avec le conteneur principal, car ces objets sont situés au premier plan, et le gestionnaire cible bien un conteneur différent du conteneur principal. Plus bas, une autre action est ajoutée et contrôle la fermeture de la fenêtre : // zoneOut_mc.addEventListener(MouseEvent.MOUSE_OUT,sortirBouton1); function sortirBouton1 (evt:MouseEvent) { play(); } L’action cible tout simplement la forme transparente située au pourtour de la fenêtre. Lorsque cette zone apparaît dans la scène, le pointeur est déjà sur la partie centrale. L’événement MOUSE_OUT permet donc d’activer la fermeture animée de la fenêtre, uniquement si l’utilisateur sort de la zone transparente, par l’extérieur.

Méthode avec les actions sur la scène principale

Une déclinaison du précédent document est proposée dans le fichier « ch13_systemesNavigation_2c.fla ». Ce document prend en charge la gestion des liens imbriqués en plaçant le code directement sur la scène principale, ce qui rend plus facile la liaison des données entre fonctions et simplifie, entre autres, la récupération de valeurs, l’activation d’autres fonctions, la centralisation du code et sa maintenance. Exemples > ch13_systemesNavigation_2c.fla Dans ce document, nous observons que l’intérieur du MovieClip bouton1_mc affiche déjà les objets zoneOut_mc et menuBouton1_mc, dès la première image (voir Figure 13.10). D’autre part, aucune action spécifique, en dehors des stops, n’apparaît non plus à l’image 24. Toutes les actions sont centralisées à l’image 1 du scénario de la scène principale. Dans le code de la scène principale, nous pouvons lire ceci : //——————— initialisation var boutonActif:String; //——————— actions //over menu_mc.addEventListener(MouseEvent.MOUSE_OVER,over); function over (evt:MouseEvent) { if (evt.target.currentFrame==1) { evt.target.gotoAndPlay(« _over »); } } //down menu_mc.addEventListener(MouseEvent.MOUSE_DOWN,down); function down (evt:MouseEvent) { boutonActif=evt.target.name; // if (evt.target.name== »bouton1_mc ») { trace(« action 1″); } if (evt.target.name== »bouton2_mc ») { trace(« action 2″); } if (evt.target.name== »bouton3_mc ») { trace(« action 3″); } } //out menu_mc.addEventListener(MouseEvent.MOUSE_OUT,out); function out (evt:MouseEvent) { if (evt.target.name!= »bouton1_mc ») { if (evt.target.currentFrame==24) { evt.target.gotoAndPlay(« _out »); } } } // liens 1, 2 et 3, dans bouton 1 menu_mc.bouton1_mc.menuBouton1_mc.addEventListener(MouseEvent.CLICK,actions- ➥ MenuBouton1); function actionsMenuBouton1 (evt:MouseEvent) { if (evt.target.name== »lien1_mc ») { trace(« action 1 du menu bouton 1″); } if (evt.target.name== »lien2_mc ») { trace(« action 2 du menu bouton 1″); } if (evt.target.name== »lien3_mc ») { trace(« action 3 du menu bouton 1 »); } } menu_mc.bouton1_mc.menuBouton1_mc.visible=false; // sortie bouton 1 menu_mc.bouton1_mc.zoneOut_mc.addEventListener(MouseEvent.MOUSE_OUT,sortirBouton1); function sortirBouton1 (evt:MouseEvent) { menu_mc.bouton1_mc.play(); } menu_mc.bouton1_mc.zoneOut_mc.visible=false; // gestion de l’affichage des liens dans le bouton 1 addEventListener(Event.ENTER_FRAME,afficherLiens); function afficherLiens (evt:Event) { if (menu_mc.bouton1_mc.currentFrame==24){menu_mc.bouton1_mc.menuBouton1_mc.visible=true; menu_mc.bouton1_mc.zoneOut_mc.visible=true;}else{menu_mc.bouton1_mc.menuBouton1_mc.visible=false; menu_mc.bouton1_mc.zoneOut_mc.visible=false; } } Dans ce document, nous avons déplacé les actions de l’image 24, du symbole MovieClip bouton1_mc, à l’intérieur de la fenêtre actions de la scène principale. Afin que ces actions s’exécutent correctement, nous avons placé les objets ciblés sur la première image du scénario bouton1. Ainsi, ils peuvent être identifiés par la tête de lecture, au moment où les actions de la scène principale sont interprétées. Mais, pour que ces objets n’apparaissent pas au démarrage, nous avons ajouté des contrôles de visibilité, en fonction de l’image active de ce scénario. Le même document, nommé « ch13_systemesNavigation_2d.fla », décliné avec des instructions switch, est également disponible dans les fichiers des exemples du livre. 

Console de navigation en miniature

 Si vous utilisez la fenêtre de navigation de Photoshop ou d’Illustrator, vous êtes sûrement familier avec la navigation dans une fenêtre réduite. Une fenêtre de navigation réduite reprend, en miniature, un aperçu de l’ensemble de la scène et permet à l’utilisateur de s’y mouvoir en Y déplaçant un simple rectangle. Ce rectangle matérialise la zone visible à l’écran. Dans cette section, nous allons voir comment mettre en place ce dispositif de navigation. Nous utilisons pour cela une carte du monde, agrandie à l’échelle de 200 % par rapport à sa taille initiale. Cette carte déborde donc largement de la zone visible par l’utilisateur. C’est en déplaçant le rectangle rouge de la fenêtre de navigation, que l’on fera bouger le contenu, pour accéder aux informations que celui-ci propose (voir Figure 13.11). Exemples > ch13_systemesNavigation_3.fla Dans le document « ch13_systemesNavigation_3.fla », sur la scène principale (voir Figure 13.12), au-dessus du calque fond_mc, nous visualisons le calque contenu_mc À retenir • Des liens peuvent être placés localement dans un objet déjà interactif. Pour cela, ils doivent être placés au premier plan et leurs actions doivent être situées localement au niveau du lien. • Une approche alternative existe. Il est possible de placer les actions sur la scène principale, mais avec des conditions qui neutralisent d’abord l’affichage de l’objet par défaut.