Custom Scrollbar

In today tutorial we will make a custom scrollbar. For this tutorial we will use ActionScript 3.0
There are a lot of tutorials on the net with this subject but more of them are using a static text field (they draw a text field on the stage and type the text in that field).This approach does not offer a lot of flexibility. In our tutorial we will use a dynamic text field (the text is not typed on the stage it comes from an external source).


Ok. Now let’s go back to work.

• 1.Go to File – New select Flash file(ActionScript 3.0) and click Ok.
• 2.Double click on the layer1 name and rename it text.
• 3.Select the Text tool in the Properties panel set the Text type to Dynamic text, the Line type to Multiline and set the color to black.On the stage click and drag to make a text field. In the Properties panel set the width to 200 ,height to 150, x to 175 and y to 125.Set the instance name myTfield.

Your settings must like like this:

• 4.Insert new layer ( Insert – Timeline – Layer ) double click on the layer 2 name and rename it to track.
• 5.Lock the text layer. Select the Rectangle tool and on the track layer draw a rectangle. Set is width to 15 ,height to 150, X to 376 and Y to 125 and pick a color. I pick a orange one (#FF9900).
• 6.Select the rectangle hit F8 name it track_mc, set it’s type to Movie Clip and set it’s registration point in to upper left like in the picture.Set the instance name to track_mc.

• 7. Insert new layer ( Insert – Timeline – Layer ) double click on the layer 3 name and rename it scrollHandler.
• 8. Lock the track layer. Select the Rectangle tool and on the scrollHandler layer draw a rectangle. Set is width to 15 ,height to 15, X to 376 and Y to 125 and pick a color. I pick black.
• 9. Select the rectangle hit F8 name it scrollHandler_mc, set it’s type to Movie Clip and set it’s registration point in to upper left like before.Set the instance name to scrollHandler_mc.

Ok now we finished the graphical part. Let’s write the code .

• 10. Insert new layer ( Insert – Timeline – Layer ) double click on the layer 4 name and rename it actions.
• 11.Select frame 1 in the actions layer hit F9 to open the ActionScript panel.
• 12.Copy and paste the code in the ActionScript panel.

1. var myMessage:String = "If you like the scroll bar and want to know how I made it I have posted a detailed tutorial on my blog: http://biochimistu.blogspot.com.Thanks and enjoy! If you like the scroll bar and want to know how I made it I have posted a detailed tutorial on my blog: http://biochimistu.blogspot.com.Thanks and enjoy! If you like the scroll bar and want to know how I made it I have posted a detailed tutorial on my blog: http://biochimistu.blogspot.com.Thanks and enjoy! If you like the scroll bar and want to know how I made it I have posted a detailed tutorial on my blog: http://biochimistu.blogspot.com.Thanks and enjoy! If you like the scroll bar and want to know how I made it I have posted a detailed tutorial on my blog: http://biochimistu.blogspot.com.Thanks and enjoy! If you like the scroll bar and want to know how I made it I have posted a detailed tutorial on my blog: http://biochimistu.blogspot.com.Thanks and enjoy! If you like the scroll bar and want to know how I made it I have posted a detailed tutorial on my blog: http://biochimistu.blogspot.com.Thanks and enjoy!";
2. myTfield.text = myMessage;
3. myTfield.wordWrap = true;
4. var minScroll:Number = scrollHandler_mc.y;
5. var maxScroll:Number = minScroll+(track_mc.height -scrollHandler_mc.height);
6. var scrollInterval:Number = maxScroll - minScroll;
7. var draging:Boolean = false;
8. var bounds:Rectangle = new Rectangle(scrollHandler_mc.x,scrollHandler_mc.y,0,track_mc.height - scrollHandler_mc.height);
9. scrollHandler_mc.addEventListener(MouseEvent.MOUSE_DOWN,beginDrag);
10. stage.addEventListener(MouseEvent.MOUSE_UP,endDrag);
11. function beginDrag(event:MouseEvent):void
{
scrollHandler_mc.startDrag(false,bounds);
draging = true;
scrollHandler_mc.addEventListener(Event.ENTER_FRAME,checkingProgress);
}
12. function endDrag(event:MouseEvent):void
{
scrollHandler_mc.stopDrag();
draging = false;
}
13. function checkingProgress(event:Event):void
{
var moveDrag:Number = scrollHandler_mc.y - minScroll;
var procentDrag = moveDrag / scrollInterval;
if (draging)
{
myTfield.scrollV = procentDrag * myTfield.maxScrollV;
}
} Remove the numbers before every line of code. Hit Ctrl + Enter to test your movie.
Should work fine.
Next we will look at the code.
In line 1 we declared a variable that hold’s the text that will be displayed by our Text Fiels.
In line 2 we assign that variable to our text field and set the wordWrap property to true.
After we declared a variable for our minScroll this hold the minimum positions for our scrollHandler_mc.
The maxScroll variable holds the maximum positions of scrollHandler_mc.
scrollInterval variable holds the interval in witch our scrollHandler_mc can move.
In lines 9 and 10 we add two eventListeners ,these will keep track of Mouse_DOWN and Mouse_UP events.
Function beginDrag() handle’s the Mouse_DOWN event. In this function we enabled our scrollHandler_mc, you can drag it and set the boundaries for it.We register another listener(Event.ENTER_FRAME) that will update the scroll property of our myTfield base on how much we drag the scrollHandler_mc.This behavior is handle by the function checkingProgress().
The function endDrag() disable the drag property of scrollHandler_mc.

I hope that I was clear enough.
If you have questions, suggestions, doubts about the tutorial don’t hesitate to comment.I will see you on next tutorial.

You can download the source file from here:Custom Scrollbar.