Extending Ajax with the Flash JavaScript Integration Kit

JavaScript

First, you need to create an index file, move the JavaScript files from the Integration Kit to a directory within your project, and include them in your page:

<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>

Now, you’ll create a unique identifier with the JavaScript Date object. The FlashProxy class expects this unique identifier as the first parameter and must use it to create a connection between itself and the methods in your Flash file. The second parameter is the relative path to the JavaScriptFlashGateway.swf. In the sample, I added a highlightItem() method to JavaScript to be used by Flash, which will change the background color in the HTML for a particular lender’s div.

var uid = new Date().getTime();
var flashProxy = new FlashProxy(uid, path to.../JavaScriptFlashGateway.swf');
function highlightItem(param, newcolor) {...}

 
In the body of your page, you can use the shortcut provided by the FlashTag object to create your Flash tags. To use it, first instantiate the FlashTag object and pass it these four parameters:

• The path to your Flash file
• The width of your Flash file
• The height of your Flash file
• The version of Flash that you are targeting

Set the Flashvars() method of the FlashTag object to the unique id that you created with the Date object. The id will be used through flashvars by your Flash file as a LocalConnection id with the JavaScriptFlashGateway.swf that you just added. The final line writes the Flash tags to your file.

var tag = new FlashTag('flash/chart.swf', 400, 300, '7,0,14,0');
tag.setFlashvars('lcId='+uid);
tag.write(document);

To make calls to Flash from JavaScript, you need to use the FlashProxy object. The parameters to pass the FlashProxy object are a method name that you will define in Flash and any number of parameters that you want to accept in your Flash method. In my example, I use two—the name of the lender and the lender’s rate.

javascript:flashProxy.call('addItem', '"+ name +"', "+ rate +");

 
NOTE
There is a bug that I recently reported to the open source Flash team. The Integration Kit does not allow multiple consecutive method calls from JavaScript to Flash because it only successfully makes the last call, ignoring the others. To work around this bug, you can create a method in Flash that accepts arrays and loops through the arrays to call another method on each item. You will see a sample of how to create this method in the JavaScript to Flash section of the article.

Flash

Now open Flash and import the two JavaScript classes from the Integration Kit.

import com.macromedia.javascript.JavaScriptProxy;
import com.macromedia.javascript.JavaScriptSerializer;

Instantiate the JavaScriptProxy object and pass it two parameters. The first parameter is the local connection id that we already set in flashvars, and the second is the scope of your Flash file.

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

At this point, you have the foundation code that you need to move forward with Flash.

Flash to JavaScript

To retrieve the data in Flash, you first need to create the method that JavaScript will be calling with the flashProxy. Because you already defined this method in JavaScript, you are ready to create it in Flash. In the sample, the addItem() method is used to create bars and add them to the chart and a BarCollection class. The parameters that addItem() takes are the lender name and rate, which are the parameters you are already passing from the flashProxy object in JavaScript. The following is the addItem() method in Flash:

public function addItem(lender:String, rate:Number):Void {...}

To work around the bug I described earlier, you can create a method in Flash that accepts arrays of lenders and their corresponding rates. This allows the addItem() method to be accessible by multiple consecutive method calls.

public function addAllItems(lenders:Array, rates:Array):Void
{
  for(var i=0; i<lenders.length; i++)
  {
    this.addItem(lenders[i], rates[i]);
  }
}

The receiving methods in Flash can receive anything that you or your client desires; for instance, the sample could have been a line or pie chart. The best part is that setting it up to receive calls from JavaScript is simple after you build the foundation.

JavaScript to Flash

If you thought that communicating with Flash from JavaScript was easy, sending method calls to JavaScript from Flash is as simple as the following line of code:

proxy.call("highlightItem ", this.lender, "#ebebeb");

The JavaScriptProxy.call()takes the JavaScript method name written earlier and any number of parameters that you want to pass it. In the sample, I pass the highlightItem() method two parameters: the lender name and a hex value to change the background color of the div in the HTML for a particular lender. This provides the user immediate visual feedback and makes the content more effective.

Summary

Extending AJAX with Flash creates a very unique user experience that one technology would have trouble producing. By leveraging these technologies to focus on their strong points, the application becomes more modular, which makes it more scalable, leaving room for expansion. Most importantly, it makes the user experience more responsive, which in turn makes it more usable and intuitive to the user. The Flash /JavaScript Integration Kit makes the extension simple by providing a wrapper for direct communication between Flash and JavaScript.