ExternalInterface : Javascript et ActionScript en communication

Il est parfaitement possible de faire communiquer Javascript avec ActionScript, d'ailleurs, ces langages sont très proches au niveau de la syntaxe. Cet article explique le fonctionnement de la classe ExternalInterface, et fourni un exemple simple.

L'exemple simple

Nous allons ici faire entrer en communication Javascript avec Actionscript par le biais de 2 formulaires : le formulaire Javascript enverra ses données à l'animation Flash, et de même, le formulaire Actionscript enverra ses données à la page HTML , avec l'aide de Javascript. Vous pourrez par ailleurs télécharger cet exemple ExternalInterface en bas de la page.

Cet exemple est en Actionscript 3 (AS3), mais très peu de choses diffèrent de l'Actionscript 2 (AS2) en ce qui concerne ExternalInterface.

Création du document HTML

On y insère notre animation, notez qu'ici, nous utilisons la méthode d'intégration classique par la balise object :

<object type="application/x-shockwave-flash" id="swfExemple" data="flash.swf" width="550" height="400">
    <param name="movie" value="flash.swf" />
    <param name="allowScriptAccess" value="sameDomain" />
</object>

Pour en savoir plus sur les méthodes d'intégration des animations dans les pages HTML, reportez vous à l'article Intégration d'animations flash : SwfObjet, Embed, Object.

Nous créons un document HTML simple, dans lequel nous insérons un textarea, identifié par texte, et un bouton :

<p><textarea id="texte" cols="60" rows="10"></textarea></p>
<p><input type="button" value="Envoyer à Actionscript" onclick="envoiActionScript();" /></p>

Le bouton va appeller une fonction Javascript définie dans le header de la page.

Tout d'abord, la fonction qui va envoyer le texte contenu dans le champ à Actionscript :

function envoiActionScript()
{
    //On récupère la valeur du champ 'texte'
    var texte = document.getElementById('texte').value;
    //On envoi cette valeur à actionscript
    document.getElementById('swfExemple').envoiActionScript(texte);
}

Et également la fonction qui va remplir notre textarea, avec des informations provenant cette fois de l'animation Flash :

function envoiJavaScript(str)
{
    //on rempli le textarea avec la valeur passée en paramètre
    document.getElementById('texte').value = str;
}

(notez au passage que ces 2 fonctions sont très simples).

Création du fichier Flash

Créez un fichier Flash avec sur la scène, un texte de saisie avec comme nom d'occurrence texte, puis un bouton avec comme nom d'occurrence bEnvoyer, pour l'exemple, j'ai utilisé un composant Flash par défaut Button (flash.ui.Button). Libre à vous d'utiliser ce que vous voulez pour lancer l'action, SimpleButton, MovieClip ou autre.

La fonction envoiActionScript que nous avons appellé sur l'animation ne sera pas écoutée implicitement par Actionscript, il faut donc écouter cet appel avec la classe ExternalInterface :

if (ExternalInterface.available)
{
       //On écoute la fonction envoiActionScript de Javascript, qui correspond à envoiActionScript d'actionscript
       ExternalInterface.addCallback("envoiActionScript", envoiActionScript);
}

On ajoute un événement sur le bouton pour permettre l'envoi à Javascript de notre champ de saisie dans l'animation :

private function envoyer_click(event:MouseEvent):void 
{
    if (ExternalInterface.available) 
    {
        //On appelle la fonction envoiJavaScript de javascript, et on lui passe comme paramètre la valeur du champ de saisie
        ExternalInterface.call("envoiJavaScript", this._texte.text);
    }
}

Et ainsi, nous avons fait communiquer Javascript avec Actionscript, et inversement !

Utilité incontestable

A voir la simplicité du code à fournir, l'utilité n'est certes pas la prouesse technique, mais ExternalInterface peut permettre de :

• rendre les animations flash plus accessibles grâce au pilotage dans le HTML,
• piloter totalement l'animation à partir de la page web (dans le cadre d'un lecteur vidéo Flash, cela peut être très intéressant, notamment en matière d'accessibilité numérique),
• dans le cadre d'un site tout en flash (sans changement de page), fournir l'alternative textuelle à la page.

Télécharger la source FLA, le HTML et la classe AS3

Téléchargez la source FLA, si ce tutoriel vous a aidé, n'hésitez pas à citer cette source :)

Articles connexes

• POO : Créer une classe en Javascript
• Intégration d'animations flash : SwfObjet, Embed, Object
• Flash et l'accessibilité (Partie 1)
• Flash accessibilité