====== Calling an ActionScript function from JavaScript ======

{{tag>flashjs tutorial javascript}}

To call an ActionScript function from JavaScript, make sure the four required JavaScript files are included in your HTML page like this:

<code html4strict>
<script type="text/javascript" src="/ci/jsflash/JavaScriptFlashGateway.js"></script>
</code>

Use the FlashProxy JavaScript class 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:

<code javascript>
var uid = new Date().getTime();
</code>

Now, create an instance of the FlashProxy JavaScript class and pass in the unique ID you just created, the ID or name of your Flash content (the value of the id attribute you will use in the object tag, and the value of the name attribute you will use in the embed tag), and the path to the JavaScriptFlashGateway.swf file, like this:

<code javascript>
var flashProxy = new FlashProxy(uid, 'myFlashContent', '/path/to/JavaScriptFlashGateway.swf');
</code>

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. You also need to give your Flash content the same ID or name that you passed into the FlashProxy (the id attribute of the object tag, and the name of the embed tag).  The FlashTag class contained in the project makes it easy to generate Flash tags and add the necessary flashvars, like this:

<code javascript>
<script type="text/javascript">
    // The arguments below are path, width, height, and Flash Player version.
    var tag = new FlashTag('/path/to/flashContent.swf', 300, 300, '7,0,14,0'); 
    tag.addFlashVar('lcId', uid);
    tag.setId('myFlashContent');
    tag.write(document);
</script>
</code>

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:

<code javascript>
flashProxy.call('myActionScriptFunction', 'my string', 123, true, new Date(), null);
</code>

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. 

Oh yeah, make sure you set up your myFlashContent.swf to receive these function calls by importing and initializing a JavaScriptProxy object in your movie! (See the "Receiving a function call from JavaScript within Flash" page for info on how to do that.)

For more advanced use cases, the FlashProxy object takes an additional optional argument called "callbackScope".  If you want Flash to invoke functions in a scope other than the default document, pass in a reference to the desired scope.  For example, if I have a JavaScript object called "callback," I can instantiate the FlashProxy like this in order to have Flash call functions on the "callback" instance:

<code javascript>
var flashProxy = new FlashProxy(uid, 'myFlashContent', '/path/to/JavaScriptFlashGateway.swf', callback);
</code>

----

A process diagram is shown below. This describes what is happening under the hood and is meant to help you generalize the process for calling ActionScript from JavaScript.

{{ :flashjs:docs:usage:astojs_processdiagram.gif }}