基于Flash CS4音乐播放器的设计与实现

王寿苹 胡 明

摘要:利用Flash 中的ActionScript实现音乐播放器在多媒体设计中有广泛的应用。本文基于Flash CS4中的AS3,设计并制作一款音乐播放器,能够完成音乐播放、暂停、停止、播放进度显示、音量控制的功能。

关键词:元件;场景;ActionScript;音乐播放器;多媒体动画设计

中图分类号:G434 文献标识码:B 文章编号:1673-8454(2009)20-0067-02

一、设计播放器界面

利用Flash CS4的基本绘图工具和颜色填充工具绘制播放器的界面,注意设置尺寸值,播放进度槽、播放进度条、音量按钮宽度值分别为400、1、 6,音量按钮高度值为4,这些数值将与后面AS代码的有关数据相对应。分别将播放器界面背景、播放按钮、暂停按钮、停止按钮、播放进度槽、播放进度条、音量条、音量按钮转换成影片剪辑元件beijing、按钮元件1、按钮元件2、按钮元件3、影片剪辑元件4、影片剪辑元件5、影片剪辑元件6、影片剪辑元件7。在Flash场景中由下至上,把播放器界面背景、暂停按钮、播放按钮、停止按钮、播放进度槽、播放进度条、音量条、音量按钮分别放置在不同的图层上,通过属性面板的位置参数对齐暂停按钮、播放按钮的位置,使播放按钮正好放置在暂停按钮的上方,并在属性面板中为元件依次命名为“bj_mc”、“stp_btn”、“ply_btn”、“restart_btn”、“jdc_mc”、“jdt_mc”、“bar_mc”、“slider_mc”。如图1所示。

二、编写AS3代码

1.编程前的准备工作

(1)首先把音乐文件和Flash文件放置到同一个文件夹里,这样方便文件的调用。

(2)在时间轴上新建一个图层,命名为“action”。选择第一帧,单击动作—帧选项卡,打开动作面板,编写代码。这也是AS3和AS2的不同之处,AS3的动作是写到帧上,而不是写在按钮或者影片剪辑上。

2.调用外部音乐文件

(1)调用外部文件之前要声明一个实例s来继承sound类,输入:var s:Sound = new Sound();

(2)然后定义一个变量req,将音乐文件的路径信息赋给它,输入:var req:URLRequest = new URLRequest

("高山流水.mp3");

(3)实例s通过load()函数来调用音乐文件,输入:s.load(req);

3.播放按钮程序的编写

当鼠标单击播放按钮时,音乐开始播放,因此需要为播放按钮添加一个侦听器来侦听鼠标单击事件。单击播放按钮,调用clickhandle01函数。音乐播放的同时播放按钮会变成暂停按钮。音乐播放器有暂停功能,即当音乐暂停后,再次单击播放按钮时音乐会从暂停的位置继续播放,因此需要定一个变量pausePosition来记录文件播放暂停的当前位置。播放按钮程序编写如下:

var channel:SoundChannel = new SoundChannel();

var pausePosition:int = channel.position;

function clickhandle01(event:MouseEvent):void{

channel = s.play(pausePosition);

ply_btn.visible = false;

}

ply_btn.addEventListener(MouseEvent.CLICK,clickhandle01);

4.暂停按钮程序的编写

当鼠标单击暂停按钮后,音乐会暂停播放,同时暂停按钮会隐藏,播放按钮会显示出来。同样需要为暂停按钮添加侦听器,当单击暂停按钮时,调用clickhandle02函数。音乐播放暂停之后,需要记录当前音乐的位置,将值赋给pausePosition,这样再单击播放按钮时,音乐就会从停止的位置继续播放。

function clickhandle02(event:MouseEvent):void{

pausePosition=channel.position;

channel.stop();

ply_btn.visible = true;

}

stp_btn.addEventListener(MouseEvent.CLICK,clickhandle02);

5.停止按钮程序的编写

停止按钮和暂停按钮有区别,停止是回到正在播放文件的开始并且停止,暂停是停止在文件的当前处。为播放器停止按钮添加一个侦听器来侦听鼠标单击事件,如果单击停止按钮,调用clickhandle03函数。

function clickhandle03(event:MouseEvent):void{

pausePosition = 1;

channel.stop();

ply_btn.visible=true;

}

restart_btn.addEventListener(MouseEvent.CLICK,clickhandle03);

6.播放进度显示程序的编写

当音乐不断播放时,进度条就会变长,Event.ENTER_FRAME可以定时地响应。在onEnterFrame函数中,定义一个中间变量playbackPercent,表示音乐播放的当前位置和音乐文件长度的比值。已知音乐播放槽的长度为400,这样随着音乐的播放,在x轴对播放进度条进行放大即可。

addEventListener(Event.ENTER_FRAME,onEnter Frame);

function onEnterFrame(event:Event):void {

var playbackPercent:uint = channel.position / s.length;

jdt_mc.scaleX=playbackPercent *400+1;

}

7.音量控制程序的编写

当用鼠标按下音量控制按钮时,可以拖动该元件,当鼠标松开的时候,元件停止在该处。按钮只能在音量条上横向移动,不能超出音量的宽度范围。因此需要给音量控制按钮添加三个监听器,一个监听当鼠标按下时,一个监听当鼠标松开时,一个监听当鼠标拖动音量按钮时。

当鼠标按下时的程序:

slider_mc.addEventListener(MouseEvent.MOUSE_ DOWN,clickHandle04);

function clickHandle04(event:MouseEvent):void{

slider_mc.startDrag(false, newRectangle(bar_mc.x,bar_mc.y,bar_mc.width-6,bar_mc.height-4));

this.stage.addEventListener(MouseEvent.MOUSE_ MOVE,volumeOnmove);

}

接着为滑块添加一个侦听器来监听鼠标的松开:

slider_mc.addEventListener(MouseEvent.MOUSE_ UP,clickHandle05);

function clickHandle05(event:MouseEvent):void {

slider_mc.stopDrag();

this.stage.removeEventListener(MouseEvent.MOUSE_ MOVE,volumeOnmove);

}

当鼠标拖动滑块进行移动时,执行volumeOnmove函数。

function volumeOnmove(event:MouseEvent):void {

var num:Number=slider_mc.x-bar_mc.x;

var volumeNum:SoundTransform=new SoundTransform ;

volumeNum.volume=num/bar_mc.width;

channel.soundTransform=volumeNum;

}

至此,一款具有播放、暂停、停止、播放进度显示、音量控制功能的音乐播放器就制作完成,有兴趣的读者可以在此基础上实现更复杂的功能。

参考文献:

[1]http://bbs.jcwcn.com/thread-259025-1-1.html.

[2]Adobe 公司. Adobe Flash CS4 中文版帮助文档 http://help.adobe.com/zh_CN/ActionScript/3.0_Programming

AS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7d12.html.

[3]Adobe 公司. Adobe Flash CS4 中文版帮助文档http://help.adobe.com/zh_CN/ActionScript/3.0_Programming

AS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7d1e.html.(编辑:隗爽)