Scrollbar Elements

I l @ ve RuBoard

Although scrollbars are all over the Mac and Windows operating systems and in Web browsers and other applications, few people really understand the individual elements or how they work. This is mainly because the scrollbar is an intuitive interface element, requiring no instructions. People just use it ”they don't think about it.

As a result, when it comes time for Flash developers to make their own scrollbars, they often fail to implement the elements correctly. So let's go over each of the four parts of a scrollbar and define what it does.

Figure 14.1 shows a scrollbar. There are four parts: the up arrow, the down arrow, the slider, and the bar itself.

Figure 14.1. A plain-looking scrollbar.

The Slider

The slider, also called the thumb, serves several purposes. First, its position along the bar shows the user where he is along the full body of text. If the slider is at the top, the user is seeing the first lines of text. If the slider is at the bottom, the user is seeing the last lines of text.

The slider can also be gripped and moved along the bar. When this happens, the text immediately adjusts to show the appropriate portion. So if the user clicks and drags the slider to the middle, the text scrolls immediately to the middle.

Recently, scrollbars have begun to add a new feature. The slider, instead of being of fixed height, resizes itself depending on how much of the text is shown. The result is that the top of the slider indicates the position of the first visible line of text, and the bottom of the slider indicates the position of the last visible line of text. A scrolling text field that shows 10 lines out of 100 will then have a slider that is 10 percent of the height of the bar. We won't add this complexity to our scrollbars here; they are already complex enough for someone just learning ActionScript.

The Bar

The bar is mainly used as a background for the slider. The slider's position along the bar indicates the portion of text being shown.

However, the bar also serves a purpose of its own. If the user clicks on the bar, the text scrolls up one page at a time. If the click is above the slider, the text scrolls toward the beginning. If the click is below the slider, the text scrolls toward the end. Either way, the page-by-page scrolling stops when the slider reaches the position of the click. So, for instance, if the slider is at the bottom of the bar, and you click at the middle of the bar, the slider moves up, one page at a time, until the slider is in the middle.

The Arrows

The arrows at the top and bottom of the scrollbar are the simplest elements. They allow the user to scroll up and down by one line. The slider needs to be updated after an arrow is pressed so that it will reflect the new position.

Universal Properties

There are some universal properties of scrollbar elements that we should consider. First, the elements should act once when the element is clicked, but then act again and again until the element is released. For instance, if the user clicks and holds the down arrow button, the text field should scroll, line by line, until the user releases the button.

Another common factor is that the slider needs to be updated every time an element is used. So when the up arrow, down arrow, and bar are clicked, the slider needs to be updated. It should always show the exact position of the visible text within the full text.

Now that you know about the different elements of scrollbars, let's look at how dynamic text fields can be controlled by them.

I l @ ve RuBoard