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.

Overview | 3D components | Drawing the Arrows | Arrow Buttons |
Failures - Creating the Arrows | Creating Buttons | 9-slice scaling | Dimensions


ScrollBars have several components Each of these has 3 visible states and can be either Flat or 3D.

Flash simplifies creating the three mouse states by defining each part as a button ... but then the mouse cursor changes to a hand, which is totally nonstandard. This can be disabled in code.

3D components

The basic 3D Scrollbar graphic contains For more information on drawing these, see 3D Controls

I don't understand why each version of an operating system uses a different set of colors - in Windows 98, ScrollBar controls were light tan (grayish), with Windows XP, they are blue ... and the icons are even different.

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, it tends to 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.

Arrow Buttons

I originally created a single button and just rotated it for the 4 positions ... that's ok if the Arrow glyph does not move when the button is pressed ... but real weird if it does. The same goes for 3D raised buttons ... you always want the shadow to be down. As a result, I created 4 separate buttons in the Library.

Using the data on 3D Controls, I created an UpButton graphic and a DownButton graphic. What a pain, I had to repeatedly edit and re-edit because the XY coordinates kept changing. For instance, if you set one of them to 1.0, when you check it later, it is now 0.9 ... or perhaps 1.1 - this changes on a regular basis. You can tell something is wrong because there are gaps everywhere.

Then create 4 separate buttons that use those graphics.

Arrow Placement


In order to create the ScrollBars, I had to experiment ... a lot.

This is just another way to say that Flash is not very logical and that the built-in help was not particularly useful. This section documents some of my failures ... and a Flash desigh problem or two.

Creating the Arrows

In Windows, many desktop icons (including the arrows used with scrollbars) are actually characters from the Marlett font. This is done partly because fonts are easy to resize. At any rate, I created a text field, selected the Marlett font, and typed the required character ... but when I tested the form, numbers were displayed instead of the expected glyphs.

That's right, in design mode, arrows were displayed (as expected), but when the form was run, ....

Unfortunately, there is no way to include the Marlett font in the final document.

In my opinion, if a font won't work, then it should not be available.

Creating Buttons

I created a working 3D Scrollbar button ... but without an arrow.

Then I tried to use this base clase to create 4 buttons, each with an arrow pointing in a different direction. Unfortunately, this does not work ... the buttons no longer press. Apparently, you should never make a button from a button.

Granted, this approach and the one described above both create 4 button objects, but ... If this were a true object oriented language, this type of experimentation would not have been necessary.

9-slice scaling

According to the help, if you enable 9-slice scaling (which I did), then, when you re-size an object, only the middle parts stretch.

Well ... that is not even close to true. When I stretched my scroll bar, the arrows at the ends were highly distorted. Maybe 9-slice scaling just doesn't work with MovieClips made of MovieClips ... but that is not in the help.

Solution, I had to reset the "fixed" component sizes in the code.


The widths and heights shown at design time do not match those at run time. The design time values for the first 4 components are from the ScrollBar MovieClip - the reusable component. Because 9-slice scaling was enabled, the first 3 entries (each 17.0 pixels square) should not have chaged at all. Even though re-sizing the component severly stretched the arrows, these subsubcomponents still had a width and height of 18.3.

At runtime, the Channel width should have been 474.0 - the length of the object on the form ... Not the value from the MovieClip.

On the form, the Scrollbar shows a width of 474.0 ... Yet it also shows a different value in code.

In addition to this (and probably related), I had to repeatedly edit the height, width, x- and y-positions on all MovieClips used to create the scrollbars - Flash kept magically changing them. And, when the scrollbars are rendered, the sharp 1-pixel wide lines are blured across several lines.

This program - yes, I mean Flash by Adobe - has so many design problems I'm suprised anyone can make it work.


The mouseX is completely hosed ... it consistently lies if it is used on a MovieClip within a MovieClip.

Oh, it worked ok as long as I didn't try to change the size of the scrollbar

Author: Robert Clemenzi -
URL: http:// / user / clemenzi / technical / Languages / ActionScript / Controls / ScrollBars.html