Simple Custom Scrollbar - Page 7

In the previous page, I started to explain the code that goes into making our scrollbar work. We didn't get further than covering variables that will be used, but in this page you will learn how the scroll face works.

The Scroll Face

scrollFace.onPress = function() {

var currPos:Number = this._y;

startDrag(this, false, left, top, right, bottom);

this.onMouseMove = function() {

dy = Math.abs(initPosition-this._y);

contentMain._y = Math.round(dy*-1*moveVal+initContentPos);

};

};

I declare a function that executes any contained within it when the scrollFace movie clip is pressed.

startDrag(this, false, left, top, right, bottom);

The startDrag function allows you to click and drag your scrollFace movie clip. It takes in 6 arguments: the name of the object that is about to be dragged, whether the object will be centered to the mouse pointer when dragged, the left boundary, top boundary, right boundary, and bottom boundary.

Essentially, you are constraining your dragging to a virtual box whose edges are defined by the values you determined for left, top, right, and bottom. If you do not constrain the movement of your dragging, you will find that your scrollFace could potentially go everywhere around your animation...and you wouldn't want that!

this.onMouseMove = function() {

dy = Math.abs(initPosition-this._y);

contentMain._y = Math.round(dy*-1*moveVal+initContentPos);

};

This is a nested event handler because it is contained within the onPress event covered above. The above code executes when your scrollFace (this) is dragged. In order to drag, you first click on the scrollFace, and then you move your mouse in the direction you want to drag.

When you click on the scrollFace, any code contained inside the onPress event executes. And when you move your mouse while you still have your mouse button pressed, the code in the this.onMouseMove function executes.

dy = Math.abs(initPosition-this._y);

contentMain._y = Math.round(dy*-1*moveVal+initContentPos);

The dy variable returns the difference in position between your scroller's initial position and where it is now.

contentMain._y = Math.round(dy*-1*moveVal+initContentPos);

This line sets the y position of your contentMain movie clip. Notice the three variables that are used to specify the position: dy, moveVal, and initContentPos.

If you recall, moveVal specifies how many pixels of the contentMain movie clip you move for each pixel your scrollFace moves. With dy specifying how many pixels your scrollFace has moved so far, multiplying dy by moveVal results in the total distance our contentMain movie clip should move based on where your scrollFace is currently.

Because Flash's co-ordinate system is upside down, I multiply the value by -1 to get things right side up again. Sometimes, your scroller may have everything starting from the origin, but sometimes, it may not. Therefore, all of your data is offset by initContentPos, which is simply the same as getting the y position of your scroll track.

I place all of the above in a Math.round() function, because that will ensure that your contentMain clip's y position is always an integer value. Text and some graphics become blurry when they are positioned on non-integer values. In order to avoid such blurriness in the content, Math.round() ensures your contentMain movie clip's position stays in integer increments.

scrollFace.onMouseUp = function() {

stopDrag();

delete this.onMouseMove;

};

This section of code is, thankfully, pretty straightforward. The above code executes when you are no longer pressing your mouse and/or dragging the scrollFace.

The stopDrag() function reverses the startDrag function from earlier and stops the dragging. Deleting the this.onMouseMove function stops your scrollFace from following your mouse even after you have stopped dragging.

Up and Down Buttons
We now shift gears and away from talking about the scrollFace to talking about the buttons. Because the Up and Down buttons are similar, I will only cover the Up button in detail.

btnUp.onPress = function() {

this.onEnterFrame = function() {

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

if (scrollFace._y<=top) {

scrollFace._y = top;

contentMain._y += speed;

} else {

contentMain._y += speed;

scrollFace._y -= speed/moveVal;

}

} else {

scrollFace._y = top;

contentMain._y = maskedView._y;

delete this.onEnterFrame;

}

};

};

When you press the up button with your mouse, all of the above code is executed. While the above looks like more lines of code than the rest of the functions covered, it really isn't that bad.

In the next page, let's cover the code contained inside the btnUp.onPress event function in greater detail.

Onwards to the next page!

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