第四节简单动画

第四节简单动画

简单动画是Flash 8的基本动画形式，包括逐帧动画和补间动画，其中补间动画又分为运动补间动画、变形补间动画和颜色补间动画。

一、逐帧动画

逐帧动画又称作连续帧动画，指不需要计算机自动生成两个关键帧之间过渡的内容(即不需要计算机“补间”)，而由人工来制作每一帧的动画内容的动画。就像传统的动画制作方法一样，但使用Flash 8制作的逐帧动画，在播放时会首尾相接地循环播放，所以可以用来生成一些特殊的效果。

逐帧动画，是一帧帧地编辑出来的动画。它对应的时间轴帧面板上，只存在关键帧和普通帧。下面我们用实例来说明：

(一)实例：秒表效果的制作

时钟给人们的感觉就是指针在不停地走动或者数字在不停地变化，下面我们就用秒表的数字的变化作为实例。这里仅仅用于说明逐帧动画的制作过程，实际上秒表中的数字并非1秒钟跳动一个。

制作步骤：

(1)新建一个文件。首先在第1帧中用矩形工具绘制作一个矩形并删除中间的部分留下边框，秒表轮廓如图7－89所示。

图7－89　秒表轮廓

(2)秒表轮廓绘制完毕后，下面我们介绍一下怎样将对象放置到工作区的中央。

方法：

①选取箭头工具，用框选的方法选取整个轮廓。

②执行“窗口”菜单下的“设计面板”命令，在弹出的子菜单中执行“对齐”命令，打开“对齐”面板，对齐面板中提供了各种对齐方式。

③按下“相对于舞台”按钮，此时该按钮处于按下状态，表示以后对对象进行的任何对齐操作都是相对于整个工作区的。

④依次单击“垂直居中分布”按钮和“水平居中分布”按钮，如图7－90所示，完成对象的居中操作，可见秒表轮廓处于工作区的中央，如图7－91所示。

(3)使用文本工具绘制一个文本框，在文本框中输入“00：00”，使用变形工具调整文本框的大小和位置。

(4)在第2帧上单击鼠标右键，弹出快捷菜单，执行其中的“插入关键帧”命令。

(5)在第2帧中双击右边的文本框，使该文本框处于编辑状态，将文本框中的数字改为“00：01”。

图7－90　“垂直居中分布”按钮和“水平居中分布”按钮

图7－91　处于工作区中央的轮廓

(6)同样地在第3帧、第4帧、第5帧……第13帧插入关键帧，依次将右边文本框中的数字修改为“00：02”、“00：03”、“00：04”……“00：12”。

(7)当秒表上数字变为“12”后，秒表停止，为显示一段停顿，在第25帧插入关键帧，这样从第13帧到第25帧，秒表显示“12”，在35帧插入关键帧，并将“00：12”改为“00：00”，在第40帧上插入关键帧。

(8)在属性面板上将播放的12fps改为1fps。动画制作完毕，该实例的时间轴如图7－92所示。

图7－92　实例时间轴

注意：动画制作完毕后要观看动画效果有三种方法：

(1)按键盘上的“Enter”键在工作界面中观看；

(2)执行“控制”菜单下的“测试影片”命令；

(3)按键盘上的“Ctrl+Enter”键在工作界面中观看。

(二)实例：打字效果

(1)新建立一个空白Flash文档，并且设置宽500像素、高100像素的粉色舞台。

(2)选中第一帧，选取文本工具，在属性面板上设置字体“隶书”、大小“50”、颜色“黑色”，键入“现代教育技术”六个字；并把它相对于舞台居中对齐(用选择工具选中文本，单击主工具栏中的“对齐”按钮，在“对齐”面板上先把“相对于舞台”五字下方的按钮单击成白色，再分别单击“水平中齐”和“垂直中齐”按钮)。

(3)选中文本，在按住“ctrl”键的同时，连续单击B键两次，把文字打散，并分别在第10、20、30、40、50、60帧插入一个关键帧。

(4)选中第1帧，将六个文字全部删除。

(5)选中第10帧，将后五个文字删除，留下一个“现”字。

(6)选中第20帧，将后四个文字删除，留下“现代”两字。

(7)选中第30帧，将后三个文字删除，留下“现代教”三字。

(8)选中第40帧，将后两个文字删除，留下“现代教育”四字。

(9)选中第50帧，将最后的“术”字删除，留下“现代教育技”五字。

(10)在第70帧插入普通帧。测试效果，观看效果。

(三)实例：转的车轮

(1)打开Flash软件，新建一个空白Flash文件(550像素×400像素)。

(2)将填充色定为蓝色，笔触颜色为黑色。

(3)选择圆形工具，按住“Shift”键，在工作区中绘制一个圆。

(4)将该圆放在工作区的中间(提示：用对齐工具调整，“Ctrl+K”可以调出对齐工具)。

(5)选择“选择工具”，双击刚才绘制的圆，再单击该圆的蓝色部分(即选中蓝色部分)，再把选中区域删除(提示：单击键盘上的“Delete”键即可以删除)。

(6)给圆绘制两条垂直线，并且交点与圆心重合，再将所有框选中的进行组合。

(7)回到场景中，再在第2帧上增加关键帧(提示：可以按“F6”)。

(8)按“Ctrl+T”键，出现变形对话框，在旋转一栏中填入适当的数值，如10度。

(9)将第8步重复做一个周期，如第8步中是10度，则共需做9次。

(10)保存，并测试影片。(提示，如果中心对得不是很好的话，车轮的动作不是很流畅)。

在制作逐帧动画的时候，往往前一帧与后一帧的内容没有大的差别，我们就可以使用Flash 8提供的绘图纸外观工具来观察前一帧，或者全部帧的变化，对于我们精确地把握动画效果，有极大的帮助。

制作逐帧动画一定要注意两帧之间的联系，跳跃不要太大。虽然移动渐变动画和形状渐变动画的过渡效果是非常平稳的，但是对于复杂动画变化来说使用逐帧动画有明显的优势。所以锻炼制作逐帧动画是非常必要的。

逐帧动画是最基本的动画原理。小时候我们看到过的把一本书的每一页都画上形状，快速的翻动书页，就会出现连续的动画。这就是逐帧动画的原理。

人眼在正常情况下有一个视觉残留，逐帧动画正是利用这一点来完成自己的动画效果。在制作逐帧动画的时候要灵活应用，可以采取空1帧，空2帧的做法。

二、补间动画

由计算机自动生成两个关键帧之间的过渡部分的动画称为补间动画。补间动画包括：运动补间动画、变形补间动画和颜色补间动画。

(一)形状补间动画

变形补间动画用于制作对象变形的效果。给对象指定开始形状和终止形状，由计算机自动生成中间的变形过程，实现对象从开始形状变形到终止形状的效果。注意：用于制作变形补间动画的对象必须是“图形对象”。如果要对其他对象进行变形，则先要将其转换为图形对象，例如要对文本对象进行变形，就先要将其转换为图形对象。

形状补间动画，只要编辑首尾两帧上的图形，中间的形变过程由过渡帧来完成。过渡帧在帧面板上的标志是一个向右的长箭头。

1.实例：形状多变的几何图形

(1)新建立一个空白文档并使用默认舞台。

(2)在工具箱中选取椭圆工具。

(4)设置填充颜色：单击选中颜色区第二排“填充色”，再在“填充色”右边单击右下方的黑色小三角按钮，尔后选定红色。

(5)选取椭圆工具在舞台左侧拉动鼠标画一个椭圆(如果在画圆的过程中按住“shift”键，就可以得到一个正圆。)(如图7－93)

(6)在第25帧插入一个空白关键帧，在舞台中部画一个无边线的绿色三角形(如图7－94)。

(7)在第50帧插入一个空白关键帧，选取矩形工具，在舞台右侧画一个无边线的蓝色矩形(如图7－95)。

图7－93　选取椭圆工具

图7－94　绿色三角形

图7－95　蓝色矩形

(8)单击“图层1”，选中所有帧，单击底部属性面板“补间”两字右面白框后的黑三角按钮，再单击“形状”按钮，补间和时间铀设置(如图7－96)。

图7-96　“补间”按钮

(9)测试影片，观看效果。

2.实例：波浪线

(1)新建立一个Flash空白文件，并显示网格和辅助线。

(2)设置宽300像素、高100像素的蓝色舞台。

(3)选取钢笔工具，画一条绿色波浪线(如图7－97所示)。

图7－97　绿色波浪线

(4)在图层1的第20帧、第40帧分别插入一个关键帧(如图7－98所示)。

图7－98　插入关键帧

(5)选中第20帧上的波浪线，执行“修改→变形→垂直翻转”命令。

(6)单击“图层1”按钮，选中所有帧，单击属性面板里的“形状”(如图7－99所示)。

图7－99　“形状”对话框

(7)测试影片，观看效果。

3.实例：变换文字

(1)新建立一个空白的Flash文件，设置宽300像素、高100像素的浅蓝色舞台。

(2)单击第一帧，键入大小为“70”的白色宋体“学动画”三字，居中。在第5帧插入关键帧。

(3)选中第5帧上的文本，按下快捷键“ctrl+B”两次，把文字打散(如图7－100所示)。

图7－100　把文字打散

(4)在第20帧插入空白关键帧，用同样的大小和字体键入红色“乐无穷”三字，居中。用同样的方法把这三字打散。选中第1帧，单击属性面板里的“形状”按钮。

(5)在第25帧插入一个普通帧。时间设置(如图7－101所示)。

图7－101　时间设置

(6)测试影片，观看效果。

(二)动作补间动画

动作补间动画，也只要编辑首尾两帧上的对象，中间的形变过程由过渡帧来完成。跟形状补间动画不同的是，动作补间动画首尾两帧上的对象，必须是元件实例，且必须是同一个元件的实例。除了元件，组合体或文本也可作为制作动作补间动画的对象。

1.实例：属性渐变的矩形

(1)使用默认舞台。

(2)用矩形工具在舞台左边画一个无边框的红色矩形。

(3)选中矩形，右击，执行“转换为元件”命令，在“创建新元件”对话框中选择类型为“图形”，确定。

(4)在第30帧插入关键帧，并把矩形拖到右边。

(6)在属性面板上“颜色”后的单击“小三角”按钮，选中“色调”，选择“蓝色”。

(7)用选择工具选中第1帧，单击属性面板“补间”里的“动作”。

(8)在属性面板上单击“旋转”选项的小三角按钮，执行“顺时针”命令。

(9)测试影片，观看效果。

2.实例：闪烁的星星

(1)把舞台背景设置为深蓝色。

(2)执行“窗口—库”命令，打开库面板；单击库面板左下角的“+”，弹出“创建新元件”对话框，选择类型为“图形”，把“元件1”改写成“星星”，单击“确定”按钮。这时，舞台左上方“场景1”三字后显示“星星”两字和一枚彩色图标，说明我们已进入了制作星星元件的编辑场景。

(3)选取椭圆工具，设置笔触颜色为无，在混色器面板上设置填充色为左、右色标均为白色的放射状渐变色，右色标的透明度为0，在舞台中画一正圆，相对于舞台居中对。

(4)选取矩形工具，用同样的颜色画一个宽度为正圆直径约6倍、高度为正圆直径约六分之一的扁矩形。

(5)复制扁矩形：选中扁矩形，在按住“ctrl”键的同时，把光标置于扁矩形上按住左键往外拖动，松开后就得到一个复制出来的扁矩形；选中复制得到的扁矩形，执行“修改→变形→顺时针旋转90度”命令，相对于舞台居中对齐；选中另一扁矩形，把它也相对于舞台居中对齐。至此，名为“星星”的图形元件就制作完成了。

(6)接下来制作影片剪辑元件：执行“插入－新建元件”命令，同样弹出“创建新元件”对话框，在对话框中选择类型为“影片剪辑”，把“元件2”改写成“闪星”，单击“确定”按钮，打开影片剪辑元件“闪星”的编辑场景。

(7)用鼠标左键按住库面板里的“星星”元件，把它拖到舞台上，居中。

(8)在第10帧和第20帧分别插入一个关键帧；选中第10帧，单击舞台中的星星，在属性面板“颜色”后单击“黑三角”按钮，选择alpha(透明度)，调整后面的百分比为20％(如图7－102所示)。

图7－102　“透明度”对话框

(9)单击“图层1”，选中所有帧，在属性面板上创建“动作”补间动画。至此，名为“闪星”的影片剪辑元件也就制作完成了。

(10)单击舞台左上角的“场景1”按钮，返回主场景后，把“闪星”元件拖到舞台上，拖几次，舞台上就出现几个“闪星”实例。

(11)执行“控制－测试影片”命令，观看效果。注意：今后，凡是碰到动画中加有影片剪辑实例的情况，都必须用“测试影片”的方法看效果。

为了让星星闪动有先后变化，我们可以进行如下操作：①用制作“闪星”元件同样的方法再制作一个“闪星2”元件；所不同的只是这一次要在第8帧和第15帧插入关键帧。②在“场景1”增加一个“图层2”，在“图层2”上再布置几个“闪星2”实例。

3.实例：翻转文字

(1)设置宽300像素、高100像素的蓝色舞台。

(2)进入名为“文字”的图形元件编辑场景，键入大小“45”的“动画乐无穷”黄色隶书，居中。

(3)返回场景1，把“文字”元件拖入舞台，居中。

(4)在第15帧和第30帧分别插入一个关键帧，选中第15帧，执行“修改－变形－垂直翻转”命令。

(5)单击“图层1”选中所有帧，创建“动作”补间动画。

(6)测试影片，观看效果。