制作Slider组件
利用as3，我们可以尝试制作一些有趣的组件，虽然现在已经有很多实用的组件，但是自己尝试写一下也是不错的。利用as3语法，借用了绘图Api我们尝试制作一下这个组件。因为我们不需要很强大的功能，对此我们只是需要选取其一部分就可以。
首先,我们所需的制作两个图形，一个是拖动的方块，一个是底图片。对于这两个图我们都不难做，采用绘图APi当中的绘制矩形的办法就能实现到。
我们需要定义个包，这个包是为了防止与flash内部组件类名称冲突如下：
package org.summerTree.components
所需要做的工作是，定义好构造函数里面的参数。设置容器，最大值和最小值。两个值就是两端的位置，以及初始化的默认值
01.//滚动的组件
02.
03.package org.summerTree.components
04.{
05.
06. import flash.display.Sprite;
07. import flash.display.Shape;
08. import flash.events.*;
09. import flash.geom.Rectangle;
10. import flash.display.DisplayObjectContainer;
11. import flash.text.*;
12. public class Slider extends Sprite
13. {
14.
15. private var bar_control:Sprite;
16. private var values:Number=0;
17. private var msg:TextField=new TextField();
18. private var minValue:Number=0;
19. private var maxValue:Number=100;
20. private var initializtion:Number;
21. public function Slider(contain:DisplayObjectContainer=null,minValue:Number=0,maxValue:Number=100,initializtion:Number=0)
22. {
23. }
24.}
在这里过程，我们导入我们所需要的包，包括事件类型，包括几何图形库等等。
我们创建Slider 作为这个组件的类名称，建立起第一步之后，我们就可以实现进行绘制图案进行创作。
第二步：创始化，
在这个过程当中，实例化控制的拖动的元件，并设置底的图形，在这里过程设置不同颜色以区别。并且对元件进行监听鼠标拖动，在拖动的过程当中，元件的x坐标会产生改变，这样我们需要把这个值通过计算出来传递设置value的值，
在这个过程当中，实例化控制的拖动的元件，并设置底的图形，在这里过程设置不同颜色以区别。并且对元件进行监听鼠标拖动，在拖动的过程当中，元件的x坐标会产生改变，这样我们需要把这个值通过计算出来传递设置value的值，
this.value=bar_control.x*(maxValue-minValue)/100+minValue;//计算元件块位置对于的值
如果按0-100这样的区间，只有我们获取到拖动的元件的坐标值，即可以得到我们所需要的数据。bar.x=[0,100]之间的区间
如果这个区间不在0-100 ，可以随意一个区间，我们则可以通过简单的换成就可以
(bar.x/bar.width)*(max-min)+min; 这样换算则可以实现到
01.private function init():void
02. {
03. //控件底座
04. var bar_bottom:Shape=new Shape();
05. addChild(bar_bottom);
06. bar_bottom.graphics.lineStyle(0);
07. bar_bottom.graphics.beginFill(0x666666);
08. bar_bottom.graphics.drawRect(0,0,116,16);
09. bar_bottom.graphics.endFill();
10. var array:Array=new Array();
11.
12. //设置显示区域
13. var format:TextFormat=new TextFormat ();
14. format.size=5;
15. msg=new TextField();
16. msg.border=true;
17. msg.setTextFormat(format);
18. this.value=initializtion;//设置初始值
19. msg.text=String(this.value);
20. msg.width=25;
21. msg.height=16;
22. msg.x=117;
23. msg.y=0;
24. msg.selectable=false;
25. addChild(msg);
26. bar_control=new Sprite();
27. bar_control.x=Math.abs(initializtion-minValue)/ Math.abs(maxValue-minValue)*100;
28.
29. bar_control.y=0;
30. addChild(bar_control);
31. bar_control.buttonMode=true;
32. bar_control.graphics.lineStyle(0);
33. bar_control.graphics.beginFill(0xCCCCCC);
34. bar_control.graphics.drawRect(0,0,16,16);
35. bar_control.graphics.endFill();
36.
37.
38. bar_control.addEventListener(MouseEvent.MOUSE_DOWN,onStaDragHandler);
39. bar_control.stage.addEventListener(MouseEvent.MOUSE_UP,onStopDragHandler);
40. }
总的代码
01.//滚动的组件
02.
03.package org.summerTree.components
04.{
05.
06. import flash.display.Sprite;
07. import flash.display.Shape;
08. import flash.events.*;
09. import flash.geom.Rectangle;
10. import flash.display.DisplayObjectContainer;
11. import flash.text.*;
12. public class Slider extends Sprite
13. {
14.
15. private var bar_control:Sprite;
16. private var values:Number=0;
17. private var msg:TextField=new TextField();
18. private var minValue:Number=0;
19. private var maxValue:Number=100;
20. private var initializtion:Number;
21. public function Slider(contain:DisplayObjectContainer=null,minValue:Number=0,maxValue:Number=100,initializtion:Number=0)
22. {
23. if(contain!=null)
24. contain.addChild(this);
25.
26. this.minValue=minValue;
27. this.maxValue=maxValue;
28. this.initializtion=initializtion;//默认位置值
29. init();
30. }
31.
32. private function init():void
33. {
34. //控件底座
35. var bar_bottom:Shape=new Shape();
36. addChild(bar_bottom);
37. bar_bottom.graphics.lineStyle(0);
38. bar_bottom.graphics.beginFill(0x666666);
39. bar_bottom.graphics.drawRect(0,0,116,16);
40. bar_bottom.graphics.endFill();
41. var array:Array=new Array();
42.
43. //设置显示区域
44. var format:TextFormat=new TextFormat ();
45. format.size=5;
46. msg=new TextField();
47. msg.border=true;
48. msg.setTextFormat(format);
49. this.value=initializtion;//设置初始值
50. msg.text=String(this.value);
51. msg.width=25;
52. msg.height=16;
53. msg.x=117;
54. msg.y=0;
55. msg.selectable=false;
56. addChild(msg);
57. bar_control=new Sprite();
58. bar_control.x=Math.abs(initializtion-minValue)/ Math.abs(maxValue-minValue)*100;
59.
60. bar_control.y=0;
61. addChild(bar_control);
62. bar_control.buttonMode=true;
63. bar_control.graphics.lineStyle(0);
64. bar_control.graphics.beginFill(0xCCCCCC);
65. bar_control.graphics.drawRect(0,0,16,16);
66. bar_control.graphics.endFill();
67.
68.
69. bar_control.addEventListener(MouseEvent.MOUSE_DOWN,onStaDragHandler);
70. bar_control.stage.addEventListener(MouseEvent.MOUSE_UP,onStopDragHandler);
71. }
72. private function onStaDragHandler(event:MouseEvent):void
73. {
74. bar_control.stage.addEventListener(MouseEvent.MOUSE_MOVE,onMoveHandler);
75. event.currentTarget.startDrag(false,new Rectangle(0,0,100,0));//控制拖动局域
76. }
77.
78. private function onMoveHandler(event:MouseEvent):void
79. {
80. var evt:Event=new Event(Event.CHANGE);
81. this.value=bar_control.x*(maxValue-minValue)/100+minValue;//计算元件块位置对于的值
82. msg.text=String(this.value);
83. this.dispatchEvent(evt);
84. }
85. //停止拖动处理
86. private function onStopDragHandler(event:MouseEvent):void
87. {
88. msg.text=String(this.value);
89. bar_control.stopDrag();
90. bar_control.stage.removeEventListener(MouseEvent.MOUSE_MOVE,onMoveHandler);
91. }
92. //设置拖动的值
93. public function set value(dataValue:Number):void
94. {
95. this.values=dataValue;
96. }
97. //返回拖动的值
98. public function get value():Number
99. {
100. return values;
101. }
102. //设置对象坐标
103. public function move(x:Number,y:Number):void
104. {
105. this.x=x;
106. this.y=y;
107. }
108. }
109.}
测试：
参数含义：第一个容器，第二个最小值，第三个最大值。调用监听事件
01.import org.summerTree.components.Slider;
02.var i:int=0;
03.while (i<10)
04.{
05. i++;
06. var silder:Slider=new Slider(this);
07. silder.move(250,100+i*20);
08. silder.addEventListener(Event.CHANGE,onChange);
09.}
10.function onChange(event:Event):void
11.{
12. trace("ww"+silder.value);
13.}
利用这个简单的制作，我们可以制作一些调节的参数变化，如声音大小。介于一个区间内变化的情况。
通过控制组件，达到声音的变化。大概制作就在如下。
通过控制组件，达到声音的变化。大概制作就在如下。
在初始化的时候，需要进行加载声音，初始化组件，等待完成之后，就可以实现对音乐的参数一种交互了。
发布的时候，我们可以选择在网络环境进行，而本地环境调用远程的 资源会出现一种错误。不妨试试。
发布的时候，我们可以选择在网络环境进行，而本地环境调用远程的 资源会出现一种错误。不妨试试。
代码解析：
使用媒体包下的sound 声音类，我们就可以进行加载本地或者远程的资源。达到播放音乐的功能，同时可以进行监听数据加载进度和错误的情况发生。
使用媒体包下的sound 声音类，我们就可以进行加载本地或者远程的资源。达到播放音乐的功能，同时可以进行监听数据加载进度和错误的情况发生。
sound=new Sound();
sound.load(new URLRequest("http://au.9you.com/download/song/22.mp3"));
sound.addEventListener(Event.COMPLETE,onLoadComplete);
sound.addEventListener(ProgressEvent.PROGRESS,onProgress);
sound.addEventListener(IOErrorEvent.IO_ERROR,onError);
sound.load(new URLRequest("http://au.9you.com/download/song/22.mp3"));
sound.addEventListener(Event.COMPLETE,onLoadComplete);
sound.addEventListener(ProgressEvent.PROGRESS,onProgress);
sound.addEventListener(IOErrorEvent.IO_ERROR,onError);
当完成加载声音后就可以进行播放
channel=sound.play(0,int.MAX_VALUE); 指定一个声道了进行播放，选择int 最大值，这个会循环int 最大值次数。
channel=sound.play(0,int.MAX_VALUE); 指定一个声道了进行播放，选择int 最大值，这个会循环int 最大值次数。
总的代码
01.package
02.{
03.
04. import flash.display.MovieClip;
05. import flash.events.*;
06. import flash.media.*;
07. import flash.net.*;
08. import flash.text.TextField;
09. import org.summerTree.components.Slider;
10.
11. public class Main extends MovieClip
12. {
13. private var sound:Sound;
14. private var channel:SoundChannel=new SoundChannel();
15. private var Soundtrans:SoundTransform=new SoundTransform();
16. private var slider:Slider;
17. private var msg:TextField;
18. public function Main()
19. {
20. init();
21. }
22. private function init():void
23. {
24. slider=new Slider(this,0,100,100);
25. slider.move(250,200);
26. slider.addEventListener(Event.CHANGE,onSoundChange);
27.
28. //左输入在左扬声器里播放的量。
29. var left_slider:Slider=new Slider(this,0,100,50);
30. left_slider.move(250,220);
31. left_slider.addEventListener(Event.CHANGE,onLeftSoundChange);
32.
33. //左输入在右扬声器里播放的量。
34. var right_slider:Slider=new Slider(this,0,100,40);
35. right_slider.move(250,240);
36. right_slider.addEventListener(Event.CHANGE,onRightSoundChange);
37.
38. //声音从左到右的平移
39. var pan_slider:Slider=new Slider(this,-100,100,0);
40. pan_slider.move(250,260);
41. pan_slider.addEventListener(Event.CHANGE,onPanSoundChange);
42.
43. msg=new TextField();
44. addChild(msg);
45. msg.x=200;
46. msg.y=100;
47.
48. //创建声音
49. sound=new Sound();
50. sound.load(new URLRequest("http://au.9you.com/download/song/22.mp3"));
51. sound.addEventListener(Event.COMPLETE,onLoadComplete);
52. sound.addEventListener(ProgressEvent.PROGRESS,onProgress);
53. sound.addEventListener(IOErrorEvent.IO_ERROR,onError);
54. }
55.
56.
57. private function onLeftSoundChange(event:Event):void
58. {
59.
60. if(channel!=null)
61. {
62. channel.soundTransform=Soundtrans;
63. Soundtrans.leftToLeft=event.currentTarget.value/100;
64. }
65.
66. }
67.
68. private function onRightSoundChange(event:Event):void
69. {
70.
71. if(channel!=null)
72. {
73. channel.soundTransform=Soundtrans;
74. Soundtrans.leftToRight=event.currentTarget.value/100;
75. }
76.
77. }
78.
79. private function onPanSoundChange(event:Event):void
80. {
81.
82. if(channel!=null)
83. {
84. channel.soundTransform=Soundtrans;
85. Soundtrans.pan=event.currentTarget.value/100;
86. }
87.
88. }
89.
90. private function onSoundChange(event:Event):void
91. {
92. trace(slider.value);
93. if(channel!=null)
94. {
95. channel.soundTransform=Soundtrans;
96. Soundtrans.volume=slider.value/100;
97. }
98. }
99. //加载显示数据
100. private function onProgress(event:ProgressEvent):void
101. {
102. msg.text=String(Math.round(event.bytesLoaded/event.bytesTotal*100))+"/%";
103. }
104.
105. private function onError(event:IOErrorEvent):void
106. {
107. msg.text="加载发生了错误";
108. }
109. private function onLoadComplete(event:Event):void
110. {
111. sound.removeEventListener(ProgressEvent.PROGRESS,onProgress);
112. sound.removeEventListener(Event.COMPLETE,onLoadComplete);
113. if(channel!=null)
114. channel=sound.play(0,int.MAX_VALUE);
115. }
116.
117. }
118.}
