比系统自带的组件体积要小很多，而且支持进度条显示(在做播放器时，显示缓冲进度很有用哦），另外也支持三角形的音量调整显示
原作者：菩提树下的杨过
出处：http://yjmyzz.cnblogs.com
使用示例：
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 }
SimpleSlider.as
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 [email protected]，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 }
时间： 2024-11-18 12:51:14