Using skins with the UIScrollBar component

The UIScrollBar component uses 13 skins for the track, scroll box (thumb), and buttons. To customize these skin elements, edit the symbols in the Flash UI Components 2/Themes/MMDefault/ScrollBar Assets/States folder. For more information, see About skinning components in Using ActionScript 2.0 Components.

Both horizontal and vertical scroll bars use the same vertical skins, and when displaying a horizontal scroll bar the UIScrollBar component rotates the skins as appropriate.

The UIScrollBar component supports the following skin properties.

Property	Description
`upArrowUpName`	The up (normal) state of the up and left buttons. The default value is `ScrollUpArrowUp`.
`upArrowOverName`	The rollover state of the up and left buttons. The default value is `ScrollUpArrowOver`.
`upArrowDownName`	The pressed state of the up and left buttons. The default value is `ScrollUpArrowDown`.
`downArrowUpName`	The up (normal) state of the down and right buttons. The default value is `ScrollDownArrowUp`.
`downArrowOverName`	The rollover state of the down and right buttons. The default value is `ScrollDownArrowOver`.
`downArrowDownName`	The pressed state of the down and right buttons. The default value is `ScrollDownArrowDown`.
`scrollTrackName`	The symbol used for the scroll bar's track (background). The default value is `ScrollTrack`.
`scrollTrackOverName`	The symbol used for the scroll track (background) when rolled over. The default value is `undefined`.
`scrollTrackDownName`	The symbol used for the scroll track (background) when pressed. The default value is `undefined`.
`thumbTopName`	The top and left caps of the scroll box (thumb). The default value is `ScrollThumbTopUp`.
`thumbMiddleName`	The middle (expandable) part of the thumb. The default value is `ScrollThumbMiddleUp`.
`thumbBottomName`	The bottom and right caps of the thumb. The default value is `ScrollThumbBottomUp`.
`thumbGripName`	The grip displayed in front of the thumb. The default value is `ScrollThumbGripUp`.

Property

Description

upArrowUpName

The up (normal) state of the up and left buttons. The default value is ScrollUpArrowUp.

upArrowOverName

The rollover state of the up and left buttons. The default value is ScrollUpArrowOver.

upArrowDownName

The pressed state of the up and left buttons. The default value is ScrollUpArrowDown.

downArrowUpName

The up (normal) state of the down and right buttons. The default value is ScrollDownArrowUp.

downArrowOverName

The rollover state of the down and right buttons. The default value is ScrollDownArrowOver.

downArrowDownName

The pressed state of the down and right buttons. The default value is ScrollDownArrowDown.

scrollTrackName

The symbol used for the scroll bar's track (background). The default value is ScrollTrack.

scrollTrackOverName

The symbol used for the scroll track (background) when rolled over. The default value is undefined.

scrollTrackDownName

The symbol used for the scroll track (background) when pressed. The default value is undefined.

thumbTopName

The top and left caps of the scroll box (thumb). The default value is ScrollThumbTopUp.

thumbMiddleName

The middle (expandable) part of the thumb. The default value is ScrollThumbMiddleUp.

thumbBottomName

The bottom and right caps of the thumb. The default value is ScrollThumbBottomUp.

thumbGripName

The grip displayed in front of the thumb. The default value is ScrollThumbGripUp.

The following example demonstrates how to put a thin blank line in the middle of the scroll track.

To create movie clip symbols for UIScrollBar skins:

Select File > New and choose Flash File (ActionScript 2.0).
Select File > Import > Open External Library, and select the HaloTheme.fla file.
This file is located in the application-level configuration folder. For the exact location on your operating system, see About themes in Using ActionScript 2.0 Components.
In the theme's Library panel, expand the Flash UI Components 2/Themes/MMDefault folder and drag the ScrollBar Assets folder to the library for your document.
Expand the ScrollBar Assets/States folder in the library of your document.
Open the symbols you want to customize for editing.
For example, open the ScrollTrack symbol.
Customize the symbol as desired.
For example, draw a black rectangle in the middle of the track using a 1 x 4 rectangle at (8,0).
Repeat steps 5-6 for all symbols you want to customize.
For example, draw the same line on the ScrollTrackDisabled symbol.
Click the Back button to return to the main timeline.
Create an input type TextField instance on the Stage.
Drag a UIScrollBar component to the TextField instance.
Select Control > Test Movie.