External Interface

Flash's ExternalInterface class facilitates ActionScript-to-JavaScript communication.

Notes:

• This example uses ActionScript code from an Adobe External Interface tutorial. If you aren't familiar with the inner workings of External Interface, please read Adobe's tutorial.
• External Interface will NOT work on a local drive (such as your C: drive) unless you edit your Flash Player security settings. This is to prevent malicious SWFs from accessing your hard drive.

Using External Interface with Dynamic Publishing

ExternalInterface lets you treat your SWF like a JavaScript object; functions (callbacks) made public in the SWF are available through dot notation in JavaScript. In order to use the SWF in this way, we must first 'grab' it using document.getElementById.

Notes:

• You must specify the ID of the SWF.
• Some old External Interface tutorials discourage using document.getElementById for External Interface, but rest assured it works fine in all modern browsers, including IE6+, Firefox 2+ and Safari 3+.

The JavaScript will look like something like this:

var flashvars = {};
var params = {};
var attributes = { id: "ExternalInterfaceExample", name: "ExternalInterfaceExample" };
 
swfobject.embedSWF("ExternalInterfaceExample.swf", "flashcontent", "550", "200", "8", "/path/to/expressinstall.swf", flashvars, params, attributes);
 
function sendToFlash(text) {
  var swf = document.getElementById("ExternalInterfaceExample");
  swf.sendTextToFlash(text);
}

Demo: dynamic publishing

Using External Interface with Static Publishing

External Interface works the same with static publishing as it does with dynamic publishing, except for one big difference: you can't use document.getElementById to access the SWF.

SWFObject's static publishing approach requires nested object elements. Only the outer object is given an ID. Since the inner object doesn't have an ID, document.getElementById won't work on the inner object element.

So how do you deal with this confusing conundrum? Easy! SWFObject includes a special helper function named swfobject.getObjectById. This function works just like document.getElementById, but is designed specifically to deal with SWFObject's nested object elements.

The JavaScript will look like something like this:

swfobject.registerObject("ExternalInterfaceExample", "8", "/path/to/expressinstall.swf");
 
function sendToFlash(text) {
  var swf = swfobject.getObjectById("ExternalInterfaceExample");
  swf.sendTextToFlash(text);
}

The HTML will look like something like this:

<object id="ExternalInterfaceExample" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="200">
  <param name="movie" value="ExternalInterfaceExample.swf" />
  <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="ExternalInterfaceExample.swf" width="550" height="200">
  <!--<![endif]-->
  <p>Please update your Flash Player</p>
  <!--[if !IE]>-->
    </object>
  <!--<![endif]-->
</object>

Demo: static publishing