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

体育

I

交友

I

论坛

I

会员注册

I

本站搜索

I

收藏本站

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

微型播放器的制作原理与过程

   

    教学目的:通过本节教学了解和熟悉影片剪辑的创建、动态文本及其变量的设定、按钮的制作和指令语句的添加,以此创作小巧玲珑、精美适用的mp3微型播放器。

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

    教学要点:影片剪辑、按钮、变量、混色器、动作面板、as语句。

   

 

    作前准备 :准备“古筝、二胡、笛子、琵琶、扬琴、唢呐、口哨、葫芦丝、广东音乐、民歌精选”各10首mp3缓冲效果好的有效地址,保存到指定的文件夹待用。

    1.启动FLASH8 软件

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



图1

    3.创建按钮元件

    (1)选择“插入-新建元件”,建立一个名为“翻页”的按钮元件,点击确定,进入元件编辑区。就一个图层。

    选择图层1第一帧(弹起),打开矩形工具,选择多边形工具,在属性面板点击“选项”按钮,打开工具设置界面,设置其参数,如图2所示:


图2

在舞台拖一个规格为27*31的,黑红色的无边线三角形,全居中。右键该实例将其转换为影片剪辑,命名为“三角”。点击舞台实例,打开滤镜,设置其参数,如图3所示:


图3

在第2帧(指针经过)插入关键帧,将该实例变换个颜色,其色调参数,如图4所示:

图4

在第4帧(点击)插入帧。时间轴和舞台实例显示,如图5所示:

图5


    (2)选择“插入-新建元件”,建立一个名为“隐钮”的按钮元件,点击确定,进入元件编辑区。就一个图层。

    选择图层1第4帧(点击)插入空白关键帧,用矩形工具在舞台拖一个无边线的长条矩形,颜色随意。全居中。如图5所示:

图5


    4.创建影片剪辑

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

    A.选择按钮图层第一帧,从库中拖出“隐钮”按钮元件到舞台,规格为150*28,全居中。如图6所示:

图6

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

on (release)
{
    mySound.loadSound("
http://wanjingchina.com/ZHT/vip-malingshan/sound/music.mp3", true);
    _root.lineMc._visible = 1;
    gotoAndStop(1);
}

在第2帧插入关键帧,点击该帧上的按钮,按f9,打开动作面板,将语句中的音乐地址换成第二首古筝乐曲的地址。将gotoAndStop(1);中的数字换成和该帧相对应的2 。同理同种方法在第3-10帧插入关键帧,并完成该帧上的按钮指令语句的添加。第10帧上的按钮语句是:

on (release)
{
    mySound.loadSound("
http://www.sztashi.com/05.mp3", true);
    _root.lineMc._visible = 1;
    gotoAndStop(10);
}

锁定该图层。

    B.选择歌名图层第一帧,用文本工具在按钮上输入该帧上的歌曲名称,全居中。如图7所示:

图7

在第2-10帧插入关键帧,用文本工具依次将各帧歌名换成该帧向对应的歌名。上锁。

    C.选择选歌图层第一帧,从库中拖出“翻页”按钮元件到舞台,设置其规格为16*18 ,将其移到隐钮的右侧,垂直居中。右键该按钮,复制-粘贴,点击新粘贴的按钮,选择“修改-变形-水平翻转”,然后将其移到隐钮的左侧,垂直居中。如图8所示:


图8

框选两个按钮,在属性面板设置其Alpha为35% 。如图9所示:


 图9

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

on (release) {
 play();
}

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

on (release) {
 prevFrame();
}

在第10帧插入帧,上锁。

    D.选择停止图层第一帧,按f9,打开动作面板,在as编辑区输入该帧的停止命令:stop(); 右键该帧-复制帧,再依次右键第2-10帧,粘贴帧。上锁。

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

var mySound = new Sound();

在第10帧插入帧,上锁。

    F.该环节完成后的时间轴,如图10所示:

图10

将古筝影片剪辑中所有的图层上的帧刮黑,右键刮黑处-复制帧。

    (2)选择“插入-新建元件”,建立一个名为“二胡”的影片剪辑元件,点击确定,进入元件编辑区。右键图层1第一帧-粘贴帧,这时,时间轴会出现和古筝时间轴一样的图层、一样的帧。

    A.然后,将按钮图层各帧上的按钮语句中的古筝曲地址换成相对应的二胡曲地址;

    B.再后,将歌名图层各帧上的歌名换成相对应的二胡曲名称。

    (3)同理同种方法完成笛子、琵琶、扬琴、唢呐、口哨、葫芦丝、广东音乐、民歌精选八个影片剪辑的创建与操作。

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

    A.选择喇叭图层第一帧,用矩形工具在舞台拖一个,笔触高度为2,无填充的,规格为13*20的黑红色矩形,全居中(图11-1)。将场景放大一倍,然后用选择工具将矩形左上角向中间拖(图11-2),再将左下角向中间拖(图11-3)。在第6帧插入帧。上锁。其绘制流程,如图11所示:

图11

    B.选择音波图层第一帧,用线条工具在属性面板设置其参数,如图12所示:

图12

在喇叭的右侧拖一个垂线(图13-1),用选择工具将该实例向右拖个弧(图13-2),在第3帧插入关键帧,将该实例改为黄色(图13-3),在第5帧插入关键帧,将该实例改为绿色(图13-4),在第6帧插入帧。上锁。其绘制流程,如图13所示:

图13

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

    选择图层1第一帧,从库中拖出“三角”影片剪辑元件到舞台,全居中。(图14-1),规格改为9*10(图14-2),将其打散,改其颜色为红色。在第3帧插入关键帧,改其颜色为黄色(图14-3),,在第5帧插入关键帧,改其颜色为绿色(图14-4),在第6帧插入帧。其绘制流程,如图14所示:

图14
(此图放大一倍)


    5.编辑制作场景

    返回场景1,添加11个图层,共12个图层。自下而上命名为,如图15所示:

图15

    (1)选择背景图层第一帧,用矩形工具打开混色器,设置其参数,如图16所示:


图16

在舞台拖一个规格为170*120的矩形,全居中。用填充变形工具将其调整为,如图17所示:


图17

在第2帧插入关键帧,点击该帧上的实例,变换一下混色器三个色码快的颜色。同理同种方法,完成第3-11帧上的矩形变色。上锁。

    (2)选择底板图层第1帧,用矩形工具在舞台拖一个规格为103*31的,无边线的橙色矩形,全居中。在第11帧插入帧,上锁。如图18所示:

图18

    (3)选择文本图层第一帧,用文本工具输入相关内容,其文字和位置,如图19所示:


图19

在第2帧插入关键帧,点击该帧上的“微型播放器”文字,删除。如图20所示:

图20

在第3-11帧插入关键帧,依次将“古筝”改为“二胡、笛子、琵琶、扬琴、唢呐、口哨、葫芦丝、广东音乐、民歌精选”。上锁。

    (4)选择滑块图层第一帧,用矩形工具在舞台拖一个规格为6*30的,无边线的绿色矩形,右键该实例,将其转换为影片剪辑元件,全居中。如图21所示:

图21

选中该实例,在属性面板填写其实例名称为:huakuai 。点击该实例,按f9,打开动作面板,在as编辑区输入,如下语句:

onClipEvent (load)
{
    newx = _x;
    newy = _y;
    _root.Sound = new Sound();
}
onClipEvent (enterFrame)
{
    _root.a = Math.round(_x - (newx - 50));
    _root.Sound.setVolume(_root.a);
}
on (press)
{
    startDrag ("_root.huakuai", true, newx - 50, newy, newx + 50, newy);
}
on (release, releaseOutside)
{
    stopDrag ();
}

在第11帧插入帧。上锁。

    (5)选择小框图层第一帧,用矩形工具在舞台拖一个笔触高度为3,规格为103*31的,无填充色的黑红色小框,全居中。在第11帧插入帧。上锁。如图22所示:

图22

    (6)选择按钮图层第一帧,从库中拖出“翻页”按钮元件到舞台,将其放置在小框的右侧,垂直中齐;在从库中拖出一个“翻页”按钮元件到舞台,将其水平翻转,然后把它移到小框的左侧,垂直中齐。如图23所示:

图23

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

on (release) {
 play();
}

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

on (release) {
 prevFrame();
}

在第11帧插入帧,上锁。

    (7)选择喇叭图层第一帧,从库中拖出“喇叭”影片剪辑元件到舞台,将其放置在背景的左下角,在第2帧插入关键帧,在第11帧插入帧。然后返回到第一帧,将该帧的的喇叭打散,上锁。如图24所示:

图24

    (8)选择动本图层第一帧,用动态文本工具,在背景的右侧拖一个文本框,字体、颜色、规格适当,调整好位置。如图25所示:

图25

点击该实例,在属性面板填写其变量为: a 。在第11帧插入帧,上锁。如图26所示:

图26

    (9)选择歌曲图层第2帧插入空白关键帧,从库中拖出“古筝”影片剪辑元件到舞台,将其放置在舞台的上方,水平中齐。如图27所示:


图27

在第3帧插入空白关键帧,从库中拖出“二胡”影片剪辑元件到舞台,将其放置在舞台的上方,水平中齐。如图28所示:

图28

同理同种方法,按照文本图层上乐曲的类别顺序完成第4-11帧上的操作。上锁。

    (10)选择游标图层第2帧插入空白关键帧,从库中拖出“游标”影片剪辑元件到舞台,将其放置在小框的上方,水平中齐。在第11帧插入帧,上锁。如图29所示:

图29

    (11)选择边框图层第一帧,导入或制作一个边框,规格170*120,全居中。在第11帧插入帧,上锁。如图30所示:

图30

    (12)选择停止图层第一帧,按f9,打开动作面板,在as编辑区输入,停止命令:stop(); 。右键该帧-复制帧,再在第2-11帧上,依次右键-粘贴帧。上锁。

 

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



图31

    7.测试存盘

 

    *说明:

     1.该微型播放器适合于放置在网站的左右版块之上,以点缀你网站的首页。也可宽高等比放大来欣赏。

     2.本播放器是通过as语句加载外部mp3文件的,故体积小(本播放器加载了100首乐曲,swf文件仅182kb)。其不足是,当加载的mp3地址失效后,其播放器中的乐曲也就不发声的了。

最终效果显示:


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

 

全屏下载

 

祝你成功!

 

进入更多教程

 

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

没有相关评论

 发表评论:

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

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

联系电话: 联系人:翠柏

琼icp备09005167