Embedding AIR Badges on WordPress via Kimili Plugin

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:

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!

Example AIR App – Dynamically Resizing Windows based on Content Area

Resizable AIR Chrome Screenshot

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

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

Get Adobe Flash player

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.