发布一个轻量级的滑块控件
比系统自带的组件体积要小很多,而且支持进度条显示(在做播放器时,显示缓冲进度很有用哦),另外也支持三角形的音量调整显示
使用示例:
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; } } }
作者:菩提树下的杨过
出处:http://yjmyzz.cnblogs.com
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
出处:http://yjmyzz.cnblogs.com
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。