ExternalInterface Call with AS3 and Javascript

Posted by Stephan Kristyn on November 6th, 2009 / 4 Comments

I recently came along this problem with ActionScript 3. How do you send commands to JavaScript or to the document object model from inside of Flash?
 
The getUrl() method of Flash throws tons of security warnings in Internet Explorer. As a Web Developer you still have to consider IE if you intend to avoid getting fired.
 
Other alternatives to getUrl() like the fscommand action don’t work either. fscommand is a depreciated action to tell ActiveX or the Web browser what to do. That thing is almost seven generations of Flash old. So let’s erase it from our brains again swiftly.

As it turns out in AS3 we can use
 

ExternalInterface.call

But that darn thing did not work no matter what I tried. After quite some time which I want to spare you with this post I found the solution.
 
The trick was to put the Flash and XHTML site in a live server environment. Doh! A friendly reminder to all of us to finally set up that IIS or Apache locally.

Down to some codery. Let’s define a Javascript function that shall be called by Flash and give it the name JSTestFunction. We can even pass the JSTestFunction function inside of JavaScript a String or an object.
 

import flash.external.*;
var JSvalue:String;
JSvalue = ExternalInterface.call('JsTestFunction','Work_Damn_It');

With AS3 everything has become supposedly better. Loose typing is gone and global variables are history. Consequently in the code above we did import the flash.external package. Then we called the call method of the ExternalInterface class.

You just read it we have to declare any variables in AS3, so in order to receive a return value back from JavaScript we define JSvalue and then assign the callmethod to it.
 
This is how JavaScript returns a value to Flash:
 

function JsTestFunction(myFlashValue) {
        return (myFlashValue + '_WORK!');
}

The return_JS variable in Flash does now contain the returned value:
 

import com.carlcalderon.arthropod.Debug;
Debug.log(JSvalue); // Work_Damn_It_WORK!

In case you ask yourself what the heck I did import in the the code sample. In my opinion the days of annoying trace(); or alert(); pop-ups are finally and mercifully gone. In case of Flash I suggest you take a look at Arthropod. It is a good logger. You can grab it here.

To make this tutorial complete, let’s see if we can also do this the other way around and start the communication between the two programming languages from inside JavaScript. Naturally it should be possible. Make sure to prepare everything properly in Flash:
 

var methodName:String = "callFlash";
var method:Function = hurray_JS_Called;
ExternalInterface.addCallback (methodName, method);

function hurray_JS_Called (myInt:Object):void {
	Debug.log (myInt); // outputs some value sent by JavaScript
}

Back in JavaScript you would simply call the function callFlash. The function’s name could be anything, just make sure you call the addCallback method of the build-in ExternalInterface class. You pass it two values, the name of the method or function that JavaScript will call and the name of the function that Flash should execute internally.
 
You can call the Flash method like this in JavaScript:
 

flashObject.callFlash (0);

The flashObject is the unique id you gave your SWF object inside of html. In the above example I passed the value zero over to flash which then will get stored inside the myInt variable of the hurray_JS_Called function.

I tested this with Firefox 3.5, IE8 RC1, Chrome 3, Opera 10 on Win7 RC1 and MacOSX if this is of interest to you.

One thing that you might consider when using this technique. The calls are working synchronous, so Flash or JavaScript are most likely to show hanging issues if you designed a fairly complex application.

As always I welcome you to drop any suggestions or questions in the comments below. You can also subscribe to my RSS feed at the top right.

Twitter Facebook Reddit StumbleIt! Digg it Google Delicious

CONTACT

[email protected]

CONNECT

identi.ca/nottinhill
Digg
I left Flickr

NETWORK

Linked in
Xing
Behance

Stephan Kristyn Mondstr. 1b 81543 München

Licensed CC BY-SA