Friday, December 3, 2010

Create your own smooth scroll bar using AS3: Part 4

Today we will make our slider adjust its height according to how big is our content.

Here are two examples, the second one has more content to scroll than the first one has. Therefore, their sliders are differently sized too.


To do this, I first found out the proportions - I need to divide myContent's height to myMask's height to find out how many times bigger it is. Then I apply this number for my scroll bar by dividing the slider_lane's height by this number.

bt_slider.height = slider_lane.height / myContent.height * myMask.height;

It is important that this line of code is located before the line that changes the slider_lane height.

myContent.mask = myMask;

var goY:Number = myContent.y;
var initY:Number = myContent.y;
var singleScrollStep:Number = 80;
bt_slider.height = slider_lane.height / myContent.height * myMask.height;
slider_lane.y +=  bt_slider.height / 2;
slider_lane.height -=  bt_slider.height;
bt_slider.y = slider_lane.y;
var sliderInitY:Number = bt_slider.y;
var sliderStepPerPercent:Number = slider_lane.height / 100;
var scrolledPercent:Number;

stage.addEventListener(Event.ENTER_FRAME, scrollManager);

function scrollManager(Event):void
{
myContent.y += (goY - myContent.y)/5;
scrolledPercent = ((myContent.y-initY)*100/(myMask.height - myContent.height));
bt_slider.y = sliderInitY + sliderStepPerPercent * scrolledPercent;

if (scrolledPercent > 100)
{
goY = initY - myContent.height + myMask.height;
}
if (scrolledPercent < 0)
{
goY = initY;
}
}

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;
}
}
If you want to, you can add limitations for the lowest and highest possible heights. For example:

if(bt_slider.height<60){
bt_slider.height=60
}
However, keep in mind that the slider might misbehave when doing that. The proportions should be kept the same (computed by code), unless you really need to set them manually.

Thanks for reading.

Related:

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

4 comments:

Anonymous said...

Awesome tutorial!

I want to use a custom image for the bt_slider, but adding limitations doesn't work.
Is there any way to fix the proportions?
Thanks

Kirill Poletaev said...

Yeah, just change the line

bt_slider.height = slider_lane.height / myContent.height * myMask.height;

to a fixed number, for example

bt_slider.height = 50;

But I wouldn't recommend making fixed proportions, because the scrollbar is supposed to change its sizes depending on the height of content.

Keep in mind that if you fix the proportions, the scrollbar may (most likely will) misbehave. Change the if(scrolledPercent > 100) part in the scrollManager function to:

if (scrolledPercent > 100)
{
goY = initY - myContent.height + myMask.height;
bt_slider.y = sliderInitY + slider_lane.height
myContent.y = initY - myContent.height + myMask.height;
}

This will prevent some glitches, such as the scroller going out of range.

Anonymous said...

Thanks for your response, but are right, when i change the bt_slider height to a fixed number the slider_lane don't work properly.

I'll keep trying :)

Anonymous said...

an source code would be welcome cos im doing exactly what u have written but it completely doesnt work ;(

Post a Comment