Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox



Communication Flash - Javascript via Externalinterface

Compatible ActionScript 2. Cliquer pour en savoir plus sur les compatibilités.Compatible JavaScript. Cliquer pour en savoir plus sur les compatibilités.Par k-ny, le 19 avril 2007

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


Contenu du zip:

  • Tous les exemples
  • Le fichier swfobject.js

En savoir plus