This page describes my "second" attempt to accomplish this ... I had to abandon the first attempt because of significant Flash design errors.
Organizing your work
In the Library, create a folder for Scrollbars. Under that folder, create another for just the buttons.
You can drag Library entries to place them in the correct folder.
Drawing the Button Glyphs
Using the data in 3D Controls, create an UpButton graphic and a DownButton graphic. For the edges, I used a line width of 1. Be sure to make the button tops 17x17 with x=0 and y=0 and then send them to the back.
Right click the top / Arrange / Send to BackIf you don't do this and use 13x13 tops, there will be gaps everywhere.
Drawing the Arrows
As you draw the triangle, you will be able to rotate it. Though it can be oriented in any direction, if you hold down the shift key it will stick when oriented up, down, left, or right.
Don't worry about the size or position ... after drawing the Arrows, use the Properties frame to explicitly set Height, Width, X, and Y according to the table below. Be sure to set the line width to 1 to use the table values.
As a matter of personal taste, in the Properties frame, I prefer to set Cap=Square and Join=Miter (though Cap does not appear to have an affect at this size).
Drawing the Arrow Buttons
In the Library, open the Buttons sub-folder and create a New Symbol. In the dialog box, select Button and assign a class name.
In the middle of the screen, there will be a small plus sign - that is the hot spot identified by (0,0) relative to the rest of the Symbol. It is also the point controlled by setting x&y.
In the timeline, there will be 4 frames - Up, Over, Down, Hit. Create an additional layer and lable them - Arrow and Background. Be sure that the Arrow layer is on top (so the arrow will be visible).
Place the Button_Up glyph on the background layer - drag and drop from the library. In the Properties frame, set x&y to (0,0).
In the Timeline, rightclick the Down frame of the Background layer and add a blank keyframe. Place the Button_Down glyph on the background layer and set x&y to (0,0). In the Timeline, lock the Background layer (click the dot under the *lock* icon).
Activate (click on) the Up frame of the Arrow layer. Using the instructions above, draw an Arrow (triangle) pointing in the appropriate direction. Rightclick the Down frame of the Arrow layer and insert a keyframe (don't select a blank keyframe). Select the Arrow and increase the x&y positions by one.
|X||5||6||5||6||4||5||4||5||1 to the right|
Create a MovieClip symbol - don't bother with 9-slice scaling - it doesn't work. For the Horizontal scrollbar set the height to 19, for the Vertical set the width. I suggest using a light color for the track and black for the border - these will both be replaced by the code. For no particular reason, I made the long dimensions 200 - when you place these in your code the arrows will distort, but that will be fixed at runtime.
Add the 2 appropriate buttons, name then, and place them appropriately. It is not necessary to place a slider or to use a sunken border - those will be drawn by the code. In my code, these button names are important and must match ... even the case ... I use - Left, Right, Up, Down.