实战演练——飞舞的蝴蝶

时间：2022-10-15 百科知识版权反馈

【摘要】：新建影片元件“飞舞的蝴蝶1”，单击时间轴上的“添加引导层”按钮，创建“图层1”的“引导层”，在“引导层”用工具栏中的“铅笔工具”画一条弯弯曲曲的线，作为蝴蝶飞舞的路径，并在30帧按“F5”键插入普通帧。新建影片元件“飞舞的蝴蝶2”。首先将“飞舞的蝴蝶2”从“库”面板拖入“图层1”的第1帧，在第4帧按“F5”键插入延长帧，在“属性”面板里输入该元件的实例名“bb”。图7-67是把蝴蝶换成玫瑰后的效果图。

7.7.3　实战演练——飞舞的蝴蝶

在飞舞的蝴蝶动画中，当鼠标在场景中划过时，一只只蝴蝶随鼠标的移动翩翩飞舞，效果如图7-59所示。

在场景中通过鼠标的移动来实现蝴蝶的飞舞，制作的关键包括两部分：

（1）沿路径运动的蝴蝶影片元件。

（2）用Actionscript来控制蝴蝶的飞舞。

下面来看具体制作步骤。

图7-59　飞舞蝴蝶的效果

1．创建飞舞的动画

（1）创建影片文档

执行“文件/新建”命令，新建一个影片文档，设置舞台尺寸为550×400，背景色为黑色，帧频为40。

（2）创建“翅膀扇动”元件

执行“插入/新建元件”命令，新建一个影片元件，名称为“翅膀扇动”，执行“文件/导入/导入到舞台”命令，把“蝴蝶.gif”图片导入到舞台上。分别在第6帧、第9帧按F6键插入关键帧，用工具栏中的“自由变形工具”，在第6帧把翅膀往中间压一点，在第9帧再往中间压一点，使翅膀逐渐向里翻，如图7-60所示。翻的幅度不要过大，否则看上去不自然。然后在第12帧按“F5”键插入普通帧将“图层1”延长到第12帧，这段简单的蝴蝶翅膀振动的效果就做好了。

图7-60　第1、6、9帧蝴蝶的形状

（3）创建“飞舞的蝴蝶1”影片元件

接下来就要让蝴蝶飞起来了。

新建影片元件“飞舞的蝴蝶1”，单击时间轴上的“添加引导层”按钮，创建“图层1”的“引导层”，在“引导层”用工具栏中的“铅笔工具”画一条弯弯曲曲的线，作为蝴蝶飞舞的路径，并在30帧按“F5”键插入普通帧。

从“库”面板中将“翅膀扇动”元件拖到“图层1”的第1帧，将蝴蝶的注册点对准线的一端点作为飞行的开始点，如图7-61所示，在30帧处按“F7”键插关键帧，将蝴蝶的注册点对准线的另一端作为飞行的终点，再用“任意变形工具”调整这两帧蝴蝶的方向，使蝴蝶能和线的方向保持一致。

图7-61　“图层1”第1帧蝴蝶的位置

单击第1帧，在“属性”面板中选择补间为“动作”，创建补间动画，并在“调整到路径”选项前打钩，使蝴蝶能够沿路径自动调整方向飞行，如图7-62所示。

图7-62　“属性”面板

为了让蝴蝶在飞舞的时候淡出淡入，在“图层1”的第15帧按“F6”键插入关键帧，再在“属性”面板中将第1帧和第30帧的“透明度”设为40%。

在第31帧按“F7”键插入空白关键帧，按“F9”键打开动作面板，在动作面板中输入语句：

stop（）；

这样，蝴蝶的飞行动画就做好了，时间轴如图7-63所示。

图7-63　“飞舞的蝴蝶1”元件的时间轴

2．控制飞舞的蝴蝶

（1）创建“飞舞的蝴蝶2”影片元件

新建影片元件“飞舞的蝴蝶2”。将“飞舞的蝴蝶1”从“库”中拖到舞台三次，这样舞台上就有了三只蝴蝶，用“任意变形工具”将三只蝴蝶的方向、大小进行调整，在“属性”面板中，改变三只蝴蝶的色调，如图7-64所示。

图7-64　蝴蝶的方向、大小及色调

（2）创建“语句”影片元件

新建一个影片元件为“语句”，这个元件的建立是为了赋予“飞舞的蝴蝶2”脚本语句，对“飞舞的蝴蝶2”进行控制，以产生随机出现的飞舞的蝴蝶。

首先将“飞舞的蝴蝶2”从“库”面板拖入“图层1”的第1帧，在第4帧按“F5”键插入延长帧，在“属性”面板里输入该元件的实例名“bb”。

然后新建一个名为“语句”的图层专门用来放置脚本语句，在第3、4帧分别按“F7”键插入空白关键帧。

按“F9”键打开“动作”面板，依次给第1，3，4帧添加帧动作。

单击第1帧，在“动作”面板中输入以下语句：

Count=0；//设置一个计数器，并赋初值为0

OldY=_ymouse；//取得鼠标的y坐标值

OldX=_xmouse；//取得鼠标的x坐标值

单击第3帧，在“动作”面板里输入：

MouseX=_xmouse；//再次取得鼠标的x坐标值

MouseY=_ymouse；//再次取得鼠标的y坐标值

if（（Number（OldX）<>Number（MouseX））or（Number（OldY）<>Number（MouseY）））{

//如果新旧坐标值不相等，则执行下面的代码

duplicateMovieClip（"bb"，"bb"add Number（Count），Count+850）；//复制电影剪辑bb

setProperty（"bb"add Number（Count），_x，MouseX）；//设置复制出的对象的x坐标

setProperty（"bb"add Number（Count），_y，MouseY）；//设置复制出的对象的y坐标

setProperty（"bb"add Number（Count），_rotation，random（360））；//设置复制出的对象的角度

Count=Count+1；　　　　//计数器加1

if（Number（Count）>20）{

Count=0；　　　　　　　//最多复制20个

}

单击第4帧，在“动作”面板里输入：

OldX=_xmouse；//保存以前的鼠标的x坐标值，以为以前的值要和新的值进行对比

OldY=_ymouse；//保存以前的鼠标的y坐标值

gotoAndPlay（2）；//循环执行核心代码

全部输入完成以后，语句影片元件就制作完成了，时间轴面板如图7-65所示。

图7-65　“语句”影片元件的时间轴面板

3．组织场景

（1）将“语句”元件放入场景

单击时间轴上方的“场景1”按钮，切换到主场景，将“图层1”改名为“蝴蝶”，把“语句”元件从“库”面板拖入场景，如果蝴蝶大小不合适，用“任意变形工具”进行调整，这样蝴蝶飞舞的动画基本就完成了，按“Ctrl+Enter”键测试效果。不过场景中只有蝴蝶看起来稍显单调，所以下面给其添加背景。

（2）添加背景

在“蝴蝶”图层的下面新建两个图层，从下往上依次命名为“花”“文字”，如图7-66所示。

单击“花”图层，执行“文件/新建/导入到舞台”命令，将素材中的“花.png”图片导入到舞台。再执行“文件/新建/导入到库”命令，将素材中的“小蝴蝶.gif”动画导入到库，导入以后在库中就出现了一系列的位图，还有一个名为“小蝴蝶”的影片元件，把“小蝴蝶”的影片元件从“库”面板中拖出两次，分别放在花上。

单击“文字”图层，用“文本工具”在场景的左上角输入“鼠标滑过看效果”文字。

至此，实例制作完成，按“Ctrl+Enter”键测试效果。