Sunday, December 5, 2010

Create your own smooth scroll bar using AS3: Part 6

Today we'll add mouse wheel support to our scrollbar.

Here's what we're going to get:


We'll need to use the MouseEvent.MOUSE_WHEEL event listener. When the user uses his mousewheel, we can return delta (positive number when scrolling up and negative when scrolling down).

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

As you can see, the scrolling feature itself is similar to the functions used for arrow buttons. The only difference is that we also add goY to the first part of the if statement (after +/- singleScrollStep). We do that to prevent overscrolling, if the user is spinning his mousewheel very quickly.

Here's the full code:

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

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

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

17 comments:

Nour El-Din said...

Hi, that's an awesome tutorial, and very helpful, so to start off, THANK you.

The only problem im experiencing is making more than one of these scrollbars on my flash site. Whenever I do the same steps (with different names) I get a lot of "duplication errors" because of my actions page...

so my question is how can I have more than one of these scrollbars in the same flash file without any actionscript errors, thanks!

Kirill Poletaev said...

Well, if you are getting duplication errors, that means you still have multiple functions or variables with the same name. So, if you need to recheck the code and make sure there are no functions or variables with the same name.

Alternatively, you could turn the scrollbar into a class, and then duplicate it as many times as you want.

Nour El-Din said...

I solved the problem by putting all of the items used (bt_up, bt_slider, etc.) into a movieclip, and put the actions inside that movieclip and not on the main time line. Works like a charm :).

However I'm having a bit of a problem with the slider. It does something wierd....can't quite explain it, but I can show you?

The site is www.developmentmanagementcanada.com


the only slider I applied your code to is on the SUSTAINABILITY page. As you can see, it does not work....., any help greaaaatly appreciated. Thank you in advance :).

Nour El-Din said...

only slider I applied your *full* code to. Just wanted to make that clear, you're a life saver :p

Kirill Poletaev said...

Well, I think it has something to do with the registration point of the bt_slider and maybe the position of some of the elements... Perhaps you should re-read this tutorial and see if there is something you've missed.

Oh, and check out the seventh part of the series I've only submitted recently :)It has one more feature.

Good luck with your project!

Nour El-Din Elba said...

Firstly, thanks for the quick response !
I read part 7 of the tutorial and it works great, no problems at all. I re-read part 3, and did it from scratch...it just won't work. I set the registration point of bt_slider to the center. (isn't that where when I'm converting it to a symnol, I see those 9 empty squares, with one of them selected?). So I chose the middle one, so the middle square is black, and the rest are white. Still the same problem.....any ideas?

Nour El-Din Elba said...

Okay, after a bit of playing around, I managed to make it work exactly like yours (on a separate .fla). The only problem is when I copy it to my main site, it breaks again....

Also when I convert it into a movie clip, everything works fine EXCEPT the scrollbar....

Why is it the only thing that malfunctions?

Kirill Poletaev said...

If it only breaks when you put the scrollbar inside a movie clip, that means the coordinates are messed up... Try going inside your scroller movieclip - select all the contents and set their coordinates to (0,0). It should work.

Putting code inside movieclips is a bad practice, but oh well.

Nour El-Din Elba said...

It just ruins everything, I can live without it lol. Thanks for the quick replies though :)

James Taylor said...

hi
I'm having the same problem with step 5
when I add the 'slider_mouse_panel' it doesn't perform properly. can't figure it out. Can you help? Registration point? layer order? who knows

example of failure here:
http://www.mediaflash.ca/scrollTest/as3_scroltext_part6.html

Kirill Poletaev said...

Added a source file download in the final part of the tutorial, hope it helps.

James Taylor said...

hey,
thanks a bunch for the Fla.
Im going to dissect it to see where mine fell apart. But at least now I have a working version to experiment with

Ever so grateful
James

mahrukh said...

Hey thanks SO much great tutorial!

Though I'm facing the same problem as James Taylor I saw his example, I was wondering what the issue was

Also, the source file you added in the 7th part is only a swf and not a fla

Thank you so much I would be really grateful if you could post the fla
Thanks a lot again :)

Kirill Poletaev said...

Ah, sorry, I uploaded the fla now:

http://www.multiupload.com/UO3M8HC7TL

Elvira Christine said...

hello
I loved.
Can u give me a link?
The above ones not loved by my antivirus.
Many Thanks
Elvira

smart designer said...

Hi kirill
i'm not able to download the source file.
Its urgent.
Can you provide any other link or mail it haer indianpartner2007@gmail.com

That will be very helpful.

Kirill Poletaev said...

There's a working link in the end of the 7th part of the tutorial.

Post a Comment