|
You
can transform a List component horizontally and vertically while
authoring and at run time. While authoring, select the component
on the Stage and use the Free Transform tool or any of the Modify >
Transform commands. At run time, use the
setSize()
method
and applicable properties of the List class such as
height
,
width
,
scaleX
,
and
scaleY
.
When a list is resized, the rows of the list shrink horizontally,
clipping any text within them. Vertically, the list adds or removes
rows as needed. Scroll bars are positioned automatically as needed.
Use styles with the List component
You can set style properties
to change the appearance of a List component. The styles specify
values for the component’s skins and padding when the component
is drawn.
The various skin styles allow you to specify different classes
to use for the skin. For more information on using skin styles,
see
About Skins
.
The following procedure sets the value of the
contentPadding
style
for the List component. Notice that the value of this setting is
subtracted from the size of the List to achieve the padding around
the content, so you might need to increase the size of the List
to prevent text in the List from being cropped.
-
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
.
-
Select Frame 1 in the main Timeline, open the Actions panel,
and enter the following code, which sets the
contentPadding
style
and adds 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.
Use skins with the List component
The List component uses the
following skins to represent its visual states:
List skins
For more information about skinning the ScrollBar, see
Customize the UIScrollBar component
. For information on skinning the
Focus Rect skin, see
Customize the TextArea component
Note:
Changing the ScrollBar skin in one component
will change it for all other components that use the ScrollBar.
Double-click the Cell Renderer skin to open a second palette
of skins for the different states of a List cell.
List Cell Renderer skins
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.
-
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.
|
|
|
