.
Posted by : khadlock on 12/28/2007

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.

One of the benefits of using different technologies in a project is the ability of leveraging them to focus on specific tasks. Developers then have the ability to develop robust applications that provide content in the most effective form.

In this article, you' ll learn 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 see how it helps to create the ultimate user experience. Because Flash makes graphical programming quick, easy, and attractive, and because JavaScript is very effective at manipulating HTML, we can leverage these technologies to focus on their strengths. This will provide us with more control over the page and, ultimately, the user experience.

I' m assuming that you have a basic understanding of ActionScript 2 and AJAX. I' m sure you already have an idea of what you plan to build with this knowledge. If not, this article will spark plenty of ideas. For example, you can easily create a graphical representation of an RSS feed, blog, or any other XML data that you can get your hands on.

If that doesn' t inspire you, I created a sample project that can be viewed here. The code for the sample can be downloaded here. The sample uses AJAX to parse an XML file, which displays the data as HTML. The part that you will learn is how to extend the functionality with the Flash JavaScript Integration Kit, which creates a connection between the HTML and a Flash bar chart. The end result is a list of mortgage companies with specific loan statistics and a bar chart that represents their percentage rates. The benefit of using this combination of technologies is providing the information to the user in the most intuitive and responsive form possible.

JavaScript Flash Integration Kit

If you don' t already have the Flash /JavaScript Integration Kit, you can download it from this site. Or, if you have Subversion, you can get the latest source code from here. If you have concerns about compatibility, the Integration Kit has been successfully tested on the following browsers:
  • Windows IE 6.0
  • Windows Firefox 1.0
  • Windows Opera 8.0
  • Macintosh Opera 8.0
  • Macintosh Firefox 1.0
  • Safari 1.2.4 and 2.0
  • Linux Firefox 1.0.4

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

JavaScript to Flash

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.

Flash to JavaScript

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.



No comments found ! Click here to be the first adding comments for this article!