Linking skin color to styles

The version 2 component framework makes it easy to link a visual asset in a skin element to a style set on the component using the skin. To register a movie clip instance to a style, or an entire skin element to a style, add ActionScript code in the timeline of the skin to call mx.skins.ColoredSkinElement.setColorStyle(targetMovieClip, styleName).

To link a skin to a style property:

If you already applied the Sample theme to a document, skip to step 5.
Select File > Import > Open External Library, and select the SampleTheme.fla file.
This file is located in the application-level configuration folder. For the exact location on your operating system, see About themes.
In the theme's Library panel, select Flash UI Components 2/Themes/MMDefault, and drag the Assets folder of any components in your document to the library for your document.
For example, drag the RadioButton Assets folder to the target library.
If you dragged individual component assets folders to the library, make sure the Assets symbol for each component is set to Export in First Frame.
For example, the Assets folder for the RadioButton component is called RadioButton Assets; it has a symbol called RadioButtonAssets, which contains all of the individual asset symbols. If you set Export in First Frame on the RadioButtonAssets symbol, all individual asset symbols will also export in the first frame.
Double-click any skin symbol you want to modify to open it in symbol-editing mode.
For example, open the States/RadioFalseDisabled symbol.
If the element to be colored is a graphic symbol and not a movie clip instance, use Modify > Convert to Symbol to covert it to a movie clip instance.
For this example, change the center graphic, which is an instance of the graphic symbol RadioShape1, to a movie clip symbol; then name it Inner Circle. You do not need to select Export for ActionScript.

It would be good practice, but it is not required, to move the newly created movie clip symbol to the Elements folder of the component assets being edited.
If you converted a graphic symbol to a movie clip instance in the previous step, give that instance a name so it can be targeted in ActionScript.
For this example, name the instance innerCircle.
Add ActionScript code to register the skin element or a movie clip instance it contains as a colored skin element.
For example, add the following code to the skin element's Timeline.
```
mx.skins.ColoredSkinElement.setColorStyle(innerCircle, "symbolBackgroundDisabledColor");
```
In this example you're using a color that already corresponds to an existing style name in the Sample style. Wherever possible, it's best to use style names corresponding to official Cascading Style Sheet standards or styles provided by the Halo and Sample themes.
Repeat steps 5-8 until you've edited all the skins you want to change.
For this example, repeat these steps for the RadioTrueDisabled skin, but instead of converting the existing graphic to a movie clip, delete the graphic and drag the existing Inner Circle symbol to the RadioTrueDisabled skin element.
When you finish editing the skin symbol, click the Back button at the left side of the edit bar at the top of the Stage to return to document-editing mode.
Drag an instance of the component to the Stage.
For this example, drag two RadioButton components to the Stage, set one to selected, and use ActionScript to set both to disabled in order to see the changes.
Add ActionScript code to the document to set the new style property on the component instances or at the global level.
For this example, set the property at the global level as follows:
```
_global.style.setStyle("symbolBackgroundDisabledColor", 0xD9D9D9);
```
Select Control > Test Movie.

Flash CS3