二维动画的原理和类型 二维动画的设计制作方法 GIF动画和Flash动画的特点及原理 GIF动画和Flash动画的应用

Presentation on theme: "二维动画的原理和类型 二维动画的设计制作方法 GIF动画和Flash动画的特点及原理 GIF动画和Flash动画的应用"— Presentation transcript:

1 二维动画的原理和类型 二维动画的设计制作方法 GIF动画和Flash动画的特点及原理 GIF动画和Flash动画的应用 GIF Animator 5的操作和应用实例 Flash MX的操作和应用实例

2 计算机动画以很强的表现力，直观形象的向人们展示着各种运动现象和动画艺术作品。它以强有力的视觉冲击力和风趣幽默的艺术特点，已成为多媒体素材中最具吸引力的信息媒体。
在影视作品、科学研究、模拟演示、课堂教学、仿真实验、建筑造型、多媒体应用程序、教学课件等方面，都呈现出了它具大的作用。

3 7.1 二维动画基础 二维动画又叫作“平面动画”，它是沿用传统动画的概念而称呼的。它们所具有特点就是把一些原本没有生命活力的静态对象，通过拍摄，制作成了在视觉中具有生命活力、可以活动的动态对象。并且这些动态的影像，可以是现实的，也可以是虚幻的。它是影视艺术中深受欢迎的一种作品形式。

4 7.1.1 二维动画原理 “动画”，顾名思义，就是“动着的图画”。它是由一组连续的画面而组成的，每一张画面与它前后的画面都有一些不同的差别，当把这些画面连续播放时，在人的视觉中就可以形成连续的动画，产生动态效果。 产生这种动态效果的原理，是因为人类的眼睛具有一种视觉滞留效应。即人类眼睛在看物体的时候，物体的影像在人的大脑神经中会停留一定的时间，当看到的物体在人眼的视觉中已经消失时，大脑中还会残留有该物体的影像。

5 帧和帧速率 帧（Key Frame）：指在一段活动影像中，每幅的静止画面，又称为“帧画面”。 帧速率 ：指每秒钟播放帧画面的数值。
电影为24帧/秒 PAL制式的电视为25帧/秒 NTSC制式的电视为30帧 Flash动画为12帧/秒

6 动画和视频影像之间的差别 动画中的帧画面是由人工绘制或由计算机软件绘制而成的，画面中的形象都是由点、线、面构成的。动画具有颜色单调、色彩不丰富、形象不真实的特点。 视频影像由于是用摄录设备对真实景物拍摄而形成的，它的帧画面不是由人工而绘制形成的，每个帧画面可以说就是一张相片，每幅画面都是对影像的真实记录，它具有颜色种类多，色彩层次丰富，形象真实自然等特点。

7 计算机二维动画的特点 二维动画属于计算机辅助动画，主要是借助计算机来完成传统手工绘制动画的工作。
二维动画的制作，具有相当高的准确性和一致性，在编辑修改方面具有一定的方便性和可靠性。 可以充分利用拷贝、粘贴、放大、缩小、翻转、旋转、变形等操作降低工作的重复性和劳动强度，有效的提高制作效率和缩短制作周期。

8 7.1.2二维动画的设计制作方法 形象设计 对象 动画设计 动作 绘制图像 图片 动画制作 动画

9 7.1.2.1 动画的设计 确定一个对象的基本动态形式。 将动态过程分解成即有连续性又有差别性的基本单元。
设计绘制连续的图像，画面数量可多可少，但应多于两幅画面。 毫无规律和杂乱无章的画面对动画的制作无实际意义。

10 1、设计原则 动画必须是由多个画面而组成的，并且画面的内容必须是连续有规律性的。
画面中对象的动作在相邻两幅画面的变化中只能有微小的差别，后一幅画面往往是前一幅画面的继续。 可以在严格遵循运动规律的前提下，进行适当的夸张和突出。 动画的节奏要以符合自然运动规律为标准。

11 2、二维动画的表现形式 关键帧动画 路径动画 变形动画

12 ①关键帧动画 主要是通过对关键帧（Key Frame）图画来完成整个动画的设计制作过程。
先将图画中对象发生转折变化的画面进行设计和制作，然后再由计算机对关键帧中间的画面进行插值补充，就可以形成动画效果。它可以对物体的位置、方向、颜色等运动参数进行组合插值，产生中间的帧画面。

13 关键帧动画原理

14 ②路径动画 主要是通过路径（线路）的设置来完成动画的设计制作过程。 先设计制作好一个物体对象 。
再设置固定一个运动路径 ，路径是直线，也可以是曲线或折线。 将对象设置到沿路径的线路进行运动 。

15 路径动画原理

16 ③变形动画 先设置两个内容截然不同的关键帧。 然后再两个关键帧之间设定一定数量的过渡帧。
最后通过计算机软件的功能，在过渡帧中插值形成连续过渡的图画，形成渐变过渡变化的效果。

17 变形动画原理 关键帧 过渡帧

18 二维动画的制作 设置编辑关键帧 中间过渡帧画面的生成 分层制作整体合成 交互方式的设置 测试和预演

19 7.1.3二维动画软件及文件格式 不同的动画制作软件可以制作不同形式和不同文件格式的二维动画。
常用的二维动画软件有Animator Por、Animation Studio、GIF Animator、 ImageReady、 Director、 Flash等。 在Web网页面的制作过程中，应用最多最广泛的动画制作软件有GIF Animator和 Flash。

20 1、常用二维动画制作软件 常用的二维动画制作软件，主要有： Ulead GIF Animator Maroomedia Flash MX这两种软件。

21 ① Ulead GIF Animator 是Ulead公司推出的一个操作简单、实用方便、制作灵活、功能强大的GIF动画软件。它也是网页设计制作中一种有效的辅助工具。 Ulead GIF Animator 5.0的功能很强大，可以将图像、动画、视频文件进行相互的转换，可以用作Photoshop的插件使用。 不能添加声音、无交互性能。

22 ②Flash MX 是Maroomedia公司的产品，它是基于矢量图形的系统。
用少量的矢量数据就可以描述一个复杂的对象，生成的文件数据量很小，非常适合于在网络中使用。 它支持声音的导入和交互链接的功能，是一种流式动画文件 。

23 2、常用二维动画的文件格式 二维动画的文件格式很多，但多应用于网页制作中装饰和美化页面，因而把这些动画又称为网页动画 。
网页动画应具有如下特点： 具有文件数据量小，便于下载和传输； 具有表现力强、易吸引观看者的注意力； 具有良好的观赏视觉效果； 具有一定的交互控制能力；

24 ① GIF动画 是图像文件中一种特殊的格式，它是网页上最常见的动画文件格式，它可以存储静态的图画，又可以存储动态的动画。
它的动画实际就是由多幅帧画面而组成的。 支持256色和更低的色彩模式，支持透明色，可以制作具有透明背景的动画文件，文件的数据量较小，并且可以对文件进行优化处理。没有声音效果，只能循环播放，并且不具有交互能力。

25 Microsoft Gif Animator Animagic GIF Ulead Gif Animator Image Ready

26 ② Flash动画 是网络动画中的主力军，也是二维平面动画的主要形式。 是以矢量图为基础的一种动画文件。具有文件数据量极小，放大不易变形。
可导入声音文件，具有交互控制能力和多种动画形式的特点。 文件的格式为swf 、它也可以打包成能脱离制作环境自动运行的exe文件。

27 制作Flash动画的软件 它的制作软件主要是Macromedia公司的Flash MX。 也可以通过其它动画软件转换生成。

28 3、二维动画的应用 多媒体应用程序 多媒体影视广告制作 课堂教学课件 网络教学课件 网页制作 网络广告动画 网络游戏

29 7.2 Ulead GIF Animator 5.0功能简介
GIF Animator是Ulead公司最早在1992年发布的一个GIF动画的制作工具,现在的版本是GIF Animator 5.0。它具有操作简单、使用方便、效果明显的特点。可以将图像、动画、数字视频进行相互的转换，可以在GIF动画中增加特殊效果，可以制作各种运动方式的动态标题文字，制作能独立运行的电子贺卡文件。

30 7.2.1 Ulead GIF Animator 5的界面简介

31 7.2.2 Ulead GIF Animator 5应用实例
图像 主要应用 视频 动画

32 使用图像帧制作GIF动画 利用素材文件夹中的“xy1.bmp”～“xy4.bmp”四幅图片，制作一个尺寸为98×83像素的GIF动画，并把它保存为xy.gif动画或xy.swf动画。 xy1 xy2 xy3 xy4 xy.gif

33 7.2.2.2 将GIF动画拆分成图像帧 将素材文件夹中的“XL.GIF”动画，拆分成单张的图像帧，并将它们保存为XL的jpg图像文件。
••••••••••••••••••••• xl001 xl002 xl003 xl004 xl005 xl025

34 7.3 Flash动画基础知识 Flash是美国Macromedia公司推出的二维动画软件，由于其简便易用,功能强大,因此在网页制作和多媒体制作领域得到了广泛的应用。是二维动画中最具有影响力的一种动画形式，Flash动画也已成多媒体技术中最有实用价值的一种动画媒体。

35 7.3.1 Flash MX软件知识 Flash MX中文版是Macromedia公司最新的版本, Flash MX中文版新增了支持视频播放、声音导入、脚本查找与替换等功能，还可以支持更多的多媒体文件类型。它超强的网页动画制作能力和较小的文件数据量，以及对一些脚本语言（如JavaScript）和强大的XML语言的支持，使其更适合于网络传输。

36 7.3.1.1 Flash MX中文版的 硬件配置及运行环境
在 Microsoft Windows系统中 CPU>200MHz、内存>64MB、安装空间85MB、显示器支持1024×768、16位增强色、有CD-ROM。 在Macintosh系统中 Mac OS 9.1或 Mac OS X 10.1系统 、内存>64MB、安装空间85MB、显示器支持1024×768、16位增强色、有CD-ROM。

37 7.3.1.2 Flash MX中文版的主要功能 绘图功能 动画功能 支持动画和声音的功能 编程功能 有绘图工具箱、可导入图像素材。
关键帧动画、路径动画、变形动画和各种脚本动画。 支持动画和声音的功能 可以支持GIF动画、swf动画和声音文件编程功能。 编程功能 利用脚本语言进行各种交互动作的设置 。

38 Flash MX中文版的 窗口操作界面

39 时间轴面板

40 Flash MX的动画格式 fla格式：为Flash软件编辑动画的源程序，在编辑制作时会自动新建生成。可以在编辑过程中用于再次编辑。 swf格式：属于Flash的动画文件格式，可以直接应用于网页、多媒体应用程序和教学课件当中。但需要有相应的播放器才可以播放使用。 exe格式：是Flash发布为Windows系统下的一种可执行文件，双击时即可自动播放，可脱离制作环境，不需要任何播放器支持，多用于教学课件和电子贺卡的制作。

41 7．3 .2 Flash MX基本操作应用实例 在学习了解了Flash动画的基础知识和Flash MX软件的窗口界面的结构后，通过以下的操作应用实例示例来了解Flash MX软件的主要功能，熟悉掌握它的基本操作使用方法。

42 网页广告条的制作 设计制作一个尺寸为468×120像素，由Flash动画制作的网页广告条。要求有广告条有具体的文字内容，有广告单位的名称，所有文字必须有运动动画效果，最后停留到画面上静止不动。广告动画中要有与内容相关的图片或装饰图和线条，背景颜色要能达到突出主体的作用。

43 主要操作步骤 一、创建背景 二、制作动画文字 三、创建应用新元件 四、创建装饰动画 五、测试发布动画

44 课件结构制作应用实例 用Flash MX制作一个页面为400 px×300px，背景为浅绿色，文件名为“课件结构”的swf格式的动画文件。

45 该动画文件由5个页面构成，第一个页面为封面，封面上用四朵花渐变成“课件结构”字样的变形动画作为标题，在页面中有一个飞动的小天使在运动，单击页面上的“单击进入”的提示文字时，可以进入目录页面。

46 在目录页面上分别有“第一章”、“第二章”、“第三章”和“退出”的文字，每行文字前有一个相应的按钮，单击按钮可以跳转到相应页面上，单击“退出”按钮，即刻退出动画的播放。

47 在目录页下共有三个页面，单击页面上的“返回”按钮，可以返回到目录页面上。

48 主要操作步骤 一、创建封面制作变形动画 二、利用GIF动画文件制作路径动画 三、制作音效按钮 四、创建各场景 五、利用动作脚本建立交互链接
六、测试发布

49 花木图片展播制作应用实例 利用素材文件夹中提供的图片和声音文件，制作一个界面为500×400的动画演示程序，要求打开动画时出现标题，背景音乐同时响起。单击页面右下方的凸凹按钮，可以切换观看图片的内容。

50 主要操作步骤 一、制作“场景1 ”(标题封面) 二、制作“场景2” (主界面) 三、制作凸凹按钮 四、添加背景音乐 五、测试发布

51 小结 二维动画的原理和帧的概念 动画的分类和制作原理 二维动画软件和文件格式 GIF动画和swf动画文件格式的特性和应用
用Ulead GIF Animator 5制作GIF动画 用Flash MX进行基本的绘画编辑操作 和制作Flash动画