Monday, February 14, 2011

Exchange data between Actionscript 3 and Javascript - communication bridge

Today we will learn how to exchange data between Actionscript 3 and Javascript, we will create a communication bridge using the ExternalInterface class.

In my example, there is going to be a numeric value in flash, which can be increased using javascript code.

Firstly, create a textfield in flash called myField and a button called myButton.

Here is the code for the flash file:

var myVar:Number = 0;
myField.text = myVar.toString();

ExternalInterface.addCallback("sendToAS", getFromJS);

function getFromJS(dir):void
{
myVar += dir;
myField.text = myVar.toString();
}

myButton.addEventListener(MouseEvent.CLICK, sendToJS);

function sendToJS(MouseEvent):void
{
ExternalInterface.call("receiveAS", myVar);
}

We use 2 methods of ExternalInterface class - call and addCallback. The addCallback is used for receiving stuff from JS, for example, the JS code asks the flash to perform a "sendToAS" action. The flash receives the request and then looks at it - if the request is "sendToAS", then perform a function called getFromJS.

The call method is used to send requests for JS from AS. For example, we have a function receiveAS in our Javascript code. We can call it using the call method and pass the necessary variables through the same method.

Now, the HTML code with in-line Javascript:

<html>
<head>

<script type="text/javascript">

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

function sendNumber(num) 
{
getFlashMovie("ext").sendToAS(num);
}

function receiveAS(val)
{
alert(val);
}

</script>

<title>
JS-AS3
</title>
</head>
<body>
<object id="ext" data="ext.swf" 
style="height: 100px; width: 100px;"
type="application/x-shockwave-flash">
<param name="movie" value="ext.swf">
<param name="wmode" value="opaque">
</object><br>
<a href="#" onMouseDown="sendNumber(1)">Add 1 to the value.</a><br>
<a href="#" onMouseDown="sendNumber(5)">Add 5 to the value.</a><br>
<a href="#" onMouseDown="sendNumber(10)">Add 10 to the value.</a>
</body>
</html>

The .swf file is called "ext.swf", and we set its id to "ext" to be able to refer to it later.

In the code above, you'll find that we have set up 3 functions for the JS-side code to operate the numeric value in flash. The first function is called getFlashMovie, and this is used to later refer to the swf file correctly and it depends on the OS the swf is running on. If we run the flash on Windows, we'll refer to the file using window[ext], if we run the flash on Mac - document[ext].

The other 2 functions are used to send and receive the calls.

Thanks for reading!

4 comments:

O LEINDO said...

It seems quite what i need, thanks in advance m8 :D [ ]

Anonymous said...

Hi
Thanks for the tut. Unfortunately I am getting this error:

Error: Error #2067: The ExternalInterface is not available in this container. ExternalInterface requires Internet Explorer ActiveX, Firefox, Mozilla 1.7.5 and greater, or other browsers that support NPRuntime.
at Error$/throwError()
at flash.external::ExternalInterface$/addCallback()
at ext_fla::MainTimeline/ext_fla::frame1()[ext_fla.MainTimeline::frame1:4]
Cannot display source code at this location.

Any suggestion? Please help.

Kirill Poletaev said...

Do you get this error in Flash?

The ExternalInterface class only works if you test it in browsers. If you want to debug your program, publish it in HTML mode and view it there.

Anonymous said...

ctrl+enter goes fine. But if I debug, I get this error. On browser is was complaining for security. I fixed it in Global Security Settings for flash. Thanks :)

Post a Comment