by kirupa | 19 January
2006
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.
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!
Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!
|