Flash Article

Skinning the Flash CS3 components

What would we do without components in Flash? Ever since the release of Flash 6, developers have taken advantage of the user interface components to create functionality and add navigation to Flash projects. Even in Flash 5 we were getting used to the concept of using drag-and-drop reusable widgets with the introduction of SmartClips.

The days of coding your own scrollbars, list controls, and combo boxes are long past. Ss each new version of Flash is released, the components become more powerful and extensible.

In Flash CS3 Professional, many of the feature requests and issues with the v2 components included in Flash MX 2004 (and left largely unchanged in Flash 8) have been addressed. As a result, the file size and performance of projects using components has improved. Even more significantly, you've gained the ability to style and skin components to update your graphics to fit your custom designs.

This article covers several different strategies for skinning components using Flash CS3 Professional. I discuss manually updating the graphic elements as well as updating them programmatically. After following along with this material and examining the provided sample files, you'll have everything you need to start customizing the look and feel of the built-in components for your next project.

Before you get started, it is important to know is that there is a big difference between styling components and skinning them. Styles allow you to change some properties of a component instance or update some properties of all the components in your project. When using styles, you can update a component's font properties, colors, and padding and make other, similar adjustments.

When you update the skins of a component, you are editing the actual graphic assets—the individual elements that are used to display the component.

If you've ever styled components in a previous version of Flash, you should note that the Flash CS3 components no longer support CSS-based styles. This change was implemented in order to streamline the process for updating the components and also to reduce the overall file size of projects using components.

I focus here on skinning components, but if you'd like to learn more about the styling features available in Flash CS3 components, as well as get an overview of the process of working with instance, class and global styles, see the section of the Flash LiveDocs on StyleManager.

Requirements

To complete this tutorial, you will need to install the following software and files:

Flash CS3 Professional

• Try
• Buy

Sample files:

• skinning_flash_cs3.zip (ZIP, 1.17 MB)

Prerequisite knowledge

This article assumes you have some prior experience using the Flash CS3 Professional authoring environment and working with components in general.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

Page 1 of 4

Next Page

About the author