This article explains how to completely change the graphical appearance of (i.e., "to skin") the V2 ProgressBar component. Before we begin, a warning: the techniques described in this article apply to the ProgressBar and to many other V2 components, but not to all. Some compo-nents require advanced skinning techniques not discussed in this article. For example, the Button component's skin, perhaps surprisingly, is primarily code-based. Skinning a Button component requires a thorough understanding of the Button skin code. Likewise, the specific steps required to skin components made up of multiple subcomponents, such as the DataGrid or the List, are not covered in this article. This article will help you get started with skinning and will give you the skills to skin many V2 components, but for some components you should expect to do further research (see Further Study at the end of this article for suggested resources).

The Basics: Styles Versus Skins
A component's appearance can be changed in two ways: 1) by setting the component's styles, 2) by skinning the component. Setting a component's styles means using code to change the component's color and font without changing its graphics. For example, the default appearance of a ProgressBar component is shown at Figure 1.

And Figure 2 shows what the ProgressBar component looks like with the "themeColor", "fontFamily" and "fontSize" styles set.

Here's the code used to style the ProgressBar shown in Figure 2:

pBar.setStyle("themeColor", 0xFF0000);
pBar.setStyle("fontFamily", "Times New Roman");
pBar.setStyle("fontSize", 16);

In Figure 2, the ProgressBar's color is now red instead of green and its text is set in Times New Roman instead of Verdana, but the basic graphical shapes of the ProgressBar are the same as they were in Figure 1. By setting a component's styles, we can gain some control over the appearance of the component, but when we need to change more than just colors and fonts we must skin the component. Skinning a component means replacing the component's graphics entirely, producing a completely new appearance for the component. For example, if we were creating an adventure game we might want to skin our game's ProgressBar to make it look like Figure 3.

Later we'll examine how the above "adventure game" ProgressBar was made. But before we do, it's worth pointing out that not everything about the appearance of a component can be changed, even with skins. The internal display system of each component determines what aspects of the component's appearance can be changed. For example, the variable-width "load bar" section of the ProgressBar component shown in Figures 1, 2, and 3 is produced by stretching a thin graphic between the left and right side of the component. Because the graphic is stretched, it must be a simple, abstract shape not, say, a repeating image such as the apple shown in Figure 4.

Filling a region with a repeated graphic like the apple in Figure 4 is known as "tiling." Tiled skins are not natively supported by the V2 ProgressBar. Hence, modifying a ProgressBar to look like the one shown in Figure 4 would require custom code and in-depth knowledge of the ProgressBar's own skinning implementation.

What, Exactly, Is a "Skin"?
In interface-programming terms, the "skin" of a user interface is its graphical appearance, which is typically separated from code so that the interface can be changed visually without affecting the underlying logic.

Specifically, for a Flash V2 component, a "skin" is a collection of movie clips that contain the component's graphics. Each movie clip represents either an entire state of the component (e.g., enabled, disabled, pressed, etc) or a subsection of a particular state or states. For example, a skin movie clip might contain an entire disabled button face or just the arrow icon for a scrollbar. The skin is broken into multiple sections so that it can be assembled and resized at runtime in response to either user input or application logic. Each movie clip in a skin has a specific Linkage Identifier that is used by the component to attach the movie clip to the Flash movie stage. Once on stage, the movie clips are positioned and scaled to produce the graphical appearance of the component.

Figure 5 shows the skin movie clips for the ProgressBar component. The Linkage Identifier for each movie clip is shown in black text.

Among the various skin movie clips shown in Figure 5, those whose IDs begin with "ProgTrack" are the background of the ProgressBar while those whose IDs begin with "ProgBar" are the foreground of the ProgressBar ­ the part that stretches horizontally to indicate load progress. Both the "track" (background) and the "bar" (foreground) are made up of three separate sections: a left and right edge ­ the "caps" at the ends of the bar ­ and a middle section that stretches between the caps. When the ProgressBar is resized, the caps remain the same size and are placed at either end of the bar, while the middle section is scaled horizontally to fill the space between the caps. Finally, the ProgIndBar is a special graphic that animates between the left and right caps if the duration of the load operation being represented is unknown. The ProgIndBar movie clip is only used when the ProgressBar instance's indeterminate property is set to true.

Changing the Skin of a Single Instance
As we've just seen, a component's skin is made up of graphics stored in movie clips (well...that's generally true, but some component skins are made of movie clips that link to ActionScript 2.0 classes instead of containing graphics). To change a skin, then, we need to tell the component to render itself using our own, customized movie clips instead of its default set. There are two ways to tell the component to use our movie clips instead of its own:

• change which Linkage Identifiers the component uses when attaching its skin movie clips
• set the Linkage Identifiers for our custom movie clips to match the Linkage Identifiers used by the component (in other words, override the component's default skin movie clips)

The first option requires more work, but lets us skin a component on a per-instance basis. The second option is easier to implement, but forces every instance of the component being skinned to use the custom skin. Let's take a look at both options, starting with changing the Linkage Identifiers a component uses when attaching its skin movie clips. The V2 components store the Linkage Identifiers for their skin movie clips in so-called "skin properties". For example, the Linkage Identifiers for the ProgressBar component (as shown in Figure 5) are stored in the following properties: ProgressBar.progTrackLeftName, ProgressBar.progTrackMiddleName, ProgressBar.progTrackRightName, ProgressBar.progBarLeftName, ProgressBar.progBarMiddleName, ProgressBar.progBarRightName, ProgressBar.progBarIndName. We can change which movie clips a component instance uses for its skins by setting its skin properties. Let's see how this works by making a progress bar with a black square for its track's left cap instead of the default rounded grey left cap. Admittedly, this is a boring skin but it demonstrates the general principle. We'll make a more interesting skin later. Follow these steps:

1. Create a new Flash document (.fla file).
2. On Frame 1, Layer 1 drag a ProgressBar component to the stage.
3. Create a new movie clip symbol named Square.
4. In the Square movie clip, draw a small square shape 4 pixels wide and 4 pixels high. Position the shape with its top left corner at the Square symbol's registration point as shown (greatly magnified) in Figure 6.
5. Select the Square movie clip symbol in the Library
6. On the Library panel's pop-up options menu (top-right), select Linkage...
7. On the Linkage Properties dialog, for Identifier, enter "SquareSymbol".
8. Click OK to accept the Linkage Properties settings.
9. With the ProgressBar component instance selected on stage, add the following code to the Actions panel:

   
   onClipEvent (initialize) {
   this.progTrackLeftName = "SquareSymbol"; }
   

10. Export the movie using Control > Test Movie. The ProgressBar component should look like the one in Figure 7 (again greatly magnified to show the new skin). Note the black square on the left side of the bar.

The preceding steps describe how to modify the skin of a component instance placed on stage manually in the Flash MX 2004 authoring tool. We changed the skin of the component by setting the progTrackLeftName property within the component's "initialize" event. But if we had created the instance with code at runtime, we would not be able to use onClipEvent() as we did in Step 9. Instead, we would use the createClassObject() method's initObj parameter to set the skin property on the new component instance. The following code does just that; it creates a ProgressBar instance at runtime with createClassObject() and uses the initObj parameter to set the progTrackLeftName property to "SquareSymbol". The result is exactly the same as that shown in Figure 7.

import mx.controls.ProgressBar;
this.createClassObject(ProgressBar, "pBar", 0,
{progTrackLeftName:"SquareSymbol"});

Where to Find a Component's Skin Properties
As we've just seen, in order to skin a component we can assign new movie clip Linkage Identifiers to its skin properties. But how do determine which skin properties a component uses? There are two options.

First, we can look in the Flash MX 2004 Help files. The so-called "ellipsis" release of the Flash authoring tool (Version 7.2) contains updated Help files that include the skin properties for all V2 components. For each component, the skin properties are listed in the following location:

• Using Components > Components Dictionary > [component name] component > Customizing the [component name] component > Using skins with the [component name] component

  For example, the skin properties for the ProgressBar component are listed here:

• Using Components > Components Dictionary > ProgressBar component > Customizing the ProgressBar component > Using skins with the ProgressBar component

  Alternatively, we can find the skin properties for a component by looking at the component's class source code. The component classes are located in the Flash MX 2004 application folder, in the following directory:

• Windows: \Program Files\Macromedia\Flash MX 2004\[LANGUAGE_CODE]\First Run\Classes\mx\controls
• Macintosh: HD/Applications/Macromedia Flash MX 2004/FirstRun/Classes/mx/controls

  For example on an English language Windows system, the ProgressBar component's class is located here:

• \Program Files\Macromedia\Flash MX 2004\en\FirstRun\Classes\mx\controls\ProgressBar.as

Within that file we can find the following skin property definitions:

var progTrackLeftName:String = "ProgTrackLeft";
var progTrackMiddleName:String = "ProgTrackMiddle";
var progTrackRightName:String = "ProgTrackRight";
var progBarLeftName:String = "ProgBarLeft";
var progBarMiddleName:String = "ProgBarMiddle";
var progBarRightName:String = "ProgBarRight";
var progIndBarName:String = "ProgIndBar";

However, locating the skin properties in the source code for a component's class can be difficult because the code is often not thoroughly commented and the skin property names do not follow a single naming convention. Some skin property names end with the word "Skin", as in "Button.trueUpSkin"; some skin property names end with the word "Icon", as in "RadioButton.falseOverIcon", while still others follow no convention at all, as in "NumericStepper.upArrowDisabled". Hence, the easiest way to determine the skin properties for a class is through the Flash MX 2004 Version 7.2 updated documentation.

No matter how you find a component's skin properties, once you know them you can skin the component by setting those properties to the Linkage Identifiers of your own custom skin movie clips.

Creating Skins That Can Be Colored with Styles
In our earlier SquareSymbol example, we replaced a ProgressBar instance's left track cap with a black square. In the example, we permanently set the color of the square to black ­ any attempt to change the color of the left track cap to red using styles would now fail. However, with a single line of code, we can make a skin's color alterable with styles. Using the same document we created earlier, follow these steps to see how it works:

1. Select the ProgressBar instance on stage.
2. In the Properties panel, set the ProgressBar's instance name to "pBar".
3. Edit the Square movie clip symbol.
4. Select the shape inside the Square movie clip.
5. From the Modify menu, choose Convert to Symbol.
6. For the symbol Name, enter "SquareShape". For Behavior, choose "Movie clip".
7. Edit the SquareShape movie clip symbol.
8. Rename Layer 1 to "graphic".
9. Add a new Layer to the SquareShape movie clip and name it "actions".
10. Select Frame 1 of the actions layer.
11. In the Actions panel, enter the following code:

    
    mx.skins.ColoredSkinElement.setColorStyle(this, "themeColor");
    

    That code registers the skin movie clip as a styleable skin element. As a result, it will change color when the "themeColor" style is set.

12. Return to the main document timeline.
13. Select Frame 1.
14. In the Actions panel, enter the following code to set the ProgressBar theme color to red:

    
    pBar.setStyle("themeColor", 0xFF0000);
    

15. Export the movie using Control > Test Movie. The ProgressBar component should look like the one in Figure 8 (again magnified to show the new skin). Notice that the left track cap is now red because it is registered to change color when the "themeColor" style is set.

A detailed look at styleable custom skins is outside the scope of this article, but Figure 8 should give you a sense of what's possible. For more information on associating skins with color styles, see the following document in the Flash MX 2004 Version 7.2 updated Help: Using components > Customizing components > About skinning components > Linking skin color to styles.

Changing the Skin of All Instances in a Document
So far our SquareSymbol example has shown how to change the left track cap of a single ProgressBar instance only. To change the left track cap of all ProgressBar instances in a document we have several options. We can:

• set the progTrackLeftName property on the ProgressBar class's prototype
• use the default Linkage Identifier for our custom left track cap movie clip
• set the progTrackLeftName property in a ProgressBar subclass

We'll examine the first two techniques in this article; for information on subclassing component classes see the resources under Further Study.

Here's an example of the first technique, setting the progTrackLeftName property on the ProgressBar class's prototype:

import mx.controls.ProgressBar;
ProgressBar.prototype.progTrackLeftName = "SquareSymbol";

That code tells the ProgressBar class to use the SquareSymbol movie clip when creating any ProgressBar component's left track cap. If the above code appears on frame 1, then all ProgressBar instances placed on frame 2 or later will be affected. That said, it is still possible to customize the left track cap for any single instance. To customize a single instance, we follow the exact steps we studied earlier in the SquareSymbol example--using onClipEvent(initialize) (for author-time instances) or createClassObject()'s initObj parameter (for runtime instances) to set the instance's progTrackLeftName property to the desired movie clip. For example, to apply a triangular cap to a single ProgressBar instance we would use the following code (assuming we had also created a triangle movie clip and given it a Linkage Identifier of "TriangleSymbol"):

onClipEvent (initialize) {
  this.progTrackLeftName = "TriangleSymbol"; }

Now let's consider the second technique for changing the left track cap of all ProgressBar instances in a document ­ using the default Linkage Identifier for our custom left track cap movie clip. We'll start by determining the default Linkage Identifier for the skin movie clip we want to customize, and then we'll assign that Linkage Identifier to our own custom skin movie clip, overriding the component's default skin. Let's return to the document we created earlier and follow these steps to see how it works:

1. On the main timeline, select the on-stage ProgressBar instance.
2. Delete all code from the Actions panel.
3. Open the following document in the Flash MX 2004 Version 7.2 updated Help:

// Make the load bar red.
pBar.setStyle("themeColor", 0xFF0000);
// Tell the ProgressBar to show progress for the Loader.
// (The source property specifies the object for which
// load progress will be displayed.) pBar.source = loader;

// Load an image into the Loader.
loader.contentPath = "http://marsrovers.jpl.nasa.gov/gallery/press/spirit/"
+ "20050113a/site_A89_CY_navcam_360_cyl-A365R1.jpg";

mx.skins.ColoredSkinElement.setColorStyle(this, "themeColor");