1 / 19

第 3 章 动画制作

第 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 动画发展的历史

paxton
Download Presentation

第 3 章 动画制作

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第3章动画制作 2008年1月

  2. 教学目标 • 要求深刻理解与熟练掌握的重点内容有： • 1、二维动画的概念。 • 2、用ImageReady创建动画。 • 3、GIF动画制作过程。 • 4、GIF动画的播放与使用。 要求一般理解与掌握的内容有： • 5、用ImageReady优化Web图像。

  3. 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简介 授课内容

  4. 3-1-1 动画发展的历史 • 1831年，法国人Joseph Antoine Plateau把画好的图片按照顺序放在一部机器的圆盘上，圆盘可以在机器的带动下转动。从观察窗观看时，图片似乎动了起来，形成了活动画面，这就是原始动画的雏形。 • 1908年，法国人Emile Cohl首创用负片制作动画影片，所谓负片是指影像与实际色彩恰好相反的胶片，如同目前的普通胶卷底片。采用负片制作动画，从概念上解决了影片载体的问题，为今后动画片的发展奠定了基础。 • 从1928年开始，世人皆知的Walt Disney逐渐把动画影片推向了颠峰。被人们誉为商业动画之父。直到如今，他创办的迪斯尼公司还在为全世界的人们创造丰富多彩的动画片。迪斯尼公司是20世纪最伟大的动画公司，它创造的“米老鼠”、“唐老鸭”等动画形象早已广为人知。 • 如今，计算机的加入使动画的制作变得更加简单。某种意义上讲，动画片不仅在构思和表现力上超越了传统电影，其“演员”表演的深度也令人惊叹。

  5. 3-1-2 动画的定义 • 动画是动态生成系列相关画面以产生运动视觉的技术。 世界上著名的动画艺术家英国人约翰·汉斯曾指出：“运动是动画的本质”，也有人说：“动画是运动的艺术”，可见运动与动画是分不开的。 • 动画能创建运动图像主要是基于人的视觉原理，在一定时间内连续快速观看一系列相关连的静止画面时，会感觉成连续动作，每个单幅画面被称为帧。

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

  7. 3.1.4 动画的制作过程 • 传统动画的制作过程 传统的动画制作 ，尤其是大型动画片的创作，是一项集体性劳动，创作人员的集体合作是影响动画创作效率的关键因素 • 二维动画制作 （1）关键帧的产 （2）中间画面的生成 （3）分层制作合成 （4）着色 （5）预演 （6）图库的使用 • 三维动画制作 （1）造型 （2）动画 （3）绘图

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

  9. 3-3 用ImageReady创建动画 • 在学习之前，先了解一下ImageReady制作动画的原理： • 传统动画片事实上是把一幅幅静态图片按一定的速度顺序播放，对于人眼来说，丝毫不会觉察画面有停顿，片中的卡通人物好像真的会动似的。古老的动画制作是靠人工一幅幅地给图片描绘、上色 • 现代动画中，把每一幅静态图片称为一帧，多个帧按一定次序播放就形成了动画。ImageReady就是利用这个原理做帧动画，而每一帧图片对应着图像中的一个图层或多个图层。

  10. 3-3-1 一个简单的例子 • 实例：利用多幅图像制作动画 • 【文件】→【输入】→【作为框架的文件夹】 • 在动画面板每一帧的下部单击“秒”字右边的小倒三角，选择希望每一帧显示的时间（如：0.2秒）。最后请单击播放按钮，观看动画效果

  11. 3-3-2 制作GIF动画 • 实例：一个跳动的小球 • 在ImageReady当中，每一帧对应着图像中 的一个图层或多个图层。

  12. 一个跳动的小球 • 【文件】→【新建】，400*400像素 • 新建图层：层1 ，建立60*60的圆形选区 ，填充黑色，得一实心的黑色小球。 • 【滤镜】→【渲染】→【镜头光晕】，给小球加一个发光点，制造立体金属球效果。 • 利用层1复制三个图层：层２、层３、层4 • 用移动工具，把各层的小球拖到合适位置

  13. 一个跳动的小球 • 单击动画面板上的三角按钮，选择【建立新帧】，建立四个新帧 • 选中第１帧，然后通过在层面板上点击，隐藏层２、层３、层4，显示层１、背景层。同理 制作其他帧 • 选择每一帧延时0.2秒 • 【文件】→【保存优化了的】，存成gif动画格式。

  14. 3-3-2 制作GIF动画 • ImageReady提供了一个帧与帧之间的渐变过渡功能，可以轻易在两个帧之间建立数个渐变帧，产生一种画面逐渐显现到逐渐消失的渐变效果。 • 实例：渐变动画

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

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

  17. 课后习题：拍打的篮球 • 篮球的制作(photoshop)： • 新建400*400文件，透明。 • 视图－显示－网格（５０，编辑－预设） • 新建两个图层（球层、线层），球层上画红球(200*200) • 线层上画十字黑线(3，选填充区域)，圆弧黑线可以通过描边实现 • 线层上建立球状选区，使用扭曲－球面化滤镜 • 图层样式－斜面与浮雕（枕头浮雕）设置黑线凹陷

  18. 拍打的篮球 • 线层使用滤镜－渲染－镜头光晕，球层上使用渲染－光照效果滤镜 • 切换到imageready • 改变篮球图像大小为100*100，画布大小为100*300 • 复制３或５个图层，安排好篮球的位置和形状 • 建立四或七个帧 • 存储优化的压缩图像（．GIF）放到网页上浏览

  19. 参考答案： • 一、填空题 • 1. 运动视觉 • 2. 横向像素数纵向像素数千字节 • 3. 二维动画辅助动画师制作传统动画三维动画 • 4. 帧帧帧 • 5. 单击按钮后链接到的地址最顶端 • 二、选择题 • 1-5 BADAD

More Related