Actionscript Javascript Communication | ExternalInterface call and addCallback Tutorial

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:

  1. Be sure to import flash.external.*;
  2. Set up the javascript to actionscript lane of your communication road. (ExternalInterface.addCallback(methodName, instance, method);)
  3. Write your javascript function.
  4. 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 Javascript Communication thumbnail
Actionscript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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 = "";
}

Javascript:

1
2
3
function recieveTextFromFlash(Txt) {
document.getElementById('htmlText').value = Txt;
}

HTML: view Source of sample page

Download:

Download all source files (.fla, .html, .swf): ActionscriptJavascriptCommunication.zip

This entry was posted in tutorial and tagged , , , , , , , , , . Bookmark the permalink. Both comments and trackbacks are currently closed.

There are 76 comments

Comments are closed.
  • Recent Posts

    Screenshot 2015-08-03 08.19.16

    Every Browser is the New IE (to me) – daverupert.com

    Maybe one day the Web will be perfect and complete and I will not need to reach for polyfills. However, if that happened I think I’d stop being interested the Web because it would then be a stagnant pond and not a surfable ocean. Source: Every Browser is the New IE (to me) – daverupert.com […]

    Screenshot 2015-07-31 14.15.00

    URL Structure FTW – Pretty and Readable Permalinks

    I noticed that the clearleft.com site has very clever url structure. You can read the urls like a sentence. Like their about section is “/is” and their capabilities is ‘/does’, and their portfolio section is “/made” , so clearleft.com made code for america. Check the urls listed here and you’ll notice that they read like a […]

    promo

    What Is Code? If You Don’t Know, You Need to Read This

    Here’s a great read that may take a while but is a nice trip through programming history through the lens of one who’s been there. The world belongs to people who code. Those who don’t understand will be left behind. Source: What Is Code? If You Don’t Know, You Need to Read This

    Adactio: Journal—Instantiation

    There needs to be a cultural change in how we approach building for the web. Yes, some of the tools we choose are part of the problem, but the bigger problem is that performance still isn’t being recognised as the most important factor in how people feel about websites (and by extension, the web). This […]

    human_time_diff « WordPress Codex

    Determines the difference between two timestamps.The difference is returned in a human readable format such as “1 hour”, “5 mins”, “2 days”. Source: Function Reference/human time diff « WordPress Codex Used this little known, but nice gem today. It’s a core WordPress function that gives human relative time from any other datetime in “U” format. […]

    logo

    Cyclomatic Complexity: Logic in CSS – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts

    I recently hit upon a way of thinking that made me realise that CSS does include logic, and the fact that it’s rarely viewed as such is probably also why we end up with such poor CSS at all.I found myself explaining compound selectors to a client as being made up of the subject—the thing […]

css.php