Simple Custom Scrollbar - Page 6

In the previous page, you learned how a simplified scrollbar would work. In this page, I will explain the code that went into creating our scrollbar.

ActionScript Explained

var scrollHeight:Number = scrollTrack._height;

var contentHeight:Number = contentMain._height;

var scrollFaceHeight:Number = scrollFace._height;

var maskHeight:Number = maskedView._height;

I declare variables to store the heights of our four major scrollbar elements: the scroll track, the content, the scroll face, and the viewing/masked area.

var initPosition:Number = scrollFace._y=scrollTrack._y;

var initContentPos:Number = contentMain._y;

var finalContentPos:Number = maskHeight-contentHeight+initContentPos;

These three lines store the initial and final position our content should be. Because the initial and final positions are related to the positions of our scrollFace, scrollTrack, maskHeight, and contentMain, I just create more variables to store variations of similar data you collected in the above section.

var left:Number = scrollTrack._x;

var top:Number = scrollTrack._y;

var right:Number = scrollTrack._x;

var bottom:Number = scrollTrack._height-scrollFaceHeight+scrollTrack._y;

Similar to what I have been doing, I'm declaring more variables and assigning them numerical properties from our scrollbar elements. With these four lines of code, I specify co-ordinates for a virtual box in which our scroll face's movements are restricted. You will see these being used when the startDrag function is called later.

Notice that the bottom variable assignment seems more complicated and longer than the other variable assignments. What I am doing is trying to find the bottom limit we can scroll our scroll face on the scrollTrack.

The following diagram should help:

Because our scrollHeight variable stores the height of our track, we need to subtract the height taken up by our scrollFace - denoted as scrollFaceHeight. The scrollTrack._y value is important because both your scrollHeight and scrollFaceHeight values do not change relative to where you place them on the movie. They are absolute values because the height of your scrollFace and scrollTrack will not change based on the position you place them.

The problem, though, is that the bottom variable defines a specific Y position that will act as scrollFace's bottom boundary. By adding scrollTrack._y into the mix for bottom offsets the value for bottom by taking into account the distance the top edge of your scrollTrack is from Flash's origin. This ensures that your bottom variable contains data that is relative to where your scrollTrack is in relation to your movie's origin.

var dy:Number = 0;

var speed:Number = 10;

var moveVal:Number = (contentHeight-maskHeight)/(scrollHeight-scrollFaceHeight);

With these lines, I move away from defining and re-defining scrollbar element properties and move towards defining variables that make managing our code easier.

The variable dy stores the change in the y position resulting from dragging the scroll face. You will see it doing more than just storing the value 0 later.

The speed variable controls how quickly the content scrolls each time you press the Up or Down buttons.

Finally, the moveVal variable stores the ratio of how much your content moves based on how much the scrollFace moved on the scrollTrack. In other words, the relationship between all four of our scrollbar design elements (outlined in the previous page) are stored in this variable.

Tip

Initializing this many variables may seem like a waste of time. After all, typing contentMain._y takes up almost as much time as declaring and using a variable called contentHeight.

What declaring variables does, though, is make the code more readable and ensure you have an idea of what you think are the important parts of the code that will be used frequently.

More importantly, declaring variables using descriptive English names allows you think about the bigger concepts you are tackling as opposed to worrying about the non-essential code syntax and related details.

After all, it is more useful to think about your program constraints in terms of top, bottom, left, and right, as opposed to the bizarre assignments that make up, for example, the bottom variable.

There is more code left to explain, and in the next page I will explain how the drag feature works.

Onwards to the next page!

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9