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

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

 

原作者：菩提树下的杨过
出处：http://yjmyzz.cnblogs.com 

 

使用示例：

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 
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

 

分类: 12.Flex/Flash/AS3.0

标签: simpleSlider, 滑块