Every time I’ve seen one of those “branded” AIR applications with the custom window chrome, I’ve thought to myself “That would be kind of cool,” but I didn’t get around to learning how until now.  It’s pretty fun, and is very gratifying for those of you who have a little creative side that likes to come out every now and then.

I start by creating the background image, or custom chrome for my application, along with any other graphical components I’ll need (a close/minimize button, for example). Then you create an AIR application (this assumes Flex Builder).  Normally this will give you a default MXML file with a WindowedApplication tag in it. You need to change it to Application (just like for a web project).

Next you should modify the config file, usually AppName-app.xml Specifically you will need to change the following tags: systemChrome, transparent, visible and give them settings as follows (don’t forget to uncomment them… FlexBuilder doesn’t highlight this file properly for me so I always forget these config settings are commented out by default).

<systemChrome>none</systemChrome>
<transparent>true</transparent>
<visible>true</visible>

If you’re not going to allow the user to resize the application, it is a good idea to set the height and the width to whatever size you need. The systemChrome setting tells AIR you’re going to be supplying the chrome (if you don’t, then Adobe’s generic custom chrome will be used if you have it set to “none”). The transparent setting will allow you to click through parts of your application that are not visible. And the visible setting… well if you don’t know what that means, this tutorial probably isn’t for you.

Next you will need a style for the Application to this effect:

Application {
background-color: "";
background-image: "";
padding: 0px;
}

This clears everything out, so to speak. Then you add your chrome image to the Application tag, and you’re pretty much finished. The problem you will have if you run the application at this point is that you will not be able to move it, close it, etc. There are a few event handlers you will need to add to give the app this functionality.

Adding mouseDown="stage.nativeWindow.startMove() to your background image tag will allow you to grip the application by pressing the mouse anywhere on the image, and drag it around. A few of the more useful ones are:

mouseDown="stage.nativeWindow.startMove()"
---- allows you to move the app
For your window icons:
click="stage.nativeWindow.minimize()"
----allows you to minimize your app
click="stage.nativeWindow.maximize()"
----allows you to maximize the app (if it makes sense to do so)
click="stage.nativeWindow.close()"
----allows you to close the app

There are also ways to resize, but I haven’t gotten into that as much yet. At this point you’re finished. Some things to note: Your application will take up as much room as you give it, though it may not all be visible. This is nice if you want to have slide-out menus and such. Putting the close, etc. icons in weird places may confuse your users, as will changing their basic appearance (square, bar, x).

It’s pretty addictive, but it allows you to create applications that are memorable, I don’t think I’ll be able to go back to normal system chrome for a while.