论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Flash教程
Tag:flash cs,flash 8,鼠绘,as,手绘,工具,文字,loading,入门,初学,mc,影片剪辑,声音,mtv,游戏,引导,遮罩,菜单,补间,广告条,时钟,视频教程

用FLASH做简单MP3播放器

文章类别:Flash | 发表日期:2008-9-21 20:07:06

  开场白
上网多了,常看到好多网页中有用FLASH做的播放器!有它加在网页中确实给整个页面增加了不少气氛!学FLASH的新手们看到了当然想自己也亲自做个喽!对不!我也是其中之一哦哈!
开始制作
我的思路:
1:由于要放在网页上的所以播放器SWF文件要小,也就是说MP3歌曲文件要从外部加载!
2:能实现:

A 打开网页时能自动加载第一首歌并播放;播放完后自动播放下一首;播放完最后一首能回到第一首;
B 有六首歌的按钮任浏览者可直接选择其一并播放;
C 有个动态字幕,能显示当前歌曲的曲目;
D 有能实现暂停、继续、下一首、上一首的四个按钮和音量控制按钮;

—OK!有了思路就画播放器界面吧!如下图,我画的比较简单,朋友们可以自己发挥画个有个性的属于你的界面吧!
点击浏览该文件

按此在新窗口浏览图片

加载歌曲和实现字幕实时滚动的代码我放在帧上!我共用两帧来实现! 界面上的每个按钮实现的功能的代码我分别放在各自的按钮上!

第一帧我主要用来实现字幕的实时滚动和实时的音量大小!
第二帧就是加载外部MP3,和实时判定歌曲放完后自动放下一首!

第一帧代码如下:


onLoad = function () {
sname = 1;// 声明歌曲序号变量,后面要用到它;比如下面要用到它来实现字幕的内容还有第二帧要用它来确定要播放哪首歌;
count = 0;// 在AS2.0里就必须加这句; AS1.0就不用;意思也是声明变量,在实现字幕的滚动时用到;
};
//以下代码只用于实现字幕的滚动 加载声音的代码我全放到第二帧上了
function loaded() {//自定义调用函数loaded()以便以后调用,
_root.onEnterFrame = function() {
_root.mySound.setVolume(_root.Msound.Bsound._x);
//这句代码是实时获取声音的大小,本来我是放在控制音量的按钮上的,但发有BUG!因为同时用两个onEnterFrame会产生冲突!
count += 1;
show = mbsubstring(this["text"+sname], count-15, count);//这句就是让字幕滚动;注重这里的"show"!它来自动态文本框的变量名!
if (count>mblength(this["text"+sname])-8) {//这个if用于判定字幕滚完后又从头开始滚动;
count = 0;
}
};
}
loaded();//调用刚才定义好的函数!在播放也会调用到!
//以下是定义动态字幕要显示的内容!
text1 = "当前曲目为——明年今日--陈弈迅 ";
text2 = "当前曲目为——冲动的惩罚--刀郎 ";
text3 = "当前曲目为——爱就爱了 -- 陈琳 ";
text4 = "当前曲目为——好心分手 --王力宏 ";
text5 = "当前曲目为——栀子花开 - 何 炅 ";
text6 = "当前曲目为——七里香 -- 周杰伦 ";

第二帧代码如下:

if (sname<=6) {
mySound.stop();// 没有这句,在歌曲未放完的时候按播放按钮加载新的歌曲会出现两首叠放的BUG!
mySound = new Sound();// 声明mySound为新的声音
mySound.loadSound("sound/s"+sname+".mp3", true);// 从外部加载声音;请注重路径和文件名!
mySound.start();// 加载完毕后开始播放
stop();// 场景停在第二帧
mySound.onSoundComplete = function() {
sname = sname+1;
gotoAndPlay(1); // 判定声音放完后,变量sname加1,场景跳到第三帧播放,即播放下一首;
};
} else {
sname = 1;//实现播六首后回到第一首;
}

播放按钮上的代码如下:

on (release) {
loaded();//调用刚才定义好的函数!在播放也会调用到!
mySound.stop();// 没有这句,在歌曲未放完的时候按反复按播放按钮会出现多首叠放的BUG!
soundposition = mysound.position/1000;// 获得声音已播放的毫秒数;除以1000是因为场景中加载声音是以秒为单位;
mySound.onLoad = function() {
mySound.start(soundposition, 1);
};//实现声音从暂停的位置处接着播放,位置由变量soundposition获得;
mySound.loadSound("sound/s"+sname+".mp3", true);
_root.play.gotoAndStop(1);//使播放钮变为绿色;
}

暂停按钮上的代码如下:

on (release) {
mySound.stop();//声音停止;
play.gotoAndStop(2);//使播放钮变为灰色;
delete _root.onEnterFrame;//删除占用CPU资源的代码onEnterFrame;
}

"上一首"按钮上的代码如下:

on (release) {
if (sname>1) {// 判定曲目必须是大于1并小于6;
sname = sname-1;
_root.gotoAndPlay(2);//使场景的第二帧代码刷新;即实现换歌;
_root.play.gotoAndStop(1);//使播放钮变为绿色;
} else {
sname = 6;
_root.gotoAndPlay(2);//使场景的第二帧代码刷新;即实现换歌;
_root.play.gotoAndStop(1);//使播放钮变为绿色;
}
}

"下一首"按钮上的代码如下:

on (release) {
if (sname<6) {// 判定曲目必须是小于6并大于1;
sname = sname+1;
_root.gotoAndPlay(2);//使场景的第二帧代码刷新;即实现换歌;
_root.play.gotoAndStop(1);//使播放钮变为绿色;
} else {
sname = 1;
_root.gotoAndPlay(2);//使场景的第二帧代码刷新;即实现换歌;
_root.play.gotoAndStop(1);//使播放钮变为绿色;
}
}

"音量控制"按钮上的代码如下:

on (press) {
startDrag("_root.Msound.Bsound", false, 0, 0, 100, 0);//限制被拖动的范围;
}
on (release) {
stopDrag();//停止拖动;
}

六个曲目按钮代码相同,只是变量不同,代码如下:

on (release) {
sname = 1;//六个按钮的变量不同分别代表六首歌;
_root.gotoAndPlay(2);//使场景的第二帧代码刷新;即实现换歌;
_root.play.gotoAndStop(1);//使播放钮变为绿色;
}

总结
通过做这个播放器在脚本部分我总结几个要点给大家!

1、学习:函数的自定义和函数调用!即在第一帧上自定义的函数loaded();它的好处可大拉,形象地说就好比你在家银行存上一大笔的钱,然后就只带上一个小小的银行卡就可周游全国各地一样的方便!
2、滚动字幕的实现!这里有算法和技巧的成份需要仔细琢磨,技巧部分就是动态文本框的对齐方式要为右!
3、如何实现声音从暂停的位置处接着播放!方法可能有多种!我这里只是其一!
4、onEnterFrame假如在多处用到会有冲突!

结束语

这算是我第一次写教程吧!感觉好难写(就是要写的地方有好多好多!难处就是要怎么写才能让人通俗易理解呀呵~~)
希望朋友们能看得懂!
源文件在:
点击浏览该文件

下载后朋友们可以自己从网上找些自己喜欢的歌,放进sound文件夹中并分别为之更名为:
s1.mp3 ; s2.mp3 …… s6.mp3
即可

加载歌曲的LOADING(修改后):

点击浏览该文件

我是在原来的文本框的位置叠加了个文本框!(变量名为:下载进度
然后在场景新建个空的MC加上如下代码:

onClipEvent (enterFrame) {
a = int(mySound.getBytesLoaded()/1000);
b = int(mySound.getBytesTotal()/1000);
_parent.下载进度 = int((a/b)*100)+"%";
if (a>=b) {
_parent.下载进度 = " 2";
}
}
视频教程列表
文章教程搜索
 
Flash推荐教程
Flash热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058