1.4 学以致用——蝴蝶飞舞

通过上面对概念的学习，可以打开软件，自己动手试试一些简单的动作制作，下面是制作一个文字形状变化。

（1）启动Flash CS3，界面如图1-23所示。

（2）选择“新建”项目中的“Flash文件（ActionScript 3.0）”，界面如图1-24所示。

（3）进入Flash制作界面后，通过属性窗口对文档属性进行设置，如图1-25所示。

（4）可以看到在属性面板当中有“大小”这一项，单击它旁边的条形框就可以修改场景大小，如图1-26所示，在“尺寸”中修改数字，然后单击“确定”即可。另外在“大小”的右边还有“背景”这一项，单击它旁边的颜色框 就可以改变背景色，如图1-27所示。一般来说背景色都不需要改变。

（5）其实在Windows自带的图片中就有很多漂亮的风景图片。挑选一张鲜花盛开的图片，把它作为底图。鼠标左键单击“文件＞导入＞导入到舞台”（快捷键Ctrl+R），将这张图导入进来，双击图层 1，将图层命名为“背景”，并把图片放在场景中，调整大小，可稍稍比场景大些。调整的方法是选择工具箱中的任意变形工具 （快捷键Q），再单击被调整物体，这张图四周会出现矩形选择框，如图1-28所示，调整边角的手柄便可任意缩小放大，同时按住Shift键就是等比例缩放，一般都会选择等比例缩放以保持对象原来的比例。

（6）如果希望精确调整大小，则选中对象，在属性面板中修改尺寸大小，如图1-29所示，在宽和高框中输入相应数值，它左边的锁图形代表是否锁定宽高比例，如果锁定比例的话，则修改宽或高其中一个数值时，另一个数值也会相应按比例变化。XY 则表示图像所在的坐标位置。

（7）单击时间轴面板左下方的“插入图层”按钮，如图1-30所示，新建一个图层，命名为“蝴蝶”。可能有人会问，为什么一定要新建图层呢？这是因为蝴蝶需要做动画。初学者在做动画时，如果把所有东西都做在一层当中，容易出错，因此，为了避免混乱，应尽量把层次分清楚。另外，可以先把背景层锁定，以免操作时误对背景层执行命令。

（8）勾勒出蝴蝶的边线。这里运用工具箱中的直线工具（快捷键N）画出蝴蝶的大概形状。直线工具的用法是按住鼠标左键拖动鼠标，即可绘制出想要的直线，画水平和垂直直线的时候同时按住 Shift 键，可以画出绝对直线。这里有一个小窍门：在绘制像蝴蝶这样的对称物体时，可以先画出一半，剩下的一半只需复制并反转先前画好的一半，这样，画出的东西不仅精确美观而且方便省事。画出蝴蝶的大概形状如图1-32所示。

（9）接下来，可以利用选择工具 （快捷键V）来修改蝴蝶的形状，使直线变圆滑。单击工具箱中的选择工具后将鼠标放在需要修改的直线上，会看到鼠标的后面多了一条小弧线，此时，拖动直线就可以使直线变成想要的弧线形状。另外，如果将鼠标放在直线的接合点上时，鼠标的后面就会变成一个小直角 ，这就代表可以拖动这些最初设的关键点来修改整体的形状，画出的蝴蝶形状如图1-33所示。蝴蝶的翅膀一般分为两部分，上半部分的翅膀较大，下半部分较小，整体看起来呈倒梯形状。

（10）为蝴蝶的翅膀添加一些细节，让它变得漂亮起来，效果如图1-34所示。当然，如果有绘图板的话，画起来就会更加得心应手。在绘制过程中，一直没使用铅笔工具，但是，当使用绘图板时就可以少用直线工具，多使用铅笔工具。当单击铅笔工具 按钮后，工具箱最下方就会出现一个直线选项，可以将它设成平滑曲线，如图1-35所示。这样画出的直线就是圆滑的曲线，不用再费劲修改，非常方便。在绘制较复杂的图形时，建议使用绘图板，可以灵活掌握对象的外形。但是，一般在像例子中这样的矢量图的绘制当中，一只小小的鼠标已经足够用了。

（11）为蝴蝶上色。上色时首先要考虑到的是和背景颜色的协调：既不能让蝴蝶颜色和背景太相似看不出来，也不能对比太强烈显得突兀。这里的背景用的是鲜艳的橘色，衡量之后，作者认为用白色作为蝴蝶的底色和背景的橘色比较搭配，另外还可用一些渐变色来衬托。

（12）用鼠标左键单击工具箱中的油漆桶图标（快捷键K），在右侧的色彩面板中修改属性。“类型”这一项指填充方式，默认为“纯色”，单击右边的小三角，在下拉菜单中选择“线性”填充方式，如图1-36所示。

（13）选择线性填充方式后，色彩面板就变成如图1-37所示。

（14）左键单击下方渐变定义栏，即水平细长条色彩框下方的颜色指针，如图1-38所示，即选定需要修改渐变色其中一端的色彩。选定后，颜色的修改可以在下面 RGB 色板中调出一个适合的色彩，移动色板中间的十字就可以选定颜色，色板右边的竖条可以调节明度，左键按住竖条右面的小三角滑块就可以调节选定颜色的明度，如图1-39所示。

（15）如果要精确调节的话，还可以直接输入“RGB”3个色的数值。运用此方法，改变渐变色条的另一端的颜色，再指定这一端透明度降低，方法也是先选中这一端的颜色指针，再调节Alpha的透明度值，调节出颜色如图1-40所示。学会如何应用颜色后，再给蝴蝶上色，蝴蝶很小，因此不用上太复杂的颜色，上好色的效果如图1-41所示。从图中可以看到，蝴蝶的颜色有一些透明度，可以稍微透出背景的颜色。为了不让边线过于死板，还可以选中蝴蝶，修改它的边线属性，在属性面板中把线条的颜色由黑色改为深蓝色。

（16）复制出蝴蝶的另一半。画完了蝴蝶的一半，就可以复制出它的另一半，组成完整的形状了。方法是选中现有的一半，按住Ctrl+C复制，再按Ctrl+Shift+V原位粘贴，用任意变形工具把中心点挪到轴心，将粘贴出的另一半翻转过来，如图1-43所示。一只蝴蝶就绘制完毕了。如果觉得不满意，可以再对蝴蝶的外形进行微调，效果如图1-44所示。

下面先来制作蝴蝶飞舞时扇动翅膀的动作。根据动画的原理，只要画出蝴蝶的两个关键动作，翅膀上下扇动的两帧并让它循环，就可以表现出飞舞的蝴蝶的动作。

（17）选择蝴蝶图层，在场景中的蝴蝶上单击鼠标右键，选择“转换为元件”（快捷键F8），如图1-45所示，会弹出一个“转换为元件”的对话框，如图1-46所示。

（18）将对话框中的“名称”一项设为“蝴蝶”，在“类型”的 3 个选项中选择“影片剪辑”，然后单击“确定”。这时，可以看到场景旁边的库中出现了名称为“蝴蝶”的元件，如图1-47所示。双击场景中的蝴蝶，进入此元件。现实中，蝴蝶不可能是正面对着人，因此，要把它旋转到合适的角度并稍稍做一些变形，如图1-48所示。然后，再创建一个新的关键帧。

（19）在现有关键帧的旁边一帧上单击右键，选择“插入关键帧”（快捷键F6），如图1-49所示，这时，图层1上就会出现2个关键帧。单击图层下方工具中的绘制图层外观工具 ，如图1-50所示。这个工具的作用是，在某一帧上，除了看到这一帧的图形外，还可以同时看到另一帧的图形，这就相当于拷贝台的作用，使得能对比前一帧的动作来修改后一帧的动作，使两个图形的动作连贯起来。

（20）按照前面所说的方法，分别画出第1帧和第2帧的不同动作，注意连贯性和动作原理，可以参考一些真实的图片进行绘制。绘制好的分解动作如图1-51所示，这两帧图片循环播放便形成蝴蝶扇动翅膀的动画了。做蝴蝶翅膀扇动的第2帧时有一个小技巧：不必擦掉所有的图形重新画，可以用任意变形工具把一半翅膀翻转过来，叠在另一个翅膀上，就造成了蝴蝶翅膀叠起来的效果。但是两帧的位置要微微调整，并且外形要稍微有所变化，否则会造成只有一只翅膀在扇动的错觉。

（21）单击场景左上方的返回箭头 回到场景中，将蝴蝶缩放到合适的大小，就可以开始做引导线动画了。

（22）添加引导线。在时间轴面板左下角有一个小按钮 ，是添加引导层按钮。选中蝴蝶图层，单击添加引导层按钮，或右击此图层，在菜单中选择“添加引导层”，这时，在蝴蝶图层上方就出现了引导层，如图1-52所示。用直线工具在引导层上绘制一条曲线，如图1-53所示。

（23）添加完运动轨迹后，要给蝴蝶设定它飞到花朵上的时间。在时间轴上为所有图层添加帧数至第45帧。方法是一起选中所有图层的第45帧，右击鼠标，选择“插入帧”（快捷键F5），如图1-54所示。

（24）这样，所有图层就都变成了45帧的长度，如图1-55所示。再次选中蝴蝶图层的第45帧，右击鼠标，在弹出的菜单中选择“转换为关键帧”（快捷键F6），这样，蝴蝶图层的第1帧和最后一帧都成为关键帧，如图1-56所示。在Flash中，至少需要前后两个关键帧的动作，中间才能形成动画。

（25）下面，先选中蝴蝶图层的第一个关键帧，将蝴蝶元件拖移到起点上，如图1-57所示。再选中蝴蝶图层的最后一个关键帧，将元件移到终点上，如图1-58所示。执行操作时需要注意的是，要将蝴蝶的中心点对准引导线的两个端点，才能使引导线动画成立。如果对不上中心点的话，说明在工具箱最下方的磁石工具 没有选中，选中后就很容易将两个中心点吸附上。

（26）右击蝴蝶图层两个关键帧中的任何一帧，在菜单中选择“创建补间动画”，这个小动画基本上就形成了。在主菜单中选择“控制＞测试影片”（快捷键Ctrl+Enter），看一下动画效果，没什么大的问题，但是稍微有些单调，可以再多加几只蝴蝶。方法是选中场景中的蝴蝶元件，按Ctrl+C复制这个元件，然后，在所有图层上新建一层，命名为“蝴蝶2”，按Ctrl+V粘贴元件。按照前面讲过的方法，给这一层的蝴蝶再添加一条引导线，注意与第一只蝴蝶有所区别，另外，可以利用任意变形工具对蝴蝶飞行的方向和大小进行改变，使大小两只蝴蝶从不同的方向用不同的速度飞进场景，如图1-59所示。

（27）要使蝴蝶在不同的时间进入场景，两只蝴蝶就不能从第 1 帧起一起开始移动，要区分出前后顺序，将第二只蝴蝶进入场景的时间延后，即将此图层和它的引导层的第 1帧一起向后挪动，如图1-60所示。

（28）测试影片，可以看到有两只蝴蝶从画面的不同方向飞进来，如图1-61所示。

蝴蝶落在花上面时，一般花瓣会有些震动，现在就来做这个动画。先来分析一下这个动画：蝴蝶落在花朵上的时候，花瓣才会开始有震动，因此，这个动画的关键帧应该设在蝴蝶落下的那一帧。另外，花瓣颤动的动画和蝴蝶扇动翅膀是一样的性质，都是循环的动作，只需把这一瓣花做成一个元件，让它在蝴蝶落下后循环动作就可以了。

（29）先来做第一只蝴蝶所在的花瓣。选中背景，选择主菜单中的“修改〉分离”（快捷键Ctrl+B），将背景层分离，再用套索工具 （快捷键L）圈选出蝴蝶落在其上的花瓣，剪切下来，如图1-62所示。在背景层上新建一层，命名为“花瓣1”，按Ctrl+Shift+V，原位粘贴在新建的图层上。

（30）再将背景层空，出的位置填充上与周围环境相似的颜色。可以用滴管工具 （快捷键I）选取四周的颜色，喷在空出来的位置上。

（31）选择“花瓣 1”图层，移动时间轴滑块，到第一只蝴蝶落下的那一帧上，即第45帧，在这个图层插入关键帧，并在这一帧上选中场景中的花瓣图形，转换为影片剪辑元件，命名为“花瓣1”。双击场景中的元件，进入这个影片剪辑。

（32）选中影片剪辑中的花瓣图形，把它转换为类型是图形的元件，注意命名不要和库中其他元件重名。然后，单击任意变形工具，单击场景中的图形，就会出现矩形调节框，将花瓣的轴心移动到花瓣根部，如图1-63所示。移动轴心的作用是在动画中，花瓣以花瓣根为轴心上下移动。

（33）在图层的第5帧插入关键帧，单击任意变形工具，将鼠标移动到矩形框的角上，鼠标会变成旋转把柄，稍微往下旋转图形，使得和第1帧的图形产生一些距离，如图1-64所示。

（34）复制第1帧，粘贴到第10帧，使第10帧形成和第1帧相同的关键帧。复制帧有两种方法，第一种是选中第1帧，同时按住Alt键和鼠标左键，拖动它到第10帧上松开。第二种方法是在第1帧上右击鼠标，在菜单中选择“复制帧”，在第10帧上右击鼠标，选择“粘贴帧”。复制帧后，只需在这3个关键帧中间加上两段补间动画就可以了，如图1-65所示。

（35）依照前面讲的方法，将第二只蝴蝶落脚的花瓣也做出颤动的效果。图层顺序如图1-66所示。单击Ctrl+Enter测试影片效果，可以看到，当蝴蝶落下时，两个花瓣都开始颤动。如果觉得蝴蝶落下的时间有点短，可以回到场景中，将所有图层的帧数延长一些，这里，将图层延长到第90帧，注意一定要选择所有图层的第90帧一起添加帧。

（36）若让蝴蝶飞到花瓣上后就一直停留，就需要在脚本中写 stop 命令。方法是新建一个图层，命名为“Action”，在这个图层的第 90 帧插入关键帧。如果 Flash 面板中没有“动作”这一项，就执行主菜单的“窗口〉动作”（快捷键F9）命令调出来。它可以是浮动的面板，在不用的时候关上，也可以将它移动到属性面板处，与属性面板放在一起，如图1-67所示。

（37）选中新插入的关键帧，双击“时间轴控制”中的“stop”，这时，在面板中就会出现相应脚本，如图1-68所示。

（38）与此同时，这一层的关键帧上也会有所显示，证明已经写上脚本，如图1-69所示，上面一个“a”的标记代表这个关键帧上有命令。

（39）现在再测试影片，就会发现，蝴蝶飞下来后就会一直停留在花瓣上了，如图1-70所示。