Skinning Components

Back in Flash MX, skinning components was pretty simplea lot of work, but simple. When you drag a component onto the stage, the component's skins were added to the library, and you could go in and adjust them any way you wanted. Now in version 2.0 of components, it's not as easy. When you drag a component onto the stage, just the component itself is sent to the library, and you cannot go into it and change it manually. There are, however, a couple of options starting with manually changing the skins.

Manually Skinning a Component

Manually skinning components is not as difficult as it may sound, but it is time-consuming unless you want to keep the default gray colors.

To manually skin components, you have to drag a new "theme" into your current project's library. You get the other theme in the components folder of the configuration directory. Follow these steps to begin manually skinning components:

1.	Create a new Flash document.
2.	Drag instances of the following components onto the stage: Button TextArea RadioButton CheckBox Window
3.	From C:\Program Files\Macromedia\Flash 8\en\Configuration\ComponentFLA, open SampleTheme.fla.
4.	In the library of the SampleTheme file, drag the Movie Clip symbol "SampleTheme" into the library of the other file.
5.	You will then see a couple of new folders in the library. The themes folder is where all the assets reside, and you can manipulate any visual aspect of the com-ponents now.

Notice that when you brought the new theme in, the components on the stage did not change. Only at runtime will the visual aspects of the components change.

Test the movie, and you will see that the components on the stage have changed to an older-looking style.

But that is not the only way to change the visuals of a component; you can also adjust its theme.

Using the style Property

All components support the style property, which allows users to control certain aspects of components ranging from coloring all the way to the speed of the drop-down list in the ComboBox component.

To set a style to a component, you use the setStyle() method like this:

 component.setStyle(style, value); 

This method uses two parameters, the style parameter, which is a string literal representing the style property being changed, and the value parameter, which is the value that the style is being changed to.

You can also set global style properties by using the _global identifier, and the keyword style, like this:

 _global.style.setStyle(style, value); 

Setting global style properties will affect all components throughout the Flash file. Table 16.1 lists some of the styles that most components will support.

Table 16.1. Style Properties That Can Be Used with Components

Style	Description
BackgroundColor	Controls the background color of the component.
BorderColor	Represents the dark corner aspect of three-dimensional objects such as the Button.
borderStyle	Controls the border of components and has four possible values: inset, outset, solid, none.
buttonColor	The color of the Button face, and any component that uses the Button component will inherit this property.
Color	The text color of the Label component. Any component using the Label component (such as the Button or CheckBox) will inherit this value.
disabledColor	The color of text when the component is disabled.
fontFamily	Controls the font used by components.
fontSize	Controls the font size of components.
fontStyle	Controls the style of fonts used by components; it has two values: normal, italic.
fontWeight	Controls the weight of fonts used by components; it has two values: normal, bold.
highlightColor	Controls the highlight portion of the three-dimensional aspects of components.
marginLeft	Controls the left margin of text in components.
marginRight	Controls the right margin of text in components.
scrollTrackColor	Controls the track color of the scrollbar used by components.
shadowColor	Controls the shadow portion of the three-dimensional aspects of components.
symbolBackgroundColor	Controls the background color of both the CheckBox and RadioButton components.
symbolBackgroundDisabledColor	Controls the background color of both the CheckBox and RadioButton components when disabled.
symbolBackgroundPressedColor	Controls the background color of both the CheckBox and RadioButton components when clicked.
symbolColor	Controls the check color of the CheckBox and the dot color of the RadioButton.
symbolDisabledColr	Controls the check color of the CheckBox and the dot color of the RadioButton when disabled.
textAlign	Controls the text alignment of components. Its values can be left, center, or right.
texTDecoration	Controls the underlining of text in components. Its values are either none or underline.
TextIndent	Controls the indentation of text in components.

And there is one more property to use when using the style property: the themeColor property.

The themeColor property controls the highlighting aspects of components such as the Button component, all at once. You can pass it any hexadecimal color such as 0xff0000 for red or 0x000000 for black. You can also pass it three different prebuilt coloring themes:

• haloBlue

• haloGreen

• haloOrange

To see an example of the themeColor at work, follow the steps in this example:

1.	Create a new Flash document.
2.	Drag an instance of the Button component onto the stage.
3.	Create a new layer called actions and place this code in the first frame of that layer: //set the global themeColor to orange _global.style.setStyle("themeColor","haloOrange");

Now test the movie, and you will notice that when you hover your mouse over or click the Button component, the button's color changes to a light orange.

This completes the discussion of the basics of components. The next few sections build on what we have covered so far and take it beyond just fundamentals.