The JavaScript and Flash Integration Kit allows developers to get the best of the Flash and HTML worlds by enabling JavaScript to invoke ActionScript functions, and vice versa. All major data types can be passed between the two environments including:
Additionally, the JavaScript and Flash Integration Kit works on all major browsers and platforms (see requirements below for details).
You can find the latest information and download the latest version from:
http://www.macromedia.com/go/flashjavascript
This project was created and written by Christian Cantrell and Mike Chambers at Macromedia.
Installation of the JavaScript and Flash Integration Kit is very straightforward. Copy the JavaScriptFlashGateway.js and JavaScriptFlashGateway.swf files from the installation directory into your web root. They can go anywhere, but we recommend putting them in a location where they can be used by multiple projects.
Installation of the Flash part of the kit requires copying the library files from source/flash/actionscript into your Flash Authoring or Flex classpath:
com/macromedia/javascript/JavaScriptProxy.as
com/macromedia/javascript/JavaScriptSerializer.as
Make sure to maintain the directory structure when moving the files into your classpath.
To call an ActionScript function from JavaScript, make sure the JavaScriptFlashGateway.js is included in your HTML page like this:
<script type="text/javascript" src="/path/to/JavaScriptFlashGateway.js"></script>
The JavaScriptFlashGateway.js file contains a class called FlashProxy which is used to proxy function calls between Flash and JavaScript. The FlashProxy and the Flash content you want to invoke functions on must share a unique ID so that the FlashProxy knows which Flash content on the page to invoke functions on. The easiest way to create a unique ID is to use a timestamp. Inside script tags on your page, create a unique ID like this:
var uid = new Date().getTime();
Now, create an instance of the FlashProxy JavaScript class and pass in the unique ID you just created, and the path to the JavaScriptFlashGateway.swf file, like this:
var flashProxy = new FlashProxy(uid, '/path/to/JavaScriptFlashGateway.swf');
When you add your Flash content to your page, you have to pass in the same unique ID that you passed into the constructor of the FlashProxy using flashvars. The JavaScriptFlashGateway.js file contains an easy way to generate Flash tags and add the necessary flashvars, like this:
<script type="text/javascript">
var tag = new FlashTag('/path/to/flashContent.swf', 300, 300); // last two arguments are height and width
tag.setFlashvars('lcId='+uid);
tag.write(document);
</script>
The unique ID is passed into your Flash content through the lcId Flash variable. Now, you are ready to invoke ActionScript functions from JavaScript using your FlashProxy instance, like this:
flashProxy.call('myActionScriptFunction', 'my string', 123, true, new Date(), null);
The first argument in the code above is the name of the ActionScript function you want to invoke, and any remaining arguments are passed as arguments to the function you are invoking within Flash. Supported data types include objects, arrays, strings, dates, numbers, booleans, nulls, and undefined.
You don't have to do anything special in your JavaScript code in order to receive function calls from Flash. As long as the JavaScriptFlashGateway.js file is included in the page, JavaScript functions can be invoked from Flash with any number of arguments using the technique described below.
Again, make sure JavaScriptFlashGateway.js is included in the HTML page that contains the JavaScript function you want to invoke.
Import the JavaScriptProxy class into your Flash project:
import com.macromedia.javascript.JavaScriptProxy;
You then create an instance of the JavaScriptProxy class like this:
var proxy:JavaScriptProxy = new JavaScriptProxy();
You can call a JavaScript function in two ways.
First, you can use the call API like this:
proxy.call("javaScriptMethodName", "arg1", new Object());
The first argument is the name of the function to call in JavaScript. Any additional arguments will be passed as arguments to the JavaScript function being called.
You can also call methods directly on the JavaScriptProxy class, and they will be proxied to JavaScript. For Example:
proxy.javaScriptMethodName("arg1", new Object());
In order to allow JavaScript to call functions within your Flash content, you need to create an instance of the JavaScriptProxy class and specify the object that functions will be proxied to.
var proxy:JavaScriptProxy = new JavaScriptProxy(_root.lcId, this);
The constructor takes two arguments. The first is the unique id passed into the Flash content from the HTML page (see above). The second is the object or class instance that function calls from JavaScript will be proxied to. Note: the arguments are only required if your Flash content will receive function calls from JavaScript.
This is all of the code required. Any JavaScript calls will be passed to the object specified in the constructor parameter.
The JavaScript Flash Integration Kit requires Flash Player version 6r65, and has been tested on the following browsers:
This product includes software developed by Macromedia, Inc. (http://www.macromedia.com).