Create A Custom Scrollbar In AS3

May 14th 2008
One Comment
respond
trackback

This is a simple and quick tutorial for creating a custom scroll bar. We'll dynamically load in our text using an array in Actionscript then we'll connect a custom scrollbar. In the files below we have three Movie Clips on the stage, two hands and a square. The two hands will act as our pointers allowing us to gradually scroll up and down. The square will act as our slider allowing us to slide the content up or down as you would do with a normal scrollbar slider.

Here's What We Are Creating

Starter Download:

Finished Download:

Step 1 - Creating Our Text Fields

Open up the Starter File, go to the Actions Layer and press F9 to open up our Actions Panel. We need to create a Text Field and Format the text inside it, so we declare our variables for the Text Field and Text Format, and then give them some basic properties.

var myText:TextField = new TextField();
var myFormat:TextFormat = new TextFormat();

myFormat.font = "Arial";
myFormat.color = 0×333333;
myFormat.size = 24;

addChild(myText);
myText.text = "This is the Flash Essential custom scrollbar tutorial!!!This is the Flash Essential custom scrollbar tutorial!!!This is the Flash Essential custom scrollbar tutorial!!!This is the Flash Essential custom scrollbar tutorial!!!This is the Flash Essential custom scrollbar tutorial!!!This is the Flash Essential custom scrollbar tutorial!!!This is the Flash Essential custom scrollbar tutorial!!!This is the Flash Essential custom scrollbar tutorial!!!This is the Flash Essential custom scrollbar tutorial!!!This is the Flash Essential custom scrollbar tutorial!!!";
myText.setTextFormat(myFormat);
myText.wordWrap = true;
myText.multiline = true;
myText.setTextFormat(myFormat);
myText.x = 100;
myText.y = 100;
myText.width = 300;
myText.height = 200;

Step 2 - Adding Our Mouse Events

Now we add some Mouse Events to our movie clips on the stage. Inside the functions we give our myText text field a scrollV method which means it's scrolling vertically, we then add some math so it reduces the scroll value by one each time its clicked. We do the same for the scrollDown_mc except we use += which adds one to the scroll value every time it's clicked.

scrollUP_mc.addEventListener(MouseEvent.CLICK, upScroll);
function upScroll(event:MouseEvent):void
{
trace(myText.scrollV);
myText.scrollV -= 1;
}

scrollDown_mc.addEventListener(MouseEvent.CLICK, downScroll);

function downScroll(event:MouseEvent):void
{
trace(myText.scrollV);
myText.scrollV += 1;
}

Step 3 - Controlling The Slider

First we'll add our mouse events, you'll notice we add our dropSlider to the stage instead of our slider_mc. This is to stop it scrolling once you have clicked away from the scroll bar.

slider_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragSlider);
stage.addEventListener(MouseEvent.MOUSE_UP, dropSlider);

var bounds:Rectangle = new Rectangle(slider_mc.x, slider_mc.y,0,70);
var dragging:Boolean = false;
function dragSlider(event:MouseEvent):void
{
slider_mc.startDrag(false,bounds);
dragging = true;
}
function dropSlider(event:MouseEvent):void
{
slider_mc.stopDrag();
dragging = false;
}
function checkSlider(event:Event):void
{
//if(dragging){trace("scroll");}
myText.scrollV = Math.round ((slider_mc.y - bounds.y)* myText.maxScrollV/70)
}
stage.addEventListener(Event.ENTER_FRAME, checkSlider);
function textScrolled(event:Event):void
{
slider_mc.y = bounds.y + (myText.scrollV * 70/myText.maxScrollV);
}
myText.addEventListener(Event.SCROLL, textScrolled);

Conclusion

Custom scrollbars can be useful if you want a custom look to your site. If you have a grunge style site the last thing you want is the ordinary scroll bars showing up, so this gives you a chance to create your own. Hope it helps.

This post is tagged AS3, custom scrollbar, Flash CS3

Jobs

Flash Essential