Using skins with the UIScrollBar

1. Create a new Flash file (ActionScript 3.0).
2. Drag the UIScrollBar component to the Stage and give it an instance name of mySb. In the Parameters tab, set the direction to horizontal.
3. Double-click the scroll bar to open its panel of skins.
4. Click the Up skin to select it.
5. Set the zoom control to 400% to enlarge the icon for editing.
6. Double-click the background of the right arrow (or up arrow for a vertical scroll bar) until the background is selected and its color appears in the Fill color picker in the Property inspector.
7. Select color #CC0033 to apply it to the button background.
8. Click the Back button at the left side of the edit bar above the Stage until you return to document-editing mode.
9. Repeat steps 6, 7, and 8 for the thumb and the left-hand arrow (or down arrow for a vertical scroll bar) elements.
10. Add the following code to the Actions panel on Frame 1 of the Timeline to attach the scroll bar to a TextField.

    var tf:TextField = new TextField();
    addChild(tf);
    tf.x = 150;
    tf.y = 100;
    mySb.width = tf.width = 200;
    tf.height = 22;
    tf.text = "All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All . . .";
    mySb.y = tf.y + tf.height;
    mySb.x = tf.x + tf.width;x
    mySb.scrollTarget = tf;
    

11. Select Control > Test Movie.

The UIScrollBar component should appear as it does in the following illustration.