Using skins with the List

Double-click the Cell Renderer skin to open a second palette of skins for the different states of a List cell.

You can change the appearance of the List's cells by editing these skins. The following procedure changes the color of the Up skin to change the List's appearance in its normal inactive state.

To change the color of the List's Cell Renderer Up_Skin:

Create a new Flash file (ActionScript 3.0) document.
Drag the List component from the Components panel to the Stage and give it an instance name of aList.
Double-click the List to open its palette of skins.
Double-click the Cell Renderer skin to open the palette of Cell Renderer skins.
Double-click the Up_Skin skin to open it for editing.
Click the fill area of the skin to select it. A Fill color picker should appear in the Property inspector with the skin's current fill color.
Select color #CC66FF using the Fill color picker to apply it to the fill of the Up_Skin skin.
Click the Back button at the left side of the edit bar above the Stage to return to document-editing mode.

Add the following code to the Actions panel on Frame 1 of the Timeline to add data to the List:

aList.setStyle("contentPadding", 5);
aList.setSize(145, 200);
aList.addItem({label:"1956 Chevy (Cherry Red)", data:35000});
aList.addItem({label:"1966 Mustang (Classic)", data:27000});
aList.addItem({label:"1976 Volvo (Xcllnt Cond)", data:17000});
aList.rowCount = aList.length;

Select Control > Test Movie.
The List should display as it does in the following illustration:

List cells with custom Up_Skin color

The framing results from setting the contentPadding style.