Question

简单动画制作

Answer 1

一、逐帧动画

“逐帧”动画的制作方式与传统的动画制作方式相同，动画的每一帧都需要手工制作。那些简单的、重复循环的、细微变化的或者几个不相关的画面切换的动画，可以使用这种逐帧动画。第二节的实例9-2就是一个逐帧动画的例子。在电脑参与动画制作后，只要有可能，人们就不会去逐帧画画，下面举的这个例子，通常叫“补间动画”。

例9-3：逐渐放大的图片。

操作步骤如下：

（1）选择菜单命令“文件（F）/新建（N）”，选择默认选项“常规/Flash文档”，在舞台中新建一个文件，如图9-50所示。

（2）选择菜单命令“文件（F）/导入（I）/导入到库（L）”，导入一张图片到库中以备使用，执行菜单命令“窗口/库”将库打开，可以看到刚才导入的图片，如图9-51所示。

图9-50新建文件“未命名-1”

图9-51库中的图片

（3）选择时间轴的第1帧，单击鼠标右键，选择“插入空白关键帧”，如图9-52所示。

（4）从库中将图片拖到舞台中，选中图片，应用舞台下方的位图属性面板更改图片的大小和位置：大小550×400（即影片的默认“宽×高”尺寸），左上角位置x0，y0。如图9-53所示。

图9-52插入空白关键帧

图9-53位图属性面板

（5）选择菜单命令“修改（M）/转换成元件（C）”，将图片转换成图形元件。

（6）在时间轴的第40帧处，单击鼠标右键，选择“插入关键帧”命令。

（7）选择第1帧中的图片，应用工具栏上的变形工具

将图片缩小至适当大小，如图9-54所示。

图9-54将图片缩小

（8）选择第1帧，单击鼠标右键，选择“创建补间动画”命令，这时时间轴上应有一条淡紫色底从第1帧到第40帧的实线，如图9-55所示。

图9-55创建补间动画成功

（9）按Ctrl+Enter，测试影片，效果如图9-56所示。很快就可以看到图片从远到近的“推出”效果。

二、形变动画

只设定某个动作的起始帧和终止帧来实现动画，这样的动画称为“过程动画”，形状渐变是Flash中两种基本渐变之一（另一种是动作渐变）。它能使对象在一定时间内外形变为其他形状，包括对象的位置、大小和颜色。变换的对象不能是组、符号、文本块或位图，只能是打散的图形或文字。对于组、符号、文本块等，在做形状渐变前，一定要按Ctrl+B打散后才能进行（有时要多次执行打散操作才能把对象彻底打散）。

图9-56导出影片并播放

例9-4：字符“Flash动画制作”的翻转。

操作步骤如下：

（1）单击

，新建一个Flash空白文档。

（2）单击场景下面的属性，将Flash文档的背景色设为灰色，如图9-57。

图9-57

（3）用文本工具

在第1帧工作区左上角输入文字“Flash动画制作”，字体大小及颜色可随意设定。

（4）输完文字后，单击工具面板里的箭头工具

，在第20帧处单击“鼠标右键/插入关键帧”；然后用鼠标左键点住文字不放，将“Flash动画制作”拖到工作区右下角。

（5）单击任意变形工具

，将第20帧里的文字旋转并改变其大小。

（6）单击工具面板中的箭头工具

，在时间轴第1帧处单击“鼠标右键/创建补间动画”，如图9-58所示。

图9-58

（7）按Ctrl+Enter可看到动画效果。

例9-5：翻书。

操作步骤如下：

（1）单击

，新建一个Flash空白文档，用文字工具

和矩形工具

在第1层第1帧处工作区里输入图形和文字，作为书的封底，如图9-59所示，再用鼠标左键单击第1帧，然后按住F5键不放，将帧加长到40帧，如图9-61。

图9-59

图9-60

图9-61

（2）单击

，添加一个新的图层即图层2，如图9-62（a）。

（3）在图层2的第1帧（如图9-62）工作区处用矩形工具

绘制书的封面，使它正好把封底遮住，如图9-60。

（4）在图层2的第20帧处单击鼠标左键，然后按键盘上的F6键，添加一个关键帧，如图9-62（b）所示。

（5）用鼠标在工具栏里单击自由变形工具

，再点击工具栏下面的选项

，用鼠标将书的封面修改为如图9-63所示的形状。

图9-62

图9-63

（6）选择工具面板里的箭头工具

在第2层第1帧处单击鼠标右键，在弹出的下拉式菜单里点击创建补间动画，如图9-64所示。

图9-64

（7）按Ctrl+B将封面打散；

（8）打开属性控制面板，将补间设为“形状”，如图9-65。

图9-65

（9）将图层2第20帧以后的所有帧删除，如图9-66。

图9-66

（10）新建图层3，用同样的方法制作将书由翻开中间至翻到结束的动画，封面翻开后，如图9-67所示，第3层的动画从第20帧开始，到第40帧结束，如图9-68。

图9-67

图9-68

提示：对这个实例来说，如果增加更多关键帧，并不会使效果明显好转，只会增加制作难度。

例9-6：显示三角形的三角之和为180°。

操作步骤如下：

（1）在第1帧中绘制一条水平直线，并将帧延伸至100帧处（图9-69）。

（2）单击按钮

，添加一个新图层，在图层2的第1帧工作区处绘制一个直角三角形，并使底边与第1层中的直线重合，如图9-70。说明：在不至于混淆时，常把“第1帧工作区处”说成“第1帧处”。

（3）添加图层3，在第1帧处绘制直线CE，如图9-71所示；

（4）图层3第20帧处将CE变形（即拉长）成CF，如图9-72。

图9-69

图9-70

图9-71

图9-72

（5）在第3层的第1-20帧作变形动画，完成CE延长成CF的动画过程，如图9-73。

图9-73

（6）在图层2第20帧处插入关键帧，再在图层2第40帧处插入关键帧，并在第40帧处将三角形拖动到如图9-72右所示的位置，在第20帧处单击“鼠标右键/创建补间动画”。

（7）新建图层4，在图层4第21帧处绘制线段BG，如图9-74。

（8）在图层4第20帧和第40帧处插入关键帧，再将BG变形到BH，如图9-75。

图9-74

图9-75

（9）在图层4第60帧处插入关键帧，将BH变形延长至如图9-76所示的样子，并将帧延长至100帧。

（10）在图层2的第60帧处单击鼠标左键，按F6键，插入关键帧，再在第80帧处插入关键帧，并在第80帧处用任意变形工具

和移动工具

对三角形进行旋转和移动操作，使其运动到如图9-77所示的位置。

图9-76

图9-77

（11）在图层2第60帧上执行“鼠标右键/创建补间动画”命令，并将第80帧延长至100帧（如图9-78所示）。

说明：上述组图中的字母仅供注释；变形操作在实例9-3中已经详细说明，这里不重复。

注：画直角三角形时，可先画一个矩形，再在工具面板单击部分选取工具

，然后用该工具选取矩形的一个顶点，删除掉即可。

图9-78

三、轨迹动画

例9-7：太阳、地球、月球的运动。

操作步骤如下：

（1）单击

，新建一个Flash空白文档。

（2）按住Shift不放，用椭圆形工具

在图层1中画一个圆作为太阳，用箭头工具

选中圆的轮廓边线，按Del键删除。

（3）将工具面板中的填充色设为以红色为中心的渐变色，如图9-79，然后选择颜料桶工具

，将圆的内部填充为该渐变色，如图9-80所示。

图9-79

图9-80

（4）单击菜单栏中的插入/新建元件，弹出如图9-81所示对话框。

图9-81

（5）选择影片剪辑，然后单击“确定”按钮，进入元件1编辑工作窗口。

（6）用画太阳的方法，在图层1第1帧处画一个白色渐变的地球，如图9-82。

（7）在元件1中新建一个图层2，在图层2的第1帧处画一个白色的月亮，如图983。

图9-82

图9-83

（8）新建一个图层，取名为引导线，如图9-84。

图9-84

（9）在工具面板中选择椭圆工具

并单击填充色下面的按钮

，在工作区里画一个圆作为运动轨迹。

（10）添加一个新图层为图层4，在引导线图层里的第1帧上单击鼠标右键，复制关键帧，再在图层4第1帧上单击鼠标右键，选择粘贴帧，将图层4里的圆与引导线里的圆对齐，如图9-85所示。

图9-85

图9-86

（11）用橡皮擦工具将引导线图层里的轨迹擦去一个缺口，如图9-86，并将所有图层里的关键帧延长至30帧处，如图9-87。

图9-87

（12）调整图层2第1帧里月亮的位置，使其位于缺口的上端，在该图层第20帧处插入关键帧，并将月亮的位置在20帧处调整至缺口的下端，并在图层2第1帧处创建补间动画，如图9-88所示。

图9-88

（13）在引导线图层上单击鼠标右键，选择引导层，如图9-89所示。

图9-89

（14）在图层2中单击鼠标右键，选择属性，在弹出的对话框里单击“被引导”，然后单击“确定”按钮，完成后如图9-90所示。

图9-90

（15）单击元件1旁边的场景1，如图9-91，回到场景1。

图9-91

（16）在场景1里新建一个图层为图层2，打开窗口/库，调出库面板；用鼠标左键点住库面板中的元件1不放，将影片剪辑拖入图层2中，如图9-92所示。

（17）用同样的方法让影片剪辑围绕太阳旋转。不同的是轨迹改为椭圆，如图9-93，移动的元件为影片剪辑而非图形元件。

图9-92

图9-93

四、遮罩动画

例9-8：探照灯效果。

操作步骤如下：

（1）新建一文件，在场景1的图层1中添加一幅图片。

单击“文件/导入/导入到场景”，打开文件选择对话框，挑选一幅图片或照片，单击“确定”按钮后该画已在场景中了。单击鼠标左键选中该图，修改该图大小与场景大小一样，一般为550×400，X方向和Y方向的偏移都设为0。

（2）在时间轴上的第60帧处点击“鼠标右键/插入帧”，插入59个普通帧。

（3）点击层控制区左下角的“插入层”按钮，增加一个图层，即图层2。在时间轴上点选图层2的第1帧，选中椭圆工具，按住Shift键，用鼠标在场景中画一个圆，如图994所示。

图9-94

（4）在时间轴上的图层2的第60帧处点击“鼠标右键/插入关键帧”（要想运动必须插入关键帧），选中椭圆工具，按住Shift键，用鼠标在场景中画另一个圆，如图9-95所示。

图9-95

（5）选中箭头工具，点选时间轴上第二层第1帧，修改该图形所在层的补间（动画方式）为“形状”，可以看到图层2的时间线底色变为绿色，其上从第1帧到第60帧之间有一个箭头线。（“补间”英语为TWEEN，此处意为补充中间帧）

（6）在时间轴窗口左侧的图层控制区中的图层2上点击“鼠标右键/遮罩层”，使该图层成为遮罩层，即除了该层中所画的那个圆内可以部分透明外，其余部分都是不透明的。由于这个遮罩层，我们只能从所画的那个圆内看到图层1，图层1中处于圆外的部分都看不到了。

这样，一个最简单的遮罩式动画做完了。同时按Ctrl和Enter键，看看效果。

提示：在第二层第60帧的场景中，若不画圆而是画一个方形，其他步骤都不变，六个步骤都完成后，按Ctrl和Enter键，看看效果，也许会令人惊喜。

为什么在上述第五步中，在修改运动图层的补间时选“形状”而没选“动作”呢？这是因为在Flash中“变形动画”操作比较简单。如果选“动作”，还要将图形进行转换，使其成为元件。在下面的实例9-9中，我们将试试“动作动画”。

例9-9：转动的地球仪。

这是一个传统实例，是遮罩的典型用法。和前面实例9-8不同，这里的遮罩层是不动的。

操作步骤如下：

（1）在图层1第1帧中导入一幅地图，修改地图的宽度为场景宽度的三分之二，即为366.6，高度为183.3，X方向偏移为0，如图9-96所示。

（2）为了让这幅地图从场景左边移到右边，要做“动作动画”，必须对这幅图进行格式转变：在地图上点击“鼠标右键/转换为元件”，弹出一个对话框，在“行为”单选项中选“影片剪辑/确定”。可以明显看到图形边框变了样。

图9-96

（3）在图层1的第60帧处添加一个关键帧：“鼠标右键/插入关键帧”，按住Shift键，按光标右移键多次，将地图从场景左边移到右边，如图9-97所示。

图9-97

（4）选中箭头工具，点选时间轴中第1层第1帧，修改该图形所在层的补间（动画方式）为“动作”。

（5）点击时间轴左铡图层控制区的插入图层按钮，增加一个图层，即图层2。点选图层2第1帧，选中椭圆工具，按住Shift键，用鼠标在场景正中画一个圆，双击所画的圆（双击能同时选中图形对象及其边线），用光标移动键移动该圆，使其正好盖住地图的东半球，如图9-98所示。

（6）在图控制区的图层2上点击“鼠标右键/遮罩层”，同时按Ctrl和Enter键，看看效果。

（7）为了使效果更好，在图层2之上再增加一个图层3，再画一个圆或者直接将图层2中的圆复制到图层3，移动这个圆，使其与图层2的圆正好重叠，在这个圆上点击“鼠标右键/转换元件”，在弹出的对话框“行为”单选项中选“影片剪辑/确定”，并在属性面板的“颜色”中选“Alpha”、“28%”（不透明度），如图9-99所示。

图9-98

图9-99

按住Ctrl并敲Enter键，看看效果，会发现与原来不一样。

提示：1.对于不动的层，除第一帧外，可以都用普通帧，而对于有运动的层，至少开始帧和结束帧必须是“关键帧”，一般来说，动作越复杂，所需的关键帧越多，制作难度也就越大。

2.如果在上面例8中再增加一个第3层。在这层中放一个与第1层中相同的图，只是略小一些，不透明度选“28%”，可以产生放大镜的效果。

3.在上述第（7）步中，对于图层3中的圆在转换前还可以先进行球面色填充，使最后的地球仪带有立体感。

图9-100

4.为了使地球仪连续转动时画面更连贯，可将两幅地图并在一起，如图9-100所示。

5.场景工作区以外的灰色区域可以作为Flash动画的编辑区域，位于这一灰色区域的对象，在动画发布（即生成swf文件）以后是看不见的。

6.“影片剪辑”是Flash的一种元件，其实它就是小型Flash文件，能独立运行，且与包含它的时间轴无关，哪怕主时间轴只有一帧，其所含的影片剪辑也会完整运行。Flash动画中的影片剪辑相当于程序设计中的子程序。影片剪辑还可以包含嵌套剪辑。