Tuesday, November 30, 2010

Create your own smooth scroll bar using AS3: Part 1

Today we'll start making our own bar for scrolling content.

There's a built-in scrollbar component in Flash, but in this tutorial series, we'll be making our very own scrollbar. What are the benefits of this? Your scroll bar is your scroll bar. You have full control over it, you can customize it any way you like. For example, add smoothness, make content scroll in an oval window, instead of a rectangle, and so on.

In this tutorial we will be setting stuff up for work. For now you will need - 2 buttons (bt_up and bt_down), a content mask object (myMask), and the content container (myContent). Here's how I put them on stage:



You can edit the mask object any way you want. You can turn it into a star if you want, and when someone will use the scroll bar, their text will be scrolled in a star shaped window. Keep in mind though that it should be easy for users to use your scroll bar and read the content.

Your myContent object has to have the registration point (0,0) at the very top of your content.

So let's turn our shape into a mask:

myContent.mask = myMask;

We want our scrollbar to move the content smoothly. For this, we'll need a variable caleld goY - this will be the Y value that the content will always strive to reach. In the beginning it equals the current Y of the content box.

var goY:Number = myContent.y;

And this function right here will manage the smooth movement to the defined goY point:

stage.addEventListener(Event.ENTER_FRAME, scrollManager);

function scrollManager(Event):void{
myContent.y += (goY - myContent.y)/5
}

Now, managing the buttons is pretty easy. All we need to do on the MOUSE_DOWN event of the buttons is to change the goY value:

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

function oneScrollUp(MouseEvent):void{
goY+=80
}

function oneScrollDown(MouseEvent):void{
goY-=80
}

And the whole code is:

myContent.mask = myMask;
var goY:Number = myContent.y;

stage.addEventListener(Event.ENTER_FRAME, scrollManager);

function scrollManager(Event):void{
myContent.y += (goY - myContent.y)/5
}

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

function oneScrollUp(MouseEvent):void{
goY+=80
}

function oneScrollDown(MouseEvent):void{
goY-=80
}

And here's what we get:


Thanks for reading!

Related:

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

1 comment:

FlyingMamoth said...

was a good tutorial..... thank you very much

Post a Comment