Wabysabi

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

NOTE: Updated URL’s to adobe.com

Just thought I would announce the re-release of the Employee Directory AIR application on Labs. I am excited to show off what I think is a very useful corporate directory application that provides a better experience for finding fellow employees and conference rooms.

Technically, the application is probably not the best place for pure beginners to learn Flex and AIR, as it was built using best practices for extensible medium to large applications. That said, it is a great starting point for building your own corporate directory application – its very similar to what we’re using internally at Adobe.

Some of the AIR features demonstrated:

• Offline data storage using SQL API’s
• Resizable, transparent windows with automatic position management
• Data synchronization and automatic application updates

Check out the sample application here.

Just a quick note that I accepted a position with Adobe! I will be working for Jeremy Clark in the Experience Design (XD) group as a ‘Experience Technologist.’ What’s the job? Basically, its a Flash geek’s dream – work with and improve the latest RIA technologies here at Adobe. Its kind of like drinking straight off the RIA fire hose.

In a sense, this is non-news as I have already been working with this XD team in a contract position, but I am psyched to come on full-time and continue working with my uber-talented coworkers. I hope to get more opportunities to share some of my latest work on this site and other venues.

Fluid was featured as an Adobe Creative Success Story Video for the RBKCustom shoe configurator site they built for Reebok. Having worked briefly on this project, I can tell you that it was a very technical project with a huge object model. Support for all of the shoe configurations, combined with inventory, color, size, cross-attribute dependencies, and management of a manafucturing pipeline makes for a challenging project.

The creative side was just as challenged. Trying to design a site that allows for a massive number of configuration options, while keeping it easy to use and interesting, is no easy feat. Props to the old Fluid team !

p.s. Them are my shoes above!

I am pleased to announce that Adobe has released an AIR sample application that I worked on. The application is designed to be a lightweight company directory application that allows searching for employees and navigating through the management hierarchy.

From a technical standpoint, I think the application really shines. Not only does it demonstrate a number of cool AIR features, including the SQL API, but its pretty easy to integrate your own employee image and data sources, so it may actually be useful. Adobe is using an extended version of the app internally.

Feel free to contact me if you are trying to integrate the app and would like some tips.

Just wanted to pass on the news that my latest project, the Twitter Flash Visualizer was put on display at the RailsConf 2007 in Portland. This was a really fun project developed in collaboration with Biz Stone and the rest of the Twitter team. The visualizer was built with configuration in mind, so I think we’ll see it applied to a number of different situations. The tech is still a little green, so if you hit any bugs let me know.

Props to Biz for a great design, and the Twitter team for feeding my latest Internet addiction!

p.s. Click on the app to go fullscreen.

I just read what is possibly the most concise and informative article on Microsoft’s new Silverlight over on Techcrunch. I won’t bother repeating the entire article, but Silverlight’s video abilities, combined with its multiple programming models and browser interaction will definitely make it a new heavyweight in the web plug-in battle. Adobe, get your boxing gloves on!

33vestry.com, a marketing site for a new high-end condo building in Tribeca, NYC. is finally live. Working with Ben Kaubisch over at 6one8.com, we put together a nice site for what looks to be a very nice building.

After all of the hardcore Flex work, it is nice to work on a simple, old-school Flash project once in a while.

Not super recent news, but Trevor McCauley over at senocular.com posted a really good Actionscript 3 Tips of the Day entry over on the Kirupa forums. In particular, there are some good new tips on ‘Class member enumeration’ and also the undocumented ‘addFrameScript’ property. Enjoy.

Are you a Flex coder? Ever feel constrained by the default ButtonSkin provided with the Flex application? I have some good news for you. I have been working on an ‘enhanced’ version of the skin that allows for more fine-grained control over button display such as explicit, multiple gradient and border colors for each button state, border thickness, as well as individual corner radii.

Here is an example demonstrating a few of the newly supported style values.

.customButtonStyle {
    cornerRadii: 16, 0, 16, 0;
    borderColors: #006699, #006699;
    borderThickness: 3;
    fillColors: #FCFFF4, #006699, #FCFFF4,
    fillAlphas: 0.5, 0.5, 0.5;
    fillColorRatios: 0, 128, 255;
}

Check out the style explorer that I built for the skin, or go to Flexlib to download the source.