HTML/Adobe AIR Application Diversion Three - Add ActionScript to your HTML

This post is more than 2 years old.

So time for another diversion, once again care of Hatem who suggested it to me today. This is a feature I talked about briefly during my last presentation but didn't have a chance to actually play with. Today at lunch I did so and I'm completely blown away. The feature I'm talking about is the ability for your HTML application to include ActionScript libraries via the SCRIPT tag. This is discussed in the documentation here, but let me demonstrate two examples that I think really bring home the power of this feature. It's got to be one of the coolest things yet I've seen for HTML/AIR applications.

So - for my first test I needed to create an ActionScript class. I wrote the following class which was about as simple as I could do.

package {

public class TestASInHTML
{
	public function TestASInHTML()
	{
	}

	public function multiplyBy2(x:int):int {
		return x*2;
	}

}

}

This simple class has one function, multipleBy2, which, wait for it - does simple multiplication. Crazy, I know. JavaScript will never support this. Anyway - I need to take this class and create a SWF out of it. The docs recommend making using of acompc. This is a command line compiler of Flex/AS code into SWFs. I'm assuming this is also what Flash Builder calls in the background when you do builds. I've never used it before so I had a bit of trouble figuring out the exact syntax. Luckily I ran into this: Defining browser-like user interfaces for HTML content

In this article you can see the following example:

acompc -source-path . -include-classes HTMLHostImplementation -output Host.zip

This looked like it could possibly work, so I gave it a shot. In the folder that had my AS class, I typed:

acompc -source-path . -include-classes TestASInHTML -output Test.zip

I extracted the zip and found library.swf. Woot. So now I've got a SWF of my fancy ActionScript code. The next step was to create a very basic HTML/AIR project within Aptana. I created the following demo using the syntax provided by Adobe as a guide.

<html> <head> <title>New Adobe AIR Project</title> <script type="text/javascript" src="lib/air/AIRAliases.js"></script> <script src="lib/library.swf" type="application/x-shockwave-flash"></script> <script src="lib/jquery/jquery-1.4.2.js"></script> <script>

	$(document).ready(function() {
		/* My first test
		air.trace('loaded');
		var lib = new window.runtime.TestASInHTML();
		var x = lib.multiplyBy2(9);
		air.trace(x); 
		*/
		
		var lib = new window.runtime.TestASInHTML();

		$("#source").change(function() {
			$("#result").html( lib.mutliplyBy2($(this).val()));
		});
	});
	&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;input id="source"&gt; &lt;span id="result"&gt;
&lt;/body&gt;

</html>

So - a few things going on here. First off - I don't typically leave in my text code when doing blog entries. I find commented out code to be very distracting for blogs. But - in this case I wanted to show you what I tried first as a basic test. The most critical line is the script source on line 5. Notice the type. This is required. Once I've added this in, it extends my window.runtime object. As you can see later on - I end up having access to TestASInHTML natively. I can create a pointer to that class and then run my multiplyBy2 value on it. I use a bit of jQuery to bind to an input field and print out the result.

Ok, so right now you may be saying - that's cool - but so what? Well, not being a big Flex/Flash guy, I wasn't really tuned into the ActionScript open source market. I first looked at RIAForge and found a bunch of projects there. One of them was Mike Potter's ActionScript 3 Libraries. There is a lot of crap in here including an RSS parser. He wrote a handler that can take in a random RSS feed, parse it, and return a normalized set of data. (Which, by the way, ColdFusion's CFFEED doesn't do. If you want something like that, check out my Paragator project.) Ok, would it be cool to use his code? Sure it would. I downloaded his code, extracted the SWF out of his SWC file, and created the following demo:

<html> <head> <title>New Adobe AIR Project</title> <script type="text/javascript" src="lib/air/AIRAliases.js"></script> <script src="lib/libraryxml.swf" type="application/x-shockwave-flash"></script> <script src="lib/jquery/jquery-1.4.2.js"></script> <script>

	$(document).ready(function() {
		var lib = new window.runtime.com.adobe.xml.syndication.rss.RSS20();
		$.get("http://feeds.feedburner.com/ColdfusionbloggersorgFeed", {}, function(res,content) {
			//jQuery automatically made it an XML object, I want just the string.
			var string = (new XMLSerializer()).serializeToString(res);
			lib.parse(string);
			var s = "";
			$.each(lib.items, function(idx,val) {
				s += "&lt;a href='" + val.link + "'&gt;" + val.title + "&lt;/a&gt;&lt;br/&gt;";
			});
			$("#result").html(s);
		});
	});
	&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;span id="result" /&gt;
&lt;/body&gt;

</html>

What we have here is a RSS parser, written in ActionScript, being used in an HTML Adobe AIR application. I create an instance of the lib and call parse on the RSS. That's it. I wish it was harder. I wish I could say I had to check the RSS type or do other crap like that - but nope, I didn't.

So maybe I'm getting overly excited about this - but consider it. There is a lot of open source ActionScript out there. You can find a bunch on the Flash category at RIAForge. You can find a bunch on this blog entry that Hatem shared with me: AS3 Code Libraries (APIs). All of these bad boys could be included now in your HTML/AIR apps. Just looking over the list got me excited. Stuff like native zip support could be killer. Anyway, I hope you get the idea. Is this killer or what?

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Hatem Jaber posted on 8/18/2010 at 1:43 AM

Thanks for the demo, this will definitely help with the usage of external AS libs!

Comment 2 by Kris Korsmo posted on 8/18/2010 at 1:48 AM

That is *very* cool because it opens up a ton of possibilities. A little off point, but is there an advantage to using Aptana vs. Flash Builder? Or is it free vs. paid, or just personal preference? I'm noting your series of HTML Air apps and will run through them in a couple weeks when things slow down. Also looking forward to learning more about AIR at MAX!

Comment 3 by Raymond Camden posted on 8/18/2010 at 1:59 AM

I don't think you can use Flash Builder to build HTML/AIR apps. I could be wrong. I used it when I wrote my AS library because, even as simple as it is, it's not a language I use every day so I wanted to ensure I didn't do any stupid syntax errors. Obviously though I could have written it w/o FB.

All Eclipse based tools can share one install - but I don't like to do that. So I use standalone editions of Flash Builder, CFBuilder, and Aptana. It just works better for me.

Comment 4 by Jason Langdon posted on 8/18/2010 at 6:21 AM

As far as I can tell (based on the info here - http://www.adobe.com/devnet... AIR HTML apps can only be developed using Aptana by way of a plugin or an extension for Dreamweaver CS4 or CS5. Would be nice to have the AIR support in Flash Builder though.

Comment 5 by Raymond Camden posted on 8/18/2010 at 6:40 AM

Nope, you don't need anything. All you need is the SDK. If you watch my preso (see the AIR category), I talk a bit about doing these apps "by hand."

Comment 6 by Jason Langdon posted on 8/18/2010 at 6:46 AM

Sorry, I meant if you wanted to use an IDE similar to Flash Builder - the options were Dreamweaver and the plugin for Aptana. Obviously you can hand code if that floats your boat ;-)

Comment 7 by Raymond Camden posted on 8/18/2010 at 3:42 PM

Well, any IDE would work - but if you want the -one click to run- option, yeah, Dreamweaver or Aptana. You can also use CFBuilder. Out of the box it supports 1.5. Andy Mathews discusses adding support for AIR 2 here: http://www.andymatthews.net...

Comment 8 by Kevin Hoyt posted on 8/19/2010 at 7:15 AM

FWIW,

Some time ago, there were a couple of TextMate bundles for AIR development as well. Essentially, any tool that can be extended to interface with command-line tools, can be extended to work with AIR.

Since Flash Builder is all about Flash development, it doesn't really make sense to have HTML authoring as part of the package. Builder is Eclipse-based however, so you can plug most other HTML development extensions into it. And to be clear, Builder does include publishing for AIR, but only with Flash technologies.

Is there another IDE/workflow you'd prefer?

Thanks,
Kevin Hoyt
Adobe Systems, Inc.