发布一个轻量级的滑块控件

时间:2022-04-23
本文章向大家介绍发布一个轻量级的滑块控件,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

比系统自带的组件体积要小很多,而且支持进度条显示(在做播放器时,显示缓冲进度很有用哦),另外也支持三角形的音量调整显示

使用示例:

package
{
	import flash.display.SimpleButton;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.text.TextField;

	[SWF(width=150, height=130)]
	public class SliderTest extends Sprite
	{
		private var txt:TextField;
		private var slider_Progress:SimpleSlider;


		public function SliderTest()
		{
			var slider_V:SimpleSlider=new SimpleSlider(100, 200, 180);
			addChild(slider_V);
			slider_V.backWidth=0;
			slider_V.backHeight=100;
			slider_V.handleWidth=6;
			slider_V.handleHeight=10;
			slider_V.x=slider_V.y=10;
			slider_V.value=120; //测试赋值

			var slider_H:SimpleSlider=new SimpleSlider(0.0, 1.0, 0.5);
			addChild(slider_H);
			slider_H.backWidth=100;
			slider_H.backHeight=0;
			slider_H.handleHeight=10;
			slider_H.y=40;
			slider_H.x=30;
			slider_H.value=0.3; //测试赋值

			

			//带进度条的滑块
			slider_Progress=new SimpleSlider(0, 100, 33, true);
			addChild(slider_Progress);
			slider_Progress.backWidth=100;
			slider_Progress.backHeight=8;
			slider_Progress.handleHeight=18;
			slider_Progress.y=62;
			slider_Progress.x=30;
			slider_Progress.showProgress=false;
			slider_Progress.showProgress=true;
			slider_Progress.progressColor=0x666666;
			slider_Progress.progressValue=0;
			this.addEventListener(Event.ENTER_FRAME, onEnterFrame);

			//三角(音量)滑块
			var slider_Sound:SimpleSlider=new SimpleSlider(0,1.0,0.5);
			slider_Sound.showTri=true;
			slider_Sound.backWidth=100;				
			slider_Sound.backHeight = 18;
			slider_Sound.handleHeight=slider_Sound.backHeight + 2;			
			slider_Sound.y=90;
			slider_Sound.x=30;			
			addChild(slider_Sound);
			slider_Sound.value=0.3;

			slider_V.addEventListener(Event.CHANGE, onChange);
			slider_H.addEventListener(Event.CHANGE, onChange);
			slider_Progress.addEventListener(Event.CHANGE, onChange);
			slider_Sound.addEventListener(Event.CHANGE, onChange);
			
			txt=new TextField();
			txt.text=slider_V.value.toString() + "," + slider_H.value.toString() + "," + slider_Progress.value.toString() + "," + slider_Sound.value.toString();
			txt.width=100;
			txt.height=20;
			txt.x=30;
			txt.y=10;
			txt.selectable=false;
			addChild(txt);
		}

		private function onEnterFrame(e:Event):void
		{
			this.slider_Progress.progressValue+=1;
			if (this.slider_Progress.progressValue >= 100)
			{
				this.slider_Progress.progressValue=0;
			}
		}

		private function onChange(e:Event):void
		{
			var s:SimpleSlider=e.currentTarget as SimpleSlider;
			txt.text=s.value.toString();
		}
	}
}

SimpleSlider.as

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Rectangle;
	
	//轻量级滑块控件(by yjmyzz@126.com,http://yjmyzz.cnblogs.com/)
	public class SimpleSlider extends Sprite
	{
		private var _value:Number;
		private var _max:Number=100;
		private var _min:Number=0;

		private var _handle:Sprite;
		private var _back:Sprite;
		private var _progress:Sprite;
		private var _tri:Sprite;

		private var _backWidth:Number=0;
		private var _backHeight:Number=100;
		private var _backColor:uint=0xcccccc;
		private var _backBorderColor:uint=0x999999;

		private var _handleWidth:Number=6;
		private var _handleHeight:Number=20;
		private var _handleColor:uint=0x000000;
		private var _handleBorderColor:uint=0xcccccc;

		private var _progressColor:uint=0xffff99;
		private var _showProgress:Boolean=false;
		private var _progressValue:uint=0;	
		
		private var _showTri:Boolean=false;
		private var _triHighlightColor:uint = 0xffff99;

		
		public function SimpleSlider(min:Number=0, max:Number=100, value:Number=100, showProgress:Boolean=false)
		{
			_min=min;
			_max=max;
			this._showProgress=showProgress;
			_value=Math.min(Math.max(value, min), max);
			init();
		}

		private function init():void
		{
			_back=new Sprite();
			addChild(_back);

			this._progress=new Sprite();
			addChild(_progress);

			this._tri = new Sprite();
			addChild(_tri);
			
			_handle=new Sprite();
			_handle.buttonMode=true;
			addChild(_handle);
			_handle.addEventListener(MouseEvent.MOUSE_DOWN, MouseDownHandler);
			

			draw();
			updatePosition();
		}

		private function draw():void
		{
			drawBack();
			drawHandle();
			drawProgress();
			drawTriBack();
		}
		
		//画三角形背景
		private function drawTriBack():void
		{
			_tri.graphics.clear();
			if (this._showTri && _backWidth>_backHeight)
			{
				_back.graphics.clear();
				_progress.graphics.clear();
				
				//画整体背景
				_tri.graphics.beginFill(_backColor);				
				_tri.graphics.lineStyle(0, _backBorderColor);
				_tri.graphics.moveTo(0,_backHeight);
				_tri.graphics.lineTo(_backWidth,_backHeight);
				_tri.graphics.lineTo(_backWidth,0);
				_tri.graphics.lineTo(0,_backHeight);
				_tri.graphics.endFill();
				_tri.y = _handleHeight - _backHeight -1;
				
				//画高亮部分				
				_tri.graphics.beginFill(this._triHighlightColor);				
				_tri.graphics.moveTo(0,_backHeight);
				_tri.graphics.lineTo(_handle.x,_backHeight);
				_tri.graphics.lineTo(_handle.x,_backHeight - _handle.x*_backHeight/_backWidth);
				_tri.graphics.lineTo(0,_backHeight);
				_tri.graphics.endFill();			
				
			}			
		}
		
		private function drawBack():void
		{
			_back.graphics.clear();
			_back.graphics.beginFill(_backColor);
			_back.graphics.lineStyle(0, _backBorderColor);
			_back.graphics.drawRect(0, 0, _backWidth, _backHeight);
			_back.graphics.endFill();
		}

		private function drawProgress():void
		{
			_progress.graphics.clear();
			if (this._showProgress)
			{
				_progress.graphics.beginFill(this._progressColor);
				_progress.graphics.drawRect(1, 1, _backWidth - 2, _backHeight - 2);
				_progress.graphics.endFill();
			}

		}

		private function drawHandle():void
		{
			_handle.graphics.clear();
			_handle.graphics.beginFill(_handleColor);
			_handle.graphics.lineStyle(0, _handleBorderColor);
			_handle.graphics.drawRect(0, 0, _handleWidth, _handleHeight);
			_handle.graphics.endFill();
			if (_backWidth > _backHeight)
			{
				//水平				
				_handle.x=0;
				_back.y=_handleHeight / 2 - _backHeight / 2;
				if (this._showProgress)
				{
					this._progress.y=_back.y;
				}
			}
			else
			{
				//垂直				
				_handle.x=_back.width / 2 - _handle.width / 2;
				_handle.y=0;
			}
		}

		private function updatePosition():void
		{
			var handleRange:Number=_backHeight - _handleHeight;
			var valueRange:Number=_max - _min;
			if (_backWidth > _backHeight)
			{
				//水平
				handleRange=_backWidth - _handleWidth;
				_handle.x=((_value - _min) / valueRange) * handleRange;
				if (this._showTri){
					this.drawTriBack();
				}
			}
			else
			{
				//垂直
				_handle.y=handleRange - ((_value - _min) / valueRange) * handleRange;
			}
		}

		private function updateValue():void
		{
			var handleRange:Number=_backHeight - _handleHeight;
			var valueRange:Number=_max - _min;
			if (_backWidth > _backHeight)
			{
				//水平
				handleRange=_backWidth - _handleWidth;
				_value=(_handle.x / handleRange) * valueRange + _min;
				if (this._showTri){
					this.drawTriBack();
				}
				//trace(_handle.x);
			}
			else
			{
				//垂直
				_value=(handleRange - _handle.y) / handleRange * valueRange + _min;
			}
			dispatchEvent(new Event(Event.CHANGE));
		}

		private function MouseUpHandler(e:MouseEvent):void
		{
			stage.removeEventListener(MouseEvent.MOUSE_MOVE, MouseMoveHandler);
			stage.removeEventListener(MouseEvent.MOUSE_UP, MouseUpHandler);
			_handle.stopDrag();
		}

		private function MouseDownHandler(e:MouseEvent):void
		{
			stage.addEventListener(MouseEvent.MOUSE_MOVE, MouseMoveHandler);
			stage.addEventListener(MouseEvent.MOUSE_UP, MouseUpHandler);
			//垂直滑块
			if (_backWidth < _backHeight)
			{
				_handle.startDrag(false, new Rectangle(_handle.x, 0, 0, _backHeight - _handleHeight));
			}
			else
			{
				//水平滑块
				_handle.startDrag(false, new Rectangle(0, 0, _backWidth - _handleWidth, 0));
			}
		}

		private function MouseMoveHandler(e:MouseEvent):void
		{
			updateValue();
		}

		public function move(x:Number, y:Number):void
		{
			this.x=x;
			this.y=y;
		}

		public function set backBorderColor(n:uint):void
		{
			_backBorderColor=n;
			draw();
		}

		public function get backBorderColor():uint
		{
			return _backBorderColor;
		}

		public function set backColor(n:uint):void
		{
			_backColor=n;
			draw();
		}

		public function get backColor():uint
		{
			return _backColor;
		}

		public function set handleBorderColor(n:uint):void
		{
			_handleBorderColor=n;
			draw();
		}

		public function get handleBorderColor():uint
		{
			return _handleBorderColor;
		}

		public function set handleColor(n:uint):void
		{
			_handleColor=n;
			draw();
		}

		public function get handleColor():uint
		{
			return _handleColor;
		}


		//设置最大值
		public function set max(n:Number):void
		{
			_max=n;
			updatePosition();
		}

		//获取最大值
		public function get max():Number
		{
			return _max;
		}

		//设置最小值
		public function set min(n:Number):void
		{
			_min=n;
			updatePosition();
		}

		//获取最大值
		public function get min():Number
		{
			return _min;
		}

		//设置滑块当前值
		public function set value(n:Number):void
		{
			_value=n;
			_value=Math.min(_max, Math.max(_value, _min));
			updatePosition();
		}

		//获取滑块当前值
		public function get value():Number
		{
			return _value;
		}

		//设置滑块宽度
		public function set handleWidth(n:Number):void
		{
			_handleWidth=n;
			draw();
		}

		//获取滑块宽度
		public function get handleWidth():Number
		{
			return _handleWidth;
		}

		//设置背景高度
		public function set backHeight(n:Number):void
		{
			_backHeight=n;
			draw();
		}

		//获取背景高度
		public function get backHeight():Number
		{
			return _backHeight;
		}

		//设置滑块高度
		public function set handleHeight(n:Number):void
		{
			_handleHeight=n;
			draw();
			updatePosition();
		}

		//获取滑块高度
		public function get handleHeight():Number
		{
			return _handleHeight;
		}

		//设置背景宽度
		public function set backWidth(n:Number):void
		{
			_backWidth=n;
			draw();
		}

		//设置背景宽度
		public function get backWidth():Number
		{
			return _backWidth;
		}
		
		public function set progressValue(v:uint):void
		{
			if (v >= 100)
			{
				v=100;
			}
			else if (v <= 0)
			{
				v=0;
			}
			this._progressValue=v;
			if (this._showProgress)
			{
				this._progress.width=(_backWidth - 2) * _progressValue / 100;
			}
		}
		
		public function get progressValue():uint
		{
			return this._progressValue;
		}
		
		public function set progressColor(v:uint):void
		{
			this._progressColor=v;
			drawProgress();
		}
		
		public function get progressColor():uint
		{
			return this._progressColor;
		}
		
		public function set showProgress(v:Boolean):void
		{
			this._showProgress=v;
			drawProgress();
		}
		
		public function get showProgress():Boolean
		{
			return this._showProgress;
		}
		
		public function set showTri(v:Boolean):void
		{
			this._showTri=v;
			this.drawTriBack();
		}
		
		public function get showTri():Boolean
		{
			return this._showTri;
		}

	}

}