UPDATE: there’s a newer post about this same thing (actionscript javascript communication – but in as3)! I encourage you to check it out!
Overview:
Using ExternalInterface.addCallback() we can expose an actionscript function and make it available to javascript. This would be helpful to have your webpage with embedded flash communicate to your flash swf file and even control it with javascript! Say we wanted to have buttons in the html page that would control an object in the flash. Communication is a two-way road so wouldn’t it be great to be able to go the other way as well, you can! That is the main function of ExternalInterface! In this example/tutorial I will explain both directions of communication with flash and javascript! Communication between flash and javascript isn’t just a myth or mystery!
Steps:
- Be sure to import flash.external.*;
- Set up the javascript to actionscript lane of your communication road. (ExternalInterface.addCallback(methodName, instance, method);)
- Write your javascript function.
- Set up the actionscript to javascript lane. (ExternalInterface.call(functionNameInJavascript);)
We will follow the text’s journey on our road of communication…
The One way: I type in ‘Johnny Appleseed’ in the html text box and press the Send Text To Flash button. The onclick javascript event finds the flash element and calls it’s function (sendTextFromHtml) and then clears the text in the html box. This function has been set up and is exposed to javascript (in actionscript lines 4-7) with the methodName ‘sendTextFromHtml’ while the method it calls is recieveTextFromHtml() in the actionscript. So ‘Johnny Appleseed’ is received as the parameter of the recieveTextFromHtml() function and is assigned to the text of the theText text box.
And back: Now I delete ‘Johnny Appleseed’ since he’s only a fable and enter ‘Paul Bunyan’ in the swf text box and press the Send From Flash to Javascript button. This calls the onRelease function associated with this button. ExternalInterface.call calls the ‘recieveTextFromFlash’ function in the javascript of the page and passes ‘Paul Bunyan’ as the parameter. The javascript function finds the html text box using getElementById() and assigns the parameter to the value of that text box!
This technique will even work if you’re not sending folklore character down the road.
Example:
View the live example here: ActionscriptJavascriptCommunication.html
NEW live example with swfobject2 works in IE! ActionscriptJavascriptCommunication2.html
Actionscript:
[cc lang=”actionscript” tab_size=”2″ lines=”40″]
import flash.external.*;
//Set up Javascript to Actioscript
var methodName:String = “sendTextFromHtml”;
var instance:Object = null;
var method:Function = recieveTextFromHtml;
var wasSuccessful:Boolean = ExternalInterface.addCallback(methodName, instance, method);
//Actionscript to Javascript
//ExternalInterface.call(“recieveTextFromFlash”, _root.theText.text);
function recieveTextFromHtml(t) {
_root.theText.text = t;
}
_root.button.onRelease = function() {
ExternalInterface.call(“recieveTextFromFlash”, _root.theText.text);
_root.theText.text = “”;
}
[/cc]
Javascript:
[cc lang=”javascript” tab_size=”2″ lines=”40″]
function recieveTextFromFlash(Txt) {
document.getElementById(‘htmlText’).value = Txt;
}
[/cc]
HTML: view Source of sample page
Download:
Download all source files (.fla, .html, .swf): ActionscriptJavascriptCommunication.zip
(master-minded by 
