Simple Custom Scrollbar - Page 8

In the previous page, you started to learn how the main elements of our scroll bar work. You already learned how to create the scroll face,

this.onEnterFrame = function() {

When you press on your btnUp button, an onEnterFrame event is called. This means that any code contained within this function will be executed continuously at a speed equivalent to that of your frame rate.

if (contentMain._y+speed<maskedView._y) {

Because we are moving our content up, I am checking to make sure that our contentMain movie clip does not go above our top boundary - the maskedView's y position.

Notice that instead of checking if the content's current position  is outside the boundary (contentMain._y < maskedView._y), I check to see if its future position (contentMain._y + speed < maskedView._y), will be outside the boundary instead. The reason is, if I am already at or above the top boundary, it is already too late. The content would have overshot the boundary and spilled over the top. I should have stopped scrolling in the previous step itself.

if (scrollFace._y<=top) {

scrollFace._y = top;

} else {

scrollFace._y -= speed/moveVal;

}

When you are pressing either Up or Down button, both your content and your scrollFace move. Both have constraints at the top and bottom boundaries, and I need to ensure that our scrollFace's position is synchronized with our content's position. In other words, it would be bad if our content has finished and stopped at its top boundary, but our scrollFace is left with a few more pixels to scroll before it reaches its top boundary.

The above ensure that our scrollFace and contentMain movie clip are reasonably in sync. I mention reasonably as opposed to exactly, because the way I implemented the scrollbar will introduce some flaws in the synchronization. Because I am rounding the contentMain movie clip's position using Math.round(), there will be a slight discontinuity between when the scrollFace will reach its end and when the contentMain movie clip will reach its end.

With these lines of code, if the scrollFace has reached the top, I set its position to be the top boundary itself. If it has not, I increment our scrollFace's position by a value that is equivalent to speed divided by the value of moveVal. More than likely, speed / moveVal will not be an integer value, but that's no problem because our scrollFace is just a shape with nothing to be gained from rounding its position to an integer value.

Because I was able to use a non-integer value for the scrollFace's position, in order to balance out the ratio between scrollFace and contentMain, I adjust contentMain's position by the integer value of speed itself:

contentMain._y += speed;

scrollFace._y = top;

contentMain._y = maskedView._y;

delete this.onEnterFrame;

In the above section, you learned what would happen if our content had not reached its final position. This code is executed when our content is about to reach its boundary.

Because we can no longer move up, the positions are reset to the default 'up' values. scrollFace is restored to its top position, contentMain is restored to its maskedView._y position, and finally, we delete our onEnterFrame because there is no need for it any more. We have exhausted all we can do to our up button.

btnUp.onDragOut = function() {

delete this.onEnterFrame;

};

btnUp.onMouseOut = function() {

delete this.onEnterFrame;

};

When you are no longer pressing the up button or you click and drag away from the up button, I stop any work done by the up button by deleting the onEnterFrame contained in it.

if (contentHeight<maskHeight) {

scrollFace._visible = false;

btnUp.enabled = false;

btnDown.enabled = false;

} else {

scrollFace._visible = true;

btnUp.enabled = true;

btnDown.enabled = true;

}

In the odd chance that your content's height is less than that of your viewing area (maskHeight), the above code ensures you can't use the scroll buttons or the scrollTrack. For as someone once said, "You can't scroll that which cannot be scrolled." Content that displays perfectly in your viewing area without requiring scrolling would fall into what that someone said.

In the next page, I will briefly explain how the down button works and wrap up what ended up becoming a 9 page tutorial.

Onwards to the next page!

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