Communication Flash - Javascript

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

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 divers et complet

Download

Telecharger les fichiers d'exemple

Contenu du zip:

Tous les exemples
Le fichier swfobject.js

En savoir plus

communication

, flash

, html

, javascript

, tutoriels

:: #41 :: rss :: Haut

Commentaires

1. Par CarotteRapée

Cool !
Si je comprend bien avec la méthode expliquée et une fonction js adaptée, je peux sans problème faire apparaitre/disparaitre des <div></div> depuis un menu en .swf ?
J'ai essayé de faire ca avec un getURL("javascript:mafonction(mesparametres)");
sans succès est ce normal ?

Le mardi 8 mai 2007 à 10:53

2. Par k-ny

Pour faire apparaitre/disparaitre des div avec flash, j'ai fourni un tuto + sources dans un ancien billet, fait un petit tour et tu verras !

Ps: sinon effectivement celà peut tout à fait remplacer un geturl javascript

Le mardi 8 mai 2007 à 22:19

3. Par __vico__

Salut, je doit faire un site, ou il ya une animation flash, et, lorque l'on clique sur un bouton de l'anim, ça doit remplir un champ de la page php (ou html)...

J'ai testé ton code avec JAVASCRIPT (communication FLASH vers HTML) ça ne marche pas ...
J'avoue que je comprend pas, pourrais tu m'aider stp, t'as l'air bien calé..

Merci

Le vendredi 11 mai 2007 à 19:10

4. Par Chips

Hello. Tu dis avoir expliqué dans un billet précédent comment faire apparaitre disparaitre un div depuis du flash. Mais je ne trouve pas ce lien. Tu saurais me donner l'url ici?

Merki

Ah sinon en fait à la base je comptais utiliser cette methode pour cacher la div. Une fonction js surper simple du style
document.getElementById("idXXX").style.visibility = 'hidden';

Mais bon, je n'arrive pas du tout à me servir du tutorial que tu présente. J'y reviendrais plus tard parce-que je veux comprendre. Mais là, je dois finir mon truc

Le mercredi 16 mai 2007 à 21:30

5. Par Chips

Oki, juste après mon message je me suis dit que c'était pitèt dans la section js après tout :D

Tout en bas de cette page donc:
blog.webinventif.fr/index...

Merki pour tous ces renseignements en tout cas.

Le mercredi 16 mai 2007 à 21:33

6. Par k-ny

Oui voilà tu l'as trouvé, jettes-y un oeil, tu verras c'est pas trop compliqué.

Et d'ailleurs pour ce genre de questions, je ferais bientot une annonce sur l'ouverture du forum lié à mon autre site ( www.webinventif.fr/ ), ça sera plus simple pour fournir de l'aide

++

Le jeudi 17 mai 2007 à 12:10

7. Par Ted

Est ce qu'avec un bouton situé dans mon swf je peux redimensionner la taille de ce même swf ?
Est ce que ce serait faisable avec cette méthode ?

Le samedi 19 mai 2007 à 16:18

8. Par kalio

bonjour, je trouve ce turiel interessant car j'essaie de faire communiquer mon swf avec ma page html via javascript. ce que j'essaie de faire, c'est de faire afficher du contenu html dans un div dans ma page principale via un menu flash.
si vous pouvez me donner quelques pistes, je vous en serai très reconnaissant, merci

Le mercredi 23 mai 2007 à 04:59

9. Par k-ny

@ted
Oui c'est fesable, regarde du coté javascript et de sa capacité a modifié les css

@kalio
Et bien en cherchant sur mon blog, tu t'apercevra que j'ai fait 2 tutos sur le principe de fonctionnement que tu cites:

blog.webinventif.fr/index...
et
blog.webinventif.fr/index...

Le mercredi 23 mai 2007 à 14:56

10. Par mus

j'ai telecharger ton exemple (Exemples flash vers javascript ) mais ca ne marche pas, je veux savoir s'il y aune configuration qu'il faut faire avant de faire le teste

Merci

Le vendredi 15 juin 2007 à 15:29

11. Par k-ny

Hello mus,

il me semble qu'en local avec ie ça foire, as-tu testé en ligne et/ou avec un 2ème navigateur ?

Le vendredi 15 juin 2007 à 21:50

12. Par elamiio

Salut,

J'ai le meme probleme que Mus, j'ai testé en ligne ça marche bien, mais en local ça marche pas !!! meme avec un autre navigateur et quand je clique en local sur "envoyer" une alert intitulée "securité dans adobe flash player" apparait demendant de modifier des parametres ...
Puis-je avoir une explication de cela ???

Et Merci d'avance,

Le samedi 16 juin 2007 à 13:12

13. Par k-ny

Alors effectivement il y a apparement un problème de securité du player, pour résoudre le soucis, applique mon autre tuto sur la secu:

blog.webinventif.fr/index...

Testé et approuvé

Le samedi 16 juin 2007 à 13:41

14. Par elamiio

Merci pour ta k-ny,

En utilisant ta solution, le probleme de l'alert ne réside plus, mais j'ai pas encore reussi a faire marcher le truc, si je clique sur "envoyer" il y a un message d'erreur dans la barre d'etat: "Erreur sur la page",

alors que doit-je faire pour faire marcher ce truc ?

et merci encore une autre fois

Le samedi 16 juin 2007 à 20:23

15. Par Jecherche

Salut a tous, moi j'ai un souci quand je place le code sur flash pour n'importe lequel des exemples cités dessus il me mettent erreur de syntaxe pour Import flash.external.*; alors que j'ai recopié exactement comme dessus Aidez moi SVP

Le mardi 25 décembre 2007 à 11:16

16. Par whitebiker67

salut je trouve que le tuto est pas mal j'ai juste remarqué que la version du blog en ajax donne une erreur je ne pense pas que c'est méchant
+

Le mercredi 13 février 2008 à 17:35

17. Par Romano

hello
merci pour tes explications qui sont claires et précises. Ca m'a beaucoup aidé !!!
romano

Le vendredi 30 mai 2008 à 12:16

18. Par jzeel

Interréssant vos tutoriel... Bravo,

Mais j'ai un petit problème avec les exemples, sur Explorer et Firefox, à chaque fois, il a fallu que que je fasse des modifications dans mes browsers...
L'orsque j'execute les html... Firefox cela me dit :
"Flash player a interrompu une operation potentiellement risqué
L'application nom.swf tente une communication avec le nom.html - pour permettre à cette application de communiquer cliquez sur parametres et redemarrer après avoir modifié les paramètres".

Internet Explorer me donne une erreur de script concernant cette ligne:
-- document.getElementById("id_flash").echo_1();
et dit Erreur: Cet object ne gèrepas cette propriété ou cette méthode.

Est-ce qu'il y a un moyen de s'en sortir???

Merci pour votre aide!

Le jeudi 12 juin 2008 à 23:26

19. Par jzeel

Ok ça marche... Je vien de remarqué que quand je le met directement sur le WEB tout marche parfaitement, mais quand c'est LOCAL C'est la le problème....
Si ça marche sur le web c'est tout ce qui compte pour moi. Bien entendu si vous savez le pourquoi cela me fera un plaisir de l'entendre.

Merci beauvoup, votre site est très pratique.

Le vendredi 13 juin 2008 à 18:58

20. Par pinougenial

Salut !
Merci pour ton tutoriel qui marche nickel.
En revanche, dans l'exemple 1 dans le cas Flash -> Javascript, lorsqu'au lieu de faire une alert, je souhaite lancer une applet toute simple, ça ne marche pas nickel sous Firefox 3. En effet, l'applet se lance mais le pointeur de la souris se voit ajouter un sablier et la page reste constamment en chargement. Quel est le problème ? Qu'est-ce que Firefox attend ? External interface ne marcherait pas bien dans le cas où l'on souhaite lancer une applet ? En tout cas, ça marche sans problème sous IE

Le vendredi 4 juillet 2008 à 21:20

21. Par pinougenial

Problème résolu !
Il suffisait de rajouter document.close(); à la fin du script.

Le samedi 5 juillet 2008 à 15:21

22. Par manusvs650

Bonjour,
ce blog est tres interressant.

Je voudrais savoir c'est possible de simuler un drag and drop sur un objet flash.

J'ai un objet flash qui est en developpement externalisé (dont je ne connais pas le code) et pour mes tests, je voudrais simuler un click, glisser et relacher click sachant que je connais les coordonnées de déplacement a réaliser dans l'objet flash.

Peut-on le faire en javascript ?

Le but étant le l'intégrer dans selenium ide qui réalise mes tests

merci d'avance

Le mardi 18 novembre 2008 à 12:54

23. Par Yann

Bonjour à tous,

Pb : javascript to flash

C'est exactement ce qu'il me faut sauf que ça ne marche pas (pour moi)
Après 1 journée de tests, je pense que mon problème provient de l' "id" qu'il faut insérer dans la balise embed.

voici ma source html :
<div>
<script type="text/javascript">
AC_FL_RunContent( 'codebase','download.macromedia.com/p... ); //end AC code
</script>
<noscript>
<object id="fr_menu" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="download.macromedia.com/p... width="981" height="275" title="fr_menu" data="fr_menu.swf">
<param name="movie" value="fr_menu.swf" />
<param id="fr_menu" name="quality" value="high" />
<embed id="fr_menu" src="fr_menu.swf" quality="high" pluginspage="www.adobe.com/shockwave/d... type="application/x-shockwave-flash" width="981" height="275"></embed>
</object>
</noscript>
</div>

J'ai remplacé id=id_flash par id=fr_menu.
J'ai mis des id un peu partout et je désespère...

Alors est-ce que mon menu flash est trop complexe pour une fonction comme celle-ci ou est-ce que les feuilles de style peuvent provoquer un problème?

merci beaucoup !

Le lundi 5 janvier 2009 à 10:42

24. Par Alex

Hi
Je cherchai à faire communiquer flash à javascript.
N'étant pas codeur, ce court billet me fut d'une aide précieuse. C'était bien clair et ça m'a bien aidé ! Merci.

Il est temps de réécrire par ici

Le lundi 23 février 2009 à 22:24

25. Par comKIdirait

Apres des jours de recherche, et grace au post initial, je suis arrivé à mes fins: mettre une musique de fond sur un site HTML, sans coupure, avec fonction pause, et le tout sans que le lecteur flash soit visible

voici donc, une petite version modifiée ou la commande est lancée depuis l'intérieur d'une iframe....vu comme ca, cela ne sert a rien mais je m'en suis servi pour pouvoir mettre de la musique sur ce site web, le lecteur etant dans une frame invisible et la mise en pause se faisant depuis un bouton placé à l'intérieur de mon iframe appelant une fonction JS...

Milles mercis

le lien: comkidirait.net/test/js2s...

Le jeudi 9 juillet 2009 à 18:18

26. Par Tooba

Bonjour, je cherche de cibler une fonction javascript dans un fichier .js, merci beaucoup.

Le mercredi 9 décembre 2009 à 12:59

27. Par dev00

Bonjour,

Tout fonctionne sous IE. Sauf que document.getElementById("test").echo(str); pose problème à Firefox. remplacer echo(str) par innerHTML="coucou" fonctionne très bien ... si je fais un alert(str), il affiche la bonne valeur. J'ai aussi essayé SetVariable, et pareil, ça fonctionne sous IE et pas sous Firefox ... j'ai mis un id dans embed, un name, rien à faire ... Je ne comprends pas pourquoi votre exemple en ligne fonctionne sous Firefox ... Une idée ? Là ça fait deux heures que je cherche, ça m'épuise !

Le mardi 9 mars 2010 à 03:32

28. Par dev00

Oh ... il fallait rajouter une fonction ... ça marche ...

Le mardi 9 mars 2010 à 17:44

29. Par Scion Lucifer

Citation : ' Avec une integration normal, cette id est à mettre comme attribut dans votre balise embed (id="id_flash"). '

J'ai essayé cette méthode, mais elle ne fonctionne pas. Peux tu me filer un coup de mains ? Voici mes sources :
[url=usallunited.com/projets_z...

Le dimanche 2 mai 2010 à 23:04