5,693,062 members and growing! (18,689 online)
Email Password   helpLost your password?
Web Development » Client side scripting » General     Intermediate License: The Code Project Open License (CPOL)

ActionScript JavaScript Cross Communication

By crogersit

ActionScript communicating to JavaScript, and vice-versa
Javascript, Windows, Dev

Posted: 23 Aug 2008
Updated: 27 Aug 2008
Views: 3,500
Bookmarked: 8 times
Announcements
Loading...



Search    
Advanced Search
Sitemap
2 votes for this Article.
Popularity: 0.90 Rating: 3.00 out of 5
0 votes, 0.0%
1
0 votes, 0.0%
2
2 votes, 100.0%
3
0 votes, 0.0%
4
0 votes, 0.0%
5
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

  • 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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

crogersit


Code Project has come in handy a lot over the last several years.
Occupation: Software Developer
Company: Next IT
Location: United States United States

Other popular Client side scripting articles:

Article Top
Sign Up to vote for this article
You must Sign In to use this message board.
FAQ FAQ Noise ToleranceSearch Search Messages 
 Layout  Per page   
 Msgs 1 to 2 of 2 (Total in Forum: 2) (Refresh)FirstPrevNext
GeneralVery inaccurate codememberkvakak22:29 25 Aug '08  
GeneralRe: Very inaccurate codemembercrogersit5:47 26 Aug '08  

General General    News News    Question Question    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

PermaLink | Privacy | Terms of Use
Last Updated: 27 Aug 2008
Editor: Deeksha Shenoy
Copyright 2008 by crogersit
Everything else Copyright © CodeProject, 1999-2008
Web10 | Advertise on the Code Project