Wednesday, December 1, 2010

Create your own smooth scroll bar using AS3: Part 2

Today we'll make it so the scrolled content won't keep scrolling if it reached an end.

First of all, I'd like to remind you that the registration point (0,0) of the content box should be set to the very top of your content.

Let's set up two more variables. One will be a constant - the initial Y coordinate of the content object. The second variable is how far should it scroll on one button press. This was a static number in the previous tutorial, we're turning this into variable so that if needed we can only change this value, instead of doing it in all the places where we need to use this number.

var initY:Number = myContent.y;
var singleScrollStep:Number = 80;

Now, the function for the bt_up button. This one doesn't let the content go above its top side:

function oneScrollUp(MouseEvent):void
{
if (myContent.y + singleScrollStep >= initY)
{
goY = initY;
}
else
{
goY +=  singleScrollStep;
}
}

Basically, we just get the current Y of the content object, add the singleScrollStep variable to it (to forsee the next step) and see if the returned value will be greated than initY. If it is, set goY to initY (scroll to the very top). If it's not, then we just simply perform a scrolling step like we always did.

Now, the lower side. This will be a little bit more complex than with the top side.

function oneScrollDown(MouseEvent):void
{
if (myContent.y - singleScrollStep < initY - myContent.height + myMask.height)
{
goY = initY - myContent.height + myMask.height;
}
else
{
goY -=  singleScrollStep;
}
}
Like in the previous piece of code, we need to forsee the next step, so we check if the next Y coordinate will be less than the lowest possible point of scrolling. That point equals initY - myContent.height + myMask.height. We take the -myContent.height value to find out the total distance between the top and the bottom, then we add initY and myMask.height for it to match the window. If the statement returns true, we set goY to the lowest point. If not, just perform a normal scrolling down step.

Here are the results:

One important note regarding myContent.height: sometimes, when you have text fields, images, etc. in your MovieClip, the myContent.height might return value less than the actual heigh of the MC, making the scrolling function misbehave. To prevent this, add a transparent rectangle in your content object with its top at 0,0 and bottom at the point where you want it to end.

And here's the full code:

myContent.mask = myMask;

var goY:Number = myContent.y;
var initY:Number = myContent.y;
var singleScrollStep:Number = 80;

stage.addEventListener(Event.ENTER_FRAME, scrollManager);

function scrollManager(Event):void
{
myContent.y += (goY - myContent.y)/5;
}

bt_up.addEventListener(MouseEvent.MOUSE_DOWN, oneScrollUp);
bt_down.addEventListener(MouseEvent.MOUSE_DOWN, oneScrollDown);

function oneScrollUp(MouseEvent):void
{
if (myContent.y + singleScrollStep >= initY)
{
goY = initY;
}
else
{
goY +=  singleScrollStep;
}
}

function oneScrollDown(MouseEvent):void
{
if (myContent.y - singleScrollStep < initY - myContent.height + myMask.height)
{
goY = initY - myContent.height + myMask.height;
}
else
{
goY -=  singleScrollStep;
}
}
Thanks for reading!

Related:

Create your own smooth scroll bar using AS3: Part 1
Create your own smooth scroll bar using AS3: Part 3
Create your own smooth scroll bar using AS3: Part 4
Create your own smooth scroll bar using AS3: Part 5
Create your own smooth scroll bar using AS3: Part 6

No comments:

Post a Comment