ActionScript - Creating ScrollBars

Flash provides a Scrollbar component ... unfortunately, it is worthless for anything other than a text field. As a result, I needed to create my own.

This page describes my "second" attempt to accomplish this ... I had to abandon the first attempt because of significant Flash design errors.

This approach

Draws images for ButtonUp and ButtonDown
Uses those images to create 4 buttons - Left, Right, Up, Down
Uses the Scrollbar MovieClips that designers place on the form just to make the buttons available and as a rough size indication - it will be deleted via code and replaced with a new one created via code

Basically, never re-size anything in code - delete it and redraw it.

Organizing your work

For these components to be reusable they will be stored in the Library. The 3 icons you should be familiar with are

New Symbol
New Folder
Delete

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

Primary issues

When a drawing is made up of parts, Flash leaves gaps between the parts
When 2 lines meet at a corner, one will always stick out funny and cause bumps ... the larger the line width, the larger the bumps
Anytime you set the x/y position or the height or the width, Flash will change it for you - you must check and re-check

I even set *Snap to pixels* and disabled all the other snap possibilities ... no that did not help. When I try and drop something on (0,0) it is placed at (-0.5,-0.5) or sometimes (-0.1,-0.1).

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 Back

If you don't do this and use 13x13 tops, there will be gaps everywhere.

Drawing the Arrows

Use the PolyStar Tool (click on the Rectangle Tool and wait for the menu). Before you draw the Arrows, you need to click the Options... button in the Properties frame and set the Number of Sides to 3. (You can't change this after the object is drawn.) Set both the Line and Fill colors to black.

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

You will need 4 separate buttons using the 2 graphics above and an arrow pointing in the appropriate direction.

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.

Arrow Placement

	Left		Right		Up		Down
	Up	Down	Up	Down	Up	Down	Up	Down
W	7		7		9		9		Same
H	9		9		7		7		Same
X	5	6	5	6	4	5	4	5	1 to the right
Y	4	5	4	5	5	6	5	6	1 down

Scrollbars

You will need 2 of these - Horizontal and Vertical.

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.

Author: Robert Clemenzi - clemenzi@cpcug.org