您好!欢迎您光临版块播放器的制作原理与过程_迎客松B站!

体育

I

交友

I

论坛

I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>进阶教程>>>版块播放器的制作原理与过程
版块播放器的制作原理与过程
发表日期:2012/9/19 10:53:00 出处:迎客松 作者:翠柏 发布人:hsb345 已被访问 2814

版块播放器的制作原理与过程

   

    教学目的:通过本节教学了解和熟悉按钮的从公用库中提取和指令语句的添加,及控制歌曲的播放与停止,以此创作精美适用的mp3多曲播放器。

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

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

   

 

    作前准备

  1.准备“18首mp3缓冲效果好的歌曲有效地址,保存到指定的文件夹待用。

  2.准备一张规格约为172*34透明动态图片,保存到指定的文件夹待用。

  制作过程

    1.启动FLASH8 软件

    2.确立文档属性 设置动画尺寸为176*80,背景颜色黑,其它默认,点击确定,进入场景1。如图1所示:



图1

    3.首先,将准备好的素材图片导入到库中,待用。


    4.创建影片剪辑元件

    (1)选择“插入-新建元件”,建立一个名为“歌曲”的影片剪辑元件,点击确定,进入元件编辑区。添加两个图层,共三个图层。自下而上命名为按钮、文本、as。

  A.选择按钮图层第一帧,点击“窗口-公用库-按钮”,在按钮界面双击倒数第一个文件夹。如图2所示:

图2

然后在新界面选择rounded green forward(下一个开始),将其拖入舞台,全居中。如图3所示:


  图3(此图放大一倍)

点击该按钮,按f9,打开动作面板,在as编辑区输入,如下按钮指令:

on (release)
{
 play();
    var mySound = new Sound();
    mySound.loadSound("
http://images.bbvod.net/m2/200611/bird/mp3/4.mp3", true);
    _root.bp_mc._visible = 1;
    _root.cp_mc.play();
}

注:红色部分为你准备的第1首歌曲地址

用鼠标将第2-18帧刮黑,右键刮黑处-转换关键帧,这样第1-18帧上的按钮都有了如上的相同语句。点击第2帧上的按钮,按f9,打开动作面板,在as编辑区输入,如下按钮指令:

on (release)
{
 play();
    var mySound = new Sound();
    mySound.loadSound("
http://www.sxtgedu.net/schoolmusic/music/yijianmei.mp3
", true);
    _root.bp_mc._visible = 1;
    _root.cp_mc.play();
}

注:红色部分为你准备的第2首歌曲地址

同理同种方法为第3-18帧上的按钮添加指令语句,并将语句中的红色部分更换为第3-18首歌曲的地址。上锁。

  B.选择文本图层第一帧,在按钮的左侧适当位置输入“版块播放器”五个字,字体、规格、颜色自定,垂直中齐。在第2帧插入空白关键帧,在第18帧插入帧。上锁。如图4所示:

图4(此图放大一倍)

  C.选择as图层第2-18帧,插入空白关键帧,分别依次点击第1-18帧,按f9,打开动作面板,输入各帧上的停止指令:stop(); 上锁。

  D.完成后的时间轴,如图5所示:


  图5



    (2)选择“插入-新建元件”,建立一个名为“音频条”的影片剪辑元件,点击确定,进入元件编辑区。就一个图层。

  选择图层1第1帧,用矩形工具在舞台拖一个规格为2*26的,无边线的矩形,颜色随意,全居中。点击该实例,打开混色器,设置其参数,如图6所示:

图6

然后用充分变形工具选中该实例,将其色调顺时针旋转90°,操作后的舞台实例,如图7所示:


图7(此图放大一倍)

    (3)选择“插入-新建元件”,建立一个名为“音频”的影片剪辑元件,点击确定,进入元件编辑区。添加一个图层,共两个图层。下层为图层1,上层为图层2。

    A.选择图层1第一帧,从库中拖出“音频条”影片剪辑元件到舞台,全居中。在属性面板填写其实例名称为:ypt如图8所示:


图8

选中该实例,打开滤镜,设置其参数,如图9所示:

图9

锁定该图层。

    B.选择图层2第一帧,按f9 ,打开动作面板,在as编辑区输入,如下帧语句:

max = 26;
setProperty("ypt", _visible, false);
for (i = 1; i < max; i++)
{
    duplicateMovieClip("ypt", "ypt" + i, i);
    setProperty("ypt" + i, _x, i * 4 + 0);
    setProperty("ypt" + i, _y, 0);
    setProperty("ypt" + i, _alpha, 100);
}
this.onEnterFrame = function ()
{
    for (i = 1; i < max; i++)
    {
        setProperty("ypt" + i, _yscale, random(100));
    }
};

    B.锁定该图层。完成后的时间轴,如图10所示:

图10

    5.编辑制作场景

    返回场景1,添加4个图层,共5个图层。自下而上命名为歌曲、停止、音频、装饰、as。

    (1)选择歌曲图层第一帧,从库中拖出“歌曲”影片剪辑元件到舞台,将其摆放在舞台的右下角。上锁。如图11所示:

图11

    (2)选择停止图层第一帧,点击“窗口-公用库-按钮”,在按钮界面双击倒数第一个文件夹。如图12所示:



图12

然后在新界面选择rounded green stop(停止),将其拖入舞台,摆放在舞台的左下角,和歌曲按钮平行。如图13所示:


图13

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

on (release)
{
    _root.bp_mc._visible = 0;
    _root.cp_mc.stop();
    stopAllSounds ();
}

锁定该图层。

    (3)选择音频图层第1帧,从库中拖出“音频”影片剪辑元件到舞台,规格为2*26,将其放置在停止按钮的右侧。如图14所示:


图14

点击该实例,在属性面板填写其实例名称为:bp_mc 。上锁。如图15所示:

图15

    (4)选择装饰图层第1帧,从库中拖出“装饰动态图片”的影片剪辑元件到舞台,规格为172*34,将其放置在舞台的上半部,水平中齐。如图16、17所示:

图16

图17

点击该实例,在属性面板填写其实例名称为:cp_mc 。上锁。如图18所示:


图18

    (5)选择as图层第1帧,按f9,打开动作面板,在as编辑区输入,如下帧语句:

startDrag ("AS_mc", true);
this.bp_mc._visible = 0;
_root.cp_mc.stop();

锁定该图层。

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



图19

    7.测试存盘

 

    *说明:

    1.本播放器是通过按钮上的as语句加载外部mp3音乐文件的,故体积小(本歌卡加载了18首歌曲,swf文件仅16.3kb)。其不足是,当加载的mp3地址失效后,其播放器中的歌曲不发声了。

    2.本播放器适合于放置在网站版块和QQ空间之中。

 

最终效果显示:

                              
 
 
 
 
 
 
 
 
     

                            

 
 
 
 
 
 
 
     

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

 

全屏下载

 

祝你成功!

 

进入更多教程

 

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



qq467101947
(2011/6/19 20:18:00)

从今天起开始学习老师的作品


yaorao
(2010/10/8 0:38:00) [120.7.64.]

恩师我学了

 发表评论:共有 2 条评论

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

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

联系电话: 联系人:翠柏

琼icp备09005167