NOTE: This article was written with AIR 1.5 in mind. I can’t say if the following information will work as intended on AIR 2. If you already know how to build you own Adobe AIR badge, you won’t find much new information here. This post is more to inform users that you can in fact create your own AIR badge if you didn’t already know. When I first started working with AIR, I learned about the badge but as far as I was concerned, the badge was a black box who’s functionality was designed to remain mysterious. The badge I used was the one Grant Skinner created and you can get more information from Adobe on how to use it. For a long time this badge worked well but finally the time has come where I need to make it behave a bit differently so I decided to do a bit of research.
After doing a few Google searches, I found a link to Adobe’s site with all the technical information on how to create your own AIR badge! I was completely surprised that I never even thought about the possibility that I could write my own badge… not sure what I was thinking. Nothing is more fun that reinventing the wheel right? After looking at the specifications, I realized it wasn’t too bad and started to plan out a logical flow on how my badge was supposed to work.
Requirements
My current badge has the following issue: a user installs my app through the badge, every time after that point that the user comes back to the badge, they have to ‘install’ the app again even thought it was already installed. Instead, I want the badge to sense if the application is installed and if so, launch it (I haven’t spend much time looking into Grants Badger app but I think it’ll let you do this as well if used correctly… I think). The logic for the new badge should be:
- Check if AIR is installed (If not, install)
- Check if my app is installed (If not install)
- Launch my app
Setup
I’ll be using Flash CS3 since that’s what I have available to me for this tutorial and I am making the assumption you already know how to use Flash, understand ActionScript 3, and have an AIR app to test. Open Flash and create a new AS3 file and save it in some folder. Now attach a class called ‘Badge’ to your file that extends MovieClip. Your class should look like the following:
package
{
import flash.display.MovieClip;
public class Badge extends MovieClip
{
public function Badge():void
{
trace('hi');
}
}
}
I added a trace in the constructor so I can make sure my class is working. When you test your badge you should see ‘hi’ in your output window. Now we are ready to continue.
air.swf
Adobe created a file called air.swf that resides on their server at http://airdownload.adobe.com/air/browserapi/air.swf. This file contains all the functionality required to interact with AIR files through your badge. It can check to see if you have air installed on the local machine and install it, it can check to see if an air app is installed on the local machine and install it or launch. It does it all so the first step in creating a badge is to load this file so you can call it’s methods.
All we need to do is create a Loader instance, add an event listener to alert us when it’s done loading the air.swf file and call the load method passing in the url as a URLRequest. The code is below with all the required imports:
package
{
import flash.display.MovieClip;
import flash.events.Event;
import flash.display.Loader;
import flash.net.URLRequest;
public class Badge extends MovieClip
{
private var _air:Object;
public function Badge():void
{
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.INIT, airSwfLoaded);
loader.load(new URLRequest('http://airdownload.adobe.com/air/browserapi/air.swf'));
}
private function airSwfLoaded(e:Event):void
{
this._air = e.target.content;
trace(this._air.getStatus());
}
}
}
Test the above code and in your output you should see one of the following status responses (taken from Adobe’s site):
| String value | Description |
|---|---|
| “available” | The runtime can be installed on this computer but currently it is not installed. |
| “unavailable” | The runtime cannot be installed on this computer. |
| “installed” | The runtime is installed on this computer. |
Handling the response
Now that we have a status, we can tell the badge to handle it in the appropriate manner. The first status we need to handle is ‘available’. This means AIR is not installed on the machine but can be. By default, AIR needs to be installed before installing an AIR app so in this scenario, all we need to call is install on our app and AIR will be installed first automatically. Here is the tricky part, we can’t automatically call install on an AIR app, it is not allowed. You can only call install via a user initiated event such as a button click.
If the status is unavailable, then we can’t do much other than let the user know they can’t install AIR on their machine. If the status is installed, then the user already has AIR installed and we need to check if they have our app installed. If they do not, we install it and let them launch it. If they do have it installed, we let them launch it. Below is the complete code that does all the above:
package
{
import flash.display.MovieClip;
import flash.events.Event;
import flash.display.Loader;
import flash.events.MouseEvent;
import flash.net.URLRequest;
import fl.controls.Button;
public class Badge extends MovieClip
{
private var _air:Object;
private var _myButton:Button;
private const APPID:String = 'YOUAPPID'; // replace with your app id
private const PUBID:String = '123123123123123123123123.1'; // replace with your publisher id
private const APPURL:String = 'http://www.yourdomain.com/YOUAIRAPP.air'; // replace with your app url
private const APPRUNTIME:String = '1.5'; // I'm using 1.5 as a minimum requirement for this example
private const AIRSWF:String = 'http://airdownload.adobe.com/air/browserapi/air.swf'; // adobe's file
public function Badge():void
{
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.INIT, airSwfLoaded);
loader.load(new URLRequest(this.AIRSWF));
this._myButton = new Button();
this.addChild(this._myButton);
}
private function airSwfLoaded(e:Event):void
{
this._air = e.target.content;
switch(this._air.getStatus())
{
case 'available':
// install app
this.installApp();
break;
case 'unavailable':
// AIR not supported on this system
break;
case 'installed':
// check if app is installed
this.checkApp();
break;
}
}
private function checkApp():void
{
this._air.getApplicationVersion(this.APPID, this.PUBID, checkAppCallback);
}
private function checkAppCallback(version:String):void
{
if (version == null) // app is not installed
{
this._myButton.label = "Install";
this._myButton.addEventListener(MouseEvent.CLICK, installApp);
return;
}
this._myButton.label = "Launch";
this._myButton.addEventListener(MouseEvent.CLICK, launchApp);
}
private function installApp(e:Event = null):void
{
this._air.installApplication(this.APPURL, this.APPRUNTIME, new Array());
}
private function launchApp(e:Event):void
{
this._air.launchApplication(this.APPID, this.PUBID, new Array());
}
}
}
I added a button that depending on the status will display the appropriate label and call the corresponding method. If the status is available we know that my app is probably not installed (since AIR is not installed) so I tell my button to call the install app method. The install app method calls the installApplication method from the air.swf file and passes the following 3 paramets: the url of the app you are trying to install, the AIR runtime required for this app, and an array of parameters required for this app if any (make sure to modify those variables to match your needs). When a user clicks on the button, they will be asked to install AIR, install the AIR application, and allowed to start it.
If the status is installed, we call the check app method to see if our app is already installed on the users machine by seeing what version of the app is installed. A null version means that the app is not installed. If installed, our button will launch the application and if not, we call the install app method that I just described above. The launch application method takes in three parameters: the application id, the publisher id and a array of parameters if the application requires it. NOTE: Your AIR application MUST have allowBrowserInvocation set to true in it’s AIR application descriptor xml file for the badge to be able to launch your AIR application.
Finding your application id
Simply go to your AIR application’s folder and open the descriptor xml file. Look for the id node and that’s the id you want to use.
Finding your publisher id
This one was a bit trickier. First you need to install your AIR application on your system. Once installed, go to the folder where your application was installed and inside there will be a META-INF folder. Inside that folder there is a AIR folder with a publisherid file. Open that file and the string inside is your publisher id. For example: c:\program files\myairapp\META-INF\AIR\publisherid
That should do it. At this point you should have a basic working AIR badge. Now you can customize it any ways you like. Hope you all find this helpful! Feel free to leave any questions or comments.
Resources:
http://help.adobe.com/en_US/AIR/1.5/devappsflex/WS5b3ccc516d4fbf351e63e3d118666ade46-7e15.html
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/