Are you sick of trying to design around the existing Adobe AIR badge templates. In most cases they are way too large or have a look and feel that does not really match your design. A few companies have their own custom solutions with AIR badges that are nicely integrated into their sites. I wanted that for the updated ChessJam site, but instead of building one badge for each size, I wanted a completely flexible (one size fits all) solution from one swf.
The HDBadge Features:
1. One Size Fits All – The size of the badge is determined by the size you use in the object/embed code of the swf. The swf does not stretch, so you could have a badge that is 40×20 and 800×600 from the same swf, depending on your needs.
2. Smaller Footprint – One of the reasons the current badges are so large is they display AIR/App install error messages. This version hides the button after clicking revealing a console type area behind it. The error text conforms to the size of the swf.
Note: The button should be large enough to accommodate the longest message at 10pt which is “In order to run this application, this installer will also set up Adobe® AIR™.”
Note: If the user does not have AIR Installed, the badge has to be larger than 214 x 137 to accommodate the AIR installer box. See below for more details
3. Complete Design Control – You get to design the main button which is just a png or jpg, the background of the “console” after the button animates up and the color of the text in the console. All this plus the size are configured in the html object/embed code using flashVars.
4. Completely Non-Flash/Flex solution – Just make your images, update the flashVars and params of the object/embed code.
The HDBadge is a modification to AIRBadge by David Tucker
Sample Code using swfObject:
Note: If you already have ChessJam installed or do not wish to install ChessJam at this time, just click CANCEL on the install dialog that pops up.
Note: If you do not have AIR installed, you will be directed to the ChessJam install page of the ChessJam website.
Download Files Here Complete Source Included, if you make modifications, please share them with us.
From Adobe AIR Documentation on Installing and running AIR applications from a webpage:
Note: For the HTML embed tag that loads the badge.swf file, do not set the wmode attribute; leave it set to the default setting (“window”). Other wmode settings will prevent installation on some systems. Also, using other wmode settings produces an error: “Error #2044: Unhandled ErrorEvent:. text=Error #2074: The stage is too small to fit the download ui.”
The wmode has been changed to “window” in all source files. Bummer :(
It was mentioned in the comments that having the install badge too small causes an AIR install error for users who do not have AIR installed. From Nic: “The flash movie needs to be big enough to display the flash dialog for installing air. i.e 215×180 Otherwise it will fail.” Bummer #2.
The ChessJam homepage is just too busy to add large install badges, the size requirement of 214 x 137 is unacceptable. For our use we decided to keep the install badges around the site small, for those instances where users do not have Adobe® AIR™ installed, *we redirect them to another page to handle the AIR and application install.
We also created a new AIRInstaller swf that does the exact same thing as the HDBadge in a little different way. The new AIRInstaller is now included with the source files.
Note: The AIRInstaller requires a click to start the install, I tried to run the installer on load, but no dice. This is probably a good thing.
This solution worked for us for the following reasons:
1. The badges just have to be small.
2. Users are accustom to clicking a link to an install or download page from a button similar to our install badges.
Please post any solutions you come up with.
| 11 Comments » | facebook: