Accueil / Support / Index des TechNotes /

Flash TechNote

Exemple de communication entre JavaScript et Macromedia Flash

Voici plusieurs exemples de communication entre Macromedia Flash et un document HTML utilisant JavaScript, suivis des étapes pour les recréer.

Conditions préalables :

Une bonne connaissance de JavaScript est requise pour pouvoir tirer pleinement parti de ces techniques. Ceci n'étant pas l'objectif de cette TechNote, de nombreuses ressources sont disponibles pour l'apprentissage de JavaScript. Consultez la section Informations complémentaires en bas de ce document pour plus de détails. Les programmateurs chevronnés peuvent lire l'article Scripting with Flash* (Programmation dans Flash), qui contient une présentation des méthodes JavaScript pouvant contrôler le lecteur Macromedia Flash Player.

Trois types de communication Flash/JavaScript sont abordés dans cette TechNote :

Communication JavaScript - Flash - Utilisation d'une méthode JavaScript de Flash Player
Communication Flash - JavaScript - Utilisation de la fscommand de Flash
Communication Flash - Flash - Utilisation d'un objet de connexion local ou combinaison des deux techniques ci-dessus

Le script navigateur n'est pas une fonction disponible sur tous les navigateurs. Pour communiquer avec Flash Player, le navigateur doit disposer de hooks intégrés que Flash Player peut « écouter ». Navigateurs requis :

Netscape Navigator 3.0 à 4.7x et Netscape 6.2 ou version ultérieure

(Windows 95/98/NT/2000/XP ou Mac OS ; LiveConnect et compatible Java)
Internet Explorer 3.0 ou version ultérieure

(Windows 95/98/NT/2000/XP uniquement ; compatible ActiveX)

Remarque : Internet Explorer pour Macintosh et les premières versions de Netscape 6 ne prennent pas en charge cette méthode. Consultez la section Informations complémentaires en bas de ce document pour plus de détails.

Communication JavaScript - Flash

Cet exemple montre comment utiliser une méthode Flash pour envoyer une variable d'un champ de saisie de texte HTML vers un fichier Flash intégré dans le même document HTML. La date entrée dans le champ de texte HTML s'affichera dans le champ de texte du fichier Flash grâce à la méthode SetVariable de Flash.

Afficher l'exemple : Exemple 1 *

Télécharger le fichier source :

javascript_to_flash.zip (17 Ko)

Etapes à suivre :

Dans Flash

Créez un nouveau fichier dans Flash et enregistrez-le sous le nom javascript_to_flash.fla.
Placez un champ de texte sur la scène à l'aide de l'outil Texte.
Sélectionnez le champ de texte, puis dans le panneau Propriétés, choisissez Texte dynamique dans le menu déroulant. Saisissez « myVar » dans le champ de variable.

Remarque : La meilleure pratique consiste à utiliser le champ Occurrence et d'y entrer le nom d'occurrence myVar.text. Nous utilisons le champ de variable pour des raisons de simplicité et afin de préserver la rétrocompatibilité de cette méthode avec les versions 4 et 5 de Flash.
Enregistrez le fichier.
Publiez une page HTML et un fichier Flash SWF à l'aide de la fonction Publier de Flash ; choisissez le modèle HTML « Flash uniquement ». La page HTML et le fichier SWF sont créés dans le dossier contenant le fichier FLA d'origine.

Dans Dreamweaver

Les instructions ci-dessous sont spécifiques à Dreamweaver. Cependant, vous pouvez utiliser n'importe quel autre éditeur HTML pour modifier manuellement le code à l'aide des mêmes techniques.

Ouvrez le fichier HTML publié par Flash à l'étape 5.
Insérez le support Flash et le code OBJECT/EMBED
1. Choisissez Insertion > Médias > Flash et sélectionnez le fichier SWF « javascript_to_flash.swf » créé plus haut.
2. Sélectionnez l'espace réservé pour l'animation Flash.
3. Activez le mode Code de Dreamweaver en choisissant Affichage > Code. Les balises OBJECT et EMBED que vous devrez rechercher apparaissent en surbrillance.
4. Dans la balise OBJECT, entrez la valeur id="myFlash" si cela n'est pas déjà fait. Assurez-vous également que la valeur name="myFlash" n'est PAS présente dans la première partie du code, la partie OBJECT principale de la balise.
```
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/
 flash/swflash.cab#version=5,0,0,0"
 width=366 height=142 id="myFlash">
```
  Remarque : Si vous faites un copier-coller vers Dreamweaver, assurez-vous de supprimer les sauts de ligne superflus dans le script. Autrement, des erreurs pourraient survenir sur la page.
  
  Remarque : Dans les versions 6.2 et ultérieures de Netscape, vous devez supprimer l'attribut name de la balise object afin de permettre la communication du script. Un champ de l'inspecteur des propriétés de Dreamweaver écrit automatiquement les deux attributs. Vous devez donc modifier le code manuellement afin de vous assurer que les balises sont correctes.
5. Dans la section EMBED de la balise, entrez les valeurs name="myFlash" et swLiveConnect="true", si cela n'est pas déjà fait. Assurez-vous qu'il n'y ait aucune valeur "id" dans cette section (balise EMBED).
```
<embed src="javascript_to_flash.swf" quality=high width=366 height=142
 type="application/x-shockwave-flash"
 pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?
 P1_Prod_Version=ShockwaveFlash"
 name="myFlash" swLiveConnect="true">
</embed>

</object>
  
```
Créez le champ de formulaire HTML
1. Revenez en mode Création (Affichage > Création).
2. Choisissez Insertion > Objet de Formulaire > Champ de texte (si vous êtes invité à ajouter une balise de formulaire, cliquez sur Oui).
3. Modifiez les balises HTML du champ de texte de la manière suivante : <input type="text" name="sendText" maxlength="45" onChange="doPassVar(this)">
  
  Le gestionnaire onChange est automatiquement appelé après tout changement apporté au contenu du champ de texte. La fonction doPassVar() (voir étape suivante) est appelée lors d'un changement.
Créez la fonction Javascript qui transmet la valeur

Copiez et collez le JavaScript suivant entre les balises <head> et </head> du code source HTML :
```
<SCRIPT LANGUAGE=JavaScript>

</SCRIPT>
```
Cette fonction JavaScript est appelée lorsqu'un changement est validé dans le champ de texte. Elle utilise la méthode JavaScript SetVariable de Flash pour définir la variable myVar dans l'animation Flash à la valeur entrée dans le champ de texte du formulaire HTML.
Choisissez Fichier > Enregistrer.
Testez ou prévisualisez le fichier dans un navigateur en appuyant sur la touche F12.

Communication Flash - JavaScript

Nous avons vu dans l'exemple précédent que vous pouvez envoyer des données d'une page HTML vers une animation Flash. L'inverse est également possible. Cet exemple montre comment utiliser une action Flash fscommand* pour envoyer une chaîne de Flash vers un gestionnaire JavaScript. A titre de démonstration, un message d'alerte JavaScript contenant la valeur envoyée de Flash vers le navigateur s'affiche.

Afficher l'exemple : Exemple 2 *

Télécharger le fichier source :

flash_to_javascript.zip (17 Ko)

Etapes à suivre :

Dans Flash

Créez un nouveau fichier dans Flash et enregistrez-le sous le nom flash_to_javascript.fla.
Placez un champ de texte sur la scène à l'aide de l'outil Texte.
Sélectionnez le champ de texte, puis choisissez Texte de saisie dans le menu déroulant du panneau Propriétés. Sélectionnez l'icône de bordure pour afficher le champ (voir l'illustration plus haut).
Entrez « inputVar » dans le champ de variable.
Ajoutez un bouton sur la scène. Vous pouvez trouver des exemples de boutons en choisissant Fenêtre > Bibliothèques communes > Boutons.
Sélectionnez le bouton et ouvrez le panneau Actions (Fenêtre > Actions).

Ajoutez l'action fscommand suivante au bouton :

on (release) {
fscommand ("send_var", inputVar);
}

Enregistrez le fichier.
Publiez une page HTML et un fichier Flash SWF à l'aide de la fonction Publier de Flash ; choisissez le modèle HTML « Flash uniquement ». La page HTML et le fichier SWF sont créés dans le dossier contenant le fichier FLA d'origine.

Dans Dreamweaver

Les instructions ci-dessous sont spécifiques à Dreamweaver. Cependant, vous pouvez utiliser n'importe quel autre éditeur HTML pour modifier manuellement le code à l'aide des mêmes techniques.

Ouvrez le fichier HTML créé à l'aide de la commande Publier de Flash à l'étape 9.
Insérez le support Flash et le code OBJECT/EMBED
1. Choisissez Insertion > Médias > Flash et sélectionnez le fichier SWF « javascript_to_flash.swf » créé plus haut.
2. Sélectionnez l'espace réservé pour l'animation Flash.
3. Activez le mode Code de Dreamweaver en choisissant Affichage > Code. Les balises OBJECT et EMBED que vous devrez rechercher apparaissent en surbrillance.
4. Dans la balise OBJECT, entrez la valeur id="myFlash" si cela n'est pas déjà fait. Assurez-vous également que la valeur name="myFlash" n'est PAS présente dans la première partie du code (partie OBJECT principale de la balise).
```
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/
flash/swflash.cab#version=5,0,0,0"
width=366 height=142 id="myFlash">
```
  Remarque : Si vous faites un copier-coller vers Dreamweaver, assurez-vous de supprimer les sauts de ligne superflus dans le script. Autrement, des erreurs pourraient survenir sur la page.
  
  Remarque : Dans les versions 6.2 et ultérieures de Netscape, vous devez supprimer l'attribut name de la balise object afin de permettre la communication du script. Un champ de l'inspecteur des propriétés de Dreamweaver écrit automatiquement les deux attributs. Vous devez donc modifier le code manuellement afin de vous assurer que les balises sont correctes.
5. Dans la section EMBED de la balise, entrez les valeurs name="myFlash" et swLiveConnect="true", si cela n'est pas déjà fait. Assurez-vous qu'il n'y ait aucune valeur "id" dans cette section (balise EMBED).
```
<embed src="javascript_to_flash.swf" quality=high
width=366 height=142
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?
P1_Prod_Version=ShockwaveFlash" name="myFlash" swLiveConnect="true">
</embed> 
</object>
```

Créez la fonction Javascript pour récupérer et afficher la valeur

Insérez le code suivant après les balises d'ouverture dans le document HTML :



<SCRIPT LANGUAGE=JavaScript>
<!--
var InternetExplorer = navigator.appName.indexOf("Microsoft") != -1;
function myFlash_DoFSCommand(command, args)                {
  var myFlashObj = InternetExplorer ? myFlash : document.myFlash;
  alert (args);
}
if (navigator.appName && navigator.appName.indexOf("Microsoft") != -1 && 
  navigator.userAgent.indexOf("Windows") 
!= -1 && navigator.userAgent.indexOf("Windows 3.1") == -1) {
  document.write('<SCRIPT LANGUAGE=VBScript\> \n');
  document.write('on error resume next \n');
  document.write('Sub myFlash_FSCommand(ByVal command, ByVal args)\n');
  document.write(' call myFlash_DoFSCommand(command, args)\n');
  document.write('end sub\n');
  document.write('</SCRIPT\> \n');
} 
//-->
</SCRIPT>

La fonction spécifique correspondant à l'alerte apparaît en rouge. Pour plus de détails sur Javascript, consultez la section Informations complémentaires.

Choisissez Fichier > Enregistrer.
Testez ou prévisualisez le fichier dans un navigateur en appuyant sur la touche F12.

Communication Flash - Flash

Plusieurs animations Macromedia Flash présentes dans le même document HTML peuvent s'envoyer des messages en combinant les deux techniques présentées précédemment. Pour envoyer des messages à partir d'une animation Flash vers un navigateur web, vous utilisez l'action fscommand. Pour envoyer des messages vers une animation Flash à partir d'un navigateur, vous utilisez les méthodes JavaScript de Flash. Pour plus de détails, consultez la TechNote 15692, An example of communication between Flash movies (Exemple de communication entre des animations Flash) *.

A partir de Macromedia Flash MX, des objets de connexion locale peuvent être utilisés pour des communications Flash - Flash. Ceci permet à deux animations Flash du même document HTML, ou à deux fenêtres de navigateur, de s'envoyer des messages sans utiliser JavaScript ou l'action fscommand. Pour plus de détails, consultez l'article Using local connection objects in Macromedia Flash MX *(Utilisation d'objets de connexion locale dans Macromedia Flash MX).

Informations complémentaires

L'article Scripting with Flash* (Programmation dans Flash) contient des exemples de commandes JavaScript que vous pouvez envoyer à l'aide d'une fonction. Pour plus d'informations sur JavaScript, rendez-vous sur le site Webmonkey.com.

Pour plus d'informations sur Internet Explorer pour Macintosh, consultez la TechNote 13638, Flash and Internet Explorer Issues on the Macintosh Platform* (Problèmes rencontrés entre Flash et Internet Explorer sur la plate-forme Macintosh).

Pour plus d'informations sur Netscape et Mozilla, consultez la TechNote 14625, Netscape 6, 6.01 and Mozilla* (Netscape 6, 6.01 et Mozilla).

La TechNote 14159, A comprehensive list of supported Flash features, specific to each browser* (Fonctions Flash prises en charge sur les différents navigateurs), présente les fonctions prises en charge par les différents navigateurs.

L'article Scripting with Flash* (Programmation dans Flash) contient une présentation des méthodes JavaScript pouvant contrôler le lecteur Macromedia Flash Player.

Dernière mise à jour :	6 janvier 2003
Créé(e) le :	25 juillet 2001

ID :	15683
Produit :	Flash
Versions :	Toutes
SE :	Toutes
Navigateur :	Tous
Serveur :	Tous
Base de données :	Toutes
ID précédent :	N/A

Flash TechNote

Exemple de communication entre JavaScript et Macromedia Flash

Conditions préalables :

Netscape Navigator 3.0 à 4.7x et Netscape 6.2 ou version ultérieure

Internet Explorer 3.0 ou version ultérieure

Communication JavaScript - Flash

Télécharger le fichier source :

Etapes à suivre :

Dans Flash

Dans Dreamweaver

Créez le champ de formulaire HTML

Créez la fonction Javascript qui transmet la valeur

Communication Flash - JavaScript

Télécharger le fichier source :

Etapes à suivre :

Dans Flash

Dans Dreamweaver

Insérez le support Flash et le code OBJECT/EMBED

Créez la fonction Javascript pour récupérer et afficher la valeur

Communication Flash - Flash

Informations complémentaires