Monday, April 12, 2010

Creating an AIR Installer badge for Flex Devs

In building a recent app, the customer asked me to also make a flash badge for their installer.  This way they could deploy the app installer, yet control the download of the AIR app.  For me, the badge allows two things, control of the app's image, and some nice SEO.  If you can get other sites to deploy your badge (which is a simple group of files), then you can get some nice cross linkage SEO (not to mention and SEO linking/MetaData you might have in the SWF that runs the installer), and also some good data.

So to create a Badge, use Adobe's sample badge which I found here (on my Mac):

/Applications/Adobe Flex Builder 3 Plug-in/sdks/3.6.0/samples.

After you copy it into your project's folder (or wherever you'll most effectively work with it), you'll need to open it in Flash to manipulate some of it.  Now, I am not a Flash IDE user.  It takes me quite some time to figure out what the heck timelines are, and what layers are doing where, but in all honesty, if I could just figure this out, I'm sure I could do some killer stuff in Flash that would help out my enterprise apps.  Anyways, inside the group of items are .js, .html, .as, .swf, .jpg, and .fla.  The .fla allows me some room for designing, creating, and manipulating my text area.  Following Lee Brimelow's ( example of making a tooltip in Flash (something I enjoy taking for granted in Flex), I built a hover over tooltip in my installer badge, as well as added some SEO in the metadata of the swf, and inside the jsp/html page.

It took me a few minutes to realize that the badge itself was generated from Flash, so once I got inside of Flash, and started tooling around, I found out I could easily automate, or graphically change around, things on my installer badge.  And by using my own customized image, I could adjust inside the .fla what the image was to be shown, and could now use an animated .gif, or a .png, or (using the awesomeness of alchemy and ZaalLabs) 40+ image types.

Also, because the fla incorporates the as file, I adjusted a few settings there for some more seo, and used that to compile and push out my swf.  bada-boom, bedaubing, I now have a kick-a$$ installer badge, with a custom logo, and I can mess around and adjust anything about the badge I want (including animation, or generative art, or what not).  And the installer file is tiny (in comparison to a flex app, this thing was only about 6k when I was done).  6 friggin K.  That's ridiculously small…I need to learn to make Flex apps that small.

Anyways, please enjoy hopefully these step by steps will help you make a better AIR app installer badge.

No comments:

Post a Comment