logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

AS入门教程第9课第2节-mp3播放器[本文已收录教程库] - Flash互助课堂 - 中...

 whwzjjs 2010-09-30



在这个播放器中,我内置了几首歌曲的连接,点击节目单会看到它们.同时提供了一个音乐地址的文本框,你可以输入任何歌曲的地址进行播放.在播放时,会有一个播放进度条,同其它的媒体播放器一样,你可以点击进度条来移动歌曲的播放点,达到快进和快退的目的.而播放控制按钮功能也同其它媒体播放器一样.播放器中设置了音量调节滑块和声道调节滑块.而闪动的光栅的高度则随音量的高低的变化而变化.
现在来制作这个播放器的.
1.首先来做一些准备工作.播放器的外观并非本教程的内容,但一些部件是必须的.
先作5个按钮:播放,暂停,停止,快进,快退,如下图:

它们的实例名称分别是:ply_btn,zd_btn,stop_btn,kj_btn,kt_btn
2.下面来制作进度条,新建一影片剪辑,画一细长矩形,新插入一层,再画一个相同长度不同颜色的矩形,并将它转换为影片剪辑元件,实例名称为:jdt_mc.回到主场景,将进度条影片剪辑放到舞台上,取实例名称为:jdk_mc.如图:

3.声道控制面板,新建一影片剪辑,按下图画出声道控制面板:

画一个小的矩形放到面板的中间刻度上,将小矩形转换为影片剪辑,或者就叫滑块吧.为它取实例名称:sdhk_mc.

回到主场景,将声道控制影片剪辑拖到舞台上,为它取实例名称:sd_mc
4.音量控制面板,新建影片剪辑,按下图画出音量控制面板:

将滑块元件(在上一步中创建的)拖到舞台上,放到音量最大处(右边),为它取实例名称:ylhk_mc

回到主场景,将音量控制影片剪辑拖到舞台上,为它取实例名称为:yl_mc
5.节目单按钮,做下面一样的影片剪辑,放在舞台上,取实例名称为:jmdbtn_mc

6.节目单,新建影片剪辑,画一矩形,在矩形上放一个文本框,输入歌曲名称,演唱者:

同样的方法创建其它的歌曲名称影片剪辑.
新建一影片剪辑,将这些歌曲名称影片剪辑,从库中拖入排好:

分别给这些歌名影片剪辑取实例名称:song1_mc,song2_mc……..song5_mc.
新建一图层,画一矩形盖住所有歌名,然后将这一层拖到最下面.这个矩形的颜色应与歌曲名称影片中的矩形颜色相同.
回到主场景,将节目单影片剪辑拖到舞台上,放到节目单按钮下面,取实例名称为:song_mc

7.光栅,新建影片剪辑,画如下图形:

放在舞台上,然后复制4个,共5个,分别取实例名称为:gb1,gb2,gb3,gb4,gb5

8.地址栏,在舞台上建一个动态文本框,取实例名称为:RUL_txt
9.再放两个动态文本,用来用数字显示进度.两个文本框的实例名称分别为:dqcd_txt,zcd_txt
10.好了,所有的东西都准备齐了,至于你想怎样将它们摆放得漂亮一些,那是你的事情了,本文不涉及到这些内容.我们要写代码了.
我们首先要获得歌曲的地址,将地址放到地址文本框中,当然,最简单的办法是,直接在地址框中输入地址.但我们内置了几首歌,这就要为这些歌名元件添加点击事件,当点击时,将歌曲地址放到地址框中.
在刚打开播放器时,我们让节目单不可见,点击节目单按钮后,才让节目单显示出来:
song_mc._yscale = 0;
这样节目单的高度为0,就不可见了.
jmdbtn_mc.onRelease = function(){
        if(song_mc._yscale > 0){
                song_mc._yscale = 0;
        }else {
        song_mc._yscale=100;
}
}
点击节目单按钮,如果节目单是打开的则关闭节目单,如果是关闭的则打开节目单.
节目单打开后,就可以点击歌曲名称将地址放到地址框中了:
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;
}
地址栏中有了歌曲的地址,那么就可以点击播放按钮播放歌曲了.
首先要创建一个Sound类,用来加载mp3:
var wmp3:Sound = new Sound();
在播放前,应该将进度条设在0处:
jdk_mc.jdt_mc._xscale = 0;
将光栅的高度设为零,因为设光栅高度为零的动作要多次执行,所以将它做成一个函数,然后调用它:
function gbhl(){
        for(i=1;i<6;i++){
        gb_mc = eval("gb"+i);
    gb_mc._yscale = 0;
}
}
gbhl();
我们还需要一些变量后面有用:
var zcd;//歌曲的总长度
var dqcd;//当前已播放的长度,用于暂停按钮和进度条
var ztd =0;//暂停点,用于暂停按钮
var jd;//进度条的位置
var rul:String;//歌曲的地址
var sdz;//声道的值
var ylz;//音量的值
这些变量现在不用管它,在后面用到它们时会给予说明的.
接下来就该写播放按钮上的代码了,有了播放按钮,就可以兴赏音乐了.
在播放时,首先应该判断当前是从头开始播放还是处于暂停状态,如果是暂停,那么我们上面声明的变量ztd就不会是0,根据这个变量是否为零就可以确定是从头开始播放还是从ztd开始播放,如果ztd为零,首先从地址栏获得歌曲地址,然后判定地址是否为空,如果不为空则将进度条归零,然后加载歌曲,并播放歌曲.调用mp3pl()函数,这个函数是在歌曲播放过程中设置一些效果比如进度条,光栅等.如果ztd不为零,则歌曲从暂停点处播放,并调用mp3pl()函数.
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);
}
}
现在来看看mp3pl()函数,在这个函数中会用到Sound类的两个属性和一个方法,先介绍一下.
duration属性:该属性返回声音的总长度,以毫秒计算.
position属性:上一节已经介绍过,它返回声音已播放的长度,以毫秒计算.
getVolume()方法:返回声音单量的大小,数字为0-100.
在这个函数中,在onEnterFrame事件中,首先获取歌曲的总长度和当前已播放的长度,将这两个数字显示在文本框中,计算出播放进度,设置进度条的_xscale比例,显示播放进度,然后根据音量设置光栅的高度,首先将_yscale设为音量的一半,然后将另一半设为random()产生随机数,这样就产生闪动的效果.
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);
                }
               
                }
        }
}
现在应该基本成形了,剩下的就是几个按加上功能了.
当点击进度条时根据鼠标在进度条上的位置,确定歌曲重新从那一点上开始播放,达到快进或快退的功能.
jdk_mc.onRelease= function(){
        var djd = _xmouse - jdk_mc._x;
        var kjd = djd/jdk_mc._width*zcd;
        wmp3.stop();
        wmp3.start(kjd);
}
暂停按钮:记录当前已播放的长度,并存到ztd中,停止播放歌曲,这样当点击播放按钮时,因ztd不等于0,而使歌曲从ztd开始播放.
zd_btn.onRelease =function(){
        ztd = dqcd;
        wmp3.stop();
        delete onEnterFrame;
        gbhl();
}
停止按钮:将ztd设为0,停止播放歌曲.
stop_btn.onRelease=function(){
        wmp3.stop();
        ztd = 0;
        delete onEnterFrame;
        gbhl();
}
快进快退按钮,在当前已播放长度的基础上加上或减去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()方法可以设置声音的声道,值为0-100,0声音将完全由左声道播出,而100则完全由右声道播出.当移动声道控制上滑块,放开时根据滑块的位置设置声道的值.
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()方法设置声音的音量,值为0-100,当移动音量控制上滑块,放开时根据滑块的位置设置音量的值.
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,现在真正的完全完成了,静下心来兴赏音乐吧.
完整的代码:
  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.         }
复制代码

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： whwzjjs > 《AS入门教程》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多