Here is an example of the new ExternalInterface class available within the Flash 8 player. It implements both JavaScript calling ActionScript functions and ActionScript calling a JavaScript function. (Local link, requires Flash 8 )

In previous versions of Flash, the techniques to pass data between the Flash movie and the browser window involved using a number of hacks, including the getURL() JavaScript hack to call JS from Flash, and by using the FlashVars shim hack to pass data to Flash from JavaScript. There was also the fscommand() technique to call JavaScript code from Flash, but that worked only in some browsers. Overall, trying to pass data or call code either from JavaScript to ActionScript or the other way around was a pain in the ass.

The ExternalInterface class is a mechanism that is now built right into the Flash plugin that provides a proper way to call code from JavaScript to ActionScript and the other way around. From JavaScript, you can simply call an ActionScript function directly from a handle to the <object> or <embed> tags. From ActionScript you can call functions easily, using ExternalInterface.call(”functionName”, <parameterlist>);. In both cases, you are no longer restricted to only passing strings, and in both cases you can capture return data from the called functions immediately.

Update: Here is the AS code used to create this example. The JS code can be seen by doing a view source on the example page.

import mx.controls.DataGrid;
import flash.external.ExternalInterface;

var g_clickFunction:String = "";

init();

function init() : Void
{
// Create the data grid
this.createClassObject(mx.controls.DataGrid, "gridInstance", this.getNextHighestDepth());
gridInstance.setSize(550, 250);

// Set up the change handler so that a JavaScript function is called when a row is clicked
var clickHandlerObject:Object = new Object();
clickHandlerObject.change = function(eventObject:Object)
{
		ExternalInterface.call(g_clickFunction, eventObject.target.selectedItem.data); 	} 	gridInstance.addEventListener("change", clickHandlerObject);  	// Register the functions which can be called using JavaScript 	ExternalInterface.addCallback("setColumnLabels", null, setColumnLabels);
ExternalInterface.addCallback("setColumnWidths", null, setColumnWidths);
ExternalInterface.addCallback("addRow", null, addRow);
ExternalInterface.addCallback("setClickHandler", null, setClickHandler);
ExternalInterface.addCallback("reset", null, reset);
 	// Advertise to the calling HTML that the component is ready 	ExternalInterface.call("componentReady", true); }  function setColumnLabels(columnLabelArray:Array) : Void { 	for (var i=0; i < columnLabelArray.length; i++) 	{ 		gridInstance.addColumn("column" + i); 		gridInstance.getColumnAt(i).headerText = columnLabelArray[i]; 	} }  function setColumnWidths(columnWidthArray:Array) : Void { 	for (var i=0; i < columnWidthArray.length; i++) 	{ 		gridInstance.getColumnAt(i).width = columnWidthArray[i]; 	} }  function addRow() : Void { 	var rowObject = new Object(); 	for (var i=0; i < arguments.length; i++) 	{ 		if (i < arguments.length - 1) 		{ 			rowObject["column" + i] = arguments[i]; 		} 		else 		{ 			rowObject.data = arguments[i]; 		} 	} 	gridInstance.addItem(rowObject); }  function setClickHandler(functionName:String) { 	g_clickFunction = functionName; }  function reset() : Void { 	gridInstance.dataProvider = new Array(); }

4 Responses to “Flash 8 ExternalInterface Example”

1. Brian Craigie Says:
   February 19th, 2006 at 7:28 am

   Thanks for the example.

   The example in IE6.6.0.2900…sp2 gives an error : line 45, flashHandle is null or not an object

   Having spent ages trying to get my own example working, I found out that document.getElementById is unreliable, and you need to be sure the page is loaded before you can refer to the flash object in Javascript. Another example that does work uses code like this to get a handle (replace FlashObject with the name specified in the ID of your flash object/embed definition (or parameterise it):-

   window.onload = function() {
   if(navigator.appName.indexOf(”Microsoft”) != -1) {
   flashHandle = window.FlashObject;
   }else {
   flashHandle = window.document.FlashObject;
   }
   }

2. Nathan Derksen Says:
   February 19th, 2006 at 7:02 pm

   Thanks for letting me know about the bug. Funny, I’ve never had a problem with getElementById, and it works fine on IE 6.0 for Windows, Firefox for Mac and Windows, and Safari for Mac. I admit though that I haven’t really touched IE in a while now, but I do recall I was wrestling with this at the time I put this up, too. The issue was that the IDs on the Object and Embed tags needed to be different, as IDs need to be unique across a page. The only time I have come across getElementById being unreliable is when the ID being referenced is not unique.

3. Adam McGowan Says:
   September 2nd, 2006 at 5:22 am

   Hi Nathan,
   Thanx for the great example. I’ve been looking for a working example of passing data to Flash with ExternalInterface.addCallback() for a while now … Adobe never seems to mention the importance of using the arguments array!

4. Arik Yavilevich Says:
   December 1st, 2006 at 6:40 pm

   Hey and thanks for the great example.

   It seems that the problem with IE is in this line:
   if (flashEmbedHandle.Play)

   When running from IE, flashEmbedHandle is null so trying to reference a member will fail.

   simply change to :
   if (flashEmbedHandle && flashEmbedHandle.Play)

   Regards.