论文部分内容阅读
摘要:利用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.(编辑:隗爽)
关键词:元件;场景;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.(编辑:隗爽)