老渔翁音画乐园

点燃篝火跳起舞的制作原理与过程

    教学目的：通过本节教学了解和掌握通过脚本打造火焰、加载外部歌曲文件，以及通过影片剪辑之间的触碰实现动画间的切换，进而创作出用火柴点燃篝火的动画效果。

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

    教学要点：调用外部文件、影片剪辑、实例名称、动作面板、as语句。

    作前准备：

    1.准备一首缓冲效果较好的适合动画主题的mp3歌曲地址，保存到指定的文件夹待用。

    2.准备一张动态且透明的双人舞小图，经过制图软件（ps、fw）处理后，保存到指定的文件夹待用。

　　制作步骤

    1.启动FLASH8 软件。

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

图1

    3.首先将双人舞素材导入库中，待用。

素材图

    4.创建图形元件

    （1）选择“插入－新建元件”，创建一个名为“干树枝”的图形元件，点击确定，进入元件编辑区。就一个图层。

    选择图层1第1帧，用笔刷工具在舞台画一个规格约为160*40的树枝，颜色形状自定。如图2所示：

图2

    （2）选择“插入－新建元件”，创建一个名为“柴禾堆”的图形元件，点击确定，进入元件编辑区。就一个图层。

    选择图层1第1帧，从库中拖出“干树枝”图形元件若干，将其组合成柴禾堆。如图3所示：

图3

    5.创建影片剪辑元件

    （1）选择“插入－新建元件”，创建一个名为“火柴”的影片剪辑元件，点击确定，进入元件编辑区。添加一个图层，共两个图层。下层命名为火杆，上图命名为火苗。

    A.选择火杆图层第1帧，用线条工具在舞台拖一个笔触高度为3的，白色火柴杆，左对齐－下对齐。在第10帧插入帧，上锁。如图4所示：

图4

    B.选择火苗图层第1帧，用椭圆工具，打开混色器，设置其参数，如图5所示：

图5

在舞台画一个规格为18*50的，无边线的椭圆，下对齐－水平中齐，打散后，用任意变形工具将其注册点移到下中。如图6所示：

图6

在第5、10帧插入关键帧，点击第5帧上的舞台实例，将其规格改为23*78。如图7所示：

图7

创建这两个区域间的形状补间。上锁。

    C.本环节完成后的时间轴，如图8所示：

图8

    （2）选择“插入－新建元件”，创建一个名为“火苗”的影片剪辑元件，点击确定，进入元件编辑区。就一个图层。

    选择图层1第一帧，用椭圆工具，打开混色器，设置其参数，如图9所示：

 图9

在舞台拖一个10*10的正圆，打散，水平中齐－下对齐。如图10所示：

图10

在第2帧插入关键帧，将该实例规格改为55*70，水平中齐－下对齐。如图11所示：

 图11

在第5帧插入关键帧，将该实例规格改为50*70，并垂直向上移到一段距离。如图12所示：

 图12

在第10帧插入关键帧，修改其规格为5*5，并垂直向上移动一段距离。如图13所示：

图13

点击该图层名称处，待时间轴变黑后，在属性面板创建形状补间。本环节完成后的时间轴，如图14所示：

图14

    （3）选择“插入－新建元件”，创建一个名为“火焰”的影片剪辑元件，点击确定，进入元件编辑区。添加一个图层，共两个图层。下层命名为火苗，上层命名为as。

    A.选择火苗图层第1帧，从库中拖出“火苗”影片剪辑元件到舞台，规格不变，水平中齐－下对齐。上锁。如图15所示：

图15

选中该实例，在属性面板填写其实例名称为：hm 。如图16所示：

图16

    B.选择as图层第1帧，按f9 打开动作面板，在as编辑区输入，如下帧语句：

i = 0;
ran = random(50) + 30;
onEnterFrame = function ()
{
    duplicateMovieClip("hm", "hm" + i, i);
    with (this["hm" + i])
    {
        _x = random(40);
        _y = random(30);
        _alpha = random(60) + 40;
    } 
    ++i;
    if (i >= ran)
    {
        i = 0;
    } 
};

锁定该图层。

    C.该环节完成后的时间轴，如图17所示：

图17

    （4）选择“插入－新建元件”，创建一个名为“矩形”的影片剪辑元件，点击确定，进入元件编辑区。就一个图层。

    选择图层1第一帧，用矩形工具在舞台拖一个规格为75*60的，无边线的矩形，颜色随意，全居中。如图18所示：

图18

    6.创建按钮元件

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

    选择图层1第4帧（点击）插入空白关键帧，用矩形工具在舞台拖一个规格为50*30的，无边线的矩形，颜色随意。全居中。如图19所示：

图19

   7.编辑制作场景 返回场景1，添加六个图层，共七个图层。自下而上分别命名为背景、篝火、火柴、矩形、舞者、标题和as。

    （1）选择背景图层第一帧，导入或制作一个背景，规格为550*400，全居中。在第2帧插入帧，上锁。如图20所示：

图20

    （2）选择篝火图层第一帧，从库中拖出“柴禾堆”图形元件到舞台，规格不变，将其放置在背景的左下方。如图21所示：

图21

在第2帧插入关键帧，在从库中拖出“火焰”影片剪辑元件到舞台，规格不变，将其放置在柴禾堆的上方，上锁。其位置，如图22所示：

图22

    （3）选择火柴图层第一帧，从库中拖出“火柴”影片剪辑元件到舞台，规格不变，将其放置在背景的右下方。如图23所示：

图23

点击该实例，在属性面板填写其实例名称为：hc 。如图24所示：

图24

在第2帧插入空白关键帧，用文本工具在背景的左下方输入“返回”，规格、字体、颜色自定，上锁。如图25所示：

图25

    （4）选择矩形图层第一帧，从库中拖出“矩形”影片剪辑元件到舞台，规格不变，将其放置火柴堆的上方。在属性面板设置其Alpha为0％。如图26所示：

图26

点击该实例，在属性面板填写其实例名称为：mc  。在第2帧插入空白关键帧，从库中拖出“隐钮”按钮元件到舞台，将其放置在“返回”之上。如图27所示：

图27

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

on (release) {
 gotoAndStop(1);

}

锁定该图层。

    （5）选择舞者图层第一帧，从库中拖出“舞者”影片剪辑元件到舞台，将其放置在背景的右上方，调整好规格、位置。如图28所示：

图28

在第2帧插入关键帧。返回第1帧，点击该帧上的舞台实例，将其打散，转为元件，在属性面板设置其Alpha为50％。上锁。如图29所示：

图29

    （6）选择标题图层第一帧，用文本工具在背景的左侧输入竖向的作品标题。字体、规格、颜色自定。在第2帧插入帧，上锁。如图30所示：

图30

    （7）选择as图层第一帧，按f9，打开动作面板，在as编辑区输入，如下帧语句：

stop(); 
hc.onPress = function() { 
hc.startDrag(); 
} 
hc.onRelease = function(){ 
hc.stopDrag(); 
hit = hc.hitTest(mc); 
if (hit) { 
gotoAndStop(2);
} 
}
var music:Sound = new Sound();
music.loadSound("迎客松", true);
music.onSoundComplete = function() { music.start();};

在第2帧插入空白关键帧，点击该帧，按f9，打开动作面板，在as编辑区输入，如下帧语句：

stop();
var music:Sound = new Sound();
music.loadSound("http://11ray.cn/809008.mp3", true);
music.onSoundComplete = function() { music.start();};

语句中黄色部分为你准备好mp3歌曲地址。
锁定该图层。

    8.本作业完成后时间轴显示如图31所示：

图31

　　9.测试存盘

    *说明：

    1.本教程中歌曲为外部加载，可省略你的空间，但歌曲地址容易失效。

    2,在制作中你可以根据作品的主题，选择更为适合的背景或添加一个漂亮的边框。

最终效果显示：

< >/Article/UploadFiles/201106/2011060420060537.swf

全屏下载

祝你成功！

进入更多教程