Wabysabi

In my last post, I wanted to distribute a sample AIR application via the user-friendly badge installation process. After taking a look at the available options, I came across an excellent Flash embedding solution for Wordpress called Kimili. Kimili is a Wordpress friendly wrapper on top of Geoff Stearns excellent SWFObject Javascript library.

I thought I would share my code snippet for my previous post in order to help the next person who was trying to get AIR badges in Wordpress going:

[kml_flashembed movie="/examples/airchrome/badge.swf" height="140" width="217" fid="badge" bgcolor="#181818" fvars="appname=ResizableAIRChromeExample ; appurl=http://www.wabysabi.com...ChromeExample.air ; airversion=1.0.M6 ; messagecolor=999999 ; imageurl=http://www.wabysabi.com...airchrome/badge.png" fversion="9.0.63" allowscriptaccess="always" scale="noscale" wmode="transparent" / ]

Two side-notes:

• The Kimili plugin delimits flashvars with semicolons bracketed by spaces (e.g. ” ; “). I’m not sure why it requires this odd syntax, but things won’t work if you eliminate the spaces.

• I added a space betwen the closing bracket of the tag so that Wordpress wouldn’t interpret it. The correct syntax should be “/]”.

Thanks to Michael Bester for the great library!

** Updated for AIR 1.0 02/25/2008 **

The AIR windowing API offers some exciting new possibilities, and challenges, for Flash developers. With the Employee Directory Sample Application, we showcased a well-designed, real-world application that dynamically resizes itself to a changing content area. This is a powerful technique that simply isn’t possible within the confines of a browser window.

I thought it would be useful to distill this capability from the more complex directory application and provide a simple ‘kick-start’ application that demonstrates:

• Leveraging transparent windows to create high-quality custom window chrome with drop-shadows.

• Using the Flex Resize effect and event listeners to dynamically size a NativeWindow to the size of a changing content area

• Simple PNG-centric CSS styling example with advanced text anti-aliasing applied.

You may install via the AIR badge below, or if you have less than 9,0,63, you will have to manually install the runtime and AIR file:

Source is available by right-clicking and selecting ‘view-source’ in the application.

One other factor with resizable applications not covered in this sample app is automatically keeping the application onscreen as the application resizes. This is a challenging problem that is addressed in the directory application (via a fairly convoluted solution), but is not covered here. Something I definitely hope to address more clearly in the future. Definitely check out the Employee Directory if you haven’t already.