AS3 HorizontalTrackBar ---- 水平摄量条

TrackBarButton：

package
{
	import flash.display.GradientType;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.filters.BitmapFilter;
	import flash.filters.BitmapFilterQuality;
	import flash.filters.ColorMatrixFilter;
	import flash.filters.DropShadowFilter;
	import flash.filters.GlowFilter;
	import flash.geom.Matrix;

	/**
	 * 摄量条按钮类
	 * @author Jave.Lin
	 */	
	public class TrackBarButton extends Control
	{
		private var _isDowned:Boolean=false;
		private var _isOnClickShake:Boolean=true;
		private var _brightFilter:ColorMatrixFilter;
		private var _glowFilter:GlowFilter;
		private var _dropShawFilter:DropShadowFilter;
		private var _filtersArr:Array=[];
		
		public override function set width(value:Number):void
		{
			if(width!=value)
			{
				_w=_h=value;
				
				refreshBackground();
			}
		}
		
		public override function set height(value:Number):void
		{
			if(height!=value)
			{
				_w=_h=value;
				
				refreshBackground();
			}
		}
		
		public function TrackBarButton()
		{
			super();
		}
		
		public function setWidthHeight($width:Number,$height:Number):void
		{
			_w=$width;
			_h=$height;
			
			refreshBackground();
		}
		
		protected override function initialize():void
		{
			_w=_h=10;
			
			var matrix:Array = new Array();
			//反色
//			matrix = matrix.concat([-1, 0, 0, -.1, 255]); // red
//			matrix = matrix.concat([0, -1, 0, -.1, 255]); // green
//			matrix = matrix.concat([0, 0, -1, -.1, 255]); // blue
//			matrix = matrix.concat([0, 0, 0, 1, 0]); // alpha
			matrix = matrix.concat([1, 0, 0, -.4, 0]); // red
			matrix = matrix.concat([0, 1, 0, -.4, 0]); // green
			matrix = matrix.concat([0, 0, 1, -.4, 0]); // blue
			matrix = matrix.concat([0, 0, 0, 1, 0]); // alpha
			
			_brightFilter=new ColorMatrixFilter(matrix);
			
			_glowFilter=new GlowFilter(0xffff00,.3,3,3,3);
			
			var color:Number = 0;
			var angle:Number = 45;
			var alpha:Number = 0.8;
			var blurX:Number = 3;
			var blurY:Number = 3;
			var distance:Number = 3;
			var strength:Number = 1;
			var inner:Boolean = false;
			var knockout:Boolean = false;
			var quality:Number = BitmapFilterQuality.HIGH;
			_dropShawFilter=new DropShadowFilter(distance,
				angle,
				color,
				alpha,
				blurX,
				blurY,
				strength,
				quality,
				inner,
				knockout);

			_filtersArr.push(_dropShawFilter);
			
			this.filters=_filtersArr;
			
			if(stage)
			{
				onAddedToStageHandler();
			}
			else
			{
				addEventListener(Event.ADDED_TO_STAGE,onAddedToStageHandler);
			}
		}
		
		private function addFilter(filter:BitmapFilter):void
		{
			var index:int=_filtersArr.indexOf(filter);
			if(index==-1)_filtersArr.push(filter);
			else 
			{
				_filtersArr[index]=filter;
			}
			this.filters=_filtersArr;
		}
		
		private function removeFilter(filter:BitmapFilter):void
		{
			var index:int=_filtersArr.indexOf(filter);
			if(index!=-1)_filtersArr.splice(index,1);
			this.filters=_filtersArr;
		}
		
		private function onAddedToStageHandler(e:Event=null):void
		{
			removeEventListener(Event.ADDED_TO_STAGE,onAddedToStageHandler);
			
			addEventListener(Event.REMOVED_FROM_STAGE,onRemovedFromStageHandler);
			
			addEventListener(MouseEvent.MOUSE_OVER,onMouseOverHandler);
			addEventListener(MouseEvent.MOUSE_OUT,onMouseOutHandler);
			//默认抖动的
			if(_isOnClickShake)
			{
				addEventListener(MouseEvent.MOUSE_DOWN,onMouseDownHandler);
				addEventListener(MouseEvent.MOUSE_UP,onMouseUpHandler);
			}
		}
		
		private function onMouseUpHandler(e:MouseEvent=null):void
		{
			if(_isDowned)
			{
				_isDowned=false;
				removeFilter(_brightFilter);
			}
		}
		
		private function onMouseDownHandler(e:MouseEvent):void
		{
			if(!_isDowned)
			{
				_isDowned=true;
				addFilter(_brightFilter);
			}
		}
		
		public function onMouseOutHandler(e:MouseEvent):void
		{
			removeEventListener(MouseEvent.MOUSE_OUT,onMouseOutHandler);
			addEventListener(MouseEvent.MOUSE_OVER,onMouseOverHandler);
			
			onMouseUpHandler();
			removeFilter(_glowFilter);
		}
		
		public function onMouseOverHandler(e:MouseEvent):void
		{
			removeEventListener(MouseEvent.MOUSE_OVER,onMouseOverHandler);
			addEventListener(MouseEvent.MOUSE_OUT,onMouseOutHandler);
			addFilter(_glowFilter);
		}
		
		private function onRemovedFromStageHandler(e:Event):void
		{
			removeEventListener(Event.REMOVED_FROM_STAGE,onRemovedFromStageHandler);
			removeEventListener(MouseEvent.MOUSE_OVER,onMouseOverHandler);
			removeEventListener(MouseEvent.MOUSE_OUT,onMouseOutHandler);
			removeEventListener(MouseEvent.MOUSE_DOWN,onMouseDownHandler);
			removeEventListener(MouseEvent.MOUSE_UP,onMouseUpHandler);
		}
		
		protected override function refreshBackground():void
		{
			//绘制一个圆即可
			this.graphics.clear();

			var halfW:Number=_w/2;
			var halfH:Number=_h/2;
			
			this.graphics.lineStyle(1,0x224422,.8);
			var times:Number=4;
			
//			this.graphics.moveTo(halfW,0);
//
//			var perAngle:Number=(Math.PI*2)/180;
//			for (var i:int = 0; i < 180; i++) 
//			{
//				this.graphics.lineTo(Math.cos(i*perAngle)*halfW,Math.sin(i*perAngle)*halfH); 
//			}
			
//			this.graphics.beginFill(0xaaaaa);
//			this.graphics.drawCircle(0,0,halfW);
//			this.graphics.endFill();
			
			var m:Matrix=new Matrix();
			//渐变盒子的：大，小，角度，X位移，Y位移
			m.createGradientBox(_w*times,_h*times,0,-_w*1.1*times/2,-_h*1.1*times/2);
			
			this.graphics.beginGradientFill(GradientType.RADIAL,[0xffffff,0xffffff,0xaaffaa],[1,.8,.4],[0,15,63],m);
			this.graphics.drawCircle(0,0,halfW);
			this.graphics.endFill();
		}
	}
}

TrackBarRuler类：

package 
{
	/**
	 * 跟踪条的尺寸类
	 * @author Jave.Lin
	 */	
	public class TrackBarRuler extends Control
	{
		public override function set width(value:Number):void
		{
			if(width!=value)
			{
				_w=value;					
				
				refreshBackground();
			}
		}
		
		public override function set height(value:Number):void
		{
			if(height!=value)
			{
				_h=value;
				
				refreshBackground();
			}
		}
		
		public function TrackBarRuler()
		{
			super();
		}
		
		protected override function initialize():void
		{
			_w=100;
			_h=10;
			
			refreshBackground();
		}
		
		protected override function refreshBackground():void
		{
			this.graphics.clear();
			
			this.graphics.lineStyle(.5);
			this.graphics.beginFill(0,.4);
			this.graphics.drawRect(0,(height/2-height/8),width,height/4);
			this.graphics.endFill();
		}
	}
}

HorizontalTrackBar类：

package
{
	import controlsEvents.TrackBarEvent;
	
	import flash.events.Event;
	import flash.events.MouseEvent;
	

	/**
	 * 水平跟踪条类（我自己认为是：摄量条）
	 * @author Jave.Lin
	 */	
	public class HorizontalTrackBar extends Control
	{
		private var _isDrawBorder:Boolean=true;
		private var _isDrawBackground:Boolean=true;
		
		private var _trackBarRuler:TrackBarRuler;
		private var _trackBarButton:TrackBarButton;
		
		private var _curValue:int=0;//当前值
		private var _minValue:int=0;//最小值
		private var _maxValue:int=100;//最大值
		private var _increment:int=5;//每次操作的增/减量
		
		private var _minPos:Number;//滚动器最近的距离
		private var _maxPos:Number;//滚动器最远的距离
		
		private var _buttonW:Number=10;
		private var _buttonH:Number=10;
		
		public function get buttonW():Number
		{
			return _buttonW;
		}
		
		public function set buttonW(value:Number):void
		{
			if(_buttonW!=value)
			{
				_buttonW=value;
				
				refreshBackground();
				onLayout();
			}
		}
		
		public function get buttonH():Number
		{
			return _buttonH;
		}
		
		public function set buttonH(value:Number):void
		{
			if(_buttonH!=value)
			{
				_h=_buttonH=value;
				
				refreshBackground();
				onLayout();
			}
		}
		
		//是否绘制边框
		public function get isDrawBorder():Boolean
		{
			return _isDrawBorder;
		}
		
		public function set isDrawBorder(value:Boolean):void
		{
			if(_isDrawBorder!=value)
			{
				_isDrawBorder=value;
				
				refreshBackground();
			}
		}
		//是否绘制背景
		public function get isDrawBackground():Boolean
		{
			return _isDrawBackground;
		}
		
		public function set isDrawBackground(value:Boolean):void
		{
			if(_isDrawBackground!=value)
			{
				_isDrawBackground=value;
				
				refreshBackground();
			}
		}
		
		public function get maxValue():int
		{
			return _maxValue;
		}
		
		public function set maxValue(value:int):void
		{
			if(_maxValue!=value)
			{
				if(_minValue>value)throw new Error("HorizontalTrackBar maxValue less then minValue error! maxValue:"+value+" minValue:"+_minValue);
				_maxValue=value;
				if(curValue>_maxValue)curValue=_maxValue;
			}
		}
		
		public function get minValue():int
		{
			return _minValue;
		}
		
		public function set minValue(value:int):void
		{
			if(_minValue!=value)
			{
				if(value>_maxValue)throw new Error("HorizontalTrackBar minValue more then maxValue error! minValue:"+value+" maxValue:"+_maxValue);
				_minValue=value;
				if(curValue<_minValue)curValue=_minValue;
			}
		}
		
		public function get curValue():int
		{
			return _curValue;
		}
		
		public function set curValue(value:int):void
		{
			if(_curValue!=value)
			{
				var preValue:int=value;
				if(preValue<_minValue)preValue=_minValue;
				else if(preValue>_maxValue)preValue=_maxValue;
				if(preValue!=_curValue)
				{
					_curValue=preValue;
					if(_minValue==_maxValue)
					{
						_trackBarButton.x=fixAndSetRollPackerX(_minPos);
					}
					else
					{
						_trackBarButton.x=fixAndSetRollPackerX(_minPos+(_maxPos-_minPos)*((_curValue-_minValue)/(_maxValue-_minValue)));
					}
					
					dispatchEvent(new TrackBarEvent(TrackBarEvent.VALUE_CHANGED,_curValue));
				}
			}
		}
		
		public override function set width(value:Number):void
		{
			if(width!=value)
			{
				_w=value;					
				
				onLayout();
				refreshBackground();
			}
		}
		
		public override function set height(value:Number):void
		{
			if(height!=value)
			{
				_h=value;
				
				onLayout();
				refreshBackground();
			}
		}
		
		public function HorizontalTrackBar()
		{
			super();
		}
		
		private function fixAndSetRollPackerX(prePos:Number):Number
		{
			if(prePos<_minPos)prePos=_minPos;
			else if(prePos>_maxPos)prePos=_maxPos;
			return prePos;
		}
		
		private function xTransformToValueAndSetIt(prePos:Number):void
		{
			if(_trackBarButton.x==prePos)
			{
				return;
			}
			curValue=(prePos-_minPos)/(_maxPos-_minPos)*(_maxValue-_minValue)+_minValue;
		}
		
		private function onLayout():void
		{
			_trackBarButton.width=_buttonW;
			
			_trackBarRuler.width=_w;
			_trackBarButton.height=_trackBarRuler.height=_h;
			_trackBarRuler.width-=_trackBarButton.width;
			_trackBarRuler.x=(_w-_trackBarRuler.width)/2;
			_trackBarButton.y=_h/2;
			
			if(_trackBarButton.x<_trackBarRuler.x)_trackBarButton.x=_trackBarRuler.x;
			else if(_trackBarButton.x>_trackBarRuler.x+_trackBarRuler.width)_trackBarButton.x=_trackBarRuler.x+_trackBarRuler.width;
			
			_minPos=_trackBarRuler.x;
			_maxPos=_minPos+_trackBarRuler.width;
		}
		
		protected override function initialize():void
		{
			_w=100;
			_h=10;
			
			_trackBarRuler=new TrackBarRuler();
			addChild(_trackBarRuler);
			
			_trackBarButton=new TrackBarButton();
			addChild(_trackBarButton);
			
			if(stage)
			{
				onAddedToStageHandler();
			}
			else
			{
				addEventListener(Event.ADDED_TO_STAGE,onAddedToStageHandler);
			}
			
			onLayout();
		}
		
		private function onAddedToStageHandler(e:Event=null):void
		{
			removeEventListener(Event.ADDED_TO_STAGE,onAddedToStageHandler);
			
			addEventListener(Event.REMOVED_FROM_STAGE,onRemovedFromStageHandler);
			_trackBarButton.addEventListener(MouseEvent.MOUSE_DOWN,onRollPackerMouseDownHandler);
		}
		
		private function onRemovedFromStageHandler(e:Event):void
		{
			removeEventListener(Event.REMOVED_FROM_STAGE,onRemovedFromStageHandler);
			_trackBarButton.removeEventListener(MouseEvent.MOUSE_DOWN,onRollPackerMouseDownHandler);
			stage.removeEventListener(Event.ENTER_FRAME,onStageEnterFrameHandler);
			stage.removeEventListener(MouseEvent.MOUSE_UP,onStageMouseUpHandler);
		}
		
		//鼠标点下滚动器时，滚动器的备份坐标
		private var _mouseDownTrackBarButtonSourceX:Number=0;
		//鼠标点下滚动器时，相对舞台的鼠标x坐标
		private var _mouseDownStageMouseSourceX:Number=0;
		//鼠标点下滚动器时，相对舞台的上一次的鼠标x坐标
		private var _lastStageMouseX:Number=0;
		
		private function onStageEnterFrameHandler(e:Event):void
		{
			if(_lastStageMouseX!=stage.mouseX)
			{
				xTransformToValueAndSetIt(fixAndSetRollPackerX(_mouseDownTrackBarButtonSourceX+(stage.mouseX-_mouseDownStageMouseSourceX)));
				_lastStageMouseX=stage.mouseX;
			}
		}
		
		private function onStageMouseUpHandler(e:MouseEvent):void
		{
			stage.removeEventListener(Event.ENTER_FRAME,onStageEnterFrameHandler);
			_trackBarButton.addEventListener(MouseEvent.MOUSE_DOWN,onRollPackerMouseDownHandler);
		}
		
		private function onRollPackerMouseDownHandler(e:MouseEvent):void
		{
			_mouseDownTrackBarButtonSourceX=_trackBarButton.x;
			_mouseDownStageMouseSourceX=stage.mouseX;
			_trackBarButton.removeEventListener(MouseEvent.MOUSE_DOWN,onRollPackerMouseDownHandler);
			stage.addEventListener(Event.ENTER_FRAME,onStageEnterFrameHandler);
			stage.addEventListener(MouseEvent.MOUSE_UP,onStageMouseUpHandler);
		}
		
		protected override function refreshBackground():void
		{
			this.graphics.clear();
			if(_isDrawBackground)
			{
				this.graphics.beginFill(0x00ff00,.1);
				this.graphics.drawRect(0,0,width,height);
				this.graphics.endFill();
			}
			if(_isDrawBorder)
			{
				this.graphics.lineStyle(1,0,.5);
				this.graphics.moveTo(0,0);
				this.graphics.lineTo(width,0);
				this.graphics.lineTo(width,height);
				this.graphics.lineTo(0,height);
				this.graphics.lineTo(0,0);
			}
		}
	}
}

测试类：

package test
{
	import controlsEvents.TrackBarEvent;
	
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	public class HorizontalTrackBarTest extends Sprite
	{
		private var author:Label;
		private var trackBar:HorizontalTrackBar;
		private var lb:Label;
		private var bt:Button;
		
		public function HorizontalTrackBarTest()
		{
			super();
			
			stage.color=0xccccbb;
			stage.frameRate=60;
			stage.align=StageAlign.TOP_LEFT;
			stage.scaleMode=StageScaleMode.NO_SCALE;
			
			author=new Label();
			addChild(author);
			author.textColor=0x00ff00;
			author.fontSize=24;
			author.x=100;
			author.y=50;
			author.text="作者：Jave.Lin";
			
			trackBar=new HorizontalTrackBar();
			addChild(trackBar);
			
			trackBar.isDrawBorder=false;
			trackBar.x=100;
			trackBar.y=100;
			
			trackBar.maxValue=10000;
			trackBar.minValue=100;
			
			trackBar.addEventListener(TrackBarEvent.VALUE_CHANGED,onValueChangedHandler);
			
			lb=new Label();
			addChild(lb);
			
			lb.x=50;
			lb.y=120;
			
			lb.text="HorizontalTrackBar minValue:"+trackBar.minValue+" maxValue:"+trackBar.maxValue+" value:"+trackBar.curValue;
			
			bt=new Button();
			addChild(bt);
			
			bt.x=100;
			bt.y=200;
			
			bt.addEventListener(MouseEvent.CLICK,onClick);
		}
		
		private var dW:Number=5;
		private var dH:Number=5;
		
		private function onEnterFrame(e:Event):void
		{
			if(trackBar.width<30 dw="5;" else="" if="" trackbar="" width="">200)
			{
				dW=-5;
			}
			
			if(trackBar.height<20 dh="5;" else="" if="" trackbar="" height="">100)
			{
				dH=-5;
			}
			
			trackBar.setWidthHeight(trackBar.width+dW,trackBar.height+dH);
		}
		
		private function onClick(e:MouseEvent):void
		{
			if(trackBar.hasEventListener(Event.ENTER_FRAME))
			{
				trackBar.removeEventListener(Event.ENTER_FRAME,onEnterFrame);
			}
			else
			{
				trackBar.addEventListener(Event.ENTER_FRAME,onEnterFrame);
			}
		}
		
		private function onValueChangedHandler(e:TrackBarEvent):void
		{
			lb.text="HorizontalTrackBar minValue:"+trackBar.minValue+" maxValue:"+trackBar.maxValue+" value:"+e.value;
		}
	}
}
  
  
  
  

运行图片效果：