Kevin Hoyt

Among my favorite features of Adobe AIR is the ability to directly invoke ActionScript 3 classes from JavaScript. The out-of-the-box examples of this are the network detection classes which for JavaScript developers comes in the form of a Flash SWF file. I recently completed a Flex-based project that used David Chang’s Zip utility in the form of a SWC library. It seemed like an intriguing example for the JavaScript side of the house, so I picked up jQuery and set to work.

Flash SWF files are included via the traditional SCRIPT tag in HTML. A SWC file is itself just a special Zip file that contains a SWF file. It is that SWF file that actually contains the classes that can be referenced from JavaScript. If you crack open David’s SWC you’ll find that treasured SWF file. From there you can drop it into the same directory as the rest of your web application assets (or sub-folder). Throw the following SCRIPT tag in your HTML and you’re ready to go.

<script src="lib/nochump/library.swf" type="application/x-shockwave-flash"></script>

David has done a great job of additionally generating documentation for his classes. He also has a few samples, which although they are ActionScript, aren’t that far off from what it will look like to use in JavaScript. The main catch is that in JavaScript, you need to prefix the class name (including package) with the word “runtime.” It’s that little keyword that tells AIR to look on the Flash side of the house. You can think of it as ExternalInterface on steroids. Below is one of David’s examples ported to JavaScript in AIR.

function readFromZip( data )
{
  var content = null;
  var entry = null;
  var zip = new runtime.nochump.util.zip.ZipFile( data );

  for( var i = 0; i < zip.entries.length; i++ )
  {
    entry = zip.entries[i];
    air.trace( entry.name );

    content = new air.ByteArray();
    content = zip.getInput( entry );
    air.trace( content.toString() );
  }
}

Getting the functionality to work is one thing, but I wanted to wrap a little UI love around the concept as well. Standing on the shoulders of greatness, I pulled the assets from Christophe Coenraet’s Salesbuilder application. This gave me the chrome and the basic color scheme. I made a few twists where it better suited my needs in HTML/CSS or where I just didn’t like the design. The result is a basic Zip file viewer (source) that I’d like to expand in the future.

Two challenges with JavaScript in the browser go away when using AIR. The first is the lack of JavaScript to process binary data. The second is the somewhat black-box nature of integrating JavaScript and Flash together (really a shortcoming of the now ancient plug-in architecture). Inside of AIR, not only can JavaScript process binary directly, but they can also use Flash classes directly. This opens the door to some compelling new mash-ups - not from a data standpoint however, but from an integration standpoint.

This entry was posted on Tuesday, March 4th, 2008 at 1:47 pm and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.