Using movie clips to customize the Accordion header skin

The example above demonstrates how to use an ActionScript 2.0 class to customize the Accordion header skin, which is the method used by the skins provided in both the Halo and Sample themes. However, because the example uses simple colored boxes, it is simpler in this case to use different movie clip symbols as header skins.

Select File > New and choose Flash File (ActionScript 2.0).
Create a new symbol by selecting Insert > New Symbol.
Set the name to RedAccordionHeaderSkin.
If the advanced view is not displayed, click the Advanced button.
Select Export for ActionScript.
The identifier is automatically filled out with RedAccordionHeaderSkin.
Leave the Class text box blank.
Make sure that Export in First Frame is already selected, and click OK.
Open the new symbol for editing.
Use the drawing tools to create a box with a red fill and black line.
Set the border style to hairline.
Set the box, including the border, so that it is positioned at (0,0) and has a width and height of 100.
The ActionScript code sizes the skin as needed.
Repeat steps 2-11 and create green and blue skins, named accordingly.
Click the Back button to return to the main timeline.
Drag an Accordion component to the Stage.
Set the Accordion properties so that they display several children.
For example, set childLabels to an array of [One,Two,Three] and childNames to an array of [one,two,three].

Copy the following ActionScript code to the Actions panel with the Accordion instance selected:

onClipEvent(initialize) {
    falseUpSkin = "RedAccordionHeaderSkin";
    falseDownSkin = "GreenAccordionHeaderSkin";
    falseOverSkin = "RedAccordionHeaderSkin";
    falseDisabled = "RedAccordionHeaderSkin";
    trueUpSkin = "BlueAccordionHeaderSkin";
    trueDownSkin = "BlueAccordionHeaderSkin";
    trueOverSkin = "BlueAccordionHeaderSkin";
    trueDisabledSkin = "BlueAccordionHeaderSkin";
}

Select Control > Test Movie.

Using movie clips to customize the Accordion header skin

To create movie clip symbols for Accordion header skins: