电竞比分网-中国电竞赛事及体育赛事平台

搜索
分享

AS入門教程第9課第2節(jié)-mp3播放器[本文已收錄教程庫] - Flash互助課堂 - 中...

 whwzjjs 2010-09-30



在這個播放器中,我內(nèi)置了幾首歌曲的連接,點擊節(jié)目單會看到它們.同時提供了一個音樂地址的文本框,你可以輸入任何歌曲的地址進(jìn)行播放.在播放時,會有一個播放進(jìn)度條,同其它的媒體播放器一樣,你可以點擊進(jìn)度條來移動歌曲的播放點,達(dá)到快進(jìn)和快退的目的.而播放控制按鈕功能也同其它媒體播放器一樣.播放器中設(shè)置了音量調(diào)節(jié)滑塊和聲道調(diào)節(jié)滑塊.而閃動的光柵的高度則隨音量的高低的變化而變化.
現(xiàn)在來制作這個播放器的.
1.首先來做一些準(zhǔn)備工作.播放器的外觀并非本教程的內(nèi)容,但一些部件是必須的.
先作5個按鈕:播放,暫停,停止,快進(jìn),快退,如下圖:

它們的實例名稱分別是:ply_btn,zd_btn,stop_btn,kj_btn,kt_btn
2.下面來制作進(jìn)度條,新建一影片剪輯,畫一細(xì)長矩形,新插入一層,再畫一個相同長度不同顏色的矩形,并將它轉(zhuǎn)換為影片剪輯元件,實例名稱為:jdt_mc.回到主場景,將進(jìn)度條影片剪輯放到舞臺上,取實例名稱為:jdk_mc.如圖:

3.聲道控制面板,新建一影片剪輯,按下圖畫出聲道控制面板:

畫一個小的矩形放到面板的中間刻度上,將小矩形轉(zhuǎn)換為影片剪輯,或者就叫滑塊吧.為它取實例名稱:sdhk_mc.

回到主場景,將聲道控制影片剪輯拖到舞臺上,為它取實例名稱:sd_mc
4.音量控制面板,新建影片剪輯,按下圖畫出音量控制面板:

將滑塊元件(在上一步中創(chuàng)建的)拖到舞臺上,放到音量最大處(右邊),為它取實例名稱:ylhk_mc

回到主場景,將音量控制影片剪輯拖到舞臺上,為它取實例名稱為:yl_mc
5.節(jié)目單按鈕,做下面一樣的影片剪輯,放在舞臺上,取實例名稱為:jmdbtn_mc

6.節(jié)目單,新建影片剪輯,畫一矩形,在矩形上放一個文本框,輸入歌曲名稱,演唱者:

同樣的方法創(chuàng)建其它的歌曲名稱影片剪輯.
新建一影片剪輯,將這些歌曲名稱影片剪輯,從庫中拖入排好:

分別給這些歌名影片剪輯取實例名稱:song1_mc,song2_mc……..song5_mc.
新建一圖層,畫一矩形蓋住所有歌名,然后將這一層拖到最下面.這個矩形的顏色應(yīng)與歌曲名稱影片中的矩形顏色相同.
回到主場景,將節(jié)目單影片剪輯拖到舞臺上,放到節(jié)目單按鈕下面,取實例名稱為:song_mc

7.光柵,新建影片剪輯,畫如下圖形:

放在舞臺上,然后復(fù)制4個,共5個,分別取實例名稱為:gb1,gb2,gb3,gb4,gb5

8.地址欄,在舞臺上建一個動態(tài)文本框,取實例名稱為:RUL_txt
9.再放兩個動態(tài)文本,用來用數(shù)字顯示進(jìn)度.兩個文本框的實例名稱分別為:dqcd_txt,zcd_txt
10.好了,所有的東西都準(zhǔn)備齊了,至于你想怎樣將它們擺放得漂亮一些,那是你的事情了,本文不涉及到這些內(nèi)容.我們要寫代碼了.
我們首先要獲得歌曲的地址,將地址放到地址文本框中,當(dāng)然,最簡單的辦法是,直接在地址框中輸入地址.但我們內(nèi)置了幾首歌,這就要為這些歌名元件添加點擊事件,當(dāng)點擊時,將歌曲地址放到地址框中.
在剛打開播放器時,我們讓節(jié)目單不可見,點擊節(jié)目單按鈕后,才讓節(jié)目單顯示出來:
song_mc._yscale = 0;
這樣節(jié)目單的高度為0,就不可見了.
jmdbtn_mc.onRelease = function(){
        if(song_mc._yscale > 0){
                song_mc._yscale = 0;
        }else {
        song_mc._yscale=100;
}
}
點擊節(jié)目單按鈕,如果節(jié)目單是打開的則關(guān)閉節(jié)目單,如果是關(guān)閉的則打開節(jié)目單.
節(jié)目單打開后,就可以點擊歌曲名稱將地址放到地址框中了:
song_mc.song1_mc.onRelease = function(){
        RUL_txt.text ="http://www./%E5%9B%BD%E5%AE%B6160.mp3";
        song_mc._yscale=0;
}
song_mc.song2_mc.onRelease = function(){
        RUL_txt.text ="http://lfg./sjweb/enjoyment/music/tiany.mp3";
        song_mc._yscale=0;
}
song_mc.song3_mc.onRelease = function(){
        RUL_txt.text ="http://xuegong./jx/edit/uploadfile/2008223213733227.mp3";
        song_mc._yscale=0;
}
song_mc.song4_mc.onRelease = function(){
        RUL_txt.text ="http://www./music/%E7%94%BB%E5%BF%83.mp3";
        song_mc._yscale=0;
}
song_mc.song5_mc.onRelease = function(){
        RUL_txt.text ="http://1968./UploadFiles/2008-6/436743781.mp3";
        song_mc._yscale=0;
}
song_mc.song6_mc.onRelease = function(){
        RUL_txt.text ="http://211.155.30.36:8089/music/Audio/6.mp3";
        song_mc._yscale=0;
}
地址欄中有了歌曲的地址,那么就可以點擊播放按鈕播放歌曲了.
首先要創(chuàng)建一個Sound類,用來加載mp3:
var wmp3:Sound = new Sound();
在播放前,應(yīng)該將進(jìn)度條設(shè)在0處:
jdk_mc.jdt_mc._xscale = 0;
將光柵的高度設(shè)為零,因為設(shè)光柵高度為零的動作要多次執(zhí)行,所以將它做成一個函數(shù),然后調(diào)用它:
function gbhl(){
        for(i=1;i<6;i++){
        gb_mc = eval("gb"+i);
    gb_mc._yscale = 0;
}
}
gbhl();
我們還需要一些變量后面有用:
var zcd;//歌曲的總長度
var dqcd;//當(dāng)前已播放的長度,用于暫停按鈕和進(jìn)度條
var ztd =0;//暫停點,用于暫停按鈕
var jd;//進(jìn)度條的位置
var rul:String;//歌曲的地址
var sdz;//聲道的值
var ylz;//音量的值
這些變量現(xiàn)在不用管它,在后面用到它們時會給予說明的.
接下來就該寫播放按鈕上的代碼了,有了播放按鈕,就可以興賞音樂了.
在播放時,首先應(yīng)該判斷當(dāng)前是從頭開始播放還是處于暫停狀態(tài),如果是暫停,那么我們上面聲明的變量ztd就不會是0,根據(jù)這個變量是否為零就可以確定是從頭開始播放還是從ztd開始播放,如果ztd為零,首先從地址欄獲得歌曲地址,然后判定地址是否為空,如果不為空則將進(jìn)度條歸零,然后加載歌曲,并播放歌曲.調(diào)用mp3pl()函數(shù),這個函數(shù)是在歌曲播放過程中設(shè)置一些效果比如進(jìn)度條,光柵等.如果ztd不為零,則歌曲從暫停點處播放,并調(diào)用mp3pl()函數(shù).
ply_btn.onRelease = function(){
        if(ztd ==0){
        rul = RUL_txt.text;
        if(rul){
        jdk_mc.jdt_mc._xscale = 0;
        wmp3.loadSound(rul,true);
        wmp3.start();
        mp3pl(wmp3);
}
}else {
        wmp3.start(ztd);
        mp3pl(wmp3);
}
}
現(xiàn)在來看看mp3pl()函數(shù),在這個函數(shù)中會用到Sound類的兩個屬性和一個方法,先介紹一下.
duration屬性:該屬性返回聲音的總長度,以毫秒計算.
position屬性:上一節(jié)已經(jīng)介紹過,它返回聲音已播放的長度,以毫秒計算.
getVolume()方法:返回聲音單量的大小,數(shù)字為0-100.
在這個函數(shù)中,在onEnterFrame事件中,首先獲取歌曲的總長度和當(dāng)前已播放的長度,將這兩個數(shù)字顯示在文本框中,計算出播放進(jìn)度,設(shè)置進(jìn)度條的_xscale比例,顯示播放進(jìn)度,然后根據(jù)音量設(shè)置光柵的高度,首先將_yscale設(shè)為音量的一半,然后將另一半設(shè)為random()產(chǎn)生隨機數(shù),這樣就產(chǎn)生閃動的效果.
function mp3pl(mp3){
onEnterFrame = function(){
                zcd = mp3.duration/1000;
                dqcd = mp3.position/1000;
                zcd_txt.text = Math.floor(zcd);
                dqcd_txt.text = Math.floor(dqcd);
                jd = dqcd/zcd*100;
                jdk_mc.jdt_mc._xscale = jd;
                if(dqcd!=zcd){
                for(i=1;i<6;i++){
                        gb_mc = eval("gb"+i);
            gb_mc._yscale =mp3.getVolume()/2+ random(mp3.getVolume()/2);
                }
               
                }
        }
}
現(xiàn)在應(yīng)該基本成形了,剩下的就是幾個按加上功能了.
當(dāng)點擊進(jìn)度條時根據(jù)鼠標(biāo)在進(jìn)度條上的位置,確定歌曲重新從那一點上開始播放,達(dá)到快進(jìn)或快退的功能.
jdk_mc.onRelease= function(){
        var djd = _xmouse - jdk_mc._x;
        var kjd = djd/jdk_mc._width*zcd;
        wmp3.stop();
        wmp3.start(kjd);
}
暫停按鈕:記錄當(dāng)前已播放的長度,并存到ztd中,停止播放歌曲,這樣當(dāng)點擊播放按鈕時,因ztd不等于0,而使歌曲從ztd開始播放.
zd_btn.onRelease =function(){
        ztd = dqcd;
        wmp3.stop();
        delete onEnterFrame;
        gbhl();
}
停止按鈕:將ztd設(shè)為0,停止播放歌曲.
stop_btn.onRelease=function(){
        wmp3.stop();
        ztd = 0;
        delete onEnterFrame;
        gbhl();
}
快進(jìn)快退按鈕,在當(dāng)前已播放長度的基礎(chǔ)上加上或減去5秒,重新播放歌曲
kj_btn.onRelease=function(){
        wmp3.stop();
        kjd = dqcd + 5;
        wmp3.start(kjd);
}
kt_btn.onRelease=function(){
        wmp3.stop();
        ktd = dqcd - 5;
        wmp3.start(ktd);
}
下面的聲道控制,在Sound類,的setPan()方法可以設(shè)置聲音的聲道,值為0-100,0聲音將完全由左聲道播出,而100則完全由右聲道播出.當(dāng)移動聲道控制上滑塊,放開時根據(jù)滑塊的位置設(shè)置聲道的值.
sd_mc.sdhk_mc.onPress = function(){
        startDrag(this,true,0,0,sd_mc._width-this._width/2,0);
                        }
sd_mc.sdhk_mc.onRelease = function(){
        stopDrag();
        sdz = (this._x)/sd_mc._width*100;
        wmp3.setPan(sdz);
}
音量控制,在Sound類中可以使用setVolume()方法設(shè)置聲音的音量,值為0-100,當(dāng)移動音量控制上滑塊,放開時根據(jù)滑塊的位置設(shè)置音量的值.
yl_mc.ylhk_mc.onPress = function(){
        startDrag(this,true,0,0,yl_mc._width-this._width/2,0);
        }
yl_mc.ylhk_mc.onRelease = function(){
        stopDrag();
        ylz = (this._x)/yl_mc._width*100;
        wmp3.setVolume(ylz);
        }
OK,現(xiàn)在真正的完全完成了,靜下心來興賞音樂吧.
完整的代碼:
  1. song_mc._yscale = 0;
  2. var wmp3:Sound = new Sound();
  3. var zcd;
  4. var dqcd;
  5. var ztd =0;
  6. var jd;
  7. var rul:String;
  8. var sdz;
  9. var ylz;
  10. jdk_mc.jdt_mc._xscale = 0;
  11. gbhl();
  12. ply_btn.onRelease = function(){
  13.         if(ztd ==0){
  14.         rul = RUL_txt.text;
  15.         if(rul){
  16.         jdk_mc.jdt_mc._xscale = 0;
  17.         wmp3.loadSound(rul,true);
  18.         wmp3.start();
  19.         mp3pl(wmp3);
  20. }
  21. }else {
  22.         wmp3.start(ztd);
  23.         mp3pl(wmp3);
  24. }
  25. }
  26. jdk_mc.onRelease= function(){
  27.         var djd = _xmouse - jdk_mc._x;
  28.         var kjd = djd/jdk_mc._width*zcd;
  29.         wmp3.stop();
  30.         wmp3.start(kjd);
  31. }
  32. function mp3pl(mp3){
  33. onEnterFrame = function(){
  34.                 zcd = mp3.duration/1000;
  35.                 dqcd = mp3.position/1000;
  36.                 zcd_txt.text = Math.floor(zcd);
  37.                 dqcd_txt.text = Math.floor(dqcd);
  38.                 jd = dqcd/zcd*100;
  39.                 jdk_mc.jdt_mc._xscale = jd;
  40.                 if(dqcd!=zcd){
  41.                 for(i=1;i<6;i++){
  42.                         gb_mc = eval("gb"+i);
  43.             gb_mc._yscale =mp3.getVolume()/2+ random(mp3.getVolume()/2);
  44.                 }
  45.                
  46.                 }
  47.         }
  48. }
  49. jmdbtn_mc.onRelease = function(){
  50.         if(song_mc._yscale > 0){
  51.                 song_mc._yscale = 0;
  52.         }else {
  53.         song_mc._yscale=100;
  54. }
  55. }
  56. song_mc.song1_mc.onRelease = function(){
  57.         RUL_txt.text ="http://www./%E5%9B%BD%E5%AE%B6160.mp3";
  58.         song_mc._yscale=0;
  59. }
  60. song_mc.song2_mc.onRelease = function(){
  61.         RUL_txt.text ="http://lfg./sjweb/enjoyment/music/tiany.mp3";
  62.         song_mc._yscale=0;
  63. }
  64. song_mc.song3_mc.onRelease = function(){
  65.         RUL_txt.text ="http://xuegong./jx/edit/uploadfile/2008223213733227.mp3";
  66.         song_mc._yscale=0;
  67. }
  68. song_mc.song4_mc.onRelease = function(){
  69.         RUL_txt.text ="http://www./music/%E7%94%BB%E5%BF%83.mp3";
  70.         song_mc._yscale=0;
  71. }
  72. song_mc.song5_mc.onRelease = function(){
  73.         RUL_txt.text ="http://1968./UploadFiles/2008-6/436743781.mp3";
  74.         song_mc._yscale=0;
  75. }
  76. song_mc.song6_mc.onRelease = function(){
  77.         RUL_txt.text ="http://211.155.30.36:8089/music/Audio/6.mp3";
  78.         song_mc._yscale=0;
  79. }
  80. function gbhl(){
  81.         for(i=1;i<6;i++){
  82.         gb_mc = eval("gb"+i);
  83.     gb_mc._yscale = 0;
  84. }
  85. }
  86. stop_btn.onRelease=function(){
  87.         wmp3.stop();
  88.         ztd = 0;
  89.         delete onEnterFrame;
  90.         gbhl();
  91. }
  92. zd_btn.onRelease =function(){
  93.         ztd = dqcd;
  94.         wmp3.stop();
  95.         delete onEnterFrame;
  96.         gbhl();
  97. }
  98. kj_btn.onRelease=function(){
  99.         wmp3.stop();
  100.         kjd = dqcd + 5;
  101.         wmp3.start(kjd);
  102. }
  103. kt_btn.onRelease=function(){
  104.         wmp3.stop();
  105.         ktd = dqcd - 5;
  106.         wmp3.start(ktd);
  107. }
  108. sd_mc.sdhk_mc.onPress = function(){
  109.         startDrag(this,true,0,0,sd_mc._width-this._width/2,0);
  110.                         }
  111. sd_mc.sdhk_mc.onRelease = function(){
  112.         stopDrag();
  113.         sdz = (this._x)/sd_mc._width*100;
  114.         wmp3.setPan(sdz);
  115. }
  116. yl_mc.ylhk_mc.onPress = function(){
  117.         startDrag(this,true,0,0,yl_mc._width-this._width/2,0);
  118.         }
  119. yl_mc.ylhk_mc.onRelease = function(){
  120.         stopDrag();
  121.         ylz = (this._x)/yl_mc._width*100;
  122.         wmp3.setVolume(ylz);
  123.         }
復(fù)制代碼

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻(xiàn)花（0）

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多