First of all you’ve to have both files for JavaScript and Actionscript  3 to make the communication successful. I don’t remember where exactly I found the tutorial, maybe it was on the official Adobe’s documentation page, but as I’ve written before I’m going to share my experience with the ExternalInterface options of Flex.

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.