Create Adobe AIR Badges At Any Size

– taterboy | December 16th, 2009

Filed under: ActionScript 3, Design, Flash, Flex, Free Components/Classes

UPDATE: 2/17/10

We added a redirect option to the HDBadge that allows AIR application install badges that are too small (smaller than 214×137) to redirect to another page or call a javascript function. The size 214×137 was as small as I could shrink the badge before the AIR install dialog would not show up (tested on a Mac w/Safari). See updates below.

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
http://www.adobe.com/devnet/air/articles/air_badge_install.html

Sample Code using swfObject:

?View Code JAVASCRIPT
<script type="text/javascript">
  function errorAlert(){
	alert("errorCalled");	
  }
 
   var flashvars = {};
   //original variables
   flashvars.appname = "Name of the Application";
   flashvars.appurl = "url to application";
   flashvars.airversion = "AIR version number";
   flashvars.imgURL = "url to button png or jpg";
   //modified HDBadge variables
   flashvars.textColor = "color of status text (ffffff), just hex value without # or 0x";
   flashvars.bkgURL = "url to the background png or jpg (console)"
   //new error handlers for install errors
   flashvars.onError = "errorAlert"; // calls javascript function if badge is too small
   flashvars.onErrorURL = "AIRInstall.html"; // redirects to an alternate AIR installer page
   flashvars.onErrorTarget = //flashvars.onErrorTarget = "_blank"; //default is _self,
 
   var params = {};
   params.menu = "false";
   params.quality = "high";
   params.scale = "noScale"; //*** makes badge width and height flexible
   params.salign = "TL"; //*** keeps top corner pinned
   params.wmode = "window";
   params.bgcolor = "#ffffff";
   params.allowfullscreen = "false";
   params.allowscriptaccess = "sameDomain";
   var attributes = {};
   attributes.id = "HDBadge";
   attributes.name = "HDBadge";
   attributes.align = "middle";
 
   swfobject.embedSWF("HDBadge.swf", "HDBadgeDiv", "any width", "any height", "9,0,0", "expressInstall.swf", flashvars, params, attributes);
		</script>


Sample Of ChessJam Badge

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.

UPDATE:

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 :(

UPDATE: 2/6/10

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.

UPDATE: 2/17/10 – version 1.1

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.

*There are 3 new flashVars variables added to HDBadge to allow badges that are too small (to install AIR) to redirect to a new page or call a javascript function. On our alternate install page we have a larger version of the install badge.

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.
3. Many people have popup blockers turned on, so opening a popup window is not reliable. A light box containing a larger install badge may be preferred over redirecting to a new install page. A javascript call back function is now available to make this or virtually any other solution possible.

Please post any solutions you come up with.

Technorati Tags: , , , , , ,

| 11 Comments » | facebook:

11 Comments »

  1. Cool, just what I want. However, there seems to be a glitch if the user doesn’t have AIR installed. When the AIR install dialog is supposed to pop up I get:

    Error #2044: Unhandled ErrorEvent:. text=Error #2074: The stage is too small to fit the download ui.
    at AIR/installApplication()
    at HDAIRBadge/onButtonClicked()
    at HDBadge_fla::MainTimeline/clickHandler()

    Maybe have to do some fancy JS to change the size of the swf…
    Thanks

    Comment by Rama — January 3, 2010 @ 8:17 pm

  2. Thanks for the heads-up and the error message, I will take a look.

    Comment by taterboy — January 3, 2010 @ 10:13 pm

  3. wmode seems to be the issue.

    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 :(

    Comment by taterboy — January 8, 2010 @ 10:04 am

  4. This badge still doesn’t install Air Runtime if needed. But installing Air App works just fine. If there are any workaround for this problem please inform me.

    Comment by oswa — January 30, 2010 @ 11:09 pm

  5. By the way I’m testing this badge on MacOS X with both safari and chrome. Also in WindowsXP with IE7 using parallels. No chance so far.

    Comment by oswa — January 30, 2010 @ 11:12 pm

  6. Yes, oswa is right.
    The flash movie needs to be big enough to display the flash dialog for installing air. i.e 215×180 Otherwise it will fail.

    Comment by Nic — February 5, 2010 @ 3:42 pm

  7. Thanks, that’s good to know.

    Comment by taterboy — February 6, 2010 @ 8:50 am

  8. [...] Create Adobe AIR Badges At Any Size | Taterboy.com: Graphics … [...]

    Pingback by Logitech S120 2.0 Multimedia Speakers (Black) — February 9, 2010 @ 9:41 pm

  9. Is not working when i try with user NOT admin in PC…. any suggestion???

    Comment by Sebastian Perez Lacon — February 23, 2010 @ 2:26 pm

  10. You may have to come up with a good excuse to get IT to install it. Look through the Adobe AIR Marketplace and find an application that is a “must have” to do your job. Good Luck.

    From Adobe:
    Administrative access is always required for installation of Adobe AIR. In some situations you can install an Adobe AIR application if it is installed in a location that is writeable by the current user account. If you do not have write permissions, contact your systems administrator.

    Comment by taterboy — February 23, 2010 @ 3:02 pm

  11. A better custom air install badge plus tracking downloads with google analytics
    http://www.getwebreader.com/2011/02/a-better-custom-air-install-badge-google-analytics/

    Comment by Jo — February 15, 2011 @ 5:25 am

RSS feed for comments on this post. TrackBack URL

Leave a comment

*