Click here to Skip to main content
Email Password   helpLost your password?
ActionScriptCrossJavaScript

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

You must Sign In to use this message board.
 
 
Per page   
 FirstPrevNext
GeneralVery inaccurate code
kvakak
22:29 25 Aug '08  
Very inaccurate code:
File Default.html
1. First string - я╗┐<html xmlns="http://www.w3.org/1999/xhtml">
What for abracadabra in the beginning of a line?
2. String six - <body önload="LoadUp()">
There is no such hay. There is JavaScript_LoadUp() in JavaScriptCrossing.js

File JavaScriptCrossing.js
First string - я╗┐/////////////////////////////////////...
What is it? ->^

File ActionScriptCrossing.html
String six - <script src="AC_RunActiveContent.js" language="javascript"></script>
Where is AC_RunActiveContent.js?

In result the code at all does not work! </body></html>
GeneralRe: Very inaccurate code
crogersit
5:47 26 Aug '08  
My last second 'edit before post on code project' made the code break, good spot.
I will fix the code and re-post to code project when i get a chance.

Thanks for taking the time to look.

Cold Turkey...


Last Updated 27 Aug 2008 | Advertise | Privacy | Terms of Use | Copyright © CodeProject, 1999-2010