ActionScript JavaScript Cross Communication

• Download source - 377.49 KB

Introduction

Have you ever thought about writing JavaScript code that controls Flash?
Or maybe you want your Flash piece to control parts of the Web page it is on.
Either way, this article shows how you can get JavaScript and ActionScript talking to each other.

AcionScript and Flash

If you need a tool for editing Flash and ActionScript, I suggest Flash® CS3 Professional for this article. It can be downloaded here and used for free for 30 days. Making an ActionScript function available in JavaScript is done through the ExternalInterface.addCallback method. Calling a JavaScript function from ActionScript is done through the ExternalInterface.call method. Here is some sample ActionScript that accomplishes cross script communication:

//////////////////
// ACTIONSCRIPT //
//////////////////

// Import some namespaces
import flash.external.ExternalInterface;
import mx.controls.Alert;

// Boolean to know this code is calling ActionScript or not.
var callActionScript = true;

// A checkbox's event handler.
ActionScriptsCheckBoxForJavaScript.clickHandler = function (e:Object):Void
{
    callActionScript = !callActionScript;
};

// A button's event handler.
FlashButton.clickHandler = function (e:Object):Void
{
    if( callActionScript == true )
    {
        DoSomethingInActionScript();
    }
    else
    {
        CALL_DoSomethingInJavaScript();
    }
};

// A method that does something on the ActionScript Side
function DoSomethingInActionScript()
{
    Alert.show('This is ActionScript doing something.','Macromedia Flash');
}

// Provides the Web page this flash movie is in the ability to call the 
// 'DoSomethingInActionScript' function
var CallDoSomethingInActionScript = ExternalInterface.addCallback
    ("DoSomethingInActionScript", null, DoSomethingInActionScript);

// Attempts to call the JavaScript function 'DoSomethingInJavaScript'
// Make sure in the JavaScript that function actually exists
function CALL_DoSomethingInJavaScript()
{
    var CALL_DoSomethingInJavaScript:Object = ExternalInterface.call
        ("DoSomethingInJavaScript");
}

JavaScript and HTML

Making a JavaScript function available in ActionScript is as easy as making the function. It is the job of ActionScript to hook into JavaScript functions, and it is also the job of ActionScript to make its methods exposed externally. All JavaScript has to do is create and use its own functions, and call the ActionScript's exposed functions. Here is some sample JavaScript that accomplishes cross script communication:

////////////////
// JAVASCRIPT //
////////////////

// Boolean to know this code is calling ActionScript or not.
var callJavaScript = true;

// The box we are moving
var JavaScript_Box = null;

// The Flash object/embed
var FlashMovieOne = null;

// A checkbox's event handler.
JavaScriptsCheckBoxForActionScript_check = function(e)
{
    callJavaScript = !callJavaScript;
};

// A button's event handler.
Button_Click = function(e)
{
    if( callJavaScript == true )
    {
        DoSomethingInJavaScript();
    }
    else
    {
        CALL_DoSomethingInActionScript();
    }
};

// A method that does something on the JavaScript Side
function DoSomethingInJavaScript()
{
    alert.show('This is JavaScript doing something.');
}

// Attempts to call the ActionScript function 'DoSomethingInActionScript'
// Make sure in the ActionScript that function actually exists and is exposed externally.
function CALL_DoSomethingInActionScript()
{
    try
    {
        FlashMovieOne.DoSomethingInActionScript();
    }
    catch(e)
    {
        alert(e.message);
    }
}

Putting It All Together

Pull down the source provided, and open up the HTML page in a browser. It will look just like the screen shot at the beginning of the article. Then you can experiment with cross script communication, fun times.:)

History

• 8/21/2008: Version 1.0.0, when I wrote this article
• 8/21/2008: Version 1.0.1, fixed a JavaScript alert to proper casing and made a few format changes
• 8/21/2008: Version 1.1.0, fixed my 'last second changes before submitting to The Code Project'
• 8/26/2008: Article and source code updated