Communication Flash - Javascript via Externalinterface
Article écrit le par k-ny ( Blog ).
Voici une question frequente:
Comment puis-je agir sur mon swf depuis une page HTML, et comment puis-je agir sur ma page HTML depuis mon swf ?
En se servant de javascript bien sûr ! Javascript c'est souple, ça interagit complètement avec HTML/CSS et ça ressemble de très près à de l'actionscript.
Dans la suite de ce billet, je vais vous montrer comment communiquer entre actionscript et javascript en utilisant la classe externalInterface
.
Attention, cette methode n'est disponible que depuis flash 8, dans le préface je vous fournirais des liens qui indiquent comment faire cette communication sans externalInterface
.
Prérecquis:
- Savoir faire une simple fonction en actionscript (et en javascript, mais c'est pareil)
Preface
ExternalInterface
C'est donc cette methode que je vais vous décrire. Elle est bien plus puissante que les anciennes techniques utilisant fscommand
par exemple.
Elle permet de faire passer plusieurs type de variables (boolean
, String
, function
, Number
, etc …). Donc à noter qu'on peux recevoir directement un return de fonction pour une communication aller-retour direct ! Et ça fonctionne dans les 2 sens !
ExternalInterface
est supporté par la plupart des navigateurs actuels
Je n'ai pas flash 8 ...
Et bien tout n'est pas perdu, voici une serie de liens expliquant diverses techniques de communication javascript-flash:
Ce que cette communication peut m'apporter
- Piloter une vidéo depuis des liens dans la page html
- Naviguer dans une animation flash depuis des liens dans la page html
- Modifier le contenu de votre page html depuis flash
- Recuperer des infos que seul javascript permet d'obtenir (nom de la page, utiliser les expressions régulières, etc …)
- Etc …
De Flash vers Javascript
Explications
Alors là je vais vous montrer comment appeler une fonction javascript située sur la page html qui contient notre swf.
Dans les “Exemples divers” (à la fin de cet article), je fourni les exemples plus poussés, comme appeler une fonction js avec plusieurs paramètres, ou comment appeler plusieurs fonction js.
Coté javascript
function exemple(str) { alert(str); }
Donc c'est juste une fonction qui va afficher un message d'alerte.
Coté actionscript
//import de la class external import flash.external.*; //action sur le bouton mon_bouton.onRelease = function() { //nom de la fonction à appeler et le paramètre à passer ExternalInterface.call("exemple", "Coucou"); };
Donc vous creez un bouton nommé mon_bouton
et vous mettez ce code sur la scene.
Coté html
Vous intégrez simplement votre swf dans la page, et vous placez votre javascript soit directement sur la page, soit dans un .js externe.
De Javascript vers Flash
Explications
Alors là je vais vous montrez comment appeler une fonction actionscript depuis un lien html sur la mème page.
Dans les “Exemples divers” (à la fin de cet article), je fourni les exemples plus poussés.
Coté javascript
function appel(str) { document.getElementById("id_flash").echo(str); }
Ici on cible l'id du swf et on lui indique le nom de la fonction actionscript à declencher. On place le tout dans une fonction pour pouvoir l'appeler plus facilement d'un lien html.
Avec une integration normal, cette id
est à mettre comme attribut dans votre balise embed
(id=“id_flash”
).
Avec une integration swfobject, l'id est le 2ème paramètre (var so = new SWFObject(”./external.swf”, “id_flash”, …
)
Coté actionscript
//import de la class external import flash.external.*; //Fonction qui sera appelé depuis javascript function echo(str:String):Void { mon_champs.text = "Execution de la fonction echo() en fesant passer un paramètre = "+str; } ExternalInterface.addCallback("echo", null, echo);
Donc vous creez un champs de texte dynamique nommé mon_champs
et vous mettez ce code sur la scene.
Coté html
Vous intégrez simplement votre swf dans la page, et vous placez votre javascript soit directement sur la page, soit dans un .js externe.
Ensuite vous placez ce code dans le body de votre page:
<a href="#" onclick="appel('Hello World'); return false;"><strong>Appel - Appel avec passage d'un paramètre</strong></a><br />
C'est donc un lien qui va appeler la fonction javascript.
Aller-Retour
Allez avec retour de fonction javascript
Alors ce qui est pratique avec externalInterface
, c'est que l'on peut faire transiter tous types de variable. En l'occurence, on va se servir de la methode “flash vers javascript” avec juste un return
de la fonction javascript.
Coté javascript
function exemple() { var nav = navigator.appName+' ('+navigator.userAgent+')'; return nav; }
Voilà une fonction qui va retourner le type de navigateur utilisé.
Coté actionscript
//import de la class external import flash.external.*; //On met le retour de la fonction dans un champs de texte mon_champs.text = ExternalInterface.call("exemple");
Donc vous creez un champs de texte dynamique nommé mon_champs
et vous mettez ce code sur la scene.
Coté html
Vous intégrez simplement votre swf dans la page, et vous placez votre javascript soit directement sur la page, soit dans un .js externe.
Et voilà, on vient de faire un aller retour en utilisant une seule des methodes disponibles via externalinterface
Allez et retour complet
Ici nous allons combiner les 2 première methode vue, donc une action d'appel vers javascript, qui à son tour va faire une action d'appel vers notre swf.
Coté javascript
function exemple(){ document.getElementById("id_flash").echo('titre de cette page -->'+document.title); }
Ici au lieu de retourner une valeur, on appel une fonction qui se trouve dans notre swf.
Coté actionscript
//import de la class external import flash.external.*; //On declenche une fonction javascript qui va declencher une fonction flash bouton.onRelease = function() { ExternalInterface.call("exemple"); }; function echo(str:String):Void { mon_champs.text = "Retour de la fonction javascript : "+str; } ExternalInterface.addCallback("echo", null, echo);
Donc vous creez un champs de texte dynamique nommé mon_champs
, un bouton nommé bouton
et vous mettez ce code sur la scene.
Au clic sur le bouton, le champs va recevoir le callback
de la fonction javascript.
Coté html
Vous intégrez simplement votre swf dans la page, et vous placez votre javascript soit directement sur la page, soit dans un .js externe.
Et voilà, on vient de faire un aller retour en utilisant les 2 methodes combinées disponible via externalinterface
, l'avantage par rapport à la version qui n'utilise qu'une methode, c'est qu'ici on peut renvoyer autre choses que des données.
On peut aussi combiner les 2 versions pour appeler une fonction ET renvoyer des données.
Exemples
Download
En savoir plus
