比系统自带的组件体积要小很多,而且支持进度条显示(在做播放器时,显示缓冲进度很有用哦),另外也支持三角形的音量调整显示
使用示例:
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;
}
}
}