Sunday, February 20, 2011

Create your own smooth scroll bar using AS3: Part 7

In this tutorial we will change the behavriour of our arrows in the custom scroll bar a bit. Now, instead of having to keep clicking the arrows to scroll the content, you can just hold them and it will slide.

It is going to work like this:


We'll need to create a new String variable that will hold the direction of the arrow sliding movement:

var arrowScrolling:String = "";

The oneScrollUP and oneScrollDown functions will now look like this:

function oneScrollUp(MouseEvent):void
{
arrowScrolling = "up";
}

function oneScrollDown(MouseEvent):void
{
arrowScrolling = "down";
}

And the ENTER_FRAME function now will also include this:

if (arrowScrolling == "up")
{
if (myContent.y + singleScrollStep >= initY)
{
goY = initY;
}
else
{
goY +=  singleScrollStep;
}
}
if (arrowScrolling == "down")
{
if (myContent.y - singleScrollStep < initY - myContent.height + myMask.height)
{
goY = initY - myContent.height + myMask.height;
}
else
{
goY -=  singleScrollStep;
}
}

When the user releases his mouse, arrowScrolling will become empty:

function mUp(MouseEvent):void
{
mouseSliding = false;
arrowScrolling = "";
}

Here is the full code:

myContent.mask = myMask;

var goY:Number = myContent.y;
var initY:Number = myContent.y;
var singleScrollStep:Number = 50;
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;
var arrowScrolling:String = "";

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;
}
if (arrowScrolling == "up")
{
if (myContent.y + singleScrollStep >= initY)
{
goY = initY;
}
else
{
goY +=  singleScrollStep;
}
}
if (arrowScrolling == "down")
{
if (myContent.y - singleScrollStep < initY - myContent.height + myMask.height)
{
goY = initY - myContent.height + myMask.height;
}
else
{
goY -=  singleScrollStep;
}
}
}

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

function oneScrollUp(MouseEvent):void
{
arrowScrolling = "up";
}

function oneScrollDown(MouseEvent):void
{
arrowScrolling = "down";
}

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;
arrowScrolling = "";
}

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

stage.addEventListener(MouseEvent.MOUSE_WHEEL, wheelManager);

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

if (evt.delta < 0)
{
if (myContent.y - singleScrollStep + goY < initY - myContent.height + myMask.height)
{
goY = initY - myContent.height + myMask.height;
}
else
{
goY -=  singleScrollStep;
}
}
}

And there we go.

Thanks for reading!

Source file download here.

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

8 comments:

trucmuche said...

Hello !

I would like to put your smooth scroller inside a movieclip but the positioning of the slider is not good.

I think the problem happens in the mMove function, when the goY variable is computed, but I'm not sure... I did not managed to find a solution.

Could you help me to modify what should be modified to put a scrollbar inside a MovieClip which is put on the stage ?

Thank you very much for your work and your help !

Trucmuche

trucmuche said...

It's me again... I have another question... :-)

I would like to use a tiny bullet as slider, and thus I would like to get it always the same size and not having the slider resized. I tried to comment the lines
//bt_slider.height = slider_lane.height / myContent.height * myMask.height;
//slider_lane.y += bt_slider.height / 2;
//slider_lane.height -= bt_slider.height;
but the slider does not work anymore...

Would you have a solution ? Thank you very much in advance !

Kirill Poletaev said...

Hi, trucmuche!

To answer your first question, I have created and uploaded a fla file to the internet, it has a scrollable content box in a movieclip, just like you asked. I'm also going to change the main source file link to this.

Enjoy!

http://www.multiupload.com/WJE03GJ5TC

I'll answer your second question when I have time, hopefully in a day or two!

Kirill Poletaev said...

Looks like the multiupload link above has an .swf file instead of a .fla, use this instead:

http://www.multiupload.com/UO3M8HC7TL

The post has also been updated with a new link.

Anonymous said...

Download source file link goes to bad link. Could you please update the link with correct URL?

Kirill Poletaev said...

Updated.

kumslee said...

Thank You So Much!

-kumslee

smart designer said...

have anyone noticed that it is scrolling very fast in the end?

Post a Comment