by Lee Brimelow

Lee Brimelow

Created

9 June 2008

Requirements

Prerequisite knowledge

Working knowledge of Photoshop and Flash.

User level

Intermediate

Additional Requirements

Adobe AIR update for Flash CS3 Professional

For designers, one of the most exciting capabilities provided by Adobe AIR is the ability to completely control the look and feel of an application's window chrome. This allows you to extend your branding to every part of the application. Minimal work is needed to make this happen, thanks to the tight integration between Adobe design and development tools. This article explains the various types of chrome available and shows the basics of designing an application interface in Adobe Photoshop CS3, importing it into Adobe Flash CS3, and developing it as an AIR application.

Choosing the right chrome

Because it is easy to implement a fully customized application chrome using AIR, designers and developers tend to do it whenever and wherever they can. Prior to my working at Adobe, I did Flash and AIR development at frog design, a design consultancy based in San Francisco. While I was there it seemed as though all our clients wanted custom chrome in their applications, with window borders and controls that matched their company colors or logo. Although this is not necessarily a bad thing, it is important to use custom chrome wisely and only where appropriate. In the planning stages of a project, it is a good idea to consider whether custom chrome is really needed in the application to avoid applying it gratuitously.

Benefits of custom chrome

One of the biggest benefits to using custom chrome is that you can truly extend your branding to every part of the application. The Nickelodeon Jigsaw Puzzle Game is an excellent example of an appropriate use for custom chrome (see Figure 1).

When kids visit the Nickelodeon website, they can find puzzle pieces and drag them to this AIR application. The subject of the game is Spongebob Squarepants and the application's chrome looks like something that you might see in his underwater world. If the application had used the default system chrome it would have been much less appealing to kids—in fact, it would have been quite boring.

Another benefit of using custom chrome in your applications is that they will look the same regardless of what operating system they are running on. An application with the default system chrome can look very different when it runs on Windows, Mac OS X, and Linux. By getting rid of the default look, you can make your application consistent regardless of the platform on which it is used.

Disadvantages of custom chrome

From a usability perspective, using custom chrome is not always the best idea. Users are familiar with the default chrome provided by their operating system. Completely removing it can confuse users, especially when the window controls are given a new appearance and a new position.

Another potential disadvantage of using custom chrome is the slight performance hit that your application will experience. If your application also includes transparency, then you can expect to see a performance drop of about 10%. This is particularly important for applications that are already taxing the user's processor and RAM.

Designing chrome in Adobe Photoshop CS3

Once you've decided that custom chrome is right for your application, you'll likely want to design the application in Photoshop before you implement it as an AIR application using Flash CS3. It is entirely possible to design custom application chrome using Flash CS3, thus eliminating the need for Photoshop. In my experience, however, you have many more options available to you when you start your design using the advanced toolset that Photoshop offers. Also, you can use Photoshop to help improve the performance of your application by baking effects such as drop shadows and glows into the chrome instead of applying them as filters in Flash.

To get started, download and unzip the sample files that accompany this tutorial and open the file customChrome.psd in Photoshop CS3 (see Figure 2). This very simple example shows a common way of structuring a PSD file for import into Flash. Because Photoshop and Flash are tightly integrated, all of the layer names will be carried forward into Flash. Although it is always good practice to name your layers in Photoshop, it is particularly beneficial when you are designing content destined for Flash.

The example application includes only minimal windowing functionality, as it will not be resizable by the user. This type of design works well for widget-type applications. There is a minimize button and a close button that terminates the application. Although you could use custom iconography for these controls, you risk confusing users that fail to understand the icons.

The background of the application consists of a rounded rectangle. I have used layer styles to add a stroke, drop shadow, and inner glow to make it look more like an application. You can, of course, create applications in any shape; you are not limited to traditional ideas of what applications should look like.

Implementing custom chrome in Adobe Flash CS3

Before you start to implement your custom chrome in Flash CS3, make sure that you have installed the free Adobe AIR update for Flash CS3 Professional.

  1. Open Flash CS3 and from the Welcome screen choose Flash File (Adobe AIR) to create a new AIR project. This creates a project with default settings for AIR applications.
  2. Save the newly created file somewhere on your hard drive as customChrome.fla.
  3. Rename the first layer in the Timeline to actions and lock it. This layer will hold all of the ActionScript code needed in the project.
  4. Now you are ready to import the Photoshop file containing the chrome artwork. Choose File > Import > Import to Stage. In the file import dialog box, navigate to and select the customChrome.psd file that you downloaded earlier, and click Import.
  5. Use the PSD Import dialog box to specify how you want Flash to import each layer in the Photoshop file. Select the background layer and then select Create Movie Clip For This Layer. Give it an instance name of back (see Figure 3). Now select the close layer and follow the same steps except give it an instance name of closeButton. Do the same for the minimize layer, giving it an instance name of minimizeButton. Also, select Set Stage Size To Same Size As Photoshop Canvas.
  1. Click OK to import the Photoshop file into your Flash document.
  2. Hook up the various components using ActionScript 3. Select the first keyframe in the actions layer and open the Actions panel. The first window feature that you will implement is the ability to move the application around by clicking and dragging on the background. Paste the following code into the Actions panel:
back.addEventListener(MouseEvent.MOUSE_DOWN, back_CLICK); function back_CLICK(e:MouseEvent):void { stage.nativeWindow.startMove(); }

This code listens for the mouse down event on the back movie clip and responds to it with a function named back_CLICK. When the event fires, back_CLICK calls the startMove method of the main native window to start the move behavior.

  1. The code below uses a similar approach to implement the minimize functionality. Copy the following code into the Actions panel below the code from Step 6:
minimize.addEventListener(MouseEvent.CLICK, minimize_CLICK); function minimize_CLICK(e:MouseEvent):void { stage.nativeWindow.minimize(); }

This code listens for the click event on the minimize button and then calls the minimize method on the main native window.

  1. The final step is to implement the code needed for the close button by applying the same approach used for the other buttons. Paste the code shown below into the Actions panel:
closeButton.addEventListener(MouseEvent.CLICK,closeButton_CLICK); function closeButton_CLICK(e:MouseEvent):void { NativeApplication.nativeApplication.exit(); }

Figure 4 shows the final custom chrome application.

Where to go from here

You now have a fully functional, custom chrome AIR application. This article presented one potential workflow for designing the chrome of an application. You can continue to take advantage of the integration between Adobe design and developer tools to further customize the look and feel of this application, or start customizing the chrome on your own applications.