Artikelen

Gepost door benjamin op 31 mrt 2010 in de categorie HTML Flash

Het is mogelijk om vanuit Flash naar je HTML/PHP website te communiceren. Dit kan door middel van JavaScript. Je kunt vanuit JavaScript een call doen naar Flash en vanuit Flash kan ook weer gecommuniceerd worden naar JavaScript. Dit artikel zet eenvoudig uiteen, hoe je deze communicatie tot stand brengt.

De ActionScript class die het mogelijk maakt om te communiceren tussen de Flash movie en de container waar deze in zit (bijvoorbeeld een HTML pagina met JavaScript), is de ExternalInterface Class. Het wordt aangeraden deze class te gebruiken, boven de fscommand(). Met de ExternalInterface Class kun je elke JavaScript functie aanroepen en elke variabele (tekst, nummer etc.) doorgeven en terugkrijgen.

ExternalInterface voorbeeld in ActionScript 3.0
1. Creeer een Flash document en maak een daarin een button aan met de isntancename: verstuurBtn, een input field met de instancename: inputTxt en een dynamisch textfield aan met de instance naam: outputTxt.

2. Maak een in het Flash document een actions layer aan waarin we de as3 code gaan zetten. We creeren eerst de code waarmee we tekst vanuit de HTML pagina naar Flash gaan sturen via JavaScript:

1. import flash.external.ExternalInterface;
2. import flash.events.Event;
3. function getTextFromJavaScript(str:String):void {
4. outputTxt.text = "van JavaScript: " + str;
5. }
6. ExternalInterface.addCallback("sendTextToFlash", getTextFromJavaScript);

3. Plaat ook het script voor het versturen van data vanuit Flash naar de HTML pagina via JavaScript. Het script hiervoor is:



1. function clickSend(event:Event):void {
2. var jsArgument:String=inputTxt.text;
3. var result:Object=ExternalInterface.call("getTextFromFlash",jsArgument);
4. outputTxt.text="Terug: "+result;
5. }
6. verstuurBtn.addEventListener("click", clickSend);

De HTML pagina moet ook worden voorzien van JavaScript dat de call vanuit de Flash movie ondervangt.  De code om het versturen en ontvangen te regulieren is als volgt:

1. <script >
2. function getFlashMovie(movieName) {
3. var isIE = navigator.appName.indexOf("Microsoft") != -1;
4. return (isIE) ? window[movieName] : document[movieName];
5. }
6. function formSend() {
7. var text = document.htmlForm.sendField.value; getFlashMovie("ExternalInterfaceExample").sendTextToFlash(text);
8. }
9. function getTextFromFlash(str) {
10. document.htmlForm.receivedField.value = "Van Flash: " + str;
11. return str + " ontvangen";
12. }
13. </script>

LET OP: In de functie formSend() staat "ExternalInterfaceExample" als naam. Dit is de id en name van de Flash embed:




Om de communicatie vanuit HTML naar Flash op te zetten gebruiken we volgende voorbeeldcode van een Formfield:

1. <form name="htmlForm" method="POST" action="javascript:formSend();">
2. Verstuur naar ActionScript:<br />
3. <input type="text" name="sendField" value="" /><br />
4. <input type="submit" value="Send" /><br />  <br />
5. Teruggekregen van ActionScript:<br />
6. <input type="text" name="receivedField">
7. </form>

Je kunt de onderstaande zipfile downloaden en de bronfiles bekijken. Je kunt deze files online zetten (of lokale permissie geven aan de Flash Player) om te zien hoe de JavaScript en HTML comminucatie werkt. Bekijk hier een online voorbeeld.

Download zipfile met sourcefiles.