您好!欢迎您光临单曲播放器的制作原理与方法_迎客松B站!

体育

I

交友

I

论坛

I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>进阶教程>>>单曲播放器的制作原理与方法
单曲播放器的制作原理与方法
发表日期:2012-9-19 9:40:00 出处:迎客松 作者:翠柏 发布人:hsb345 已被访问 2496

单曲播放器的制作原理与方法

   

    教学目的:通过本节教学了解和熟悉单曲播放器的主要构成,及其要件的设置、制作、组合,以此创作出简单、适用、精美的单曲播放器。

  教学对象:本教材是针对有一定动画制作基础和对属性面板及工具箱、动作面板、as语句有所了解的朋友们编制的,因此省略了一些步骤,还望谅解。

    教学要点:按钮、动作面板、as语句。

   

   

    作前准备

    1.准备一张舞者透明全身人物动态图片,经过制图软件(ps、fw)处理后,放在指定的文件夹待用。

    2.下载一首mp3歌曲,放在指定的文件夹待用。

    1.启动FLASH8 软件

    2.确立文档属性 设置动画尺寸为550*400,帧频为12,背景颜色深绿,其它默认,点击确定。如图1所示:


图1

    3.首先将准备好的素材图片和歌曲导入到库中,待用。其素材图如下:

素材图

    4.创建影片剪辑元件

    (1)选择“插入-新建元件”,建立一个名为“音量控制”的影片剪辑元件,点击确定,进入元件编辑区。添加一个图层,共两个图层。自下而上命名为底板、滑块 。

    A.选择底板图层第一帧,用矩形工具在舞台拖一个规格80*14的,无边线的橙色矩形(图2-1),然后,用选择工具将其左边上角向下拖至底角,成为三角形(图2-2),点击该实例,左对齐-垂直中齐。上锁。如图2所示:


图2

    B.选择滑块图层第一帧,用矩形工具在舞台拖一个规格5*18的,无边线的浅绿色矩形 将其放置在底板的中间,垂直中齐。将其转换为影片剪辑元件。如图3所示:


图3

点击该实例,按f9,打开动作面板,在as编辑区输入,如下影片剪辑指令语句:

onClipEvent (enterFrame)
{
    mex = getProperty(this, _x);
    vol.setVolume(mex / 9.800000E-001);
}
onClipEvent (load)
{
    vol = new Sound();
}
onClipEvent (mouseDown)
{
    if (this.hitTest(_root._xmouse, _root._ymouse))
    {
        startDrag (this, false, 0, 0, 80, 0);
    }
}
onClipEvent (mouseUp)
{
    stopDrag ();
}

锁定该图层。

    (2)选择“插入-新建元件”,建立一个名为“播放进度”的影片剪辑元件,点击确定,进入元件编辑区。添加一个图层,共两个图层。自下而上命名为底板、滑块 。

    A.选择底板图层第一帧,用矩形工具在舞台拖一个规格220*8的,无边线的黄色矩形,点击该实例,左对齐-垂直中齐。上锁。如图4所示:


图4

    B.选择滑块图层第一帧,用矩形工具在舞台拖一个规格5*15的,无边线的红色色矩形 点击该实例,左对齐-垂直中齐。右键该实例,将其转换为影片剪辑元件。如图5所示:

图5

点击该实例,按f9,打开动作面板,在as编辑区输入,如下影片剪辑指令语句:

onClipEvent (load)
{
    drag = new Boolean();
    drag = false;
    cang =220 / _root._totalframes;
}
onClipEvent (mouseDown)
{
    drag = true;
    if (this.hitTest(_root._xmouse, _root._ymouse))
    {
        startDrag (this, false, 0, 0, 220, 0);
    }
}
onClipEvent (mouseUp)
{
    drag = false;
    stopDrag ();
}
onClipEvent (enterFrame)
{
    _root.all.allframe = _root._totalframes;
    _root.all.nowframe = _root._currentframe;
    if (drag == true && this.hitTest(_root._xmouse, _root._ymouse))
    {
        _root.all.kz.stop();
        xvernier = getProperty(this, _x);
        _root.gotoAndStop(int(xvernier / cang));
    }
    else if (_root._currentframe == 1)
    {
        setProperty(this, _x, 0);
    }
    else
    {
        setProperty(this, _x, _root._currentframe * cang);
    }
}

锁定该图层。

    7.编辑制作场景

    返回场景1,添加五个图层,共六个图层。自下而上命名为音乐、按钮、音量、进度、舞者1、舞者2。 

    (1)选择音乐图层第一帧,从库中拖出歌曲文件到舞台,位置随意。这时时间轴上出现,然后按住键盘上的F5,直到音乐播放完时松开。如图6所示:



图6

注:为节省空间我截取歌曲到685帧

点击“该图层第1帧-同步(右侧小三角)-数据流”(数据流的设置可以使音乐文件大大地缩小)。上锁。

    (2)选择按钮图层第一帧,点击“窗口-公用库-按钮”,在按钮界面双击倒数第二个文件夹,然后在新界面分别依次选择flat blue back(起始)flat blue play(开始)、flat blue pause(暂停)、flat blue stop(停止)和flat blue forward(结束)五个按钮,将其拖入舞台的下边的左侧。如图7所示:


图7

下面我们为按钮添加指令语句:

    点击起始按钮,按f9,打开动作面板,在as编辑区输入,如下语句:

on (release){
    gotoAndPlay(1);
}

    点击开始按钮,按f9,打开动作面板,在as编辑区输入,如下语句:

on (release){
    play();
  
}

    点击暂停按钮,按f9,打开动作面板,在as编辑区输入,如下语句:

on (release){
    stop();
 
}

    点击停止按钮,按f9,打开动作面板,在as编辑区输入,如下语句:

on (release){
    gotoAndStop(1);
   
}

    点击结束按钮,按f9,打开动作面板,在as编辑区输入,如下语句:

on (release){
    gotoAndStop(685);

}

*语句中的“685”为歌曲的尾帧。

在第685帧插入帧。上锁。

    (3)选择音量图层第1帧,从库中拖出“音量控制”影片剪辑元件到舞台,按原规格将其水平放置在按钮的右侧,在第685帧插入帧。上锁。如图8所示:

图8

    (4)选择进度图层第1帧,从库中拖出“播放进度”影片剪辑元件到舞台,按原规格将其水平放置在音量控制的右侧,在第685帧插入帧。上锁。如图9所示:

图9

    (5)选择舞者1图层第1帧,从库中拖出“舞者”影片剪辑元件到舞台,按原规格将其放置在舞台的左侧适当位置。如图10所示:

图10

在第685帧插入关键帧,将其水平移到舞台的右侧。如图11所示:

图11

右键点击第1-684帧之间任何一帧,创建本区域间的动画补间。点击第1-684帧之间任何一帧,在属性面板设置其“缓动”为80。如图12所示:

图12

点击上图右侧的“编辑”,打开“自定义缓入/缓出”面板,分别用鼠标调整实例缓动参数,如图13所示:

图13

点击确定,返回场景1。上锁。

    (6)选择舞者2图层第1帧,从库中拖出“舞者”影片剪辑元件到舞台,按原规格将其放置在舞台的右侧,与舞者1平行。点击该实例,在属性面板设置其“颜色-色调”参数,如图14所示:

图14

操作完成后的舞台实例显示,如图15所示:

图15

在第685帧插入关键帧,将其水平移到舞台的左侧。如图16所示:

图16

右键点击第1-684帧之间任何一帧,创建本区域间的动画补间。点击第1-684帧之间任何一帧,在属性面板设置其“缓动”为80。如图17所示:

图17

点击上图右侧的“编辑”,打开“自定义缓入/缓出”面板,分别用鼠标调整实例缓动参数,如图18所示:

图18

点击确定,返回场景1。上锁。

 

    8.该作业完成后的时间轴,如图19所示:



图19

    9.测试存盘

 

    *说明:

     1.你在制作中可以给播放器添加一个精美的背景,其效果更佳。

     2.舞者图层可按你自己的意图制作动画,为让动画和播放器同步,动画必须在场景中完成

     3.教程中的播放器三个要件:按钮、音量、进度均可单独使用

 

最终效果显示:


http://hsb345.16789.net/domName/hsb345/201042610113438705.swf

 

全屏下载

 

祝你成功!

 

进入更多教程

 

双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:



zfl16899
(2010-4-27 19:22:00)

谢谢老师

 发表评论:共有 1 条评论

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

迎客松B站 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话: 联系人:翠柏

琼icp备09005167