多媒体技术——flash动画制作

1、第第 3 3 章章 动画制作动画制作 1 主要内容主要内容 动画概述动画概述3.1 平面矢量动画大师平面矢量动画大师FlashFlash3.2 FlashFlash动画制作动画制作3.3 2 第第6周任务周任务 3 3.1动画概述动画概述 n3.1.1 动画原理动画原理 n3.1.2 动画分类动画分类 n3.1.3 常用的动画制作软件常用的动画制作软件 4 3.1.1 动画原理动画原理 n动画是由一系列静态画面按照一定的顺序组动画是由一系列静态画面按照一定的顺序组 成的，这些静态的画面称为动画的帧。成的，这些静态的画面称为动画的帧。 n通常情况下，相邻的帧差别不大，其内容的通常情况下，相邻的帧

2、差别不大，其内容的 变化存在一定的规律。变化存在一定的规律。 n当这些帧按顺序以一定的速度播放时，由于当这些帧按顺序以一定的速度播放时，由于 眼睛的视觉滞留作用（滞留时间的长度一般眼睛的视觉滞留作用（滞留时间的长度一般 在在0.10.4s）的存在，形成了连贯的动画效）的存在，形成了连贯的动画效 果。果。 5 图图1-3-11-3-1美术片美术片哪吒传奇哪吒传奇中的部分画面中的部分画面 6 动画与视频的区别动画与视频的区别 n动画画面比较简洁，具有浪漫主义色彩；视动画画面比较简洁，具有浪漫主义色彩；视 频画面直接反映现实世界，具有写实主义风频画面直接反映现实世界，具有写实主义风 格；格； n动画

3、作品可夹杂视频片段，影视作品也可夹动画作品可夹杂视频片段，影视作品也可夹 杂动画片段。杂动画片段。 7 3.1.2 动画分类动画分类 n传统动画就是一幅幅预先绘制好的静态画面传统动画就是一幅幅预先绘制好的静态画面 的连续播放；的连续播放； n计算机动画：计算机动画： 逐帧动画：与传统动画原理相似；逐帧动画：与传统动画原理相似； 补间动画：则通过插值方法在两个静态画面之间补间动画：则通过插值方法在两个静态画面之间 生成一系列过渡画面；生成一系列过渡画面； nFlash动画甚至允许与用户互动。动画甚至允许与用户互动。 8 3.1.3常用的动画制作软件常用的动画制作软件 n1Gif Animator

4、 n2Adobe ImageReady n3Flash n4Director n53ds Max n6Maya n7Morpher 该软件用户只需提供首尾两张图像，中间的变形该软件用户只需提供首尾两张图像，中间的变形 过程全由软件完成过程全由软件完成 9 3.2平面矢量动画大师平面矢量动画大师Flash nFlash动画大师特点：动画大师特点： 1软件简单易用软件简单易用 2动画基于矢量图形动画基于矢量图形 3动画流式传输动画流式传输 4多媒体制作环境和强大的交互功能多媒体制作环境和强大的交互功能 10 3.2.1Flash动画相关概念动画相关概念 n1图层图层 n2时间轴时间轴 n3舞台舞台

5、 n4工作区工作区 n5帧帧 n6关键帧关键帧 n7场景场景 11 图图1-3-51-3-5Flash CS4Flash CS4的文档窗口的文档窗口 12 3.2.2基本工具的使用基本工具的使用 n1笔触颜色笔触颜色 用于设置图形中线条的颜色用于设置图形中线条的颜色 n2填充色填充色 用于设置图形内部填充的颜色用于设置图形内部填充的颜色 n3选择工具选择工具 用于选择和移动对象，同时还可调整线条的形状用于选择和移动对象，同时还可调整线条的形状 n4线条工具线条工具 用于绘制任意长短和方向的直线段用于绘制任意长短和方向的直线段 13 基本工具的使用基本工具的使用 n5椭圆工具椭圆工具 用于绘制椭

6、圆形和圆形用于绘制椭圆形和圆形 n6矩形工具矩形工具 用于绘制矩形、正方形和圆角矩形用于绘制矩形、正方形和圆角矩形 n7多角星形工具多角星形工具 用于绘制正多边形和正多角星形用于绘制正多边形和正多角星形 n8铅笔工具铅笔工具 用于绘制手绘线条用于绘制手绘线条 14 基本工具的使用基本工具的使用 n9橡皮擦工具橡皮擦工具 擦除绘图工具绘制的图形擦除绘图工具绘制的图形 擦除完全分离的组合、位图、文本对象、元件实擦除完全分离的组合、位图、文本对象、元件实 例例 擦除舞台上所有未锁定的对象擦除舞台上所有未锁定的对象 n10墨水瓶工具墨水瓶工具 用于修改线条的颜色、透明度、线宽和线型用于修改线条的颜色、

7、透明度、线宽和线型 n11颜料桶工具颜料桶工具 用于在图形的填充区域填充单色、渐变色和位图用于在图形的填充区域填充单色、渐变色和位图 15 基本工具的使用基本工具的使用 n12手形工具手形工具 用于拖动工作区，使工作区中未现内容显示出来用于拖动工作区，使工作区中未现内容显示出来 n13缩放工具缩放工具 用于将工作区画面放大或缩小显示用于将工作区画面放大或缩小显示 n14文本工具文本工具 用于向舞台插入静态文本、动态文本或输入文本用于向舞台插入静态文本、动态文本或输入文本 n15任意变形工具任意变形工具 用于在对象上实施缩放、旋转和斜切等变形用于在对象上实施缩放、旋转和斜切等变形 16 3.2.

8、3Flash基本操作基本操作 n1设置文档属性设置文档属性 n2调整舞台的显示比例调整舞台的显示比例 n3面板管理面板管理 n4导入外部对象导入外部对象 n5图层管理图层管理 n6调整对象的排列顺序调整对象的排列顺序 n7锁定对象锁定对象 n8组合对象组合对象 17 Flash基本操作基本操作 n9分离对象分离对象 n10对齐对象对齐对象 n11分布对象分布对象 n12精确变形对象精确变形对象 n13库资源的利用库资源的利用 n14动画的测试与发布动画的测试与发布 18 第第7周任务周任务 19 3.3Flash动画制作动画制作 nFlash可以制作如下类型的动画：可以制作如下类型的动画： 逐

9、帧动画逐帧动画 补间动画补间动画 补间形状动画、传统补间动画、引导路径动画、对象补间形状动画、传统补间动画、引导路径动画、对象 补间动画、遮罩动画、补间动画、遮罩动画、3D补间动画补间动画 元件动画元件动画 骨骼动画骨骼动画 交互式动画等。交互式动画等。 20 3.3.1逐帧动画的制作逐帧动画的制作 n所谓逐帧动画，是指动画的每个帧都要由制所谓逐帧动画，是指动画的每个帧都要由制 作者手动完成，这些帧称为关键帧。作者手动完成，这些帧称为关键帧。 n在逐帧动画中，关键帧中的对象可以使用在逐帧动画中，关键帧中的对象可以使用 Flash的绘图工具绘制，也可以是外部导入的的绘图工具绘制，也可以是外部导入

10、的 图形图像资源。图形图像资源。 n制作实例：制作实例： 1制作眨眼睛动画制作眨眼睛动画 2制作制作Loading动画动画 21 实验实验 n实验实验3-1 制作小苗成长动画制作小苗成长动画 22 3.3.2补间动画的制作补间动画的制作 n所谓补间动画，指制作者只进行过渡动画中所谓补间动画，指制作者只进行过渡动画中 首尾两个关键帧的制作，关键帧之间的过渡首尾两个关键帧的制作，关键帧之间的过渡 帧由计算机自动计算完成，从而实现两个关帧由计算机自动计算完成，从而实现两个关 键帧之间的颜色、形状、大小、方向以及位键帧之间的颜色、形状、大小、方向以及位 置的连续变化。置的连续变化。 23 补间动画的分

11、类补间动画的分类 n按照补间中计算的对象不同，按照补间中计算的对象不同，Flash的基础补的基础补 间动画可分为间动画可分为2类：类： 1）形状补间动画）形状补间动画 2）传统补间动画）传统补间动画 n其他比较复杂的补间动画还有：其他比较复杂的补间动画还有： 引导路径动画引导路径动画 遮罩动画遮罩动画 对象补间动画对象补间动画 3D补间动画补间动画 24 1制作形状补间动画制作形状补间动画 n在在Flash中，使用中，使用Flash绘图工具直接绘制的绘图工具直接绘制的 以下对象能够用于补间形状动画：以下对象能够用于补间形状动画： 完全分离的矢量图形、完全分离的组合、完全分完全分离的矢量图形、完

12、全分离的组合、完全分 离的元件实例、完全分离的文本、完全分离的位离的元件实例、完全分离的文本、完全分离的位 图图 n在形状补间动画中，能够产生过渡效果的对在形状补间动画中，能够产生过渡效果的对 象属性有：象属性有： 形状、位置、大小、颜色、透明度等形状、位置、大小、颜色、透明度等 n制作实例：制作实例： 制作水果变形动画制作水果变形动画 25 2制作传统补间动画制作传统补间动画 n在在Flash中，能够用于传统补间动画的对象有：中，能够用于传统补间动画的对象有： 组合、元件实例、文本、位图等组合、元件实例、文本、位图等 n在传统补间动画中，能够产生过渡效果的对在传统补间动画中，能够产生过渡效果

13、的对 象属性有：象属性有： 位置、大小、旋转角度、颜色（只对元件实例）、位置、大小、旋转角度、颜色（只对元件实例）、 透明度（只对元件实例）等透明度（只对元件实例）等 n制作实例：制作实例： 制作球体从空中下落又弹起的动画制作球体从空中下落又弹起的动画 制作钟摆动画制作钟摆动画 26 实验实验 n实验实验3-2 制作翻页动画制作翻页动画 3.其他比较复杂的补间动画其他比较复杂的补间动画 n1）遮罩动画）遮罩动画 n2）引导路径动画）引导路径动画 n3）对象补间动画）对象补间动画 n4）3D补间动画补间动画 27 28 1）遮罩动画的制作）遮罩动画的制作 n 遮罩层是遮罩层是Flash动画中的特

14、殊图层之一。动画中的特殊图层之一。 n 遮罩层用于控制紧挨在其下面的被遮罩层的显示范遮罩层用于控制紧挨在其下面的被遮罩层的显示范 围。围。 确切地说，遮罩层上的填充区域像一个窗口，透过它可以确切地说，遮罩层上的填充区域像一个窗口，透过它可以 看到被遮罩层上对应区域的画面看到被遮罩层上对应区域的画面 n 在遮罩层上创建各类动画，就可形成一个随意变化在遮罩层上创建各类动画，就可形成一个随意变化 的动态窗口，从而形成许多有趣的动画效果的动态窗口，从而形成许多有趣的动画效果 n 制作实例：制作实例： 制作简单画面切换效果制作简单画面切换效果 29 实验实验 n实验实验3-3 制作探照灯动画效果制作探照

15、灯动画效果 2）引导路径动画）引导路径动画 n引引 导导 路路 径径 动动 画画 主主 要要 是是 制制 作作 让让 对对 象象 沿沿 指指 定定 的的 路路 径径 进进 行行 运运 动动 的的 轨轨 迹迹 动动 画。画。 比比 较：较： 传传 统统 补补 间间 位位 置置 移移 动动 动动 画画 是是 沿沿 着着 直直 线线 运运 行行 n引引 导导 路路 径径 动动 画画 的的 制制 作作 至至 少少 需需 要要 两两 个个 图图 层：层： 引引 导导 层：层： 绘绘 制制 运运 动动 轨轨 迹迹 被被 引引 导导 层：层： 放放 置置 要要 运运 动动 的的 元元 件件 实实 例，例，

16、并并 创创 建建 元元 件件 传传 统统 补补 间间 n右右 键键 单单 击击 被被 引引 导导 层，层， 选选 择择 “ 添添 加加 传传 统统 运运 动动 引引 导导 层层” 命命 令令 即即 可可 增增 加加 其其 引引 导导 层。层。 n制制 作作 实实 例：例： P 1 3 4 制制 作作 蝴蝴 蝶蝶 飞飞 舞舞 动动 画画 30 3）对象补间动画）对象补间动画 n 补补 间间 也也 可可 直直 接接 应应 用用 于于 对对 象象 上，上， 而而 不不 是是 应应 用用 于于 关关 键键 帧帧 之之 间，间， 此此 时时 移移 动动 对对 象象 位位 置置 将将 在在 舞舞 台台 上

17、上 出出 现现 一一 条条 路路 径径 线线 条，条， 线线 条条 上上 有有 很很 多多 节节 点，点， 分分 别别 对对 应应 一一 个个 帧。帧。 n 然然 后后 可可 利利 用用 “ 选选 择择 工工 具具” 或或 “ 部部 分分 选选 择择 工工 具具” 对对 路路 径径 线线 条条 进进 行行 调调 整，整， 从从 而而 使使 对对 象象 沿沿 着着 路路 径径 线线 条条 运运 动。动。 n 创创 建建 对对 象象 补补 间间 的的 方方 法：法： 在在 对对 象象 上上 单单 击击 鼠鼠 标标 右右 键键 选选 择择 “ 创创 建建 补补 间间 动动 画画” 命命 令。令。 n

18、 对对 于于 对对 象象 补补 间间 可可 以以 利利 用用 “ 动动 画画 编编 辑辑 器器” 对对 补补 间间 进进 行行 精精 确确 控控 制；制； 还还 可可 选选 用用 F l a s h 内内 置置 的的 “ 动动 画画 预预 设设” 效效 果果 为为 对对 象象 添添 加加 预预 设设 动动 画画 补补 间。间。 单单 击击 【 窗窗 口口】 | 【 动动 画画 编编 辑辑 器器】 、 【 动动 画画 预预 设设】 命命 令，令， 打打 开开 相相 应应 窗窗 口。口。 31 32 4） 3D补间动画补间动画 n Flash为对象元件在为对象元件在3D空间内的移动和旋转提供了空间

19、内的移动和旋转提供了 专门的工具，它们是专门的工具，它们是“3D平移工具平移工具”和和“3D旋转工旋转工 具具”，使用这两种工具可以获得逼真的，使用这两种工具可以获得逼真的3D透视效果。透视效果。 n 在创建在创建3D补间动画时，首先在第一关键帧右键单击补间动画时，首先在第一关键帧右键单击 选择选择“创建补间动画创建补间动画”命令为对象元件实例创建补命令为对象元件实例创建补 间动画，然后将播放头放置到补间最后帧的位置，间动画，然后将播放头放置到补间最后帧的位置， 使用使用“3D平移工具平移工具”和和“3D旋转工具旋转工具”对舞台上的对舞台上的 实例进行实例进行3D变换。此时，变换。此时，Fla

20、sh将自动创建两个关将自动创建两个关 键帧间的键帧间的3D补间动画。补间动画。 33 “3D平移工具平移工具”和和“3D旋转工具旋转工具” n3D平移工具：平移工具： 使用鼠标左右拖动使用鼠标左右拖动X轴或上下拖动轴或上下拖动Y轴的箭头，即轴的箭头，即 可将实例在水平或垂直方向移动；上下拖动黑色可将实例在水平或垂直方向移动；上下拖动黑色 圆点（圆点（Z轴），即可将实例在里外方向缩放。轴），即可将实例在里外方向缩放。 n3D旋转工具：旋转工具： 使用鼠标沿顺时针方向旋转使用鼠标沿顺时针方向旋转X轴或轴或Y轴，即可将实轴，即可将实 例沿着例沿着Y轴或轴或X轴旋转；顺时针方向旋转圆边线轴旋转；顺时针

21、方向旋转圆边线 （Z轴），即可将实例沿着圆心旋转。轴），即可将实例沿着圆心旋转。 34 3.3.3 骨骼动画骨骼动画 n 补间动画只能控制单一元件的运动，而骨骼动画可补间动画只能控制单一元件的运动，而骨骼动画可 将多个元件通过骨骼绑定起来以实现多元件的复杂将多个元件通过骨骼绑定起来以实现多元件的复杂 运动。运动。 n 在工具箱中选择在工具箱中选择“骨骼工具骨骼工具”，在一个对象中单击，在一个对象中单击， 向另一个对象拖动鼠标，释放鼠标后即可创建这两向另一个对象拖动鼠标，释放鼠标后即可创建这两 个对象间的链接，如此反复形成一条骨骼链。个对象间的链接，如此反复形成一条骨骼链。 n 在另一关键帧上，

22、用鼠标拖动骨骼链末端的元件，在另一关键帧上，用鼠标拖动骨骼链末端的元件， 整个链上的元件都会相应移动，从而两关键帧间形整个链上的元件都会相应移动，从而两关键帧间形 成骨骼动画补间。成骨骼动画补间。 视频欣赏 35 第第8周任务周任务 36 3.3.4元件动画的制作元件动画的制作 n在在Flash中，元件（中，元件（Symbol）是存放于库中）是存放于库中 的、可以重复使用的图形、动画片段（影片的、可以重复使用的图形、动画片段（影片 剪辑）或按钮等资源。剪辑）或按钮等资源。 n元件类型：元件类型： 图形元件图形元件 影片剪辑元件影片剪辑元件 按钮元件按钮元件 37 1.元件基本操作元件基本操作 n1）创建元件）创建元件 n2）修改元件）修改元件 n3）添加色彩效果）添加色彩效果 n4）添加滤镜效果）添加滤镜效果 38 2.元件应用案例元件应用案例 n1）制作动态按