Home / Articles / Adobe Flash / Extending AJAX with the Flash/JavaScript Integration Kit

Extending AJAX with the Flash/JavaScript Integration Kit

Article Description

Want more control over the user experience? Because Flash makes graphical programming quick, easy, and attractive, and because JavaScript is very effective at manipulating HTML, they can be leveraged to focus on their strengths. Kris Hadlock shows you how to extend AJAX (Asynchronous JavaScript and XML) by cross-communicating between Flash and JavaScript. Discover how this technique enables technologies to focus on specialized tasks, and helps create the ultimate user experience.

Like this article? We recommend

Macromedia Flash MX 2004: Training from the Source

Macromedia Flash MX 2004: Training from the Source

$44.99

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.

<script type="text/javascript">

var uid = new Date().getTime();
var flashProxy = new FlashProxy(uid, path to.../JavaScriptFlashGateway.swf');

function highlightItem(param, newcolor) {...}

</script>

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.

<script type="text/javascript">
var tag = new FlashTag('flash/chart.swf', 400, 300, '7,0,14,0');
tag.setFlashvars('lcId='+uid);
tag.write(document);
</script>

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 +");