第 3 章 动画制作

2008 年 1 月

上一页

下一页

回目录

教学目标

要求深刻理解与熟练掌握的重点内容有： 1 、二维动画的概念。 2 、用 ImageReady 创建动画。 3 、 GIF 动画制作过程。 4 、 GIF 动画的播放与使用。

要求一般理解与掌握的内容有： 5 、用 ImageReady 优化 Web 图像。

上一页

下一页

回目录

授课内容

3-3 用 ImageReady 创建动画 3-3-1 一个简单的例子3-3-2 制作 GIF 动画3-3-3 制作动态按钮

3-4 用 ImageReady 优 化Web 图像

3-1 动画基础知识 3-1-1 动画发展的历史3-1-2 动画的定义3-1-3 动画的常用术语3-1-4 动画的制作过程

3-2 ImageReady 简介

上一页

下一页

回目录

3-1-1 动画发展的历史

1831 年，法国人 Joseph Antoine Plateau 把画好的图片按照顺序放在一部机器的圆盘上，圆盘可以在机器的带动下转动。从观察窗观看时，图片似乎动了起来，形成了活动画面，这就是原始动画的雏形。

1908 年，法国人 Emile Cohl 首创用负片制作动画影片，所谓负片是指影像与实际色彩恰好相反的胶片，如同目前的普通胶卷底片。采用负片制作动画，从概念上解决了影片载体的问题，为今后动画片的发展奠定了基础。

从 1928 年开始，世人皆知的 Walt Disney 逐渐把动画影片推向了颠峰。被人们誉为商业动画之父。直到如今，他创办的迪斯尼公司还在为全世界的人们创造丰富多彩的动画片。迪斯尼公司是 20 世纪最伟大的动画公司，它创造的“米老鼠”、“唐老鸭”等动画形象早已广为人知。

如今，计算机的加入使动画的制作变得更加简单。某种意义上讲，动画片不仅在构思和表现力上超越了传统电影，其“演员”表演的深度也令人惊叹。

上一页

下一页

回目录

3-1-2 动画的定义

动画是动态生成系列相关画面以产生运动视觉的技术。

世界上著名的动画艺术家英国人约翰 · 汉斯曾指出：“运动是动画的本质”，也有人说：“动画是运动的艺术”，可见运动与动画是分不开的。

动画能创建运动图像主要是基于人的视觉原理，在一定时间内连续快速观看一系列相关连的静止画面时，会感觉成连续动作，每个单幅画面被称为帧。

上一页

下一页

回目录

3.1.3 动画的常用术语 帧每秒 帧每秒就是一秒中处理帧的数目 帧尺寸 帧尺寸表示横向像素数与纵向像素数的乘积，例如电视画面的帧是 640×480 像素

动画尺寸 通常是指按千字节来计算动画文件在硬盘上存储所需要占用的空间 数据速率 是对播放一幅动画时所用的数据量的描述，通常用“千字每秒”表示 连接速度 是指在单位时间内通过网络传输到用户计算机上的数据总量，通常用千字每秒来表示 色度 定义了一个图或动画中可以使用的颜色数目，是以 2 的阶乘来计算的 调色板 实际上像一个给定的蜡笔盒，可给图片提供许多不同的颜色 抖动 是把调色板中不同颜色的像素通过交叠来实现的

上一页

下一页

回目录

3.1.4 动画的制作过程

传统动画的制作过程 传统的动画制作 ，尤其是大型动画片的创作，是一项集体性劳动，

创作人员的集体合作是影响动画创作效率的关键因素 二维动画制作 （ 1）关键帧的产 （ 2）中间画面的生成 （ 3）分层制作合成 （ 4）着色 （ 5）预演 （ 6）图库的使用三维动画制作 （ 1）造型 （ 2）动画 （ 3）绘图

上一页

下一页

回目录

3-2 ImageReady 简介

当我们在 Photoshop 中创建、美化图像后，可以很方便地通过跳转按钮 ，迅速转到 ImageReady 中创建动画和翻转效果。它可以轻松地完成图像优化、网页动画、图像超级连接等特殊网页制作。

上一页

下一页

回目录

3-3 用 ImageReady 创建动画

在学习之前，先了解一下 ImageReady 制作动画的原理：

传统动画片事实上是把一幅幅静态图片按一定的速度顺序播放，对于人眼来说，丝毫不会觉察画面有停顿，片中的卡通人物好像真的会动似的。古老的动画制作是靠人工一幅幅地给图片描绘、上色

现代动画中，把每一幅静态图片称为一帧，多个帧按一定次序播放就形成了动画。 ImageReady 就是利用这个原理做帧动画，而每一帧图片对应着图像中的一个图层或多个图层。

上一页

下一页

回目录

3-3-1 一个简单的例子

实例：利用多幅图像制作动画 【文件】→【输入】→【作为框架的文件夹】 在动画面板每一帧的下部单击“秒”字右边的小倒

三角，选择希望每一帧显示的时间（如： 0.2 秒）。最后请单击播放按钮，观看动画效果

上一页

下一页

回目录

3-3-2 制作 GIF 动画

实例：一个跳动的小球 – 在 ImageReady 当中，每一帧对应着图像中的一个图层或多个图层。

上一页

下一页

回目录

一个跳动的小球

【文件】→【新建】， 400*400 像素新建图层：层 1 ，建立 60*60 的圆形选区，填充黑色，得一实心的黑色小球。

→ →【滤镜】 【渲染】 【镜头光晕】，给小球加一个发光点，制造立体金属球效果。

利用层 1复制三个图层：层２、层３、层 4 用移动工具，把各层的小球拖到合适位置

上一页

下一页

回目录

一个跳动的小球

单击动画面板上的三角按钮，选择【建立新帧】，建立四个新帧

选中第１帧，然后通过在层面板上点击，隐藏层２、层３、层 4 ，显示层１、背景层。同理 制作其他帧

选择每一帧延时 0.2秒【文件】→【保存优化了的】，存成 gif动画格式。

上一页

下一页

回目录

3-3-2 制作 GIF 动画

ImageReady 提供了一个帧与帧之间的渐变过渡功能，可以轻易在两个帧之间建立数个渐变帧，产生一种画面逐渐显现到逐渐消失的渐变效果。

实例：渐变动画

上一页

下一页

回目录

3-3-3 动态按钮的制作

本例制作了这样一个按钮：正常状态为紫色按钮，鼠标移动到上面变成红色按钮，单击时按钮稍微向右移动并连接到某网站主页。其中，鼠标的各个动作是在 Web Content 面板中实现的，而超级链接是使用切片工具和片面板制作完成的。

上一页

下一页

回目录

3-4 用 ImageReady 优化 Web 图像

利用网络传送图像时，要在保证一定质量、显示效果的同时尽可能减小图像文件的大小。使用ImageReady 优化 Web 图像是一个不错的选择。

上一页

下一页

回目录

课后习题：拍打的篮球

篮球的制作 (photoshop) ：– 新建 400*400文件，透明。– 视图－显示－网格（５０，编辑－预设）– 新建两个图层（球层、线层），球层上画红球 (200*20

0)– 线层上画十字黑线 (3 ，选填充区域 ) ，圆弧黑线可以通过描边实现

– 线层上建立球状选区，使用扭曲－球面化滤镜– 图层样式－斜面与浮雕（枕头浮雕）设置黑线凹陷

上一页

下一页

回目录

拍打的篮球

– 线层使用滤镜－渲染－镜头光晕，球层上使用渲染－光照效果滤镜

– 切换到 imageready– 改变篮球图像大小为 100*100 ，画布大小为 100*300– 复制３或５个图层，安排好篮球的位置和形状– 建立四或七个帧– 存储优化的压缩图像（． GIF）放到网页上浏览

上一页

下一页

回目录

参考答案：

一、填空题 1. 运动视觉 2. 横向像素数 纵向像素数 千字节 3. 二维动画 辅助动画师制作传统动画 三维动

画 4. 帧 帧 帧 5. 单击按钮后链接到的地址 最顶端 二、选择题 1-5 BADAD