Create a custom scroll bar in as3

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