Flash 8: Using ExternalInterface

Posted on by

Another cool new feature in Flash 8 is the ExternalInterface class. This is a new method of talking to the Flash player using Javascript. It works by registering functions inside the Flash movie that external Javascripts can call. It works in all the major browsers including Internet Explorer 5.0+, Firefox 1.0+, Mozilla 1.7.5+, Netscape 8+, and Safari 1.3+. Opera is left out because apparently it doesn’t support a new plugin scripting standard, specifically the ‘NPRuntime interface’ which was recently developed jointly by a bunch of browser and plugin makers. But I suppose one could argue that Opera 8 is not a ‘major browser.’

Here’s how it works (view ExternalInterface example page):

Set up a function in your Flash movie that you want to be accessible from Javascript.

function callMeFromJavascript(arg1, arg2, ...) {
    // do stuff
}

Then, to make the function available to the browser, you use the ExternalInterface class to register the name of the function:

var connection = ExternalInterface.addCallback("myFunctionId", null, callMeFromJavascript);

This registers the function in your Flash movie (callMeFromJavascript) as “myFunctionId” outside of the player. The null value is meant to be an object or movieclip that the ‘this’ keyword would reference in your function. If you don’t get this part it’s fine, for most uses you won’t need to use it and can just use null. Then, when you want to call the function from your Javascript, you would use this code:

var myFlashMovie = document.getElementById("flashId");
myFlashMovie.myFunctionId();

Notice that we use the ID of the Flash movie’s object/embed tag to call the internal Actionscript functions. This means that you must have an ID on your object tag and your embed tag. Now the catch to that is IDs on HTML elements are supposed to be unique in each page. The way we get around this is by using FlashObject. When FlashObject detects the Flash player, it also chooses whether to use an object tag or an embed tag to embed the movie in the page, and since it picks one or the other, it can put the ID on whichever tag it chooses and you won’t have any duplicate IDs on the page.

If you are not using FlashObject, you must use slightly different code to access the internal Actionscript functions. Here’s an example of what it might look like:

var myFlashMovie = document.embedName;

That’s it. Here’s my example page that sends some basic calls into the Flash movie. Unfortunately, I can’t release the source fla file until Flash 8 is released, but the code you need is all here, so you can get to work testing it out using Flash 7 if you just jump through some hoops to make a Flash 8 swf.

Also keep in mind that ExternalInterface is not just for HTML pages. Darron Schall has put together a little C# wrapper that can talk to Flash using ExternalInterface.

24 thoughts on “Flash 8: Using ExternalInterface”

  1. Excellent addition. I could have used this tons of times before in place of all the FSCommand, getURL, and LocalConnection hacks. I can’t wait to start using it.

  2. Since Flash 8 doesn’t support RegExp and Javascript 1.2 support it, perharps it a good idea to send datas in the document object, then parse datas with RegExp, then return the result in the flash player.

    Also, you give an exact list of browser who supports ExternalInterface. Could you tell where you find this exact list ? This is official ?

  3. I got the list from Macromedia, but you can compile your own list by simply looking at what browsers support the new NPRuntime interface.

  4. Are there any limits on the amount of data that can be passed with these function calls? What data types are supported?

    I was annoyed by the Flash LocalConnection API because there is an arbitrary and undocumented limit to the amount of data that can be sent (empirically seems to be about 40 kbytes, in Firefox/Flash8)

  5. There was just a giant discussion about ExternalInterface on the OSFlash mailing list that covered many of the inner workings of it. To answer your questions, Mike Chambers posted this, which says:

    It handles serialization with Flash / JavaScript communication.

    If you want Flash ->c# communication, then you will need to deserialize the
    XML that Flash will spit out (xml-rpc like xml).

    So as for data types, when your movie is in the browser, the Flash player will handle the serialization of data types. As for the amount of data you can send, there may be some more information in the discussion on the OSFlash list.

  6. Pingback: Xander's Blog

  8. I’m not too familiar with stuff like that, but since there’s already been a C# wrapper written, I don’t see why you couldn’t use other technologies.

  9. I’m having an awful time trying to get javascript to call my actionscript functions. I’m using AS2.0 and the ExternalInterface class is only called from one object. Has anyone else been using EI in an OOP setting and gotten it to work? Also, when passing strings from flash to javascript, I’m finding that the information never gets there unless I limit the string to the first 100 or so characters. This seems like more of a limitation than others have been discovering. Any ideas that would help with either of these problems would be greatly appreciated. Thanks.

  10. “Unfortunately, I can’t release the source fla file until Flash 8 is released”
    May I ask you if you relased the source (now that Flash has been released)?
    Many many thanks
    Shirley

  11. I was going to, but I seem to have lost the fla files for this entry.

    All the code that was used is in the post, though, so you can rebuild the example fairly easily.

    Macromedia also has a few examples now avaialable from their labs website.

  12. we are using externalInterface with c#
    while we can get messages back and forth, we are having problems when we make a class for the communications
    is there a scope issue when you make a class for externalInterface functionality?
    it doesnt seem to like to communicate with other objects or raise events
    or am i doing something wrong?

  13. “Macromedia also has a few examples now avaialable from their labs website. ”

    Macromedia released Flash 8 with several examples in their documentation, and also include sample FLA files with the program (see the install folder and then click Samples and Tutorials / Samples / ActionScript.

  14. swf share data with each other?
    ————————————
    have an application AJAX, in her I use the object XMLHTTPREQUEST to request the datasets ” XML ” of the server. Is it possible with this API an application SWF access this dataset or the javascript to pass the reference of the dataset for the application SWF?

  15. Yes, you could pass the XML into a Flash movie, but you don’t need to – Flash has a built in XML loader that can load XML data the same way XMLHttpRequest does.

  16. Does anybody know how to say applications writings in Laszlo (* .lzx) and compiled for SWF 8 they can be used of this API?

  17. Great, but there is a bug, with either IE or the Flash object in IE when using ExternalInterface. This is especially problematic with .NET applications since the all but make you sacrifice a small animal to remove the

    tag, and the JS that Flash inserts into the page excutes before the object has been loaded into memory.

    The following code will illustrate the issue:


    object> outside the form, and using JS to position it on page load, there is no work around for this issue.

  18. Great, but there is a bug, with either IE or the Flash object in IE when using ExternalInterface. This is especially problematic with .NET applications since the all but make you sacrifice a small animal to remove the tag, and the JS that Flash inserts into the page excutes before the object has been loaded into memory.

    The following code will illustrate the issue:


    g the <object> outside the form, and using JS to position it on page load, there is no work around for this issue.

  21. Code sample:
    <FORM>
    <object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,22,0″ width=”1200″ height=”830″ id=”map” VIEWASTEXT>
    <param name=’src’ value=’PATH TO MOVIE USING EXTERNAL INTERFACE’>
    <param name=’allowScriptAccess’ value=’always’/>
    </object>
    </FORM>

  22. Geoff, danforth sent me over here for some help with the ExternalInterface. I’m trying to get this to work with sourced .js files instead of having to embed the JavaScript right in the script tags. Have you gotten this working yet? If so, what do you have to do differently?

Comments are closed.