频道直达 - 学院 - 下载 - 交易 - 特效 - 字库 - 手册 -排名-工具- 繁體
网页教学网站开发 设为首页
加入收藏
联系我们
建站搜索: 常用广告代码   用户注册 | 用户登陆
您当前的位置:中国建站之家 -> 网站开发工具应用教程 -> Flash教程 -> 学会制作你的播放器V2版

学会制作你的播放器V2版

作者:未知  来源:转载  发布时间:2005-8-10 21:25:35  发布人:acx

减小字体 增大字体

第二章 升级你的播放器为V2版本

在这里,你所必须知道的相关知识:   

Sound.duration(属性,声音的持续时间,以毫秒为单位)
Sound.position(属性,返回声音已播放的毫秒数。如果声音是循环的,则在每次循环开始时,位置将被重置为   0)
Sound.start(方法,可指定两个可选参数,开始播放处的位置和循环次数。如果未指定参数,则从开头开始播放最近附加的声音)
function   (函数声明,更详细的信息,你可以查找教程关于这章的扩展        Function   功能强大的函数声明)
MovieClip.onEnterFrame(事件处理函数;以影片帧频持续调用。首先处理与   enterFrame   剪辑事件关联的动作,然后才处理附加到受影响帧的所有帧动作脚本。   必须定义一个在调用该事件时执行的函数。更详细的信息,你可以查找教程关于这章的扩展        MovieClip.onEnterFrame及其它事件处理)
setInterval(动作;在播放影片时,每隔一定的时间间隔,就调用函数、方法或对象。更详细的信息,你可以查找教程关于这章的扩展        setInterval:超越帧速率的限制)
clearInterval(动作;清除对   setInterval   函数的调用。更详细的信息,你可以查找教程关于这章的扩展        setInterval:超越帧速率的限制)
if(条件判断。更详细的信息,你可以查找教程关于这章的扩展        if   ..else..条件判断语句)

这是最终完成的版本:

这是FireWorks的界面的源文件(PNG格式):
http://www.7880.com/Upload/2004_Pack/2003112322532762793.png" target=_blank>http://www.7880.com/Upload/2004_Pack/2003112322532762793.png" width=467 border=0>

首先,请允许我在这里花一点时间来对你讲解一些好的程序设计的方法。因为它对于而言很重要,甚至要重要过你学到的Actionscript语句。
很多人在一开始就忙着写代码。在急着写你的代码之前,你最好养成先规划、构思一下你的应用程序框架的好习惯。这可能会费你些许的时间。但和以后你浪费在查找和修改代码上的时间比起来,这点时间显得更微不足道。而且它带来的好处是:不会让你手忙脚乱。

如果说这个应用程序可以看作是一个小小的项目,我想我也没有说得太过份。一个成功的项目(特别是大项目)需要良好的规划和足够的设计草图以及人员间的交流。当然,我不会在这里讲述太多的细节,因为就这个程序对你而言,只是个演习。所以你可以略去商业项目中的某些部份(前期的市场调查、客户需求分析以及项目组人员的安排等),你也可略去项目完成部份的项目资料归档、整理工作。
如果你是两个人开发,你所要做的是将你希望它完成的功能列出来,然后将它写在纸上,然后和你的合作者一起讨论某些环节:该如何规划好界面,以及它的大致Actionscript模型。以及一些可能的意外的情况。当然,如果可能,也为你以后扩展它的功能多考虑些“后门”。并将它们记在纸上或俩人都可以访问的电脑资源中。当你们达成共识后,你们就可以开始工作了。如果你们一个是界面设计师,一个是代码编写者。并不意味着代码编写必须等到界面设计师设计好界面后才能开始他的工作。如果你们在开始时达成了一些界面和代码上的共识(也并不是说你要理解它的界面设计的所有含义,或者你的界面设计师要理解你的代码的所有含义,为了更好更快速的沟通,界面设计师可以以一种模糊的概念来将它传达给代码编写者,比如说这个地方可能有一个矩形,我想这样你的代码编写者应该能够理解,而代码编写者也可以这样一种伪代码的方式来将信息传递给界面设计者。比如说点击某个按钮后我会实现哪些功能,然后你的界面可能应该做哪些改变等,用伪代码的方式可能会这样表达:
当用户点击这个按钮后,
我会让中间的部份隐藏并且载入一部份新的界面;

这无疑你们俩都能很好的理解。这样界面设计师可以对整个过程和他所该考虑的因素都可以了如指掌。而不是茫然和一味的“蛮干”。
和界面设计师相比,代码编写者(程序设计师)可能只是将某些定义好的界面以简单的形状代替,然后开始他的代码编写,如果俩人中一个人要做某些影响对方的改动和或者有某些疑问,那么这时就应该和对方交流。)


当然,也可以界面设计师先设计好界面,然后程序设计师再开始编写代码。但请仍牢记这一点。在界面设计师开始设计界面之前和程序设计之间的交流和达成共识足够重要。以及前期的框架和功能定义。这样做的好处仅仅在于在界面设计开始设计界时到设计完毕的那段时间内你的程序设计师可以分开身去做别的工作。并且程序设计师可以在编写代码的时候得到更为精确的坐标数据(如一个按钮的大小和准确位置,这可能在比另外一种用随便以几何形状代替来得精确和直观)而且在界面设计师反复更改它的某些设计方案和设计细节时程序设计师不必也跟着反复修改它的代码。但即使是采用这种方法,在你的界面设计师完成它的界面设计方案后,即使与原来的共识相比没有什么变动,也应该向程序设计师仔细的描述这些设计方案。也许他也会向程序设计师传达些诸如这样的概念,如果你在这个地方这么做的话,那么可能效果会更好。

记住,沟通和信息交流足够重要。你可以想像一个各自为政的项目会是多么的糟糕。


如果你是一个人,那么你可以省去两人交流和达成共识的时间。因为你自已在脑中就可以通过“左右互博术”想好了。而将不将它们记在纸上或电脑上这取决你的习惯或者记忆力,相对而言,也写下来会好些。因为包括我在内,绝大多数的人的记忆都还不是可以达到过目不忘的境界。


如果你是一位初学者,可能上面的这几段话在现阶段对你而言并没有多大的用处,至少在学习这章是这样的,但请记住:在你成为中、高级Flasher的时候逐渐运用这些方法。


我会在从这章开始后的播放器制作采用这种策略,这也有助你理清思路。

首先:这个从V1版升而来的播放器应该具有下面的一些功能。
能够有一个进度条,以显示当前MP3播放的进度,并且它还是可以使用的(这也意味着它可以由用户拖动),从程度设计师的角度来说,它是一个可以水平拖动的按钮。那么根据程序设计师提出的按钮应该有一个滑过时的界面说法,界面设计师可能要为这个按钮设计一个在鼠标滑过时的状态。
同时它应该还有两个文本区以显示MP3当前播放时的时间位置和它的总时间长度。

那么,现在界面设计师可以开始它的设计稿了。我不会在这里向你讲解在FireWorks是如何设计它的。这是最终的设计方案:

http://www.7880.com/Upload/2004_Pack/2003112322532762793.png" target=_blank>http://www.7880.com/Upload/2004_Pack/2003112322532762793.png" width=467 border=0>


我们继续我们的程序设计师部份:
配合打开你下载的flash源文件或者你自已根据PNG源文件自已重新开始设计。

我想在V1版中的两个按钮(播放、停止)是可以略过的了。如果不明白,你可以回过头去看第一章的内容。

我们先完成“显示MP3当前播放时的时间位置和它的总时间长度”部份。

1、在_root主场景部份建立两个动态文本框,并分别将它们命名为soundTimeNow、soundTimeTotal(我推荐你使用命名的方法,而不是使用指定变量的方法)





http://www.7880.com/Upload/2004_Pack/2003112322552748808.png" target=_blank>http://www.7880.com/Upload/2004_Pack/2003112322552748808.png" width=467 border=0>

将它的字体设为:superpoint   _square(如果你没有,可以到   http://www.dafont.com/   ;上下载。

然后这里我将动态文本的颜色设为蓝色(#005CB9)。

superpoint   _square这种字体很酷,但你还应该将它们包含进swf文件中,否则它们还是显示成那种古老的字体。按下动态文本属性栏中的“字符”按钮,在弹出的对话框中设置好你要导出的字体种类。在这里我只想导出数字和“:”号,因为我只需要这些东西,你的设置看起来像这个样子:

http://www.7880.com/Upload/2004_Pack/2003112322562482001.png" target=_blank>http://www.7880.com/Upload/2004_Pack/2003112322562482001.png" border=0>

好了,既然你已完成了flash中的界面部份。开始我们的代码编写部分。
我们来看完成的代码以及它们的含义:

function   updateSoundTime()   {
   var   tmp1   =   Math.floor(mySound.duration/60000);
   var   tmp2   =   Math.floor(mySound.duration/1000-tmp1*60);
   if   (tmp2<10)   {
      tmp2   =   "0"+tmp2;
   }
   var   tmp3   =   Math.floor(mySound.position/60000);
   var   tmp4   =   Math.floor(mySound.position/1000-tmp3*60);
   if   (tmp4<10)   {
      tmp4   =   "0"+tmp4;
   }
   soundTimeNow.text   =   tmp1+":"+tmp2;
   soundTimeTotal.text   =   tmp3+":"+tmp4;   

}
this.onEnterFrame   =   updateSoundTime;

我们先来看最后一句:this.onEnterFrame   =   updateSoundTime;
它指定电影在进入每帧执行updateSoundTime函数。事实上你也可以这样写:this.onEnterFrame   =   updateSoundTime();
但我们已经将变量定义为一个函数,


function   updateSoundTime()   {
...
}


所以后面的一对大括号大可以省去(有时候变量更像是一种指针)。而在某些场合不将大括号省去反而会发生错误。:)   


我们来看每帧执行的函数:


var   tmp1   =   Math.floor(mySound.duration/60000);
   var   tmp2   =   Math.floor(mySound.duration/1000-tmp1*60);
   if   (tmp2<10)   {
      tmp2   =   "0"+tmp2;
   }
   var   tmp3   =   Math.floor(mySound.position/60000);
   var   tmp4   =   Math.floor(mySound.position/1000-tmp3*60);
   if   (tmp4<10)   {
      tmp4   =   "0"+tmp4;
   }
   soundTimeTotal.text   =   tmp1+":"+tmp2;
   soundTimeNow.text   =   tmp3+":"+tmp4;   


首先用var声明一个在函数内的局部变量tmp1。
(在函数或循环内将以后不用的变量用var声明为局部变量可以获得更快的速度,因为它们会在用完后自动从内存中踢除,这样可以让你的flash作品运行得更快,你应该在以后的代码编写中养成这种好习惯)

用它来保存分钟数,我们先获取当前MP3总的时间长度。它返回的单位是毫秒,这里我们要把它转换为分钟。
这是转换的过程:
1、
----------------
1分种=60秒;
1秒=1000毫秒;
所以1分种就等于60*1000=60000毫秒。
2、
----------------
mySound.position/60000
将所获得的时间位置除以这个转换率,那么你可以得到诸如2.15分这样的小数。
用Math.floor()方法将它取出整数部份就可以了,它就是你当前所在的分钟数。
   注意:不要用Math.round()方法来代替Math.floor(),因为Math.round()会进行四舍五入的计算,而如果当你得到像2.65这样的小数时,Math.round(2.65)会得到3,这并不是想要的结果。相反,Math.floor()不管后面的小数部分是什么,它只取回整数部分。Math.floor(2.65)和Math.floor(2.28)都得到2。

来看秒数的转换过程:
var   tmp2   =   Math.floor(mySound.duration/1000-tmp1*60);

1、
------------------
mySound.duration/1000
得到总的秒数

2、
-----------------
mySound.duration/1000-tmp1*60
减去已在分钟中的秒数,剩下的就是要在秒区的显示的数字
tmp1*60

其实代码也可以写成这样:

var   tmp2   =   Math.floor(mySound.duration/1000)-tmp1*60;


换过一种思维方式:

var   tmp2   =   Math.floor(mySound.duration/1000)%60;


%为求模运算,a%b计算a   除以b的余数,如tmp1=10%3则tmp1为1,若tmp1=4.3%2.1则tmp1为0.1,这要与百分号区分开来。
这里的意思是以总体的秒数除以60得到的零头则是应该在秒数区显示的数了。

换过一种算法:


var   tmp2   =(mySound.duration/60000-   Math.floor(mySound.duration/60000))*60;


这段代码是从小数出发,先获得分钟的小数部份,再将它乘以60,得到余秒。   





   如果你觉得有点头晕,也不必害怕,我只是想告诉你,在   Flash   中实现同一种东西,可以有很多种方法。甚至是几十种。你也未必就一定要知道别人的方法,只是你实现了它,那么就用你自已的方法。对于不同层次的人,如果一种方法对你而言是容易理解和辨认的,那么就使用它。你不必把你的代码写得有多么的怪异。而一个连自已都不懂的怪异代码你可能要为它另外加上一行注解(//这是...)。
相对而言,如果你的代码不是被执行很多次或者每帧都在执行。那么你可以不必去简化你的代码。而如果是,那么,简化你的代码和找到一个高执行效率的代码会更好些。
对比下面的代码:
a=10+10+10+10+10+10+589;
和a=60+589
无疑下一行的代码更加高效。
要对比两个代码的执行速度,你可以使用一个for循环,然后用一个较大的数值将这种差异放大,在最后执行完毕的时间得到它的执行完需要的总时间。getTimer();

如果有时间,那么,优化一下你的代码是好的。这也是一种好习惯。





继续下面的Actionscript:

if   (tmp2<10)   {
      tmp2   =   "0"+tmp2;
   }

这里使用一个判断语句将秒转换成标准的两位格式以使你的秒数看起来不会像这样2:5,而应该是这样的2:05。
这是伪代码的理解方式:
如果tmp2小于10的话,
那么将tmp2的前面加上一个0。以把像5这样的数字换成05。   


   你应该注意一些细节。在if()的判断断条件中你应该确保你的tmp2是一个数字,而不是一个伪数字(字符串)。当然,在这里它是一个数字,但在这之后它就不是一个数字了。
tmp2   =   "0"+tmp2;
“0"引号0代表一个字符串(所在在双引号中括起来的都表示字符串,即使里面是一个数字),当一个字符后面加上一数字时,那么flash只是简单的把后面的数字当作字符串来处理,也就是只是把它和前面的字符像用胶水那样将它们连接起来。
"0"+5得到的是0后面连接5,即05。它是一个字符串,记住:字符串+数字=字符串。
如果你将0中的双引号去掉(将它变成一个数字),那么我想你的0+5不会有太多的意义。它仍然还是5。

那么,如果你的tmp2如果是一个字符串会是什么样子的?

在Flash中执行下面的Actionscript:


tmpA   =   "0"+5;
trace(tmpA<10);


答案仍然是true,也就是真。你很幸运,在判断之前,Flash会自动帮你字像"05"这样的字符串转换成数字5。当然,它不影响你的数据tmpA本身。它仍然是一个字符串。下面的代码说明了这一点:


tmpA   =   "0"+5;
trace(tmpA<10);
trace(tmpA+15);





tace(tmpA+15)得出的结果是0515,而不是20。   


当然,如果你的tmpA恰巧是"05"这样的类似数字的字符串,它不会出现什么问题。但小心一点,不要想当然的以为类似这样的东西都是这样子。
看下面的代码:


tmpA   =   "   0   "+5;
trace(tmpA<10);


   





它得到undefined,也就是未知道。flash无法判断它。因为现在"   0   5"已经无法成功的转换成一个数字,它还是一个字符串(注意0的两边各多了一个空格)。你所需要的只是注意这种情况。虽然它很少出现,但一旦出现,你将很难发现是这里出了问题。


这种情况下,它和“真正的”字符串得出的结果是一样的:


tmpA   =   "这只是一个"+"测试";
trace(tmpA<10);


   

这可能有点混乱,我不能说自动转换不是一个好功能,但它也会带来一些灾难性的后果:会让我们以常犯些小错误,而且很难发现这个错误。
幸好Actionscript   2.0   中类似于Java的严格变量类型审查解决了这个问题。虽然它会让你写代码的时候麻烦些,但至少你可以很清楚的知道这个变量的类型。   


好了,让我们回到我们的主题上来,如果你还有点意尤未尽,那么,你可以去查找关于这一章的扩展        自动转换变量类型和判断:你的好处和灾难


代码soundTimeTotal.text   =   tmp1+":"+tmp2;将你所计算出来数字连接成易读的格式并将它显示在定义好的动态文本框中。

如果你想要显示毫秒,那么你只要将前面的因子1000换成1就可以,但记住,它会更消耗些CPU,虽然只是那么一点点。

同样的道理,我想关于当前MP3播放时的时间位置的那一部份你应该也可以很容易理解它们。





   如果你是一个很喜欢在测试时搞破坏的坏孩子。(这是个好习惯)那么你可能发现在你测试它的时候会有些问题:
当在你点击播放按钮一段时间后,如果你停止它。然后再点击你的播放按钮。你显示的当前MP3时间位置的时间信息不会从0:00开始!


这可能另你我都感到头疼。
是代码


   var   tmp1   =   Math.floor(mySound.duration/60000);
   var   tmp2   =   Math.floor(mySound.duration/1000-tmp1*60);
   if   (tmp2<10)   {
      tmp2   =   "0"+tmp2;
   }
   var   tmp3   =   Math.floor(mySound.position/60000);
   var   tmp4   =   Math.floor(mySound.position/1000-tmp3*60);
   if   (tmp4<10)   {
      tmp4   =   "0"+tmp4;
   }
   soundTimeTotal.text   =   tmp1+":"+tmp2;
   soundTimeNow.text   =   tmp3+":"+tmp4;   









出了问题吗?可能是。
但事实证明它不是这部分代码出了问题。

将本文收藏到QQ书签与更多好友分享
[打 印]
[] [返回上一页] [收 藏]
上一篇文章:鼠绘植物技术内幕
下一篇文章:鼠绘人物技术篇
∷相关文章评论∷    (评论内容只代表网友观点,与本站立场无关!) [更多评论...]
精彩推荐
热门文章
· 注册码大全二
· 注册码大全四
· 注册码大全一
· 要10G免费网络硬盘的请进..
· 通过google 赶快来赚美金..
· 注册码大全十
· 头像-qq头像(qq新头像)4..
· 让你轻松架设FTP服务器1..
· 注册码大全三
· 梦幻背景图片7
· 卡通动物图片6
· 网页制作素材-按钮素材2..
· 让你轻松架设FTP服务器5..
· 风景图片8
· 注册码大全九
· 让你轻松架设FTP服务器2..
关注此文读者还看过
· Set Property 设定物件
· 字符串操作符
· 中华网公布第三季度财报..
· Flash5任意两点间随机画..
· 动态创建下拉菜单
· 关于在浏览器中执行*.ex..
· PHP 编码规范(17)
· FreeBSD下 -- Apache基本..
· 比尔·盖茨在微软开发者..
· 利用ASP+XML架设在线考试..
· 波卡尔点制作教程
· [适用初级]了解事件处理..
· Serv-U:快速构建功能强大..
· 新生的矢量动画
· Flash MX2004入门与进阶..
· ASP讲座之四:ASP内置组..
相关文章
· 一分钟学会制作文字凹..
关于本站 - 网站帮助 - 广告合作 - 下载声明 - 友情连接 - 网站地图 - 人才招聘
网站合作、内容监督、商务咨询:QQ: 9576619
Copyright ? 2005--2008 中国建站之家版权所有
粤ICP备05092265号