To continue the topic of my previous post I’m just going to add that there’s a native way to pass objects from JavaScript to Flex’s actionscript.

I’m not going to describe how to structure a object in JavaScript and/or Flex. Let’s go directly to the example.

The function in .js file should return something that is object in JavaScript:

.js file

function getObject() {
    return { foo : 'bar', zoo : 'tar' };
}

Now, supposing that in Flex there already has been added a callback with ExternalInterface(‘getObject’, receiveObject); and the as3 function receiveObject looks similar to this:

.mxml or .as

private function receiveObject( obj : Object ) : void
{
    Alert.show(obj.foo);
    Alert.show(obj.zoo);
}

That outputs respectively “bar” and “tar”.

Even more …

You can pass from .js to .as array of objects, but than with small change of the code you’d access the variables:

obj[0].foo
obj[1].foo

assuming that there are two objects with same properties.

In the past, when ActionScript v2 was widely used, the most common way to interact with the other parts of the web application, whether a page refresh, redirect or JavaScript method call was the as2 method getURL. With the simple getURL(‘javascript:someJSMethod…’) the flash movie called the JS function and everything was OK.

Now in ActionScript v3 where everything looks and it is different, everything about communication between JS and Flash/Flex is done by ExternalInterface. The communication can be done in both directions. From JS to Flash and vice versa.

The ExternalInterface.call

There are two simple methods implemented by ExternalInteface. The first one is addCallback and the second one is call. Here I’m going to write a little more about the second one.

The most common usage is:

ExternalInterface.call('jsMethod');

where jsMethod is, as you can guess, a JavaScript method. Something like:

test.js

function jsMethod() { alert('test') };

A bit different, but yet again simple, is the call to a js function with parameters:

ExternalInterface.call('jsMethod', param1, param2);

where the javascript function can be:

function jsMethod(param1, param2) { alert(param1) };

But what I was writing about is really tricky. What if the jsMethod returns a value? Than in the .js file you’ve the following method:

function jsMethod() { return 'foo bar' };

and when you try this:

var str:String = ExternalInterface.call('jsMethod');
Alert.show(str);

you get the alert box with the string ‘foo bar’.

Where to use it?

Well this is really useful, because you get the response within the call method, only with the .call instead with .call and than .addCallback. The problem of course appears when you try to use it with AJAX call. Than even if the function returns in the success method of the AJAX call the flash doesn’t get the response.

Than you simply implement the communication with both .call and .addCallback!

The most simple way to describe the case is as if you have the ExternalInterface addCallback in the Flex application like that:

flex.mxml

ExternalInterface.addCallback("jsFunc", flexFunc);

public flexFunc() : void
{ ... }

and in the javascript code you’ve something like that:

file.js

function getSwf(movieName) {
    if (navigator.appName.indexOf("Microsoft") != -1) {
         return window[movieName];
    } else{
         return document[movieName];
    }
}

getSwf('movie').jsFunc();

that will execute the flexFunc in the flex app.

Important!

is very important to have the object/embed tag correct:

<object classid="clsid:d27cdb6 ....
<param name="name" value="movie" />
<param name="allowFullScreen" value="true" />
<param name="AllowScriptAccess" value="always" />
<param name="wmode" value="transparent" />
<param name="flashVars" />
<param name="src" value="movie.swf" />
<embed ... name="movie"></embed>
</object>

That doesn’t work? Where’s the bug?

Even it’s not so clear the bug is present. The getSwf function gets the window[moviename], or document[moviename] depending of which browser is used. But the problem is that both object and embed tags have same name and the selected object is not one but two.

So there’s a simple patch

Name the object embed tags with different names, i.e.

<object classid="clsid:d27cdb6e-ae6d-11 ...>
<param name="name" value="movieie" />
<param name="allowFullScreen" value="true" />
<param name="AllowScriptAccess" value="always" />
<param name="wmode" value="transparent" />
<param name="flashVars" />
<param name="src" value="movie.swf" />
<embed ... name="movieie"></embed>
</object>

now they are named movieie (for IE) and movieff (for Firefox) and we must to change a bit the getSwf function like that:

function getSwf(movieName) {
    if (navigator.appName.indexOf("Microsoft") != -1) {
         return window[movieName + 'ie'];
    } else{
         return document[movieName + 'ff'];
    }
}

getSwf('movie').jsFunc();

First of all you’ve to add this at the beginning of the page with the simple js code:

var jsReady = false;
function isReady()
{
return jsReady;
}

function pageInit()
{
jsReady = true;
}

of course the pageInit() function should be called onload of the body. It simply sets the JavaScript part to be ready for communication, after initialize the page. Than a small part of the javascript should be written for really speaking with the Flex application.

var swfReady = false;

function setSWFIsReady() {
swfReady = true;
}

function getSWF(movieName) {
if (navigator.appName.indexOf(“Microsoft”) != -1) {
return window[movieName];
} else {
return document[movieName];
}
}

function callFlexApp() {
if (swfReady) {
getSWF(“flash_movie”).methodInFlex(param_value1, param_value2);
}
}

Where flash_movie is the id of the object / embed pair.

First of all the JavaScript can begin to call methods in Flex only after the Flex application has returned that it has been initialized. That happens in Flex within the following file:

package communicator {

import flash.events.TimerEvent;
import flash.external.*;
import flash.utils.Timer;

public class Communicator
{

public function init():void {

if (ExternalInterface.available)
{

var containerReady:Boolean = isContainerReady();
if (containerReady)
{
setupCallbacks();
}
else
{
var readyTimer:Timer = new Timer(100);
readyTimer.addEventListener(TimerEvent.TIMER, timerHandler);
readyTimer.start();
}

}
else
{
trace(“External interface is not available for this container.”);
}

}

private function isContainerReady():Boolean
{
var result:Boolean = ExternalInterface.call(“isReady”);
return result;
}

private function setupCallbacks():void
{
ExternalInterface.addCallback(“callFlexApp”, callFlexApp);
ExternalInterface.call(“setSWFIsReady”);
}

private function timerHandler(event:TimerEvent):void
{
var isReady:Boolean = isContainerReady();
if (isReady)
{
Timer(event.target).stop();
setupCallbacks();
}

}

private function callFlexApp(param1:int, param2:int):void
{
// this function is called from javascript

}

}

}

That’s the short description how to set up a communcation between JavaScript and Flex.