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>


Actions

Information

3 responses

10 07 2009
ram

Hi –
This is very useful. I have a small problem which I cannot resolve. I have a Flash AS2 website with a download button for a AIR application. When I click on download I want the AIR install badge to appear on the same page. I have used the code from Adobe AIR and followed David Tucker’s instructions. The problem is that the badge opens up in a new HTML page. How do I get it to open in the Flash page?
Many thanks.

23 10 2009
fff

This will hold the flash content

//

« On the blog train RemoteObject using AMFPHP and Actionscript 3 »

Actions

* rss Comments RSS
* trackback Trackback

Information

* Date : February 29, 2008
* Tags: Adobe, AIR, badge, SWFObject
* Categories : Adobe Flex/AIR

One response

10 07 2009
ram (09:48:39) :

Hi –
This is very useful. I have a small problem which I cannot resolve. I have a Flash AS2 website with a download button for a AIR application. When I click on download I want the AIR install badge to appear on the same page. I have used the code from Adobe AIR and followed David Tucker’s instructions. The problem is that the badge opens up in a new HTML page. How do I get it to open in the Flash page?
Many thanks.
Reply

Leave a comment
Click here to cancel reply.

Name (required)

E-mail (will not be published) (required)

Website

Notify me of follow-up comments via email.
The only means of strengthening one’s intelligence is to make up one’s mind about nothing– to let the mind be a thoroughfare for all thoughts.
John Keats (1795 – 1821)

Recent Posts

* Zend Framework: Project setup
* Fileupload using Zend AMF, RemoteObject and Flash 10
* Fileupload using AMFPHP, RemoteObject and Flash 10
* Localized flex login using the Swiz framework
* The Paradox of Our Age

Categories

* Adobe Flex/AIR
* All about nothing
* PHP

Blogroll

* Tarraq/Chikara
* Tom Kyte

Archives

* October 2009
* April 2009
* March 2009
* December 2008
* September 2008
* February 2008
* June 2007

Meta

* Log in
* Entries RSS
* Comments RSS
* WordPress.com

15 02 2011
Jo

A better custom Air Install Badge plus tracking downloads with Google Analytics for Flash
http://www.getwebreader.com/2011/02/a-better-custom-air-install-badge-google-analytics/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: