AS3基础教程-第39课-mp3播放器(4)

本节课继续新增功能：显示播放进度，含当前时间和总时间请大家将上节课做完的38.fla文件复制一份，重命名为39.fla然后用flashCS6打开

工具/原料

flashCS6

一、界面设计：

1、因为需要新增时间的显示，故此，需要新增几个文本框：<1>一个用于显示 当前时间、另一个用于显示 总时间，因为只用于显示，故两者都设为动态文本即可<2>还需要一个文本框，用于显示 当前时间 和 总时间 之间的间隔，由于其不参与编程，故设为静态文本即可

2、单击“文本显示”图层后，使用文本工具，属性面板内设置为动态文本，在舞台上拖出一个文本框来，向里面写两个任意的数字（用于调试大小），实例名设置为currentTime_txt ，消除锯齿那里设为 使用设备字体【如此一来，无需嵌入字体】，如下图所示。将文本的大小按照自己的意愿进行修改，满意之后，将文本框内的数字删掉

3、使用选择工具，单击刚才的文本框，按住Alt键复制出来一个一模一样的文本框，然后将实例名修改为totalTime_txt

4、使用文本工具，仍然在本图层内绘制第三个文本框，属性面板内设为静态文本之后，输入一个斜杠，充当分钟和秒钟之间的间隔。如下图所示

二、代码编写：

1、在Actions图层内，第一帧，单击选中，按F9键打开动作面板。时间进度的显示使用的是 进入帧 命令。故此，我们在原先代码内，模块四的内部书写代码即可。当然，首先需要定义一些所需变量。我们可以在模块四的标题下面，新增一个模块4.1 ，用于定义各种所需变量

2、无论是当前时间，还是总时间，都需要有分钟和秒钟。故此，需要定义4个变量分别用于存储之。代码如下：var dqfz:uint//当前分钟var dqmz:uint//当前秒钟var zfz:uint//总分钟var zmz:uint//总秒钟

3、需要注意的是，这4个变量都不是直接读取的，而是需要使用数学手段进行换算来获取。原因是AS3内没有提供直接读取分钟和秒钟的属性和方法。AS3内只提供了一个数字，该数字是时间的毫秒数。故此，我们还需要定义两个变量，分别存储当前时间的毫秒数、以及 总时间的毫秒数：var dqtime:uint//当前时间的毫秒数var ztime:uint//总时间的毫秒数

4、现在，假设，获取得到的毫秒数为n<1>那么，如果要得到分钟数，只要先将毫秒数转换为秒，那么，需将n除以1000，代码就是：n/1000因为这个转换后的是秒数，必须是整剞麽苍足数，故此需对其进行取整操作，巧妙的是，我们将分钟和秒钟的变量都已经定义为uint类型，故此，取整操作可由AS3自动完成，我们无须手动参与。<2>那么，接下来，就需要将这个秒数给转换成 分钟和秒钟 的形式：1分钟=60秒则，需将该数字除以60，得到的就是分钟。其余数恰好就是秒钟数。<3>如此描述，想必不好理解，我们可以举一个例子：假如说，有一个时间值是256秒，我们要将它转换为 分钟：秒钟 的形式，就先将256除以60，结果是4，也就是4分钟，余数是16，也就是16秒。用数学形式可以表述为：256=4×60+164就是分钟，16就是秒钟<4>故此，转换并赋值的代码如下：//显示时间进度： dqfz=dqtime/1000/60 //当前分钟 dqmz=dqtime/1000%60 //当前秒钟 zfz=ztime/1000/60 //总分钟 zmz=ztime/1000%60 //总秒钟但需注意，这几行代码需要写入进入帧的响应函数内部，否则都是一些固定值，将没有任何意义

5、接下来，就是获取dqtime和ztime这两稍僚敉视个变量的值了关于dqtime的获取，前面已经讲过，只需读取SoundChannel类的position属性即可。关于ztime的获取，乃是一个新的知识点，只需读取Sound类的length属性即可。那么，代码如下：dqtime=sdcn.position//读取当前时间的毫秒数 ztime=mysd.length//读取总时间的毫秒数这两行的代码，需要写在步骤4的代码之前

6、至此，核心代码已经完成。接下来，就是将它们显示在舞台上。我们已经事先设置好了容纳文本的文本框，仅需调用文本框的.text属性，并赋值为我们经过转换后的4个变量即可。那么，在步骤4的代码后面，添加如下代码即可实现了：currentTime.text=dqfz+":"+dqmz totalTime_txt.text=zfz+":"+zmz

7、测试影片，已经基本实现我们的目标，可是，出现的画面如下图所示。如果时间点是单数，前方没有冠零，看起来很别扭。故此，代码还需要修改。

8、因为4个变量都需要进行是否冠零的判炝里谧艮断，故此，将冠零操作定义成一个函数更好一些，代码如下：//模块4.2：定义一个 冠零 的函剞麽苍足数，设有返回值，返回值的类型是String字符串function guanling(num:uint):String{if(num<10){return("0"+num)}else{return(""+num)}}

9、如此一来，步骤6内的代码，凡是调用了的4个变量的地方，将变量都用这个冠零函数包裹即可：currentTime.text=guanling(dqfz)+":"+guanling(dqmz) totalTime_txt.text=guanling(zfz)+":"+guanling(zmz)

10、测试影片，效果已经完美：

三、本例的完整代码：

1、由于分段进行分析，故此，特意将本节课的最终效果的完整代码写在该处，方便大家对照学习

2、import fla衡痕贤伎sh.media.Sound;import flash.net.URLRequest;import flash.me颊俄岿髭dia.SoundChannel;import flash.events.Event;//模块一：按钮的显示与隐藏play_btn.visible=false//播放按钮pause_btn.visible=true//暂停按钮//模块二：声音var suoyin:uint//默认值是0var url_arr:Array=new Array()url_arr[0]="E:/music/爱你爱的好疲惫.mp3"url_arr[1]="E:/music/爱情海.mp3"url_arr[2]="E:/music/梦的翅膀受了伤.mp3"url_arr[3]="E:/music/西海情歌.mp3"url_arr[4]="E:/music/喜欢你.mp3"url_arr[5]="E:/music/爱情三十六计.mp3"url_arr[6]="E:/music/十二种颜色.mp3"url_arr[7]="E:/music/天亮了.mp3"var sdjd:Number=0//声音进度var url:String=url_arr[0]var urr:URLRequest=new URLRequest(url)var mysd:Sound=new Sound(urr)var sdcn:SoundChannel=new SoundChannel()sdcn=mysd.play()//模块三：按钮单击play_btn.addEventListener(MouseEvent.CLICK, danji);pause_btn.addEventListener(MouseEvent.CLICK, danji);pre_btn.addEventListener(MouseEvent.CLICK, danji);next_btn.addEventListener(MouseEvent.CLICK, danji);function danji(evt:MouseEvent):void{ switch(evt.target.name){ case "play_btn": //播放按钮的代码 play_btn.visible=false//播放按钮 pause_btn.visible=true//暂停按钮 sdcn=mysd.play(sdjd) break case "pause_btn": //暂停按钮的代码 play_btn.visible=true//播放按钮 pause_btn.visible=false//暂停按钮 sdjd=sdcn.position sdcn.stop() break case "pre_btn": //上一首 按钮的代码 if(suoyin>0){ suoyin-- trace(suoyin) sdcn.stop() url=url_arr[suoyin] urr=new URLRequest(url) mysd=new Sound(urr) sdcn=mysd.play() } break case "next_btn": //下一首 按钮的代码 if(suoyin<url_arr.length-1){ suoyin++ trace(suoyin) sdcn.stop() url=url_arr[suoyin] urr=new URLRequest(url) mysd=new Sound(urr) sdcn=mysd.play() } break }}//模块四：进入帧命令：//模块4.1 定义各种所需变量：var dqfz:uint//当前分钟var dqmz:uint//当前秒钟var zfz:uint//总分钟var zmz:uint//总秒钟var dqtime:uint//当前时间的毫秒数var ztime:uint//总时间的毫秒数//模块4.2：定义一个 冠零 的函数，设有返回值，返回值的类型是String字符串function guanling(num:uint):String{ if(num<10){ return("0"+num) } else{ return(""+num) }}this.addEventListener(Event.ENTER_FRAME,comein)function comein(e:Event){ var tmp:String=url_arr[suoyin] songsinfo_txt.text=tmp.slice(tmp.lastIndexOf("/")+1,tmp.lastIndexOf(".")) //显示时间进度： dqtime=sdcn.position//读取当前时间的毫秒数 ztime=mysd.length//读取总时间的毫秒数 dqfz=dqtime/1000/60 //当前分钟 dqmz=dqtime/1000%60 //当前秒钟 zfz=ztime/1000/60 //总分钟 zmz=ztime/1000%60 //总秒钟 currentTime.text=guanling(dqfz)+":"+guanling(dqmz) totalTime_txt.text=guanling(zfz)+":"+guanling(zmz) }

3、源码已经上传，请于帖内的17楼查看