第 4章 动画制作基础本章要点
时间轴
制作补间动画
介绍帧本章逻辑结构
4.1 时间轴和帧
4.1.1 时间轴概述
4.1.2 帧
4.2 帧的编辑
4.2.1 帧的选择
4.2.2 插入帧
4.2.3 帧的复制和粘贴
4.2.4 帧的移动和删除
4.2.5 动画帧的翻转
4.2.6 关键帧转换为普通帧
4.2.7 制作闪烁字母
4.3 逐帧动画
4.4 运动补间动画
4.4.1 创建运动补间动画
4.4.2 设置运动补间属性
4.5 形状补间动画
4.5.1 形状补间的创建
4.5.2 形状提示
4.6 绘图纸模式
4.6.1 绘图纸外观模式
4.6.2 绘图纸外观轮廓模式
4.6.3 编辑多帧模式
4.6.4 修改绘图纸标记
4.1 时间轴和帧
帧:一系列的单幅画面称为帧,动画的制作就是改变连续帧内容的过程。
时间轴:由帧组成的动画是通过 【 时间轴 】 面板实现的。面板主要由帧、层和播放指针组成。
4.1.1 时间轴概述图所示为 Flash的 【 时间轴 】 面板。
【 时间轴 】 面板上各元素的具体内容:
标题栏:
播放头或当前帧指示器:
当前帧:
关键帧:
普通帧:
帧居中,
帧视图按钮,
帧频:
绘图纸按钮:
运行时间:
时间轴滚动条:
【 时间轴 】 面板包括两个方面的内容:
时间
深度
4.1.2 帧帧可分为以下两种:
关键帧
普通帧下面介绍一下各种帧的标识:
图所示为新打开文件时的状态,第 1帧中带白背景的空心圆圈代表空白关键帧,即该帧中不包含任何内容。
如图所示,其中灰色背景带黑点的单元格为关键帧,关键帧之间的灰背景则表示这些帧与关键帧保持相同的内容,都是普通帧,最右侧带黑框的单元格表示普通帧中的结束帧。
图所示为设置了运动补间的帧视图,其中淡蓝背景的黑点所在单元格表示关键帧,关键帧之间淡蓝背景上的黑色箭头表示运动补间帧。
图所示为设置了形状补间的帧视图,其中淡绿背景的黑点所在的单元格表示关键帧,关键帧之间淡绿背景的黑色箭头表示形状补间帧。
关键帧之间如果有虚线,则表示未完成或中断的渐变,如图所示。
图所示为在已设置的至少两个关键帧后新加入一个图层后显示的空帧。
关键帧上有个小写的字母 a,表示此帧设置了交互动作,即使用 【 动作( Actions) 】 面板设置了动作语句,如图所示。
当关键帧上有一个小红旗,则表示该帧设置了标签,如图所示。
当关键帧上出现绿色的双斜杠,表示该帧设置了注释,如图所示。
4.2 帧的编辑帧的编辑操作包括帧的选择、帧的复制、帧的粘贴、帧的移动等。
4.2.1 帧的选择选择帧的方法如下:
在时间轴上单击某个单元格,则可以选中该方格代表的帧。当选择了一帧后,再按住 【 Shift】
键单击另一帧,则可以选中这两帧之间包含的连续帧。选中的帧以黑色高亮显示。
按住 【 Ctrl】 键并单击,可以选中不连续的多个帧。
如果需要选择 【 时间轴 】 面板中的所有帧,可以执行 【 编辑 (Edit)】 【 选择所有帧 (Select All
Frames)】 命令。
4.2.2 插入帧用鼠标右击该帧,从弹出的快捷菜单中选择相应命令即可在某帧前插入一帧或将某帧设置为关键帧、空白关键帧,如图所示。
插入普通帧:从快捷菜单中选择 【 插入帧
( Insert Frame) 】 命令或按 【 F5】 键可插入一个普通帧时;
设置关键帧:可以从快捷菜单中选择 【 插入关键帧( Insert Keyframe) 】 命令或按 【 F6】 键;
插入空白关键帧:从快捷菜单中选择 【 插入空白关键帧( Insert Black Keyframe) 】 命令或按
【 F7】 键。
4.2.3 帧的复制和粘贴复制帧时可按如下方法进行操作:
1、在时间轴上先将需要复制的帧选中(可以是单帧,也可是多帧)。
2、单击鼠标右键,从弹出的快捷菜单中选择
【 拷贝帧( Copy Frames) 】 命令,如图所示,即可将选中的帧复制到剪贴板上。
3、在时间轴上选取粘贴的目标帧,右击该帧,在弹出的快捷菜单中选择 【 粘贴帧( Paste
Frames) 】 命令,将复制的帧粘贴上去。如果选择的是多帧,则执行 【 粘贴帧 】 命令后会把选中的多个帧覆盖。
4.2.4 帧的移动和删除
选取一帧或多帧,用鼠标直接将其拖至需要的地方即可移动帧。
要删除一个或多个帧,需要先将其选中,然后从快捷菜单中选择 【 删除帧( Remove
Frames) 】 命令,使用 【 剪切帧 】 命令也可达到删除帧的目的。
4.2.5 动画帧的翻转选择需要翻转的动画帧(可以包括多层,即选取一段动画)右击,从弹出的快捷菜单中选择
【 翻转帧( Reverse Frames) 】 命令,可以将动画的播放次序颠倒。
4.2.6 关键帧转换为普通帧要把关键帧转换为普通帧,只需右击该关键帧,
从弹出的快捷菜单中选择 【 清除关键帧
( Clear Keyframe) 】 命令,即可将当前关键帧清除,原来的内容由前面帧的内容取代。
4.2.7 制作闪烁字母具体操作如下:
1、新建一个文件,将背景色设置为深蓝色。
2、选择 【 文本工具 】,将线条颜色设置为黄色,然后在舞台上输入字母 f。
3、用 【 箭头工具 】 选择文字,将文字打散,使其变成 Flash可以处理的矢量图形。
4、执行 【 修改 】 【 形状( Shape) 】 【 柔化填充边缘( Soften Fill Edges) 】 命令,打开
【 柔化填充边缘 】 对话框,按图所示进行设置。
效果如下图所示:
5、选择时间轴上的第 5帧,插入关键帧,此时该帧中的内容与第 1帧保持相同的内容。
6、选择第 6帧,插入空白关键帧。再选择第 8帧插入普通帧,时间轴如图所示。
7、将 1至 8帧选中,复制选中的帧。
8、右击第 9帧,粘贴所复制的帧。
9、选择 【 箭头工具 】,单击舞台上文字的中心部分,然后拖动鼠标至右侧,如图所示,释放鼠标。
10、选择第 13帧文字的描边部分,再按 【 Delete】
键删除选取部分。最后效果如图所示。
11、右击第 17帧,从弹出的快捷菜单中选择 【 粘贴帧 】 命令。
12、将第 9帧至第 16帧选中,对帧进行复制,然后在第 25帧处进行帧的粘贴,完成后的 【 时间轴 】 面板如图所示。
13、将所有帧选中,然后拖动鼠标到第 10帧处,
移动帧及其结果如图所示。
14、执行 【 控制 】 【 测试影片( Test Movie) 】
命令测试动画效果。
4.3 逐帧动画下面通过现有图片素材来介绍创建逐帧动画的制作方法,具体操作步骤如下:
1、新建一个文件,此时的时间轴上的第一帧是个空白关键帧。
2、在其他图片处理程序(如 Photoshop)中将准备好的图片素材打开,选中后按 【 Ctrl+C】 组合键进行复制。
3、在 Flash中,选择第 1帧,按 【 Ctrl+V】 组合键进行粘贴,如图所示。
4、用步骤 2中同样的方法复制素材的第 2幅图片。
5、在第 2帧处插入一个关键帧,然后将复制的图片粘贴到第 2帧中,如图所示。
6、选择 【 预览( Preview) 】 模式,在时间轴上显示每一帧的动画内容,如图所示。
7、执行 【 控制 】 【 测试影片 】 命令测试动画效果。
4.4 运动补间动画补间动画是相对于逐帧动画而言的,它通过定义动画某一部分的起点和终点的内容,然后由
Flash自动生成两端点间各帧(一般称这些帧为补间帧)的内容。
在 Flash中可以建立两种补间动画 —— 形状补间
( Shape Tween)和运动补间( Motion
Tween),每种都有其自己的特性。本节我们先介绍运动补间动画的制作。
4.4.1 创建运动补间动画下面先通过一个例子来说明创建运动补间的方法,具体操作步骤如下:
1、新建一个文件,然后利用工具箱的工具制作一幅图片,如图所示。
2、新建一个图层 【 图层 2】 。
3、用 【 画笔工具 】 在舞台上绘制一面红旗,将颜色设置为红色,,如图所示。
4、选择图层 1中的第 15帧,插入普通帧。
5、选择图层 2,在第 1帧上将红旗拖到旗杆的下方,按 【 Ctrl+G】 组合键使其成组。
6、选择第 15帧,插入关键帧,将红旗拖至旗杆上方,如图所示,然后释放鼠标。
7、用鼠标右击图层 2的第 1帧,从弹出的快捷菜单中选择 【 创建补间动画( Create Motion
Tween) 】 命令,此时的 【 时间轴 】 面板如图所示。
8、下面来制作降旗的动画。在图层 1的第 60帧处插入普通帧。
9、在图层 2的第 45帧处插入关键帧,然后选中第 1帧到第 15帧,复制选中的帧。
10、用鼠标右击第 46帧,将复制的帧粘贴到此处。
11、选择第 46至 60帧,翻转动画帧,使升旗过程变为降旗过程。此时的 【 时间轴 】 面板及画面如下图所示。
4.4.2 设置运动补间属性当选中 【 时间轴 】 面板中的某帧(尚未创建补间动画的帧)后,属性面板即显示为帧属性面板,如图所示。
该面板中各选项功能如下所述:
帧:
补间:
当在时间轴上选择设置了运动补间的帧,帧属性面板会有所变化,如图示。
以下是对应于运动补间模式的选项设置:
【 简易 (Ease)】,
【 旋转( Rotate) 】,
【 调整到路径( Orient to path) 】,
【 同步( Sync) 】,
【 吸附 】,
运动补间属性面板中各选项的使用具体操作步骤如下:
1,接上例中的文件,新建图层 3。
2、选择新建的图层 3的第 1帧,按 【 Ctrl+R】 组合键导入一幅图片,如图所示。
3、按 【 Ctrl+B】 组合键将导入的图形打散。
4、从工具箱中选择 【 套索工具 】,从其选项区中选择 【 魔术棒 】 工具,单击导入图片的白色背景部分,将其选中,按 【 Delete】 键删除,效果如图所示。
5、将图层 3的第 1帧中的内容全部选中,按
【 Ctrl+G】 组合键使所有图像成组,成组后的对象会被蓝框框住。将成组后的对象移到舞台的右上角。
6、在第 60帧处插入关键帧,并将图像移到舞台的左下角,如图所示。
7、选择第 1帧,然后在帧属性面板中进行如图所示的设置。
8、按 【 Ctrl+Enter】 组合键测试动画效果。
4.5 形状补间动画形状补间动画是指形状逐渐发生变化的动画,
一般称为变形动画。
4.5.1 形状补间的创建建立变形动画的般步骤如下:
1、新建一个文件,将该文件背景设置为深蓝色。
2、用 【 直线工具 】 在舞台的左侧绘制一个长方体轮廓,用填充工具为长方体三个面填充上不同的颜色,如图所示。
3、在第 40帧处插入关键帧,然后将该帧的长方体删除。
4、选择 【 椭圆工具 】,将填充颜色设置为渐变填充色,如图所示。
5、在舞台的右侧绘制一个圆形,用 【 填充变形 】 调整渐变填充,结果如图所示。
6、在 【 时间轴 】 面板中的第 80帧处插入关键帧,将该帧中的圆球删除,选择 【 矩形工具 】,将 【 笔触颜色 】 设置为无色,【 填充颜色 】 设置如上图所示,只是将 【 填充样式 】 设置为 【 线性 】,绘制一个矩形。接下来在舞台左侧绘制一个矩形。
7、用 【 箭头工具 】 将矩形变形为图所示的箭头形状。
8、单击第 1帧,将 【 补间 】 设置为 【 形状 】,如图所示。
在形状补间的 【 属性 】 面板中还可设置如下选项:
【 简易 】,
【 混合( Blend) 】,
9、用同样的方法将第 40帧处的 【 补间 】 设置为
【 形状 】,此时的时间轴及舞台如下图所示。
10、按 【 Ctrl+Enter】 组合键,测试动画效果,
图所示为变形动画中的两个画面。
4.5.2 形状提示形状提示是一个有颜色的实心小圆,上面写着一个英文字母,表示物体部位的名称,最多可以用 26个英文字母来代表图形上的部位。
利用形状提示来制作开门变形动画的具体操作步骤:
1、新建一个文件,导入一幅图片,用 【 任意变形工具 】 将导入图片的大小调整为合适大小,如下图所示。
2、新建 【 图层 2】 和 【 图层 3】 。选择 【 矩形工具 】,将 【 笔触颜色 】 设置为无色,【 填充颜色 】 设置为红色,在舞台中绘制一个矩形块,如下图所示。
3、在第 60帧处插入关键帧,选择 【 任意变形工具 】,将矩形向左压缩,如图所示。
4、选择第 1帧,接着将 【 属性 】 面板中的 【 补间 】 设置为 【 形状 】 。
5、选择第 1帧,执行 【 修改 】 【 形状 】 【 添加形状提示( Add Shape Hint) 】 命令,添加形状提示,在舞台上会出现一个写着字母 a的红色形状提示。
6、按 【 Ctrl+Shift+H】 组合键再多添加三个图形提示,然后用鼠标将形状提示移动到矩形的四个角上,如图所示。
7、选择渐变的结束帧。将上面的提示移动到变形后的目的位置,此时效果如图所示。
8、选择红色矩形块,复制到 【 图层 3】,并将其移动到背景图片的右侧。
9、在图层 3的第 60帧处插入关键帧,将图层 2
第 60帧中的图片复制到图层 3的第 60帧。
10、选择图层 3的第 1帧,在其属性面板中将
【 补间 】 设置为 【 形状 】,然后采用步骤 5
和步骤 6中的方法为该层中的对象添加形状提示。图下页所示为在第 60帧处的形状提示。
11、再新建一个层,用 【 矩形工具 】 在舞台上绘制两个长条矩形,并用渐变色进行填充,形成立体的门柱。在第 60帧处插入关键帧,如图所示。
12、执行菜单命令 【 控制 】 【 播放 】 播放影片,查看变形效果。
4.6 绘图纸模式
Flash MX中提供的绘图纸模式按钮有 4个,如图所示。当单击 【 时间轴 】 面板下方的前三个绘图纸按钮中的任意一个时,“绘图纸标记”
会出现在时间轴上,如图所示。
4.6.1 绘图纸外观模式单击 【 绘图纸外观( Onion Skin) 】 按钮,
在时间轴标尺上会出现一对黑括号,位于时间轴标尺上的起始游标和终止游标之间的帧在画板上从深到浅显示出来(如图所示)。
用鼠标移动任意一个游标可同时看到更多的帧,
如图所示。
4.6.2 绘图纸外观轮廓模式
与 【 绘图纸外观 】 模式惟一区别,【 绘图纸外观轮廓 】 模式只能显示其他图层的轮廓线,画面比较单一,而在 【 绘图纸外观 】 模式下,其他帧显示的内容与实际帧没有多少的差别,显示的是一个整体。
单击 【 绘图纸外观轮廓( Onion Skin
Outlines) 】 按钮,位于时间轴标尺上的起始游标和终止游标之间的帧以轮廓模式显示,
如下页图所示。
4.6.3 编辑多帧模式单击 【 编辑多帧 】 按钮,会看到位于游标之间的各关键帧,如下页图所示。
调整上图所示各帧中图片的间距并将它们移到舞台的中央,具体操作步骤如下:
1、单击 【 编辑多帧 】 按钮,使文件处于 【 编辑多帧 】 模式下。
2、拖动时间轴标尺上的显示游标,将所有要移动的帧都包括在游标之间。
3、选取显示在画板的所有对象和时间轴游标之间所有的帧,如图所示。
4、单击工具栏中的 【 对齐 】 按钮,打开 【 对齐 】
面板,单击其中的 【 垂直中齐 】 按钮和 【 水平中间分布 】 按钮,得到如图所示的效果。
5、用鼠标拖动选中的对象,将其移到舞台的中央,如图所示。
4.6.4 修改绘图纸标记单击 【 修改绘图纸标记 】 按钮,弹出下拉菜单,
如图所示。
菜单各选项介绍:
总是显示标记( Always Show Markers):
锚定绘图纸( Anchor Onion):
绘图纸 2( Onion 2):
绘图纸 5( Onion 5):
绘制全部( Onion All):
习题(四)
选择题
1,插入普通帧的快捷键是( )。
A,F5
B,F6
C,F7
D,F8
A
2,运动补间动画中的关键帧上的对象只能是
( )对象。
A,元件
B,成组对象
C,文字对象
D,位图对象
ABCD
3、当在运动补间中需要实现减速运动时,可以在起始关键帧属性面板中( )。
A,将 【 旋转 】 选项设置为 【 顺时针 】 。
B,将 【 旋转 】 选项设置为 【 逆时针 】 。
C,将 【 简易 】 值设置为正值。
D,将 【 简易 】 值设置为负值。
C
4、当在运动补间中需要实现对象的顺时针旋转时,可以在起始关键帧的 【 属性 】 面板中
( )。
A,将 【 旋转 】 选项设置为 【 顺时针 】 。
B,将 【 旋转 】 选项设置为 【 逆时针 】 。
C,将 【 简易 】 值设置为正值。
D,将 【 简易 】 值设置为负值。
A
5、( )动画与( )动画相比,好处是不需要一帧一帧地绘制动画,可以很大程度地节省时间。
A,补间
B,形状
C,运动
D,逐帧
A D
判断题
1,补间动画需要用户自已设置每帧的画面。
( )
2、在 Flash中,只要改变关键帧的内容,即可实现动画效果。 ( )
3、在设置补间时,有时在两帧之间出现的不是带箭头的线条而是虚线,这不会影响动画效果。 ( )
×
×
×
4、只有启动了绘图纸模式,在时间轴上才能显示绘图纸标记。 ( )
5、当需要同时编辑多帧时,需要启动 【 修改绘图纸标记 】 模式。 ( )
×
×
实践练习
1、体会逐帧动画与补间动画的区别。
2、体会运动补间与形状补间的区别。
3、创建一个立体彩球沿直线滚动的动画。