Changing the appearance of components

Flash MX introduced us to the world of components. It shipped with a number of UI components that were similar to the form controls we use in HTML pages – checkboxes, radio buttons, drop down boxes etc.

The release of Flash MX 2004 changed the way components are structured and it uses what we call Version 2 architecture. Many of the previous UI components have been upgraded for the new architecture. If you have the professional version of Flash MX 2004, you have extra UI components like the DataGrid and Tree as well as data components. It’s important that you don’t mix your version 1 and components and that you set your publish settings correctly. You can find out more about component versions and the Flash player at

http://www.macromedia.com/devnet/mx/flash/articles/v2component_migration02.html

When you use the Flash MX 2004 components, they'll appear in the standard grey colour with a green highlight. This component design is called the Halo theme. A common task for designers and developers is to change the default appearance to something a bit more interesting.

In this article, we'll look at the different ways that you can change the visual appearance of Flash MX 2004 components. We'll look at:

• Setting styles with ActionScript – both globally and on a single component
• Changing skins for all components
• Changing skins for a single component

The tutorial assumes that you are using Flash MX 2004 Professional and that know how to add ActionScript to a movie.  It also assumes that you are familiar with using and configuring components with the Component Inspector.

Before you start, make sure you have downloaded the 7.2 patch for Flash (code named ellipsis) as it contains updated help documentation for component styling.

You can download the source files for the tutorial from the blue Properties box that contains the article PDF. There's a heading titled Code Download and you can click the Details link next to it to get the zip file. The download includes the starter file components.fla as well as the completed file components_completed.fla.