Badge installing AIR application with SWFObject

29 02 2008

Adobe finally released it’s 1.0 version of AIR, so let’s go to work and create great looking applications. But how on earth do we deploy these applications to the public?

When downloading the AIR SDK a sample is provided for installing and deploying air applications using the badge installer. This badge installer consist of a badge.swf file and some javascript which can be used within html and automatically installs the right version of the Adobe AIR runtime followed by your application.

When using flash within (x)html i personally prefer to use the SWFObject javascript file so here are the steps involved of deploying AIR applications using the badge installer and SWFObject.

First of all you need to change your webserver configuration to add support for the AIR mime type by adding the following line to your, for example, Apache configuration file:

AddType application/vnd.adobe.air-application-installer-package+zip air

Now it is time to use SWFObject. Simply include the swfobject.js Javascript file in the head section of your html, then use a small amount of Javascript on your page to embed your Flash movie. In our case this will be the badge.swf file from the AIR SDK. A complete example with the necessary variables for installing the AIR 1.0 runtime and an example “hello world” AIR application is shown below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Deploy Hello World</title>
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body>
<div id="flashcontent">
This will hold the flash content
</div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("your/path/to/badge.swf", "badge", "217", "180", "9.0.115", "#FFFFFF");
so.addVariable( "appname", "Hello World" );
so.addVariable( "appurl", "http://your-host/HelloWorld.air" );
so.addVariable( "imageurl", "test.jpg" );
so.addVariable( "airversion", "1.0" );
so.write("flashcontent");
// ]]>
</script>
</body>
</html>