Simple Custom Scrollbar - Page 9

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.

The Down Button
The code for the down button is very similar to the code used for creating the up button:

btnDown.onPress = function() {

this.onEnterFrame = function() {

if (contentMain._y-speed>finalContentPos) {

if (scrollFace._y>=bottom) {

scrollFace._y = bottom;

} else {

scrollFace._y += speed/moveVal;

}

contentMain._y -= speed;

} else {

scrollFace._y = bottom;

contentMain._y = finalContentPos;

delete this.onEnterFrame;

}

};

};

btnDown.onRelease = function() {

delete this.onEnterFrame;

};

btnDown.onDragOut = function() {

delete this.onEnterFrame;

};

The only difference is that while the up button focused on the top boundaries for both the content and scroll face, the down button focuses on the bottom boundaries.

Besides minor changes associated with ensuring both the scroller and content work properly as they approach the bottom boundary, the code itself is nearly the same.

Conclusion
You are now done with this tutorial. The most complicated thing about this tutorial, from my point of view, is getting the scroll face and the content synchronized. Because you are rounding the y position for the content movie clip, our mathematical relation linking all of our scrollbar elements will not work without adjusting for them. You saw such subtle adjustments in my up and down button implementations.

When you are scrolling through several hundred pixels, minor rounding errors can eventually result in a major discrepancy between your intended result and the final result. That is why you see a lot* of code for the btnUp and btnDown buttons to ensure that, to the eye, it looks as if both the scroll face and up/down buttons seem to work seamlessly together.

 * Ok, it's not a lot, but it's certainly more than what it is necessary for such a simple task.

Note - Improved Versions

Optimized Code
MichaelxxOA did a great job optimizing and improving the code featured in this scrollbar tutorial. You can find his source file and code by clicking here.

Mousewheel Support
28bit created a version of the code that allows mouse scrolling.
 

Source File
Feel free to take a look around and modify the source file I have provided. If you think you have created something far cooler than the generic scrollbar implementation I have done, post your FLA in the Source/Experiments forum. I always like to see how these tutorial files help you to create something better!

I hope the information helped. If you have any questions or comments, please don't hesitate to post them on the kirupa.com Forums. Just post your question and I, or our friendly forum helpers, will help answer it.

The following is a list of related tutorial and help resources that you may find useful:

How to use the Forums New, Upcoming, and In-Progress Tutorials How to Help out kirupa.com Writing Tutorials

Cheers! Kirupa Chinnathambi kirupaBlog | twitter

 

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