How to: Creating an AIR Express Install Badge
Jul 12th, 2007 by admin
Creating an AIR express install badge is relatively simple. Adobe has done all the heavy lifting for us, our part consists of a little prep work and configuring some Flashvars. It is our part that I want to focus on in this tutorial.
What you will need to create a badge:
- AIR SDK (Freely available from Adobe Labs )
- Image editing software
- Flash Authoring (only if you want to modify the default badge)
- Your favorite text editor or IDE
Put simply, the AIR install badge is a SWF that detects the presence of the AIR runtime, if the runtime is not present it downloads and installs it before it downloads and installs your AIR application. The whole experience is remarkably similar to the Flash Express Install so most users should feel comfortable with the process. If (like me) you’re curious as to how the badge functions technically you can view the ActionScript 2.0 source and Badge FLA which are included in the SRC directory of the AIR SDK
Note: At the time of writing the AIR SDK contained an outdated version of the badge. The original badge had some debug code in it and the looks were a little underwhelming (hey it’s beta!). Fortunately Adobe has already updated the badge with amongst other things, a much improved look, just like the AIR samples page. The updated badge has yet to make it into the SDK but you can download it from Adobe. I’ll be using the updated badge for this tutorial.
1. Create your background image for the badge
Create a 215px x 100px image to be used as the background for the badge. The default size for the badge is 217px x 180px, if you deviate from this you will need to adjust your image size accordingly.
2. Configure the badge SWF
The badge accepts 5 parameters in the form of Flashvars:
- appname: The name of your AIR application.
- appurl: The URL to your AIR application. (http://www.mydomain.com/myAirApp.air)
- airversion: Currently “1.0.M4″
- buttoncolor: Hex value of color for the Install button (default is gray)
- messgagecolor: Hex value of the color for the text message(s) below the badge (default is black)
- imageurl: URL of the background image(step 1) for the badgeThe badge code will end-up looking something like this:
Of course most all of you are going to want to use some type of Flash detection script. Adobe has provided one in the samples directory of the badge SDK, but I prefer the most excellent SWFObject.That’s basically it. As you can see the process for creating a badge for your AIR application is painless and unless you want to modify the stock SWF you don’t need Flash authoring. If you’re creating an AIR application for distribution I highly recommend taking time to create a badge, believe me your users will thank you.