Contact
| ABN 76 112 803 072
Folio currently contains
131
items
Products
SeniorStore e-shop
SeniorCMS content management
Digital Signage
Flash & AIR
Video + Broadcast Apps
AIR Apps
Flash Apps / Sites
AS3 Code
Games
Animations
E-cards
Websites
Flash Sites
Dynamic PHP Sites
E-Commerce Sites
Photography Sites
iPhone/iPad Friendly Sites
Games
Flash Games
Shockwave Games (Old)
Competitions
Animation
Flash Animations
Banners
E-cards
DVD Menus
DVD Showreels
Design
DVD Menus
DVD Showreels
Graphics
Experimental
Code
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); } // ************************************* } }