Adrian Sule

Hi, I'm a Romanian Flash Developer, based in the UK, and I probably have a bunch of articles in my head that need to be laid down in writing. Graduated a Bachelor Degree in Computer Science, and have been working within Digital Agencies for the last 4 years now, in the Creative team as a Flash Developer and sometimes Designer. http://www.adriansule.com

View all articles by Adrian Sule

Here is a communication example between Flash and Javascript using (the very well known by most of you), the ExternalInterface class:

Step one:

First create an Actionscript 3.0 class, and name it ‘FlashJSCommunication.as‘:

package
{
/*
* @Author: Adrian Sule
* @Website: www.adriansule.com/blog
*/
import flash.display.MovieClip;
import flash.external.ExternalInterface;
import flash.events.Event;
import flash.text.TextField;

public class FlashJSCommunication extends MovieClip
{
public function FlashJSCommunication()
{
ExternalInterface.addCallback("sendTextToFlash", getTextFromJavaScript);
this.btnSendToJS.addEventListener("click", clickSend);
this.btnSendToJS.useHandCursor = true;
this.btnSendToJS.buttonMode = true;
}

private function getTextFromJavaScript(str:String):void
{
this.tReceived.text = "From JavaScript: " + str;
}

private function clickSend(event:Event):void
{
var jsArgument:String = this.tSend.text;
var result:Object = ExternalInterface.call("getTextFromFlash", jsArgument);
this.tReceived.text = "Returned: " + result;
}
}
}

Step two:

You need to create a .fla and add two input texfields named ‘tReceived’ , ‘tSend”,
and a button named ‘btnSendToJS‘.

Don’t think it’s neccesary to explain what each of this objects will do, because their instance names
are self explanatory.

Add the Document Class instance of ‘FlashJSCommunication‘.

Press CTR+SHIFT+F12 to open the Publish window, and click Publish to create an HTML for your .swf file

Step three:

Edit the HTML that contains your ‘FlashJSCommunication.swf‘ object (should be ‘FlashJSCommunication.html‘).

Add the following script in the <head> tag:

<script >

function getFlashMovie(movieName)
{
var isIE = navigator.appName.indexOf(”Microsoft”) != -1;
return (isIE) ? window[movieName] : document[movieName];
}

function formSend()
{
var text = document.htmlForm.sendField.value;
getFlashMovie(”FlashJSCommunication”).sendTextToFlash(text);
}

function getTextFromFlash(str)
{
document.htmlForm.receivedField.value = “From Flash: ” + str;
return str + ” received”;
}
</script>

Inside the <body> tag add this Form to get/send data from/to Flash:

<form name=”htmlForm” method=”POST” action=”javascript:formSend();”>
Sending to ActionScript:<br />
<input type=”text” name=”sendField” value=”" /><br />
<input type=”submit” value=”Send” /><br />  <br />
Received from ActionScript:<br />
<input type=”text” name=”receivedField”>
</form>

Note:
For local content running in a browser, calls to the ExternalInterface.addCallback() method work only if the SWF file and the containing web page are in the local-trusted security sandbox.

For more information, click here

Preview link

Download example