利用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的值， 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=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); 當完成加載聲音后就可以進行播放
?
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.} ?

轉載于:https://www.cnblogs.com/sinsoul/archive/2011/04/08/2009441.html

總結

以上是生活随笔為你收集整理的制作Slider组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。