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)

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

Et bien tout n'est pas perdu, voici une serie de liens expliquant diverses techniques de communication javascript-flash:

• Exemple de communication entre JavaScript et Macromedia Flash
• Publishing and Exporting

• 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 …

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.

function exemple(str) {
	alert(str);
}

Donc c'est juste une fonction qui va afficher un message d'alerte.

//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.

Vous intégrez simplement votre swf dans la page, et vous placez votre javascript soit directement sur la page, soit dans un .js externe.

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.

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”, …)

//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.

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.

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.

function exemple() {
	var nav = navigator.appName+' ('+navigator.userAgent+')';
	return nav;
}

Voilà une fonction qui va retourner le type de navigateur utilisé.

//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.

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

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.

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.

//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.

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 flash vers javascript
• Exemples javascript vers flash
• Exemples aller retour

• Telecharger les fichiers d'exemple

Contenu du zip:

• Tous les exemples
• Le fichier swfobject.js

• ExternalInterface - Browser window
• Controler un objet video contenu dans un SWF depuis la page html
• Exemples externalinterface
• RegExp in Flash 8 using ExternalInterface