3．3 动 画 处 理 技 术 本节要点 计算机动画的基本工作原理 计算机动画的分类 使用Flash二维动画工具

Presentation on theme: "3．3 动 画 处 理 技 术 本节要点 计算机动画的基本工作原理 计算机动画的分类 使用Flash二维动画工具"— Presentation transcript:

1 3．3 动 画 处 理 技 术 本节要点 计算机动画的基本工作原理 计算机动画的分类 使用Flash二维动画工具
3．3 动 画 处 理 技 术 本节要点 计算机动画的基本工作原理 计算机动画的分类 使用Flash二维动画工具 制作简单的逐帧动画、变形动画、运动动画 制作多图层动画和引导路径动画 制作遮罩动画和为动画配音及动作代码

2 3.3.1 动画产生原理 由于人的视觉暂留效应，当若干幅具有一定差异的图片连续不断地在眼前显示时，便可感觉到动画的效果。 例如：
动画产生原理 由于人的视觉暂留效应，当若干幅具有一定差异的图片连续不断地在眼前显示时，便可感觉到动画的效果。 例如： 要表现花朵开放的画面过程，当这多个画面在不到1秒钟的短暂时间内依次连续地出现在眼前时，便可看到花朵开放的动画情景。 让我们看看吧……

3 花朵开放的6个画面

4 3.3.2 计算机动画的分类 从动画的视觉效果来看，计算机动画可分为： 具有平面动态图形效果的二维动画 具有立体效果的三维动画
计算机动画的分类 从动画的视觉效果来看，计算机动画可分为： 具有平面动态图形效果的二维动画 具有立体效果的三维动画 用于虚拟现实的真实模拟动画和通过电影电视等活动图像采集加工得到的视频

5 （1）二维动画 在二维动画制作中，最常用的是所谓基于角色的动画。动画被认为是由各个可运动的角色构成的，角色可以是任何能在计算机屏幕上显示的对象，如线条、矩形、文字、图像，甚至是另一段动画。 角色的变化如果没有规律可寻，就只能一帧帧地制作，这便是具有传统动画特色的逐帧动画；如果角色的变化有一定的规律，则可以制作好角色在变化前和变化后的两幅画面，由计算机软件来产生中间的变化过程，即得到渐变动画，这种动画在制作时便可轻松许多。 计算机二维动画的制作是对传统手工动画的一个改进。在传统卡通动画中，每一幅图像都要事先画出来，工作量很大。用了计算机以后，只要制作关键帧图像，而关键帧之间的图像可通过插值方法由计算机自动生成。这时只要给出关键帧之间的插值规则，计算机就能进行中间画面的计算。 在二维动画制作中，最常用的是所谓基于角色的动画。动画被认为是由各个可运动的角色构成的，角色可以是任何能在计算机屏幕上显示的对象，如线条、矩形、文字、图像，甚至是另一段动画。

6 （2）三维动画 如果说二维动画对应于平面动画的话，那么三维动画则对应于空间立体动画。计算机首先制作三维数据的人物、道具和景物，建立角色；接着，好像在计算机内部“架上”虚拟的摄影机，调整好镜头，并让这些角色和实物在三维空间里动起来，靠近或远离，移动或旋转，变形或变色；同时“打上”灯光，“贴上”材料。一个完全由计算机制作的一系列栩栩如生的三维画面就形成了。 制作三维动画的最基本的原理

7 （3）虚拟现实 虚拟现实技术(virtualreality，缩写为VR)又称为灵境技术，是一种用计算机形成的、综合的、能使人接受到多种感觉环境的技术，是一种高度逼真地模拟人在现实世界中的视、听、动等行为的人机界面技术。所谓人机界面是指人和计算机之间的交互接口，即人是通过人机界面来使用计算机的，如计算机键盘就是一种人机界面工具。在VR中，要研究使用新的人机界面工具来操作计算机，以便高度地模拟人的各种行为。

8 介绍比较常见的动画格式GIF和SWF （1）GIF格式
GIF格式动画的产生原理完全基于传统的动画设计，即动画效果是由一系列具有细微差异的图片连续播放产生的，但GIF动画的实现则由计算机完成。 通常GIF动画的制作方法是：先使用图像处理软件制作出不同的图像，然后使用GIF动画制作软件进行动画处理，设置每一幅画面的显示时间，画面的显示次序，显示方式等。 专门用于GIF动画制作的软件有很多，如：GIFAnimation，而许多其他的动画制作软件，如：Cool3D、FlashMX等，也可以把制作好的动画导出为GIF动画。

9 （2）SWF格式 SWF是Flash动画的文件格式，这种动画格式的特点是: 占用比较小的存储空间， 而且动画可以具有交互性。
由于这种格式的动画可以与网页格式的HTML文件充分结合，并能添加MP3音乐，因此被广泛地应用于互联网上。

10 3.3.4 认识Flash动画制作工具 Macromedia Flash Mx是为网络站点设计平面图形和动画的创作工具。
它主要包含的是矢量图形，但也可以导入位图图像和声音。 Flash动画作品允许访问者输入内容以产生交互，也可以创建非线性电影和其他网络应用程序产生交互。 Flash动画具有文件体积小、流式传输、简单易学和具有强大的交互能力等特点。

11 启动 Flash MX 2004 后的基本工作界面 时间轴 菜单栏 面板 工具箱 图层区 元件库 场景区 属性面板

12 面板介绍 ① 时间轴面板的组成部分 当前指针 图层的隐藏、锁定和加框按钮 每小方格代表一帧 图层控制区 帧控制区 不同色彩代表不同类型的帧
fps每秒播放的帧数 默认值为12 时间轴菜单开关

13 ② 舞台的组成部分及属性面板 Falsh文档的名称 场景切换按钮 编辑元件切换按钮 舞台显示比例调整列表 舞台 属性面板 库中对象的预览

14 ③ 各种设计面板

15 3.3.5 用Flash制作简单的动画 1．逐帧动画的制作
同传统的动画制作方法一样，如果在连续的一组画面中每一幅的内容都不相同，并且其变化也没有规律可寻，就需要在Flash中逐个地把画面上的内容安排好，这样播放时便可以看到动画的效果，Flash逐帧动画就是这样建立的。 我们可以通过下面的例子进行体会。

16 例1：利用库中的图片素材，制作逐帧显示圣诞老人的动画。
①启动flash，选择菜单“文件/导入/导入到库…”，可见圣诞老人图片在库中显示。 ②在时间轴第一帧的位置上右击鼠标，在快捷菜单中选择“插入空白关键帧”命令，然后从库中将第一个图片拖曳到舞台中央。 ③依次重复在第二帧插入空白关键帧，并将第二个图片拖曳到舞台中央，直到完成插入7个关键帧。 ④最后选择“文件/导出/导出影片…“，即可保存.SWF的动画文件。（利用“文件／另存为’’命令，将制作好的动画保存为．fla文件）。

17 2．过渡变形补间动画 Flash既可以制作传统的逐帧动画，也可以产生过渡动画。
过渡动画是通过建立动画过程的首尾两个关键帧的内容，中间的过渡帧则由计算机通过首尾帧的特性以及动画属性要求来计算得到并补间插入。 根据运动对象性质的不同，Flash中的过渡补间动画又可分为变形动画和运动动画。 变形动画是针对矢量图形对象的动画 运动动画则只有非矢量图形才能完成

18 例2：制作一个2秒钟（24帧）的动画，画面中一个蓝色的正圆逐渐变成一个红色的心形。见下效果图
①首先用工具栏上的“椭圆工具”，按住 Shift 键，在画面中央绘制一个正圆。 ②在时间轴的第24帧处右击，选择“插入关键帧’’命令，第24帧就出现了与第一帧相同的内容。 ③ 选定第24帧中的圆，将其更改为红色，然后单击画面以外的空白处取消选定。 ④用“选择工具”并按住 Ctrl 键拖曳 正圆的上端和下端，使其成为心形的样子。 ⑤选中第一帧，在属性面板中选择“补间”为“形状”，看到时间轴上从第一帧到第24帧上出现浅绿色背景的箭头。 ⑥将动画文件保存为 “结果．fla”，并导出保存为“结果.swf”文件，然后使用“控制/测试影片”命令，观察动画放映效果。 结果

19 技能与技巧 在Flash中，变形动画只能针对矢量图形进行，也就是说，进行变形动画的首、尾关键帧上的 矢量图形的特征是：
在图形对象被选定时，对象上面会出现白色均匀的小点。利用工具箱中的直线、椭圆、矩形、刷子、铅笔等工具绘制的图形，都是矢量图形。

20 3．动作补间动画的制作 动作补间动画只能针对非矢量对象，这些对象可以是文字对象、外界导入的图像、组合对象，或者元件的实例。
例3：制作一个4秒钟的动画，小球能自由落地，弹起再落地，落地后停止0．5秒的动画。 结果

21 技能与技巧 在Flash中，运动动画只能针对 非矢量形进行，也就是说，进行运动动画的首、尾关键帧上的图形都不能是矢量图形，它们可以是组合图形、文字对象、元件的实例、被转换为“元件”的外界导入图片等。 非矢量图形的特征是： 在图形对象被选定时，对象四周会出现蓝色或灰色的外框。利用工具箱中的文字工具建立的文字对象就不是矢量图形，将矢量图形组合起来后，可得到组合图形，将库中的元件拖曳到舞台中，可得到该元件的实例。

22 4．元件及多图层动画 在Flash中，可以将常用的对象制作成元件放在库中，在制作动画时可以方便地将元件取出来使用。这样做成的元件可以反复使用，提高动画的制作效率，动画文件存储时，反复出现的元件本身只需要保存一遍，节省动画文件的存储空间。 如果库中已经有了元件，可以通过将需要的元件直接拖曳到舞台上的方法来得到需要制作动画的动画。

23 例4：制作小球滚动，并且带着阴影一起运动的 动画。
例4：制作小球滚动，并且带着阴影一起运动的 动画。 ①打开“小球．fla”文件，在第1帧中将库中的小球拖曳到舞台左边，在第30帧上添加关键帧，并按Shift键将小球从左边拖曳到舞台右边。 ②选定第1帧，设置属性面板上的“补间”为“动作”，并设置顺时针旋转3次。 ③在时间轴面板上单击左下角的“插入图层”按钮，在当前图层的上面添加了一个新图层。 插入图层 插入引导层 删除图层

24 ④在第1帧中，将库中的阴影元件拖曳到舞台上小球的下面。
将图层2拖曳到图层1的下方，这样阴影就会显示在小球的下面了，并在图层2的第30帧上插入关键帧，将阴影拖曳到小球的下方。  对图层2的第1帧设置动画属性的“补间”为“动作”，完成动画设置。测试后，将动画文件保存为“小球．fla”，并导出影片为“小球滚动．SWf”。 结果

25 Flash中的元件也称为符号，其创建可以通过将制作好的对象转换得到，也可以利用“插入/新建元件”菜单命令进行创建。建立的元件都放置在库中，可以再次进行修改和编辑。
制作动画时，如果将元件拖曳到舞台上，该对象便被称为元件的实例。当库中的元件被编辑修改以后，该元件对应的所有实例都会发生变化。

26 6．为动画配音 Flash MX 2004具备了更强大的声音处理能力，它支持导入各种类型的声音文件到Flash中，用Flash 制作的动画作品可以方便地加入配音，可以导入包括Wav、Mp3格式的多种声音文件。 其中最常用的有Wav 和 Mp3两种声音格式。 　　让我们通过用声音丰富小球跳动动画效果的制作过程，来让你掌握在Flash中处理声音的方法和技巧。

27 例6：为“小球.fla”的动画配上“小球音乐.wav” 的音乐

28 结果 ③选定“音乐’’图层后，将声音对象从库中拖曳到舞台上后，可以看到时间轴的“音乐”图层上出现了波形。
(引用到时间轴上的声音，可在声音【属性】面板中对它进行恰当的属性设置，才能更好地发挥声音的效果。) ④测试后，将动画文件保存为“小球.fla”，并导出为 “小球.swf”。 结果

29 7．引导路径 引导路径动画也是属于运动补间动画的一种。
要实现动画对象按照某种特定的运动轨迹来进行位移的动画效果，则要用引导路径动画的方式来制作。它的作用对象必须是元件。 引导路径是在引导路径图层中绘制的，此路径只有在设计制作时才可以看到，实际动画播放时是不可见的。 “引导层”是一个特殊的图层，在这个图层中有一条辅助线作为运动路径，可以设置让某个对象沿着这条路径运动。 引导层是用来指示元件运行路径的，所以“引导层”中的内容可以是用钢笔、铅笔、线条、椭圆工具或画笔工具等绘制出的线段。 而“被引导层”中的对象是跟着引导线走的。

30 例7 .为画面中的汽车绘制行驶路径 添加引导层 用同样方法将汽车吸在引导线的末段 选中汽车并将其吸在引导线的首段 用笔绘制出线段

31 启动 行驶中 结果 停车

32 8. 遮罩 1、什么是遮罩？ 遮照（Mask），也被称为蒙版，是Flash中的一个很重要的动画类型，很多效果丰富的动画都是通过遮罩动画来完成的。它和补间动画、引导图层等技巧一样也是Flash的重要功能，灵活地应用它，可以使作品更丰富和精彩。 2、遮罩有什么作用？ 在Flash动画中，“遮罩”主要有两种用途，一个作用是用在整个场景或一个特定区域，使场景外的对象或特定区域外的对象不可见，另一个作用是用来遮罩住某一元件的一部分，从而实现一些特殊的效果，比如常见的手电筒，探照灯等，就很形象的说明遮罩的效果。

33 步骤1: 确定遮罩层 步骤2: 选中遮罩层 右击作为遮罩的图层 再选中该遮罩层

34 例8：为“Scp.fla”文件加上探照灯的 遮罩效果
无效果 加效果后 结果

35 技能与技巧 遮罩动画遮罩动画是通过两个图层来实现，一个是遮罩层，另一个是被遮罩层。
遮罩层就好像是一个蒙板，在这个蒙板的中央有一个孔，可以通过这个孔看到下面的图像，这就是遮罩层。与遮罩层连接的正常层的内容只有通过遮罩层中的实心对象的区域显示出来，这些实心对象可以是一个几何图形也可以是文本对象。通过将这些对象作为动画来创建移动的遮罩层。

36 DIY 作品欣赏 交通职院.swf SCP1.swf SCP2.swf 世界杯.swf 小球跳跃.swf 老鼠钻洞. swf