Thursday, December 2, 2010

Create your own smooth scroll bar using AS3: Part 3

Today we'll create a rectangle slider between our arrows, that, no matter how tall is the slider, runs according to the scrolled content.

Here's an example - press the up and down buttons and observe how the slider rectangle follows the scrolled content:


First add 2 new symbols to the stage. One of them (a button symbol) is bt_slider. The second one (mc or button, doesn't matter for now) is slider_lane. Slider_lane is the path that the slider will slide on. Make sure the registration point (0,0) of bt_slider is the center of your rectangle/square. This is really important! Place your stuff like this:



How it works: first, the slider is put in the right position. Then, the coordinates and height of slider_lane is adjusted. Why? Because slider_lane is simply the path for our slider and has to be managed to fit the height of our slider. The center point of the slider can't go past the slider_lane, it's always on it. So, if our slider is taller, the lane should be shorter, so that it doesn't go off borders.

Then we need to set up different variables to create the right proportions. We find out the scrolledPercent (0% in the beginning, 100% when scrolled to the end) and find out how much should the slider go for a percent (slider_lane.height/100). The slider's y in an ENTER_FRAME event is always set to go according to this percentage.

We also need to add debug, in case of our slider going off borders (rarely happens, but might occur).

Here's the full code:

myContent.mask = myMask;

var goY:Number = myContent.y;
var initY:Number = myContent.y;
var singleScrollStep:Number = 80;
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;
}
}

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 4
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

2 comments:

Anonymous said...

Hi, this is a great little tutorial and just what I've been looking for. Nice work. I've gone through it part by part and tested it each time. It works fine in all areas apart from the slider. It shoots way past the bottom arrow when scrolling down and the slider lane doesn't stretch the whole distance between the arrows. All my reg points are set to 0,0 and the slider is centered. Does it matter where the reg points are? As in top left or top right? should each movieclip and button be on its own layer? The problem seems to be Part 5 when adding the slider functionality. Should it be sitting on the same layer as something else? I'd be grateful for any assistance. Thanks John

Kirill Poletaev said...

Well, if you follow each step in the tutorials you'll get the same results like in the example, you probably missed something... If you are still having problems, tell me and I will upload the source file!

Post a Comment