Custom Dynamic AS3 Flash Scrollbar

Dynamic AS3 Scrollbar. Feel free to leave a comment below.

1. There are two elements to this scrollbar inside of a parent move clip "barMC".
Inside of barMC we add a track for the slider..trackMC and a handle..handleMC. It is very important to have handleMC and trackMC inside of a movie clip, so the y reset on the handleMC is at the 0 point of the parent movie clip.
2. Now, create a dynamic text field with multiple lines. It called mine info_txt. I is the same instance name on
every slide, but has different text in each slide.
3. When we enter each new frame, we want the slider to reset to the top, and the text as well.
Also, if the text box isn't large enough to scroll, we want to hide the scrollbar. We add this code to the navigation of the slides. I put the code in the advance and rewind functions so it is ran each time you progress or go back in the slideshow.

Here is the as3 file for download:
Click Here

next_btnpg2.addEventListener(MouseEvent.CLICK, advance);
prev_btnpg2.addEventListener(MouseEvent.CLICK, rewind);
 
function advance(e:MouseEvent):void
{
	nextFrame();
	        if (info_txt.scrollV > 0) {
			barMC.handleMC.y = 0;
			info_txt.scrollV = 0;
	        }
		if (info_txt.maxScrollV < 2){
			barMC.visible = false;
	        } else {
			barMC.visible = true;
	        }
}//end advance
function rewind(e:MouseEvent):void
{
	prevFrame();
		if (info_txt.scrollV > 0) {
			barMC.handleMC.y = 0;
			info_txt.scrollV = 0;
	        }
		if (info_txt.maxScrollV < 2){
			barMC.visible = false;
	        } else {
			barMC.visible = true;
	        }
}//end rewind

4. So I wanted the scrollbar handle to set its height dynamically based on the maxscroll of the text field. We need some variables, and some event listeners. Then define the functions. Here it is all put together
Read the comments to see what everything does.

//SCROLLBAR CODE
stage.addEventListener (Event.ENTER_FRAME, sethandle)
//set the height of the handle dynamically on enter frame
	function sethandle (e:Event):void{
		var pc:Number = barMC.trackMC.height / info_txt.maxScrollV; 
//get the ratio of the track to the max scroll of the textbox.
		barMC.handleMC.height = pc + 40; 
//assign the ratio to the height of the handle + 40 pixels, to give it a decent initial size. 
}
 
barMC.handleMC.addEventListener (MouseEvent.MOUSE_DOWN, startScroll);
//function to start scroll on mouse_down for the handle
stage.addEventListener (MouseEvent.MOUSE_UP, stopScroll);
//we want to add the mouse up stop scroll to the stage, so you can move the mouse off the handle
//while scrolling and when your release somewhere else, have it stop scrolling.
 
var yOffset:Number; 
//as we are using the mouse position to move the handle, we need to compensate for the offset
//amount of the handle to the mouse so the handle doesn't snap to the mouse when we click down.
//this var gets assigned in a later function
 
	function startScroll (e:MouseEvent):void {
//we make the startScroll function here and within it, we put the even listener for the MOUSE_MOVE
		stage.addEventListener (MouseEvent.MOUSE_MOVE, handlemove);
//now an event listener within the event listener for starting the startscroll. Within this, we define the 
//function that actually moves the handle along with the mouse.
		yOffset = mouseY - barMC.handleMC.y; 
//here we calculate the offset variable we made earlier. It is the Y of the mouse - the Y of the handle so the
//handle doesn't snap to the position of where you click with the mouse.
		e.updateAfterEvent(); 
//this is very important! we don't want to rely on the frame rate of the document to refresh our scrolling
//using updateAfterEvent makes it refresh every instance it is moved, making it run very smooth.
}//close startScroll function
 
	function stopScroll (e:MouseEvent):void {
		stage.removeEventListener (MouseEvent.MOUSE_MOVE, handlemove);
//this is simple, to stop scrolling, we simply remove the handlemove listener within the startScroll function
} 
 
	function handlemove (e:MouseEvent):void { 
//this function moves the handle and the text...along with setting the constraints.
	    var yMin:Number = 0;
//in this variable, we set the minimum constraint for the handle. the 0 of the parent movie clip.
	    var yMax:Number = barMC.trackMC.height - barMC.handleMC.height;
//in this variable, we set the max of the handle scroll down Y position. This is within this function so it 
//can be set after the new height of the handle is set in the previous function. So the constraint changes
//based on the changing height of the handle.
		info_txt.scrollV = (((barMC.handleMC.y - yMin)/yMax)*info_txt.maxScrollV);
//this scrolls the text
		barMC.handleMC.y = mouseY - yOffset; 
//Here, when scrolling is activated, and handle move...we then set the handle Y to the mouse Y - the
//Y offset we made earlier to prevent snapping.
		if (barMC.handleMC.y <= yMin){
				barMC.handleMC.y = yMin;} 
		if (barMC.handleMC.y >= yMax){
				barMC.handleMC.y = yMax;}
// these if statements enforce our constraints.
		e.updateAfterEvent();
//once again, very important. This makes the scrolling run smooth, and the text scrolling.
}// end handlemove

Back to Tutorials