AS3 resizeable dynamic scroll bar SeniorCreative | Independent Freelance Multimedia Developer

Contact | ABN 76 112 803 072

Folio currently contains 131 items

Recent Work Top Ten Views This Month Contact us

Viewed 6 times this month

Actionscript 3.0 - LEVEL ADVANCED
AS3 resizeable dynamic scroll bar	Last edited 15TH DEC, 2010
Super lightweight ScrollBar class! This is all rendered with drawingAPI methods and is resizable vertically.

package com.senior.ui
 {
 
 
 import flash.display.*;
 import flash.text.*;
 import flash.events.*;
 
 import com.greensock.*;
 import com.greensock.easing.*;
 
 public class ScrollBarLite extends MovieClip
 {
 
 public var BTN_HEIGHT:Number  = 28;
 public var ELEMENT_VERTICAL_PADDING:Number  = 4;
 public var HANDLE_HEIGHT:Number = 32;
 public var TINT_SPEED:Number = 0.5;
 public var HANDLE_MOVEINC:Number = 1.25;
 public var HANDLE_MAXSPEED:Number = 15;
 public var ARROW_RADIUS:Number = 7;
 public var ARROW_LINEWIDTH:Number = 3;
 
 public var dragging:Boolean  = false;
 public var upPressed:Boolean  = false;
 public var dnPressed:Boolean  = false;
 public var moveInc:Number;
 
 public var btnUp:Sprite;
 public var btnDown:Sprite;
 public var track:Sprite;
 public var trackHeight:Number;
 public var handle:Sprite;
 
 public var scrollBtnArrowColor:uint;
 public var scrollHandleColor:uint;
 public var scrollBtnArrowTintColor:uint;
 public var scrollHandleTintColor:uint;
 
 public var w:Number;
 public var h:Number;
 public var myParent:MovieClip;
 
 
 // **********************
 //
 public var scrollPercentage:Number  = 0; // This gets updated constantly on enter frame
 //
 // **********************
 
 
 function ScrollBarLite (_myParent, _w:Number, _h:Number, _scrollBtnBGColor:uint, _scrollBtnArrowColor:uint, _scrollBtnArrowTintColor:uint, _scrollTrackColor:uint, _scrollHandleColor:uint,  _scrollHandleTintColor:uint ) 
 {
 
 
 myParent  = _myParent;
 w  = _w;
 h = _h;
 
 createUIElements(_scrollBtnBGColor, _scrollBtnArrowColor, _scrollBtnArrowTintColor, _scrollTrackColor, _scrollHandleColor,  _scrollHandleTintColor);
 
 this.mouseChildren  = true;
 this.buttonMode  = true;
 
 this.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
 this.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
 this.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
 this.addEventListener(Event.ENTER_FRAME, frameHandler);
 
 
 }
 
 public function createUIElements(_scrollBtnBGColor:uint, _scrollBtnArrowColor:uint, _scrollBtnArrowTintColor:uint, _scrollTrackColor:uint, _scrollHandleColor:uint,  _scrollHandleTintColor:uint) : void
 {
 
 
 scrollBtnArrowColor  = _scrollBtnArrowColor;
 scrollBtnArrowTintColor = _scrollBtnArrowTintColor;
 scrollHandleColor = _scrollHandleColor;
 scrollHandleTintColor = _scrollHandleTintColor;
 
 var backer:Sprite;
 var scrollarrow:Sprite;
 
 // create up button
 
 btnUp  = new Sprite();
 backer  = new Sprite();
 backer.graphics.beginFill(_scrollBtnBGColor, 1);
 backer.graphics.drawRect(0, 0, w, BTN_HEIGHT);
 backer.graphics.endFill();
 btnUp.addChild(backer);
 
 scrollarrow  = new Sprite();
 drawPolygon(scrollarrow, ARROW_RADIUS, 3 , w/2 ,BTN_HEIGHT/2 , _scrollBtnArrowColor, ARROW_LINEWIDTH,0);
 btnUp.addChild(scrollarrow);
 
 
 // calc track height... create track
 
 setTrackHeight();
 track  = new Sprite();
 backer  = new Sprite();
 backer.graphics.beginFill(_scrollTrackColor, 1);
 backer.graphics.drawRect(0, 0, w, trackHeight);
 backer.graphics.endFill();
 track.addChild(backer);
 
 
 // create down button
 
 btnDown  = new Sprite();
 backer  = new Sprite();
 backer.graphics.beginFill(_scrollBtnBGColor, 1);
 backer.graphics.drawRect(0, 0, w, BTN_HEIGHT);
 backer.graphics.endFill();
 btnDown.addChild(backer);
 
 scrollarrow  = new Sprite();
 drawPolygon(scrollarrow, ARROW_RADIUS, 3 , w/2,BTN_HEIGHT/2 , _scrollBtnArrowColor, ARROW_LINEWIDTH,180);
 btnDown.addChild(scrollarrow);
 
 
 
 // create handle...
 handle  = new Sprite();
 backer  = new Sprite();
 backer.graphics.beginFill(_scrollHandleColor, 1);
 backer.graphics.drawRect(0, 0, w, HANDLE_HEIGHT);
 backer.graphics.endFill();
 handle.addChild(backer);
 
 
 
 
 // arrange and add
 btnUp.x = 0;
 btnUp.y = 0;
 addChild(btnUp);
 
 track.x = 0;
 track.y = BTN_HEIGHT + ELEMENT_VERTICAL_PADDING;
 addChild(track);
 
 btnDown.x = 0;
 btnDown.y = BTN_HEIGHT + ELEMENT_VERTICAL_PADDING + trackHeight + ELEMENT_VERTICAL_PADDING;
 addChild(btnDown);
 
 handle.x = 0;
 handle.y = track.y;
 addChild(handle);
 
 setHeight(h);
 
 }
 
 // =====================================================
 //
 // EVENTS
 //
 //
 
 public function mouseOverHandler( e:MouseEvent ) : void
 {
 
 switch(e.target.parent)
 {
 
 
 case btnUp:
 
 TweenLite.to(btnUp.getChildAt(1) , TINT_SPEED, {tint:scrollBtnArrowTintColor});
 
 break;
 
 case btnDown:
 
 TweenLite.to(btnDown.getChildAt(1) , TINT_SPEED, {tint:scrollBtnArrowTintColor});
 
 break;
 
 case track:
 break;
 
 case handle:
 
 TweenLite.to(handle , TINT_SPEED, {tint:scrollHandleTintColor});
 
 break;
 
 }
 
 }
 
 public function mouseOutHandler( e:MouseEvent ) : void
 {
 
 
 switch(e.target.parent)
 {
 
 
 case btnUp:
 
 TweenLite.to(btnUp.getChildAt(1) , TINT_SPEED, {tint:scrollBtnArrowColor});
 
 break;
 
 case btnDown:
 
 TweenLite.to(btnDown.getChildAt(1) , TINT_SPEED, {tint:scrollBtnArrowColor});
 
 break;
 
 case track:
 break;
 
 case handle:
 
 TweenLite.to(handle , TINT_SPEED, {tint:scrollHandleColor});
 
 break;
 
 }
 
 }
 
 public function mouseDownHandler( e:MouseEvent ) : void
 {
 
 //trace(e.currentTarget, e.target.parent, e.target.name);
 
 stage.addEventListener(MouseEvent.MOUSE_UP, stageMouseUp);
 
 switch(e.target.parent)
 {
 
 
 case btnUp:
 
 upPressed  = true;
 moveInc = -2;
 
 break;
 
 case btnDown:
 
 dnPressed  = true;
 moveInc = 2;
 
 break;
 
 case track:
 
 
 TweenLite.to(handle, 0.6, {ease:Quint.easeOut, y: Math.min(trackHeight, Math.max(HANDLE_HEIGHT, e.target.parent.mouseY + (HANDLE_HEIGHT/2))) });
 
 break;
 
 case handle:
 
 dragging = true;
 
 break;
 
 }
 
 }
 
 public function frameHandler(e:Event) : void
 {
 
 var handleY:Number;
 
 scrollPercentage  = (handle.y - (BTN_HEIGHT + ELEMENT_VERTICAL_PADDING)) / (trackHeight - ((BTN_HEIGHT + ELEMENT_VERTICAL_PADDING)));
 scrollPercentage  = Math.round(scrollPercentage * 100);
 
 if (dragging)
 {
 
 TweenLite.to(handle, 0.3, {y : Math.min(trackHeight, Math.max(HANDLE_HEIGHT, track.mouseY + (HANDLE_HEIGHT/2)))});
 
 }
 
 if (upPressed)
 {
 
 moveInc *= HANDLE_MOVEINC;
 moveInc = Math.max(HANDLE_MAXSPEED * -1, moveInc);
 
 handle.y += moveInc;
 
 handle.y = Math.max((BTN_HEIGHT + ELEMENT_VERTICAL_PADDING), handle.y);
 
 }
 
 if (dnPressed)
 {
 
 moveInc *= HANDLE_MOVEINC;
 moveInc = Math.min(HANDLE_MAXSPEED, moveInc);
 
 handle.y += moveInc;
 
 handle.y = Math.min(trackHeight, handle.y);
 
 }
 
 }
 
 public function stageMouseUp(e:Event) : void
 {
 
 dragging  = false;
 upPressed  = false;
 dnPressed  = false;
 moveInc = 0;
 
 }
 
 // =====================================================
 //
 //  SETTERS
 //
 // 
 
 public function setHeight (_h:Number) : void
 {
 
 h  = _h;
 
 setTrackHeight();
 
 track.getChildAt(0).height = trackHeight;
 
 btnDown.y = track.y + trackHeight + ELEMENT_VERTICAL_PADDING;
 
 TweenLite.to(handle, 0, {y : Math.min(trackHeight, handle.y)});
 
 }
 
 public function setTrackHeight () : void
 {
 
 trackHeight = h - (BTN_HEIGHT * 2) - (ELEMENT_VERTICAL_PADDING * 2);
 
 }
 
 public function setHandleHeight () : void
 {
 
 // Function to dynamically set the height of the handle depending on how much there is to scroll
 // Reserved for future development!
 
 }

public function setScrollPercentage ( _perc:Number) : void
{

scrollPercentage = _perc;
 
handle.y = (BTN_HEIGHT + ELEMENT_VERTICAL_PADDING) + ((trackHeight - ((BTN_HEIGHT + ELEMENT_VERTICAL_PADDING))) * _perc);

}

// *************************************
 // Polygon class (methods)                            
 // http://www.FlepStudio.org     
 // © Original Author: Filippo Lughi
 // modified and customised  by Steve Smith © SeniorCreative Dec 2010                                    
  
 private var points:Array;
 private var id:int;
 private var ratio:Number;
 private var top:Number;
 
 //METHODS
 public function drawPolygon(sprite:Sprite, radius:int,segments:int,centerX:Number,centerY:Number,tint:uint,line:int,rotating:Number):void
 {
 id = 0;
 points = new Array();
 ratio = 360/segments;
 top = centerY-radius;
 
 sprite.graphics.clear();
 sprite.graphics.beginFill(tint,1);
 sprite.graphics.lineStyle(line, tint, 1, true, LineScaleMode.NORMAL, CapsStyle.ROUND, JointStyle.ROUND);
 
 for(var i:int = rotating; i<=360+rotating ; i+=ratio)
 {
 
 var xx:Number = centerX+Math.sin(radians(i))*radius;
 var yy:Number = top+(radius-Math.cos(radians(i))*radius);
 
 points[id] = new Array(xx,yy);
 
 if (id == 0)
 {
 sprite.graphics.moveTo(points[id][0],points[id][1]);
 }
 else if(id >= 1) 
 {
 
 sprite.graphics.lineTo(points[id][0],points[id][1]);
 
 }
 
 id++;
 
 }
 
 //sprite.graphics.moveTo(points[id-1][0],points[id-1][1]);
 sprite.graphics.endFill();
 
 id = 0;
 
 }
 
 private function radians(n:Number):Number { return(Math.PI/180*n); }
 
 // *************************************
 
 
 }
 
 
 }