Saturday, December 4, 2010

Create your own smooth scroll bar using AS3: Part 5

Today we'll add our slider functionality.

Try it out!


First create a new button on stage - it should be completely identical to your slider_lane (position and size), but should be put on top of that button and the slider, so that it covers the scrolling panel area. Give that button instance name of slider_mouse_panel.

Now we'll add a variable:

var mouseSliding:Boolean = false;

This boolean will be true when the user is dragging the slider.

Here's the code to add in the end of the script:

slider_mouse_panel.addEventListener(MouseEvent.MOUSE_DOWN, mDown);
stage.addEventListener(MouseEvent.MOUSE_UP, mUp);
stage.addEventListener(MouseEvent.MOUSE_MOVE, mMove);
slider_mouse_panel.addEventListener(MouseEvent.MOUSE_DOWN, mMove);

function mDown(MouseEvent):void
{
mouseSliding = true;
}
function mUp(MouseEvent):void
{
mouseSliding = false;
}

function mMove(MouseEvent):void
{
if (mouseSliding)
{
goY =  -  mouseY * sliderStepPerPercent;
if (mouseY < sliderInitY)
{
goY = initY;
}
if (mouseY > sliderInitY + slider_lane.height)
{
goY = initY - myContent.height + myMask.height;
}
}
}

As you can see, when the user clicks the slider_mouse_panel, mouseSliding is set to true (mDown). The sliding function itself (mMove) is triggered when the user moves the mouse (and the mouseSliding is true) and when the user clicks the slider panel. The mouseSliding variables goes false when mouse is released.

So the full code is:

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;
var mouseSliding:Boolean = false;

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;
}
}

slider_mouse_panel.addEventListener(MouseEvent.MOUSE_DOWN, mDown);
stage.addEventListener(MouseEvent.MOUSE_UP, mUp);
stage.addEventListener(MouseEvent.MOUSE_MOVE, mMove);
slider_mouse_panel.addEventListener(MouseEvent.MOUSE_DOWN, mMove);

function mDown(MouseEvent):void
{
mouseSliding = true;
}
function mUp(MouseEvent):void
{
mouseSliding = false;
}

function mMove(MouseEvent):void
{
if (mouseSliding)
{
goY =  -  mouseY * sliderStepPerPercent;
if (mouseY < sliderInitY)
{
goY = initY;
}
if (mouseY > sliderInitY + slider_lane.height)
{
goY = initY - myContent.height + myMask.height;
}
}
}

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 4
Create your own smooth scroll bar using AS3: Part 6
Create your own smooth scroll bar using AS3: Part 7

2 comments:

trucmuche said...

Hello ! very nice post, thank you very much !

I have a problem with the mMove function. I don't really understand why it's not working for me. Actually, I had to change the line
goY = -mouseY * sliderStepPerPercent;
to
goY = 220-mouseY * sliderStepPerPercent;
where 220 is a strange number, I could have put 200 or 230, this works. But without this correction, the slider is like crazy...

How can you explain that ?

Thank you very much for your answer ! And many thanks for this great post !

Anonymous said...

This is an awesome example, but I have a little bug in mine.

If my content_mc is too small then the (- mouseY * sliderStepPerPercent) can be less than (initY - content_mc.height + mask_mc.height) and that's not what we want because then the content will go to far upwards.. So I wrote it like this and it works for both small and large content.

function onMove(e:MouseEvent):void{
if(mouseSliding){
var perc = - mouseY * sliderStepPerPercent;

if(perc < initY - content_mc.height + mask_mc.height){
perc = initY - content_mc.height + mask_mc.height;
}

targetY = perc;

if(mouseY < sliderInitY){
targetY = initY;
}

if(mouseY > sliderInitY + scrollBar_mc.sliderRect_mc.height){
targetY = initY - content_mc.height + mask_mc.height;
}
}
}

Post a Comment