Techie-Gyan

Subscribe via Email

 

How to call javascript function from actionscript ? and actionscript from javascript ?

This integration is very much desired for web development which include flash objects and javascript interactions. It is always suggested by web development community that using flash and javascript together is a great choice for making interactive websites. Trying to use one of the thing as a whole for the development can restrict you on many fronts like javascript can not give you animations and transition as smooth as flash and many more capabilities which flash player has, at the same time every thing in flash can make your website heavier.

My last project needed both technologies and their interation. When i googled for doing this integration, I found various techniques to call functions from actionscript to javascript and vice versa but they did not worked for me. Finally I got one open source project on osflash.org for calling functions from actionscript to javascript.

Flash Javascript Integration Kit

Integration kit has 2 main files, JavaScriptFlashGateway.swf and JavaScriptFlashGateway.js. js file need to be included in the HTML page where you want to you function calling between actionscript and javascript and swf file is used for creating proxy object to call functions.

You also need to include action script files in your flash object on which/from which you want to call functions. This whole integration revolves around one unique identifier using which proxies recognize each other.

Preparations:

Include this line in your HTML page,

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

Generate a unique identifier:

 
var uid = new Date().getTime();
 

Create a proxy object using JavaScriptFlashGateway.swf

 
var flashProxy = new FlashProxy(uid, 'id_of_your_flash', '/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. 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:

 
<script type="text/javascript">
    var tag = new FlashTag('/path/to/flashContent.swf', 234, 234, '7,0,14,0');
    tag.addFlashVar('lcId', uid);
    tag.setId('id_of_your_flash');
    tag.write(document);
</script>
 

On flash side, while developing it you need to do following:

Import the javascript proxy action class in your project(can be found in source tree of download).

 
import com.macromedia.javascript.JavaScriptProxy;
 

Create the proxy object

 
var jsproxy:JavaScriptProxy = new JavaScriptProxy(_root.lcId, this);
 

Calling a JavaScript function from ActionScript

 
jsproxy.call("javaScriptfunctionName", "arg1", new Object());
 

Calling an ActionScript function from JavaScript

 
/* Calling function with argument types string, integer, boolean , date and null */
flashProxy.call('actionscriptfunctionname', 'string', 123, true, new Date(), null);
 

 
//import proxy class
import com.macromedia.javascript.JavaScriptProxy;
 
class MyClass
{
    private var proxy:JavaScriptProxy;
 
    function MyClass()
    {
        //create instance of proxy to JavaScript, pass in args, since
        //we will receive calls from JS
        proxy = new JavaScriptProxy(_root.lcId, this);
 
        sayHello();
    }
 
    //Calls JavaScript sayHello function
    function sayHello():Void
    {
        proxy.call("sayHello", "Homer");
    }
 
    //This gets called when a value is returned from the sayHello function in
    //JavaScript
    function sayHelloReturn(result:String):Void
    {
        trace("Returned from JavaScript : " + result); //traces 'Hello Homer !'
    }
}
 
 

 
 
<script type="text/javascript" src="/path/to/Exception.js"></script>
<script type="text/javascript" src="/path/to/FlashTag.js"></script>
<script type="text/javascript" src="/path/to/FlashSerializer.js"></script>
<script type="text/javascript" src="/path/to/FlashProxy.js"></script>
 
<script language="JavaScript">
 
    //create unique id
    var uid = new Date().getTime();
 
    //create proxy to flash
    var flashProxy = new FlashProxy(uid, '/path/to/JavaScriptFlashGateway.swf');
 
    //this function is called from Flash
    function sayHello(n)
    {
        var returnString = "Hello " + n + "!";
        flashProxy.call("sayHelloReturn", returnString);
    }
 
</script>
 
<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>