La communication Flash/HTML

La communication Flash/HTML

Interprété la plupart du temps depuis une fenêtre de navigateur, Flash offre de nombreuses fonctionnalités qui favorisent l’échange entre des contenus HTML et Flash. Vous pouvez gérer l’historique de navigation de Flash depuis le navigateur. Vous pouvez aussi appeler une configuration particulière d’un document Flash, en fonction de la page HTML qui y fait référence, en invoquant par exemple directement une image-clé du scénario. Naturellement, vous pouvez également lancer des pages HTML à partir de Flash. Enfin, pour offrir encore plus de fonctionnalités dans l’interface de Flash, et rappeler certaines options de la fenêtre de navigateur, le menu contextuel de Flash est personnalisable et vous pouvez y attacher les instructions de votre choix. Enfin, vous pouvez, en ajoutant un paramètre dans la page HTML, configurer une animation Flash pour rendre la scène transparente. Dans ce chapitre, nous allons aborder l’ensemble de ces mécanismes pour vous permettre d’intégrer efficacement vos réalisations au sein d’un environnement web HTML. À l’issue de ce chapitre, vous serez capable d’élaborer facilement des liaisons entre différents types de contenus, réalisés en HTML et en Flash.

Menu contextuel du lecteur Flash

Un menu contextuel est accessible par le clic-droit de la souris sur la fenêtre de l’animation. Si votre souris ne dispose pas du clic-droit, le menu contextuel peut apparaître en effectuant simultanément un clic de souris et en appuyant sur la touche Contrôle du clavier. La classe contextMenu de Flash permet de personnaliser une partie du menu contextuel. L’option d’affichage de la version du lecteur reste cependant affichée. Vous pouvez aussi choisir de conserver certaines des options disponibles par défaut, comme l’option Imprimer, par exemple. Dans cette section, nous allons voir comment personnaliser un menu contextuel sur un symbole de type MovieClip. Nous allons permettre à l’utilisateur d’afficher une nouvelle image, en sélectionnant une option du menu contextuel à l’emplacement d’une photo, pour ce faire (voir Figure 14.1). LivreActionScript.book Exemples > ch14_communicationFlashHTML_1.fla Dans le document « ch14_communicationFlashHTML_1.fla », dans la scène principale, un symbole vegetal_mc décore la scène. Au-dessus, un MovieClip nommé galerie_mc affiche une suite d’images. Dans le document SWF si l’utilisateur effectue un clic-droit sur l’image affichée, une option propose de voir une autre image. Si l’option est activée, une nouvelle image apparaît aussitôt. Dans la fenêtre de scénario de la scène principale, le calque Actions affiche le code suivant : //——————— actions galerie_mc.stop(); //——————— Personnalisation du menu contextuel // attacher le menu à un objet var menuContextuel:ContextMenu= new ContextMenu(); galerie_mc.contextMenu=menuContextuel; // purger le contenu par défaut menuContextuel.hideBuiltInItems(); var entreesParDefaut:ContextMenuBuiltInItems=menuContextuel.builtInItems; entreesParDefaut.print=true; // ajouter les entrées du menu var entree1:ContextMenuItem=new ContextMenuItem(« Voir une autre image »); menuContextuel.customItems.push(entree1); entree1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, fonctionEntree1); // attacher les fonctions aux entrées function fonctionEntree1(evt:ContextMenuEvent) { if (galerie_mc.currentFrame==galerie_mc.totalFrames) { galerie_mc.gotoAndStop(1); } else { galerie_mc.nextFrame(); } } Pour créer un menu contextuel, nous devons d’abord purger les entrées existantes. C’est alors que nous ajoutons de nouveaux éléments auxquels nous associerons des fonctions. Dans notre exemple, la première instruction interrompt la tête de lecture sur la première image du symbole galerie_mc : //——————— actions galerie_mc.stop(); Nous attachons ensuite un nouvel objet menuContextuel à notre galerie. Nous pouvons, ainsi, spécifier un menu différent pour chaque conteneur, si nous le souhaitons : // attacher le menu à un objet var menuContextuel:ContextMenu= new ContextMenu(); galerie_mc.contextMenu=menuContextuel; Puis, nous purgeons le menu actuel de ses entrées affichées par défaut. // purger le contenu par défaut menuContextuel.hideBuiltInItems(); Nous utilisons ici plusieurs méthodes. La première, hideBuiltInItem() supprime tous les éléments sauf les paramètres du lecteur Flash. Il est possible de conserver néanmoins certaines options. Pour cela, il suffit de les ajouter à la liste vidée. Pour ajouter une option par défaut, nous typons un nouvel objet ContextMenuBuiltInItem auquel nous spécifions l’option à intégrer : var entreesParDefaut:ContextMenuBuiltInItems=menuContextuel.builtInItems; entreesParDefaut.print=true; Les options disponibles par défaut sont : forwardAndBack (affiche une image en arrière ou en avant), loop (boucle), play (lire), print (imprimer), quality (qualité), rewind (rembobiner), save (enregistrer) et zoom (zoom). Pour les activer, il suffit de les attacher au menu désigné et de les passer en true, comme dans notre exemple avec l’option d’impression print. Une fois la structure de base définie, nous pouvons personnaliser le menu en y intégrant nos propres entrées : // ajouter les entrées du menu var entree1:ContextMenuItem=new ContextMenuItem(« Voir une autre image »); menuContextuel.customItems.push(entree1); Pour ajouter une entrée, nous créons un nouvel objet ContextMenuItem() et renseignons, en paramètre, une chaîne de caractères qui correspond au texte à afficher dans le menu. Pour ajouter cet objet au menu, nous l’implémentons comme pour l’ajouter à un tableau, à l’aide de la méthode push(). Attention, l’objet doit être implémenté en tant qu’entrée – élément d’une liste. Nous devons pour cela préciser la propriété customItems, juste avant d’appliquer la méthode push(). LivreActionScript.book Vous pouvez ajouter autant d’entrées que voulu. Créez alors autant de nouveaux objets ContenuMenuItem. Lorsque les entrées ont été ajoutées, il ne reste plus qu’à leur affecter une action. Nous utilisons, pour établir cette relation, un écouteur avec l’événement MENU_ITEM_SELECT qui désigne le moment où l’utilisateur sélectionne l’entrée du menu : entree1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, fonctionEntree1); Puis, nous développons les actions appelées. Dans notre exemple, la fonction affiche une nouvelle image de la galerie, avec la méthode nextFrame(). Si cette image est la dernière de la séquence animée, alors, la tête de lecture revient à la première image. Elle boucle : // attacher les fonctions aux entrées function fonctionEntree1(evt:ContextMenuEvent) { if (galerie_mc.currentFrame==galerie_mc.totalFrames) { galerie_mc.gotoAndStop(1); } else { galerie_mc.nextFrame(); } }

Navigation Flash vers le HTML

La base de la communication entre un contenu en Flash et une page HTML est la création de liens. Ces liens appellent une page HTML, un site distant ou activent l’ouverture d’un logiciel de messagerie, par exemple. Dans cette section, nous présentons la syntaxe de création de lien dans Flash pour appeler une page HTML et d’autres types de références hypertextes (sites, messagerie, PDF). Exemples > ch14_communicationFlashHTML_2.fla Sur la scène principale du document « ch14_communicationFlashHTML_2.fla » figure un bouton affichant un texte simple : « >Retour à la page HTML » (voir Figure 14.3). À retenir • Pour créer un menu contextuel personnalisé, nous utilisons la classe contextMenu. • Les options du menu contextuel de Flash, affichées par défaut, peuvent être supprimées ou partiellement conservées. Seule la version du lecteur ne peut être supprimée du menu contextuel. Figure 14.3 Aperçu de la scène principale. LivreActionScript.bookDans le fichier SWF, en cliquant sur le bouton, une page HTML est bien appelée ; page dont nous détaillons d’ailleurs le contenu dans la section suivante. Dans la fenêtre de scénario de la scène principale, sur le calque Actions, nous pouvons lire le code suivant : // lien HTML lienHTML_btn.addEventListener(MouseEvent.CLICK,lienHTML); function lienHTML (evt:MouseEvent) { navigateToURL(new URLRequest(« ch14_communicationFlashHTML_3b.html »)); } En ActionScript 3, pour appeler une page HTML, nous utilisons la méthode navigateToURL et spécifions, en paramètre, un objet URLRequest qui fait référence à une adresse définie sous la forme d’une chaîne de caractères. L’adresse utilisée peut appeler une page web locale, au sein du même site que la page qui contient le document Flash. Les exemples suivants invoquent différents éléments : • une page de contact au format PHP : navigateToURL(new URLRequest(« contact.php »)); • une adresse de site web distant : navigateToURL(new URLRequest(« http://www.pearson.fr/ »)); • l’ouverture d’une fenêtre de messagerie : navigateToURL(new URLRequest(« mailto:contact@pearson.fr?subject=demande de ➥ renseignement »)); • l’ouverture d’un PDF : navigateToURL(new URLRequest(« nomDuDocument.pdf »)); • Pour appeler un site dans une nouvelle fenêtre, nous ajoutons la cible : navigateToURL(new URLRequest(« http://www.pearson.fr », « _blank »)); Les cibles d’affichage. Pour chaque lien hypertexte créé, une cible permet de définir la manière dont le navigateur affiche la page appelée. Lorsque les sites web usaient encore, dans le passé, de structures composées de jeux de cadres (framesets), nous pouvions utiliser les valeurs _self, _blank, _parent ou _top afin de déterminer si la page appelée devait se substituer ou non aux jeux de cadres. Les liens demeurant désormais indépendants de ce type de structure, nous n’utilisons plus que_self ou _blank. • _self : la cible _self équivaut à ne rien indiquer et signifie que la page appelée doit s’afficher dans le même cadre que celui où l’on a cliqué. • _blank : la cible _blank appelle l’affichage dans une nouvelle fenêtre de navigateur. Le terme anglais Blank désigne un espace vierge, représenté ici par l’ouverture d’une nouvelle fenêtre. Ne confondez pas ce mécanisme avec le comportement JavaScript permettant d’enclencher l’ouverture d’une fenêtre pop-up, que les usages ont également proscris. L’affichage d’une page avec _blank établie en outre une rupture sémantique avec la page initiale. Cette technique d’affichage ne doit donc pas être abusée, surtout dans le contexte de création de sites qui doivent répondre aux règles élémentaires d’accessibilité (voir aussi les sections en fin d’ouvrage sur l’accessibilité). La plupart des contenus appelés s’affichent dans la même fenêtre que le document Flash, à la place du Flash lui-même, à l’exception des scripts JavaScript ou PHP (ou autres) éventuellement invoqués. Les pages pour lesquelles une cible de type _blank est également associée s’affichent dans une nouvelle fenêtre de navigateur et préservent l’affichage de votre document dans la fenêtre initiale. Attention, cette option n’est recommandée que pour les liens faisant appel à des éléments situés à une autre URL, car elle entraîne une rupture sémantique du flux qui peut perturber certains utilisateurs. Lorsque vous désignez une adresse d’un site ou d’une page distante, veillez à toujours commencer l’adresse par http://. Si les liens créés appellent des instructions localisées dans la page HTML qui contient le Flash, ou lorsque des actions ne peuvent être lancées que par un navigateur, pour tester le bon fonctionnement des liens hypertextes, il est recommandé de projeter la page dans un navigateur et non de vérifier les animations seulement depuis Flash en publiant le fichier SWF. Le lecteur Flash, activé à la publication du document, n’est pas un navigateur. Ainsi, il ne peut exécuter tous les types de liens (notamment pour l’ouverture de la fenêtre de messagerie ou lancer les scripts exécutés localement ou depuis un serveur distant).