第 5章 制作动画
本章主要内容
?5.1 动画原理
?5.2 时间轴面板和帧
?5.3 图层
?5.4 管理场景
?5.5 制作逐帧动画
?5.6 制作形状补间动画
?5.7 制作运动补间动画
?5.8 应用实例
?5.9 本章 习题与实验指导
第 5章 制作动画
5.1 动画原理
动画用最简单的话说就是会“动”的画,
它的基本原理与电影、电视一样,都是根据
视觉原理制作而成的。
Flash动画是通过连续播放若干个静止的
画面来产生动画效果, 而这些静止的画面称
为帧 。 在 Flash动画的制作中, 帧的多少与
动画播放的时间有关系, 这就是帧率,
Flash默认的帧率是 12帧 /秒, 也就是说每一
秒钟就显示 12帧画面 。 当然, 用户可以改变
帧率 。 可见制作动画有着很大的工作量, 因
此引入关键帧 。
关键帧是用来描述动画中关键画面的帧,
在制作动画过程中, 可以先制作关键帧画面,
关键帧之间的各帧则可以通过插值的方法来自
动产生, 这样可大大提高制作动画的效率 。
Flash动画分为逐帧动画和补间动画两大类,
而补间动画又可以分为形状补间动画和动作补
间动画两类,它们各有自己的特点:逐帧动画
是动画中最简单的一种形式,也是最灵活的一
种形式。而补间动画最能够体现 Flash的优越
性,是使用最经常的动画。
5.2 时间轴面板和帧
5.2.1 时间轴面板
新建一个 Flash文档, 在工作窗口上部
会自动出现时间轴面板, 如下图所示 。
时间轴面板
第 5章 制作动画
时间轴面板分为左右两个部分,左侧是
层控制区域,用来进行与层有关的操作;右侧
是时间轴控制区域,用来控制当前帧、动画播
放的速度、时间等。
通过以下方法可以对时间轴面板进行调整:
?将鼠标指针移到分隔舞台和时间轴的区域, 出
现调整大小控制块时调整时间轴的大小 。
?如果时间轴处于浮动状态, 拖动时间轴右下角
的边框也可以调整时间轴的大小 。
?可以使用鼠标拖动时间轴, 改变它在窗口中的
默认位置, 也可以将其隐藏起来 。
1、帧显示选项
帧显示选项的图标是,它位于时间轴的
右上角,当用户单击该图标按钮时,出现弹
出式菜单,如下图所示。
帧显示选项菜单
2,时间轴特效
Flash 包含预建的时间轴特效, 能使用户
通过执行最少的步骤创建复杂的动画 。 可以
对以下对象应用时间轴特效:文本, 图形
( 包括形状, 组以及图形元件 ), 位图图像,
按钮元件 。
( 1) 添加时间轴特效
当用户需要向对象添加时间轴特效时,
Flash 将创建一个图层并将对象传输至该新
层 。
为对象添加时间轴特效有以下两种方法:
第 1种:选择要添加时间轴特效的对象, 选
择菜单栏中的, 插入, →, 时间轴特效,, 在
弹出的子菜单中选择需要的一种特效 。
第 2种:右击要添加时间轴特效的对象, 从
弹出的快捷菜单中选择, 时间轴特效, 。
( 2) 编辑时间轴特效
可以使用“特效设置”对话框编辑时间轴
特效。
方法:选择特效的对象 → 在“属性”面板单
击 【 编辑 】 按钮,打开“特效设置”对话框 →
在“特效设置”对话框中根据需要进行编辑,
单击 【 确定 】 按钮保存设置。
( 3) 删除时间轴特效
右击要删除时间轴特效的对象,从弹
出的快捷式菜单中选择“时间轴
效” →,删除特效”命令。
5.2.2 帧
在 Flash中,动画需要的每一张图片就相
当于其中的一个帧,因此,帧是构成动画的
核心元素。在 Flash动画中涉及的帧主要有
两种:一种是普通帧,另一种是关键帧。帧
的操作区域在时间轴的右半部分,如下图 。
帧操作区
1,帧操作区介绍
?关键帧:用来描述动画中关键画面的帧 。
?空白关键帧:关键帧的内容为空 。
?空白帧:在空白关键帧后面的空白方格代表空
白帧 。 空白帧是不可编辑的帧 。
?普通帧:在关键帧后面出现的灰色方格区域就
是普通帧, 它只是延续前面关键帧中的内容 。
?当前帧:在帧操作区红线竖线所在的帧为当前
帧 。
?帧频率:即动画的播放速率 。 它是以每秒钟播
放多少帧来计算的 。 默认速率是 12fps。
?运行时间:运行到当前帧所需要的时间 。
?帧数:表示第几帧
2,关键帧的用途
制作 Flash动画有两种方式:一种是逐
帧动画,另一种是补间动画。关键帧是
用来定义动画在某一时刻新的状态,例
如,对象大小的改变、数量的增减、外
形的变化及旋转等。动画中的其他帧是
由 Flash根据这些关键帧的内容,根据一
定的规则计算得到的,并在动画播放过
程中显示出来。作为补间动画方式,就
是利用在两个关键帧之间插入过渡画面
来产生动画。
3,在时间轴中处理帧和关键帧
在时间轴中, 对关键帧的操作和对普
通帧的操作方法基本一致 。 通过对关键
帧和普通帧的操作, 让它们按照用户的
想法使对象在帧中出现的顺序进行相应
的排列, 从而产生流畅的动画效果 。
( 1) 选择关键帧或帧
l 选择一个关键帧或帧:用, 选择, 工具在帧
操作区中单击要选中的关键帧或帧 。
l 选择多个连续的帧:首先在帧操作区中选中
某一帧, 然后按住 〈 Shift〉 键并单击其它帧,
则选择了多个连续的帧 。
l 选择多个不连续的帧:按住 〈 Ctrl〉 键单击
任意不连续的多个帧 。
l 选择时间轴上的所有帧:选择, 编
辑, →, 时间轴, →, 选择所有帧, 菜单命令,
则选择了时间轴上的所有帧 。
( 2) 插入关键帧或帧
方法 1:选择要插入关键帧或帧的位置, 执
行, 插入, →, 时间轴, →, 关键帧, 或, 插
入帧, 菜单命令, 即在指定位置插入一个新的
关键帧或帧 。
方法 2:首先将光标移动到要插入关键帧
或帧的位置,然后单击鼠标右键,在弹出的快
捷菜单中选择“插入关键帧”或“插入帧”命
令。
( 3) 插入空白关键帧
插入空白关键帧的方法与插入关键帧的方法
基本一致, 只是选择, 空白关键帧, 命令 。
( 4) 复制关键帧或帧
选中要复制的关键帧或帧, 选择, 编
辑, →, 时间轴, →, 复制帧, 命令, 选中
目 标 位 置, 单击, 编辑, →, 时间
轴, →, 粘贴帧, 命令, 将在新的位置产生
一个新的关键帧或帧 。
( 5) 移动关键帧或帧
移动关键帧或帧的方法比较简单, 选中
要移动的关键帧或帧, 按下鼠标左键向左或
向右
拖动到目标位置即可, 也可以通过菜单命令
完成移动 。
( 6) 删除关键帧或帧
选中要删除的关键帧或帧, 单击鼠标右
键, 在弹出的快捷菜单中选择, 清除关键
帧, 或, 删除帧, 命令 。
( 7) 帧的属性设置
选 中 时 间 轴 上 的 某 帧, 选择, 窗
口, →, 属性, 命令, 将出现帧对应的
,属性, 面板, 如下图所示 。
帧对应的“属性”面板
在帧, 属性, 面板中, 可以设置帧标
签属性, 便于在动画中控制, 了解帧 。
当在帧标签对应的文本框中输入标签名
称时,, 标签类型, 下拉菜单变成亮色,
其中有三种标签类型, 如下图所示
三种帧标签
它们的含义如下:
?名称:在帧上将出现一个红色的小旗子, 后面
跟着标签的名称 。
?注释:在帧上出现两道绿色的斜杠, 后面跟着
标签的注释 。
?锚记:在帧上出现一个金色的锚记, 后面跟着
标签的锚记名 。
下图显示出添加的三种帧标签 。
添加三种帧标签
( 8) 帧的翻转
正常情况下,整个动画是正着放映的。
使用“帧的翻转” 可将动画的播放顺序
全部或部分反过来。
方法:选择“编辑” →,时间
轴” →,选中所有帧”菜单命令,然后选
择“修改” →,时间轴” →,翻转帧”菜
单命令,这时,时间轴上所有帧的位置发
生了改变,原来位于最左边的帧移到了最
右边,
5.3 图层
每一个成功的动画制作,都离不开最基
本但又很强大的图层设计。图层不仅在许多
的图形软件中出现,而且它也是专业级图形
软件必备的工具。使用图层工具,用户可以
将繁多的图案分层进行编排、组织,最后组
合在一起形成完美的作品。
第 5章 制作动画
5.3.1 图层的概念及基本操作
1,图层及层操作区
图 层就像透明的塑料纸一样, 一层层地
向上叠加, 每个层都可以绘制, 编辑图像,
所有图层重叠在一起就组成了完整的一幅图
像 。 层操 作区如下图所示 。
层操作区
层操作区中各按钮可以实现如下功能:
( 1) 锁定 /解锁定所有层:锁定的目的是让编
辑好的图层不要因误操作而影响到该层, 因
为锁定的层只显示该层内容而不可对其进行
编辑 。
( 2) 显示 /隐藏所有层:对应的眼睛图标表示
层是否可见 。
( 3) 显示所有图层轮廓:默认情况下, 层中
的内容以完整的实体显示, 单击对应的按钮
只显示图形的轮廓线, 便于了解图形间的位
置关系 。
( 4) 添加运动引导层:如果希望某一物体
的运动轨迹是一条曲线, 需要创建运动
引导层来实现 。
( 6) 删除层或层文件夹:选中需要删除的
层或层文件夹, 单击图标按钮可以删除
选中的层或层文件夹 。
2,图层的基本操作
对于图层, Flash MX 2004除了可以在层操
作区中完成某些操作之外, 还提供了具
有其自身特点的其它操作 。
1,创建图层和层文件夹
2,重命名层或层文件夹
3,选择层或层文件夹
4,复制层
5、删除层或层文件夹
6,改变图层或层文件夹的顺序
3、绘图纸工具
绘图纸工具是 Flash的又一亮点, 它位
于时间轴的底部, 如下图所示 。
绘图纸外观轮廓
绘图纸外观
编辑多个帧
修改绘图纸标记
绘图纸工具
5.3.2 引导层
引导层是一种特殊的辅助设计层, 是
用来存放物体运动路径的图层 。 引导层
中的内容在测试和发布动画时不显示 。
根据需要可以在一个场景中使用多个引
导层, 也可以把多个图层与同一个引导
层关联 。
1,一般引导层
创建一般引导层的操作步骤如下:
1) 新建一个 Flash文档, 创建一个新图层并
命名为, 引导层, 。
2)选择新建的图层单击右键,在弹出的快
捷菜单中选择“引导层”命令。这时在引
导层名称的左侧显示一个新的图标
表明该层为引导层。插入的引导层如下图。
创建的引导层
2、运动引导层
在动画制作过程中, 使用运动引导层可以
控制对象沿着特定的路径运动 。 与一般的引
导层一样, 运动引导层中的内容在播放动画
过程中是不可见的 。
通过以下方法之一创建运动引导层:
?选择, 插入, →, 时间轴, →, 运动引导层,
命令 。
?单击时间轴面板中的插入运动引导层图标按
钮 。 插入的运动引导层如下图 。
创建运动引导层
5.3.3 遮罩层
遮罩层也叫蒙版层, 它是图层的一种,
其主要功能是可以透过该图层内的图形看到
其下面图层的内容 。 遮罩层下面的图层成为
被遮罩层 。 如果在遮罩层中绘制各种效果的
图形, 文字或线条, 这些遮罩区域完全透明
将会显示被遮罩层的内容, 而其它无图形区
域完全不透明, 将被遮罩层遮掩起来 。 利用
遮罩层可以制作出很多特殊的动画效果, 如
探照灯, 图像文字, 图像的动态切换等 。
请通过实例在 Flash窗口中作详细介绍。
5.4 管理场景
使用场景可以有效地组织动画。在 Flash
电影中,如果编辑较小的影片,使用一个默
认的场景即可,如果影片很长很复杂,使用
一个场景容易发生误操作,也不方便编辑和
管理动画,将复杂的影片分为多个场景,这
样可以使工作更加清晰和有条理,提高工作
效率。
第 5章 制作动画
5.4.1 场景的添加与切换
在舞台中添加场景, 有以下两种方法:
?选择, 插入, →, 场景, 命令增加一个
新场景, 此时在舞台的左上角显示出当
前场景的名称 。
?选择, 窗口, →, 设计面板, →, 场景,
命令或使用 〈 Shift+F2〉 组合键, 打开
,场景, 面板, 单击添加场景按钮 。
如下图所示, 默认情况下 Flash动画的播
放顺序依次为场景 1,场景 2和场景 3。 当然,
用户也可以改变场景的顺序, 如播放场景 1
之后跳到场景 3,然后播放场景 2,可以通过
ActionScript脚本来控制, 也可以在, 场景,
面板中将场景 3移动到场景 2之上 。
场景面板
单击舞台右上角的图标按钮,弹出场景
下拉菜单,如下图所示,单击菜单中的场景名
称,可以从其它场景切换到选择的场景中。
另外,选择“视图” →,转到”命令,在
弹出的子菜单中也可以完成场景的切换。
场景切换菜单
5.4.2 场景的编辑
1,场景的命名
新建的场景默认名字是, 场景 1”,,场景
2”等, 如果需要给场景重新命名, 可以在
,场景, 面板中双击需要命名的场景名称,
此时场景名变为可编辑状态, 输入新场景名
即可 。
需要说明的是,在为场景命名的过程中,
用户最好选择有意义的名字,因为场景的名
称可以提示或代表场景中的内容,这样便于
在工作过程中快捷地选择要编辑的场景。
2,场景的删除及复制
在, 场景, 面板中选择需要删除的场景, 单
击 【 删除场景 】 按钮弹出提示框, 询问是否确
定要删除, 确认即可 。 需要注意的是, 删除一
个场景意味着删除了该场景中的所有内容, 包
括该场景中的所有层和帧 。 因此, 用户在删除
场景时需要小心, 避免发生误操作 。
在, 场景, 面板中选择一个需要复制的场景,
单击右下方的 【 重制场景 】 图形按钮即可 。 复
制的场景是所选择场景的一个副本, 所选择场
景中的帧, 图层和动画等都得到复制, 并形成
一个新场景 。 复制场景主要用于编辑某些类似
的场景 。
逐帧动画是由若干个连续关键帧组成的
动画序列,是跟传统的动画制作方式类似的、
最为基础的动画制作方式。要创建逐帧动画,
需要将每个帧都定义为关键帧,然后为每个
关键帧创建不同的图像。可见制作逐帧动画
的工作量是非常大的,会耗费制作者大量的
时间和精力,而且对于制作者的绘图技术也
有较高的要求,不过逐帧动画能产生特殊的
动画效果。
请通过实例在 Flash中作详细介绍。
5.5 制作逐帧动画
第 5章 制作动画
5.6 制作形状补间动画
所谓形状, 就是在 Flash中直接使用绘
图工具绘制出来的矢量图形, 或者是将
其他对象分离出来的矢量图形 。 形状补
间动画是 Flash动画的一个主要组成部分,
反映了在一段时间内将一个形状对象变
形为另一个形状对象的过程 。
第 5章 制作动画
5.6.1 制作原理和方法
形状补间动画的基本原理是由于矢量形状
本身的属性发生了变化, 从而产生动画 。 制
作形状补间动画需要具备以下三个条件:
?至少有两个关键帧 。
?在这两个关键帧中包含必要的形状, 而且只
能是形状 。
?设定了, 形状补间, 的动画方式 。
请进入 Flash窗口通过实例作详细介绍 。
5.6.2 制作技巧和限制
使用, 形状提示, 在开始和结束形状中
选择公共点, 这些公共点在过渡形状中保持
不变, 这样就可以较为精确地控制整个形变
过程 。
形状提示是一个有颜色的实心小圆, 上
面标志着小写的英文字母, 用于识别起始形
状和结束形状中相对应的点 。 对于每一个形
变过程, 可以为它添加 26个形状提示, 从 a
标记到 z标记, 实际上只用几个就够了 。
请进入 Flash窗口继续上面的形状补间实
例, 介绍如何使用形状提示 。
5.7 制作运动补间动画
运动补间动画可以设置各种对象的运
动和过渡, 利用运动过渡可以设置大小, 倾
斜, 位置, 旋转, 颜色及元件的透明度的过
渡 。 合理利用这些功能, 可以创建出网页上
常见的各种 Flash渐变效果 。
第 5章 制作动画
5.7.1 制作原理和方法
运动补间动画所处理的对象是舞台中
群组后的矢量图形, 元件, 文字, 导入
的符号或素材等 。 创建运动补间动画需
要具备三个条件:
1) 至少有两个关键帧 。
2) 在关键帧中包含必要的实例, 组, 导
入的素材或文本对象 。
3) 设定为, 动作补间, 的动画方式 。
在运动补间动画的制作过程中, 合理
使用设置参数可以方便动画制作, 实现
神奇的效果 。
在, 属性, 面板中, 当选择, 动作,
补间后,, 属性, 面板上显示出与运动
动画有关的设置选项, 如下图所示 。
动作补间对应的“属性”面板
选项的含义如下:
?缩放:选择该项可以改变对象的大小 。
?简易:可以使对象产生先快后慢或先慢后快
的运动效果 。 拖动滑标可改变其值, 值在 -
100~ 100之间变化 。 为负值时, 对象在起始
点运动较慢, 逐渐加速;为正值时, 对象在
起始点运动较快, 逐渐减速;当为 0时, 对
象的速度在整个过程中保持匀速 。
?旋转:利用该选项可以设置运动过程中对象
的旋转方式 。, 顺时针, 选项指对象按顺时
针方向旋转;, 逆时针, 选项指对象按逆时
针方向旋转 。
?调整到路径:可以让动画对象紧贴着路径来
运动, 仅用于设置对象沿着某条路径运动的
动画 。
?同步:对实例进行同步校准, 以确保电影片
断能正确循环 。
?对齐:当在运动动画中使用引导层时, 使用
该项可以让动画对象自动吸附在路径上运动 。
5.7.2 制作技巧和限制
运动补间动画是重要的动画之一, 熟练
掌握它的制作, 可以在少走弯路的基础上完
成更高难度的动画, 下面将对运动动画作进
一步的介绍 。
1,旋转动画
为运动的对象添加旋转设置, 可以制作出
旋转的动画效果 。
2,淡入淡出动画
淡入淡出效果在影片中用的很多, 只需
要很简单的操作就可以在动画中做出优美的
效果 。
请进入 Flash窗口通过实例作详细介绍 。
5.8 应用实例
5.8.1 倒计时
本实例效果是数字每隔 1秒钟变化一次, 逐渐
从 9变到 0,效果如下图所示 。
请进入 Flash窗口作详细介绍 。
倒计时效果图
第 5章 制作动画
5.8.2 模拟两球碰撞的物理实验
本实例效果是红色的小球从空中落下,
落地瞬间与地上静止的黄色小球发生碰撞,
两球均沿不同轨迹飞出界面,动画效果如下
图所示。 请进入 Flash窗口作详细介绍。
动画效果图
5.8.3 制作探照灯效果动画
探照灯效果是 Flash遮罩的经典应用之一,
动画效果如下图所示 。
请进入 Flash窗口作详细介绍 。
探照灯效果
习题与实验指导
本章习题,见书中 第 122页
实验指导,见书中 第 122页
第 5章 制作动画
Thank you very much!
本章到此结束。
谢谢您的光临!