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

 1 package
 2 {
 3     import flash.display.SimpleButton;
 4     import flash.display.Sprite;
 5     import flash.events.Event;
 6     import flash.text.TextField;
 7  
 8     [SWF(width=150, height=130)]
 9     public class SliderTest extends Sprite
10     {
11         private var txt:TextField;
12         private var slider_Progress:SimpleSlider;
13  
14  
15         public function SliderTest()
16         {
17             var slider_V:SimpleSlider=new SimpleSlider(100, 200, 180);
18             addChild(slider_V);
19             slider_V.backWidth=0;
20             slider_V.backHeight=100;
21             slider_V.handleWidth=6;
22             slider_V.handleHeight=10;
23             slider_V.x=slider_V.y=10;
24             slider_V.value=120; //测试赋值
25  
26             var slider_H:SimpleSlider=new SimpleSlider(0.0, 1.0, 0.5);
27             addChild(slider_H);
28             slider_H.backWidth=100;
29             slider_H.backHeight=0;
30             slider_H.handleHeight=10;
31             slider_H.y=40;
32             slider_H.x=30;
33             slider_H.value=0.3; //测试赋值
34  
35              
36  
37             //带进度条的滑块
38             slider_Progress=new SimpleSlider(0, 100, 33, true);
39             addChild(slider_Progress);
40             slider_Progress.backWidth=100;
41             slider_Progress.backHeight=8;
42             slider_Progress.handleHeight=18;
43             slider_Progress.y=62;
44             slider_Progress.x=30;
45             slider_Progress.showProgress=false;
46             slider_Progress.showProgress=true;
47             slider_Progress.progressColor=0x666666;
48             slider_Progress.progressValue=0;
49             this.addEventListener(Event.ENTER_FRAME, onEnterFrame);
50  
51             //三角(音量)滑块
52             var slider_Sound:SimpleSlider=new SimpleSlider(0,1.0,0.5);
53             slider_Sound.showTri=true;
54             slider_Sound.backWidth=100;             
55             slider_Sound.backHeight = 18;
56             slider_Sound.handleHeight=slider_Sound.backHeight + 2;          
57             slider_Sound.y=90;
58             slider_Sound.x=30;          
59             addChild(slider_Sound);
60             slider_Sound.value=0.3;
61  
62             slider_V.addEventListener(Event.CHANGE, onChange);
63             slider_H.addEventListener(Event.CHANGE, onChange);
64             slider_Progress.addEventListener(Event.CHANGE, onChange);
65             slider_Sound.addEventListener(Event.CHANGE, onChange);
66              
67             txt=new TextField();
68             txt.text=slider_V.value.toString() + "，" + slider_H.value.toString() + "，" + slider_Progress.value.toString() + "，" + slider_Sound.value.toString();
69             txt.width=100;
70             txt.height=20;
71             txt.x=30;
72             txt.y=10;
73             txt.selectable=false;
74             addChild(txt);
75         }
76  
77         private function onEnterFrame(e:Event):void
78         {
79             this.slider_Progress.progressValue+=1;
80             if (this.slider_Progress.progressValue >= 100)
81             {
82                 this.slider_Progress.progressValue=0;
83             }
84         }
85  
86         private function onChange(e:Event):void
87         {
88             var s:SimpleSlider=e.currentTarget as SimpleSlider;
89             txt.text=s.value.toString();
90         }
91     }
92 }

  1 package
  2 {
  3     import flash.display.Sprite;
  4     import flash.events.Event;
  5     import flash.events.MouseEvent;
  6     import flash.geom.Rectangle;
  7      
  8     //轻量级滑块控件(by yjmyzz@126.com，http://yjmyzz.cnblogs.com/)
  9     public class SimpleSlider extends Sprite
 10     {
 11         private var _value:Number;
 12         private var _max:Number=100;
 13         private var _min:Number=0;
 14  
 15         private var _handle:Sprite;
 16         private var _back:Sprite;
 17         private var _progress:Sprite;
 18         private var _tri:Sprite;
 19  
 20         private var _backWidth:Number=0;
 21         private var _backHeight:Number=100;
 22         private var _backColor:uint=0xcccccc;
 23         private var _backBorderColor:uint=0x999999;
 24  
 25         private var _handleWidth:Number=6;
 26         private var _handleHeight:Number=20;
 27         private var _handleColor:uint=0x000000;
 28         private var _handleBorderColor:uint=0xcccccc;
 29  
 30         private var _progressColor:uint=0xffff99;
 31         private var _showProgress:Boolean=false;
 32         private var _progressValue:uint=0;  
 33          
 34         private var _showTri:Boolean=false;
 35         private var _triHighlightColor:uint = 0xffff99;
 36  
 37          
 38         public function SimpleSlider(min:Number=0, max:Number=100, value:Number=100, showProgress:Boolean=false)
 39         {
 40             _min=min;
 41             _max=max;
 42             this._showProgress=showProgress;
 43             _value=Math.min(Math.max(value, min), max);
 44             init();
 45         }
 46  
 47         private function init():void
 48         {
 49             _back=new Sprite();
 50             addChild(_back);
 51  
 52             this._progress=new Sprite();
 53             addChild(_progress);
 54  
 55             this._tri = new Sprite();
 56             addChild(_tri);
 57              
 58             _handle=new Sprite();
 59             _handle.buttonMode=true;
 60             addChild(_handle);
 61             _handle.addEventListener(MouseEvent.MOUSE_DOWN, MouseDownHandler);
 62              
 63  
 64             draw();
 65             updatePosition();
 66         }
 67  
 68         private function draw():void
 69         {
 70             drawBack();
 71             drawHandle();
 72             drawProgress();
 73             drawTriBack();
 74         }
 75          
 76         //画三角形背景
 77         private function drawTriBack():void
 78         {
 79             _tri.graphics.clear();
 80             if (this._showTri && _backWidth>_backHeight)
 81             {
 82                 _back.graphics.clear();
 83                 _progress.graphics.clear();
 84                  
 85                 //画整体背景
 86                 _tri.graphics.beginFill(_backColor);                
 87                 _tri.graphics.lineStyle(0, _backBorderColor);
 88                 _tri.graphics.moveTo(0,_backHeight);
 89                 _tri.graphics.lineTo(_backWidth,_backHeight);
 90                 _tri.graphics.lineTo(_backWidth,0);
 91                 _tri.graphics.lineTo(0,_backHeight);
 92                 _tri.graphics.endFill();
 93                 _tri.y = _handleHeight - _backHeight -1;
 94                  
 95                 //画高亮部分             
 96                 _tri.graphics.beginFill(this._triHighlightColor);               
 97                 _tri.graphics.moveTo(0,_backHeight);
 98                 _tri.graphics.lineTo(_handle.x,_backHeight);
 99                 _tri.graphics.lineTo(_handle.x,_backHeight - _handle.x*_backHeight/_backWidth);
100                 _tri.graphics.lineTo(0,_backHeight);
101                 _tri.graphics.endFill();            
102                  
103             }           
104         }
105          
106         private function drawBack():void
107         {
108             _back.graphics.clear();
109             _back.graphics.beginFill(_backColor);
110             _back.graphics.lineStyle(0, _backBorderColor);
111             _back.graphics.drawRect(0, 0, _backWidth, _backHeight);
112             _back.graphics.endFill();
113         }
114  
115         private function drawProgress():void
116         {
117             _progress.graphics.clear();
118             if (this._showProgress)
119             {
120                 _progress.graphics.beginFill(this._progressColor);
121                 _progress.graphics.drawRect(1, 1, _backWidth - 2, _backHeight - 2);
122                 _progress.graphics.endFill();
123             }
124  
125         }
126  
127         private function drawHandle():void
128         {
129             _handle.graphics.clear();
130             _handle.graphics.beginFill(_handleColor);
131             _handle.graphics.lineStyle(0, _handleBorderColor);
132             _handle.graphics.drawRect(0, 0, _handleWidth, _handleHeight);
133             _handle.graphics.endFill();
134             if (_backWidth > _backHeight)
135             {
136                 //水平                
137                 _handle.x=0;
138                 _back.y=_handleHeight / 2 - _backHeight / 2;
139                 if (this._showProgress)
140                 {
141                     this._progress.y=_back.y;
142                 }
143             }
144             else
145             {
146                 //垂直                
147                 _handle.x=_back.width / 2 - _handle.width / 2;
148                 _handle.y=0;
149             }
150         }
151  
152         private function updatePosition():void
153         {
154             var handleRange:Number=_backHeight - _handleHeight;
155             var valueRange:Number=_max - _min;
156             if (_backWidth > _backHeight)
157             {
158                 //水平
159                 handleRange=_backWidth - _handleWidth;
160                 _handle.x=((_value - _min) / valueRange) * handleRange;
161                 if (this._showTri){
162                     this.drawTriBack();
163                 }
164             }
165             else
166             {
167                 //垂直
168                 _handle.y=handleRange - ((_value - _min) / valueRange) * handleRange;
169             }
170         }
171  
172         private function updateValue():void
173         {
174             var handleRange:Number=_backHeight - _handleHeight;
175             var valueRange:Number=_max - _min;
176             if (_backWidth > _backHeight)
177             {
178                 //水平
179                 handleRange=_backWidth - _handleWidth;
180                 _value=(_handle.x / handleRange) * valueRange + _min;
181                 if (this._showTri){
182                     this.drawTriBack();
183                 }
184                 //trace(_handle.x);
185             }
186             else
187             {
188                 //垂直
189                 _value=(handleRange - _handle.y) / handleRange * valueRange + _min;
190             }
191             dispatchEvent(new Event(Event.CHANGE));
192         }
193  
194         private function MouseUpHandler(e:MouseEvent):void
195         {
196             stage.removeEventListener(MouseEvent.MOUSE_MOVE, MouseMoveHandler);
197             stage.removeEventListener(MouseEvent.MOUSE_UP, MouseUpHandler);
198             _handle.stopDrag();
199         }
200  
201         private function MouseDownHandler(e:MouseEvent):void
202         {
203             stage.addEventListener(MouseEvent.MOUSE_MOVE, MouseMoveHandler);
204             stage.addEventListener(MouseEvent.MOUSE_UP, MouseUpHandler);
205             //垂直滑块
206             if (_backWidth < _backHeight)
207             {
208                 _handle.startDrag(false, new Rectangle(_handle.x, 0, 0, _backHeight - _handleHeight));
209             }
210             else
211             {
212                 //水平滑块
213                 _handle.startDrag(false, new Rectangle(0, 0, _backWidth - _handleWidth, 0));
214             }
215         }
216  
217         private function MouseMoveHandler(e:MouseEvent):void
218         {
219             updateValue();
220         }
221  
222         public function move(x:Number, y:Number):void
223         {
224             this.x=x;
225             this.y=y;
226         }
227  
228         public function set backBorderColor(n:uint):void
229         {
230             _backBorderColor=n;
231             draw();
232         }
233  
234         public function get backBorderColor():uint
235         {
236             return _backBorderColor;
237         }
238  
239         public function set backColor(n:uint):void
240         {
241             _backColor=n;
242             draw();
243         }
244  
245         public function get backColor():uint
246         {
247             return _backColor;
248         }
249  
250         public function set handleBorderColor(n:uint):void
251         {
252             _handleBorderColor=n;
253             draw();
254         }
255  
256         public function get handleBorderColor():uint
257         {
258             return _handleBorderColor;
259         }
260  
261         public function set handleColor(n:uint):void
262         {
263             _handleColor=n;
264             draw();
265         }
266  
267         public function get handleColor():uint
268         {
269             return _handleColor;
270         }
271  
272  
273         //设置最大值
274         public function set max(n:Number):void
275         {
276             _max=n;
277             updatePosition();
278         }
279  
280         //获取最大值
281         public function get max():Number
282         {
283             return _max;
284         }
285  
286         //设置最小值
287         public function set min(n:Number):void
288         {
289             _min=n;
290             updatePosition();
291         }
292  
293         //获取最大值
294         public function get min():Number
295         {
296             return _min;
297         }
298  
299         //设置滑块当前值
300         public function set value(n:Number):void
301         {
302             _value=n;
303             _value=Math.min(_max, Math.max(_value, _min));
304             updatePosition();
305         }
306  
307         //获取滑块当前值
308         public function get value():Number
309         {
310             return _value;
311         }
312  
313         //设置滑块宽度
314         public function set handleWidth(n:Number):void
315         {
316             _handleWidth=n;
317             draw();
318         }
319  
320         //获取滑块宽度
321         public function get handleWidth():Number
322         {
323             return _handleWidth;
324         }
325  
326         //设置背景高度
327         public function set backHeight(n:Number):void
328         {
329             _backHeight=n;
330             draw();
331         }
332  
333         //获取背景高度
334         public function get backHeight():Number
335         {
336             return _backHeight;
337         }
338  
339         //设置滑块高度
340         public function set handleHeight(n:Number):void
341         {
342             _handleHeight=n;
343             draw();
344             updatePosition();
345         }
346  
347         //获取滑块高度
348         public function get handleHeight():Number
349         {
350             return _handleHeight;
351         }
352  
353         //设置背景宽度
354         public function set backWidth(n:Number):void
355         {
356             _backWidth=n;
357             draw();
358         }
359  
360         //设置背景宽度
361         public function get backWidth():Number
362         {
363             return _backWidth;
364         }
365          
366         public function set progressValue(v:uint):void
367         {
368             if (v >= 100)
369             {
370                 v=100;
371             }
372             else if (v <= 0)
373             {
374                 v=0;
375             }
376             this._progressValue=v;
377             if (this._showProgress)
378             {
379                 this._progress.width=(_backWidth - 2) * _progressValue / 100;
380             }
381         }
382          
383         public function get progressValue():uint
384         {
385             return this._progressValue;
386         }
387          
388         public function set progressColor(v:uint):void
389         {
390             this._progressColor=v;
391             drawProgress();
392         }
393          
394         public function get progressColor():uint
395         {
396             return this._progressColor;
397         }
398          
399         public function set showProgress(v:Boolean):void
400         {
401             this._showProgress=v;
402             drawProgress();
403         }
404          
405         public function get showProgress():Boolean
406         {
407             return this._showProgress;
408         }
409          
410         public function set showTri(v:Boolean):void
411         {
412             this._showTri=v;
413             this.drawTriBack();
414         }
415          
416         public function get showTri():Boolean
417         {
418             return this._showTri;
419         }
420  
421     }
422  
423 }