AS3 Scrollbar Class
Here’s a generic ScrollBar class, which will take a movieclip and create a scrollbar out of it.
The class accepts 2 parameters, your source movieclip, and the callBack function which should be notified whenever the Scroller’s position has changed. It also features some external interface to change the position of the scroller from somewhere else in your code
Requirements:
- The source movieclip must contain movieclips titled: scrollKnob_mc and scrollTrack_mc
Example Usage:
var thumbScroller:Scrollbar = new Scrollbar(scroll_mc, onScroll);
function onScroll(scrollVal:Number){
trace(scrollVal);
}
Class
package com.shawnblais.utils {
import flash.display.Stage;
import flash.display.MovieClip;
import flash.events.*;
import flash.geom.Rectangle;
public class Scrollbar {
private var _source_mc:MovieClip;
private var _callbackFunction:Function;
private var _scroll_rect:Rectangle;
private var _upper_limit:Number;
private var _range:Number;
public var mouseDown:Boolean = false;
public var scrollKnob_mc:MovieClip;
public var scrollTrack_mc:MovieClip;
public function Scrollbar(source_mc:MovieClip, callbackFunction:Function ) {
_source_mc = source_mc;
_callbackFunction = callbackFunction;
scrollKnob_mc = _source_mc.scrollKnob_mc;
scrollKnob_mc.buttonMode = true;
scrollKnob_mc.mouseChildren = false;
scrollTrack_mc = _source_mc.scrollTrack_mc;
scrollTrack_mc.buttonMode = true;
scrollTrack_mc.mouseChildren = false;
scrollTrack_mc.addEventListener( MouseEvent.CLICK, onTrackClick );
scrollKnob_mc.addEventListener( MouseEvent.MOUSE_DOWN, onDragClick );
setLimits();
}
public function setPosition(percentScrolled){
if(percentScrolled >= 0 && percentScrolled <= 1)
scrollKnob_mc.x = _range*percentScrolled;
}
private function setLimits():void {
_scroll_rect = new Rectangle( scrollTrack_mc.x, scrollTrack_mc.y, scrollTrack_mc.width - scrollKnob_mc.width, 0);
_upper_limit = scrollTrack_mc.x;
_range = scrollTrack_mc.width - scrollKnob_mc.width;
}
private function onDragClick( event:MouseEvent ):void {
scrollKnob_mc.stage.addEventListener( MouseEvent.MOUSE_UP, onDragRelease, false, 0, true );
scrollKnob_mc.startDrag( false, _scroll_rect );
scrollKnob_mc.addEventListener( Event.ENTER_FRAME, onDrag );
mouseDown = true;
}
private function onDragRelease( event:MouseEvent ):void {
scrollKnob_mc.removeEventListener( Event.ENTER_FRAME, onDrag );
scrollKnob_mc.stage.removeEventListener( MouseEvent.MOUSE_UP, onDragRelease );
scrollKnob_mc.stopDrag();
mouseDown = false;
}
private function onTrackClick( event:MouseEvent ):void {
trace( "Click track" );
}
private function onDrag( event:Event ):void {
var percentScrolled = ( scrollKnob_mc.x - scrollTrack_mc.x ) / _range;
_callbackFunction( percentScrolled );
}
}
}
[...] Click here for more info… [...]
Scrollbar Class (AS3) at Shawnblais.com v2
19 Aug 09 at 12:54 pm
Looks like from the setLimits function that this only does horizontal scrolling?
Also, this just creates scrollbars, not the functionality, correct?
midnit
17 Nov 09 at 9:14 am
Ya just hz scrolling, but it would be pretty trivial to add in vertical, or you could just rotate your source clip 90degrees
It doesn’t handle the scrolling, because it’s designed to be highly re-usable. It simply dispatches the amount scrolled, and you can add a listener to do whatever you want with that value.
This way it’s a reusable class which can control an arbitrary value, slider bar, object position, size or whatever.
admin
17 Nov 09 at 9:20 am