External Interface class

This class allows the flow of Flash-JavaScript communication in both direction in a simple way. You just check if the interface is available, if not, just prompts a message. But let's ask some question: works external interface in any browser? Of course not. ExternalInterface requires the user's web browser to support either ActiveX or the NPRuntime API that is exposed by some browsers for plugin scripting. See Mozilla specifications about the matter. Also Flash Player 8 is required.

The class have two simple methods:

addCallback (methodName:String, instance:Object, method:Function) : Boolean

to registers an ActionScript method as callable from the container, and

call(methodName:String, [parameter1:Object]) : Object

to call a function exposed by the Flash Player container, passing 0 or more arguments. Let's show how to implement this in Flash

Flash Cart

We will explain here just the way our cart interacts with JavaScript, for more details over the cart, check new store tutorial. Let's show how we register and call JavaScript functions:

    
// Register the functions which can be called using JavaScript
if (ExternalInterface.available) {    
    // add a callback function
    var res:Boolean = ExternalInterface.addCallback("addTC", null, addToCart); 
    // could we add the callback?
    if (!res) { //could not add callback, disable
        mx.controls.Alert.show("The cart will not work on this browser", "Error", this, OK)
        cart.lista.enabled = cart.del_but.enabled = cart.check_but.enabled = false
    }
} else {
    //ExternalInterface not available on this browser, disable
    mx.controls.Alert.show("The cart will not work on this browser", "Error", this, OK)
    cart.lista.enabled = cart.del_but.enabled = cart.check_but.enabled = false
}


The first if check that ExternalInterface is available (note that ExternalInterface is a static class, so don't need to be instantiated) If not, we know the browser doesn't support it and simply show an alert and disable the cart. If the interface is available, then we add a callback "addTC" and link to addToCart function. Note that the callback we're adding doesn't need to match the name of the function it calls. Again, if the addCallback fails we disable the cart and let the user know.

This addTC is the name of the call that javascript will use to talk with Flash. Let's see this JavaScript code:

    
function sendToFlash (id, name, price) {
    var p = new Object();
    p.PkProduct = id
    p.Name = name
    p.Price = price
    p.Qty = 1
    thisMovie("sample").addTC(p);
}
function thisMovie(movieName) {
    if (navigator.appName.indexOf("Microsoft") != -1) {
        return top.frames['bottomFrame'].window[movieName]
    } else {
        return top.frames['bottomFrame'].document[movieName]    
    }
}
  

The first function builds and object based on parameters passed and call addTC function using it. The helper function thisMovie returns the appropriate syntax depending on the browser, since Internet Explorer and Netscape refers to the movie object differently. Here we use frames, so frames hierarchy should be reflected also. Avoid using other methods of accessing the plug-in object, such as document.getElementById("pluginName") or document.all.pluginName, because these other methods do not work consistently across all browsers.

The parameters comes from the "Add" button, that looks like this:

    
<input type="button" name="add" value="Add" onClick="sendToFlash(1, 'Handmade spicy sausage', '5.20')">
  

The button pass a product ID, a name and a price. You can build the page using just plain HTML or any back-end language and a database

So now we know how the HTML page calls a Flash function, addToCart, that adds the product to the cart. Let's move to the opposite (and easier) side, that's how Flash calls a JavaScript function.