1 / 38

第 5 章

第 5 章. 5.3 制作网页动画 5.3.1 网页动画的特色 5.3.2 画面制作 5.3.3 生成过程 5.4 制作 Flash 动画 5.4.1 Flash 动画的特色 5.4.2 制作帧动画 5.4.3 制作自动动画 5.4.4 为动画添加声音. 5.1 动画基本概念 5.1.1 什么是动画 5.1.2 动画的由来 5.1.3 电脑动画 5.2 制作变形动画 5.2.1 变形动画的特色 5.2.2 准备首、尾画面 5.2.3 制作过程. 动画基本概念.

rayya
Download Presentation

第 5 章

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. 第 5 章 5.3 制作网页动画 5.3.1 网页动画的特色 5.3.2 画面制作 5.3.3 生成过程 5.4 制作Flash动画 5.4.1 Flash动画的特色 5.4.2 制作帧动画 5.4.3 制作自动动画 5.4.4 为动画添加声音 5.1 动画基本概念 5.1.1 什么是动画 5.1.2 动画的由来 5.1.3 电脑动画 5.2 制作变形动画 5.2.1 变形动画的特色 5.2.2 准备首、尾画面 5.2.3 制作过程

  2. 动画基本概念 动作的变化是动画的本质。 —— 英国动画大师 John Halas 被观察的物体消失后，影像仍在大脑中停留一段时间，约为1/24s 5.1.1 什么是动画 ● 动画的本质 Frame1 Frame2 Frame3 Frame4 Frame5 Frame6 Frame7 5.1 ●动画由多幅画面组成，当画面快速、连续地播放时，由于人类眼睛 存在 “视觉滞留效应” 而产生动感。 教学进程

  3. 动画的由来 ●视觉效果 观看动画的机器 5.1.2 1831年，法国人约瑟夫· 安东尼· 普拉特奥 (Joseph Antoine Plateau) 在一个可以转动 的圆盘上按照顺序画了一些图片。 教学进程

  4. 动画的历史 1906年 美国人J·斯泰瓦德（J·Steward）制作了一部“滑稽面孔的幽默 形象”的短片，非常接近现代动画概念。 1908年 法国人Emile Cohl首创负片制作动画影片，从概念上解决了 影片载体的问题，为今后动画片的发展奠定了基础。 1909年 美国人Winsor McCay画了一万张图片表现一段动画故事，这 是迄今为止世界上公认的第一部真正的动画短片。 1915年 美国人Eerl Hurd创造了在赛珞璐片上画动画片，再拍成胶片 电影的动画制作工艺，这种工艺一直沿用至今。 1928年 美国人华特·迪斯尼 (Walt Disney) 完善了动画体系和制作工艺， 被誉为商业动画影片之父，他把动画影片推向颠峰。 今 天 动画本质没有多大变化，而动画制作手段却发生了巨大变化。 如：电脑动画、电脑特技动画。 ● 教学进程

  5. 动画的构成规则 ● 动画的表现规则 1) 在严格遵循运动规律的前提下，可进行适度地夸张和发展。 2) 动画节奏应符合自然规律，可适度夸张。 3) 动画节奏由画面之间物体的位置差决定。 位置差越大，移动速度越快。 ● 1) 动画由多画面组成，并且画面必须连续。 2) 画面之间的内容必须存在差异。 3) 画面表现的动作必须连续，即后一幅画面是前一幅画面的继续。 教学进程

  6. 动画效果 Frame1 Frame2 Frame3 Frame4 Frame5 Frame6 Frame7 Frame8 ● 教学进程

  7. 动画的表现规则 ● 动画节奏符合自然规律，适度夸张。 教学进程

  8. 电脑动画 第一阶段 在屏幕上依次画出简单的线条、几何图形和颜色块， 电脑一丝不苟地把绘画过程记录下来。在需要时，由 电脑重复绘画过程，使人们看到活动的画面。 第二阶段 在屏幕上依次绘制画面，动画的主体从简单的线条、 几何图形过渡到复杂的图形、丰富多彩的颜色。动画 基本体现了传统动画的风格。 第三阶段 以先进的软件和硬件作为基础，更加逼真地模拟传统 动画，并进一步制作传统动画难以表现的题材，如三 维造型动画、变形动画、仿真动画、矢量动画等。 5.1.3 ●电脑动画的发展 教学进程

  9. 电脑动画的分类 ●平面动画 ●颜色动画 ●变形动画 ● ●帧动画 —— 模拟以帧为基本单位的传统动画，占动画产品的98%。 教学进程

  10. 电脑动画的分类 ● ●矢量动画 —— 经过电脑运算而确定的运行轨迹和形状的动画。 ●空间动画 —— 形成三维造型并进行空间运动的动画。 三维坐标变换 三维坐标变换 平面坐标变换 教学进程

  11. 制作动画的电脑 1 2 多媒体电脑 ●高速CPU ● 足够大的内存 ● 大量硬盘空间 ● 尽量选用屏幕尺寸大、色彩还 原好、点距小的彩色显示器 4 3 ● 特殊的设备，如 摄像机、视频卡等 ● 鼠标反应灵敏、移动连续、无跳跃、 手感舒适，可选配笔形鼠标 ● 教学进程

  12. 制作动画的软件 ● Animator Pro 平面动画制作软件。用于制作帧动画，绘制功能强。 Animation Studio 平面动画处理软件。用于加工帧动画，处理能力强。 Flash MX 网页动画软件。用于绘制帧、矢量动画，可添加声音。 WinImage: morph 变形动画软件。根据首、尾画面自动生成变形动画。 GIF Construction 网页动画软件。把动画和图片序列转换成网页动画。 3D Studio Max 三维动画制作软件。用于制作三维造型动画。 Cool 3D 三维文字动画软件。用于制作帧动画、视频。 Maya 三维动画制作软件。用于制作动画片、广告、电影等。 Premiere 动画视频处理软件。用于处理视频、广告、电影等。 教学进程

  13. 动画文件 ● ●FLC格式——Animator Pro生成的文件格式。 每帧256色，画面分辨率320×200~1600×1280 代码效率高、通用性好，大量用在多媒体产品中。 ●AVI格式——视频文件格式，动态图像和声音同步播放。 受视频标准制约，画面分辨率不高。 ●GIF格式——用于网页的帧动画文件格式。 (1) 单画面图像，256色，分辨率96dpi。 (2) 多画面图像(动画)，256色，96dpi。 ●SWF格式——Flash制作的动画文件格式。 主要在网络上演播，特点：数据量小，动画流畅。 教学进程

  14. 制作变形动画 尺寸和色彩模式尽可能一致的图像 正向变形 变形效果 逆向变形 5.2 5.2.1 变形动画的特色 ●根据给定的首画面和尾画面而自动形成变形过程。 变形参考点设置得越多， 画面数越多，变形效果越细腻。 首画面 ……变形过程…… ● 画面数量 ● 变形参考点 尾画面 教学进程

  15. 准备首、尾画面 5.2.2 ● 首、尾画面是两个图像文件， 　 用Photoshop CS软件进行 　 加工和处理。 ● 为了使变形动画的效果更为 　 理想，在进行图像处理时， 　 应遵守的处理规则： (1) 首、尾画面的尺寸应一致，画面尺寸应小于或等于标准显示尺寸， 　 如800×600或1024×768。 (2) 首、尾画面最好采用相同的文件格式。 (3) 首、尾画面的背景不宜采用色彩丰富的图案，应一律采用单色。 教学进程

  16. 准备首、尾画面 首、尾画面的 图片文件格式 　●BMP 　●GIF 　●JPG 　●PNG 　●ICO 　●TIF 　●TGA 　●PCX 　●WMF 5.2.2 ● 变形动画的制作由MagicMorph软件（以下简称“mmorph”）实现。 教学进程

  17. 制作过程 首画面 尾画面 启动显示 工具盒 编辑窗口 参数调整窗口 5.2.3 1) 在桌面上建立 mmorph.exe 文件的快捷方式。 2) 双击快捷图标， 启动软件。 教学进程

  18. 调入首、尾画面 ●规定变形参考点 1）单击“变形类型”选择框， 选择“变形合并”类型。 ● 1）选择“新建变形”按钮。 2）单击“选择来源图像”按钮， 选择文件，调入首画面。 3）单击“选择目标图像”按钮， 选择文件，调入尾画面。 4）单击“确定”按钮。 2）单击“依次添加控制点到 来源图像和目标图像”按钮。 教学进程

  19. 设置变形参考点 变形控制点 变形效果预览 ● 编辑变形控制点 1) 移动：单击鼠标右键， 在菜单中选择“移动点” 选项，拖曳变形控制点。 ● 1) 单击来源图像轮廓线上 的一点，然后再单击目 标图像轮廓线上某点。 2) 不断进行步骤1，直至 轮廓线上有足够的变形 控制点。 2) 删除：单击鼠标右键， 在菜单中选择“删除点” 选项，单击变形控制点。 3) 保存：单击“保存变形”按钮，指定路径， 命名文件，扩展名为“.Mor”。 提示：单击“打开变形”按钮，可调入。 教学进程

  20. 生成与保存 ● 1) 单击“生成电影”按钮。 2) 选择一种文件格式， 如“Gif动画”。 3) 输入变形过程所需的帧数。 4) 单击“输出文件名” 按钮。 指定路径，文件名， 单击“保存”按钮。 5) 指定每秒的帧数。 (通常采用默认值25) 6) 单击“生成”按钮。 7) 生成过程开始。 教学进程

  21. 制作网页动画 5.3.1 网页动画的特色 ●用在国际互联网络网页上的动画是网页动画 ● 网页动画的特点 ●数据量小。 ●表现力强 (活动画面更易引起人们的注意)。 ●视觉效果好 (如果设计得当，视觉效果好)。 ●模式多样化 (矢量动画，帧动画)。 ● 如何制作网页动画 ● 途径1——利用转换工具将多种动画转换成网页动画。 ● 途径2—— 使用网页动画制作软件直接生成网页动画。 5.3 教学进程

  22. 画面制作 ● Gifcon的作用 Gifcon动画工具 网页动画 GIF89a 图片序列 ● 启动与退出 (1) 双击Gifcon快捷图标。 动画预览 (2) 选择“File／New” 菜单，清除命令窗口。 (命令窗口) (3) 选择“File／Exit”菜单， 退出系统。 5.3.2 ●网页动画工具GIF Construction Set，简称GIFCON。 教学进程

  23. 生成过程 ●操作步骤 (1) 选择“File/New”菜单 清除命令窗口。 5.3.3 ● 插入图像文件与控制命令 Loop Control (2) 单击“Insert”按钮。 (3) 单击“Loop”按钮。 (4) 双击“Loop”命令行 循环次数设为“0”。 (5) 单击“Insert”按钮。 (6) 单击“Control”按钮。 (7) 双击“Control”命令行， 设置时间间隔，单击“OK”按钮。 教学进程

  24. 插入图像文件与控制命令 “Control”命 令行分别粘贴 到各图片之间 ● 最后加工 图片序列 (1) 单击“Control”命令行。 ● ●操作步骤 (续) (8) 单击“Insert”按钮。 (9) 单击“Image”按钮。 Loop Control (10) 选择路径、文件序列 单击“OK”按钮。 (11) 选择调色板及其他 单击“OK”按钮。 (2) 按〈Ctrl〉+〈C〉键复制。 (3) 按〈Ctrl〉+〈V〉键，把“Control”命令行分别粘贴到各图片之间。 (4) 双击“Control”命令行，并修改时间间隔，可控制动画的节奏。 (5) 单击“View”按钮预览，单击鼠标右键结束预览。 教学进程

  25. 保存动画 ● 退出 (1) 选择“File/Exit”菜单，显示提示信息。 (2) 单击 “OK”按钮。 ● (1) 选择“File/save as…”。 (2) 输入文件名。 (3) 单击“OK”按钮。 ●可使用ACDSee Pro和Internet Explorer观看动画效果。 ●制作网页动画过程中，产生一个THN格式的文件，可予以删除。 教学进程

  26. 制作Flash动画 5.4 5.4.1 Flash动画的特色 ●Flash可以制作帧动画和矢量动画。 ●Flash动画还可以实现交互作用，能够很方便地制作游戏一类的动画。 ●Flash动画专业网站: http://www.transience.com.au ●Flash动画的四种输出格式： (1) fla格式——可重复编辑的源程序格式，可以对动画绘制、层、库、 时间轴和舞台场景等进行重复编辑和加工。 (2) swf格式——打包后的网页动画格式，它是Flash成品动画文件。 　　　　　　　　　该格式动画主要供演播，不能进行修改和加工。 (3) avi格式——标准视频文件格式。 (4) gif格式——采用gif89a标准的网页动画格式。 教学进程

  27. 制作帧动画 菜单栏 工具栏 动画层控制 帧控制 动画编辑窗口 辅助工具 属性工具栏 (辅助工具) 5.4.2 (1) 双击图标，启动Flash。 (2) 选择“文件 / 新建”菜单 (此步不可省略，否则窗口尺寸有误)。 教学进程

  28. 动画的画法 ●填充颜色 ● 渐变 ● 渐变 ● 单色 ●直线化●平滑●墨水瓶 ● ●绘制轮廓线 (1) 选择铅笔工具。 (2) 选择铅笔颜色。 (3) 选择轮廓模式。 (4) 描绘轮廓。 (1) 选择颜料桶工具。 (2) 选择填充模式 (渐变、单色均可)。 (3) 选择封闭模式。 (4) 单击图形内部， 填充颜色。 教学进程

  29. 画图形 ●画方框 (1) 选择画方框工具。 ●画空心图形 在调色板中选择“没有”。 ● ● 画圆 (1) 选择画圆工具。 (2) 选择圆内单色或渐变色。 (3) 画圆 (鼠标—椭圆 /〈Shift〉+鼠标—正圆)。 (2) 选择单色或渐变色。 (3) 单击“圆角” 按钮，设置圆角。 (4) 画方框 (〈Shift〉+鼠标—正方)。 教学进程

  30. 处理图形 ● 移动图形 (1) 选择箭头工具。 ●[说明] 边框和填充颜色是不同的图形，若想整体移动， 须用鼠标左键划定编辑区域，然后整体移动。 ● ●擦除图形 (1) 选择橡皮工具。 (2) 选择擦除模式。 (3) 选择橡皮尺寸。 (4) 擦除图形。 (2) 移动图形。 教学进程

  31. 输入文字 (5) 单击“属性” 工具栏，设置字体、字号、颜色、对齐方式等 北京BEIJING ●单击文本，可再次修改文字。 ● (1) 选择文本工具。 (2) 鼠标左键划出文本框。 北京 BEIJING (3) 输入文本内容。 (4) 光标条覆盖文本。 (6) 鼠标对准文本输入框，移动文字。 (7) 单击非文本输入区结束。 教学进程

  32. 制作步骤 ●增加关键帧 选择“插入/关键帧”选项，增加新的帧 (新的帧自动复制前一帧的内容)。 ● 显示网格，方便编辑 鼠标右键单击动画编辑窗口 选择“网格/显示网格” ● 在新的帧中绘制图形 ●增加图层 (用于两个以上的动画合成) ● 为方便编辑，打开所有工具 (1) 选择“窗口/工具栏”菜单 (2) 分别选中： √ 主要栏 √ 状态栏 √ 控制栏 (1) 选择“插入/图层”选项，增加新图层 (2) 在新图层中绘制图形，增加关键帧 ●演播动画效果 停 首 倒 播 进 尾 (1) 选择“窗口/工具栏/控制栏”，打开控制栏 (2) 选择“控制/循环播放”，连续观察动画效果 ● ●绘制图形 教学进程

  33. 制作自动动画 (3) 单击“ ”，移动图形。 ● 自动动画只用到两个关键帧。 ● 用鼠标单击第1帧和第20帧，可调整图形的初始位置和终了位置。 5.4.3 ●直线移动动画 (1) 在第1帧中画 一个图形。 (2) 鼠标右键单击某一帧，如第20帧。 选择“插入关键帧”。 (4) 鼠标右键单击第1帧，选择“创建动画动作”。 (5) 鼠标右键单击第20帧，选择“创建动画动作”。 (6) 预览动画效果，图形从第1帧的位置移动到第20帧的位置。 教学进程

  34. 自由路径移动动画 (2) 单击 (添加引导图层)按钮 (7) 单击“ ”工具。 ● (1) 制作直线 移动动画。 (3) 单击铅笔工具。 (4) 选择“平滑”效果。 (5) 画自由路径。 (6) 单击图形图层。 (8) 单击第1帧，把图形置于路径的起始位置。 (9) 单击最后1帧，把图形置于路径的终了位置。 (10) 预览动画效果。 教学进程

  35. 为动画添加声音 5.4.4 ●[操作步骤] (1) 选择“文件/导入”。 (2) 指定文件类型和声音文件。 (3) 单击“打开”按钮。 (4) 单击某个动画图层。 (5) 单击“属性”工具栏。 (6) 在“声音”框中指定声音文件。 (7) 指定“同步”对象 (事件、开始、停止、数据流)。 (8) 预览动画 (可听到声音)。 教学进程

  36. 保存动画 ●保存成品动画文件 (2) 选择文件保存类型。 SWF — Flash播放文件 AVI——视频文件(有声) GIF——动画文件 ● ●保存可编辑文件 fla (1) 选择“文件/另存为”。 (2) 输入文件名。 (3) 单击“保存”按钮。 (1) 选择“文件/导出影片”菜单。 (3) 单击“保存”按钮。 教学进程

  37. 动画制作举例 ● ●绘制一组虫子爬行的画面。 ●帧数：5。 ●动画文件格式：GIF。 [操作步骤] (1) 设置动画尺寸及其他。 (2) 绘制轮廓线。 (3) 增加关键帧。 (4) 重复步骤(2)、(3)。 (5) 保存。 教学进程

  38. 小结 ● 重要知识点 ● 第5章 制作动画 5.3 制作网页动画 5.3.1 网页动画的特色 ● 5.3.2 画面制作 ● 5.3.3 生成过程 5.4 制作Flash动画 5.4.1 Flash动画的特色 ● 5.4.2 制作帧动画 5.4.3 制作自动动画 ● 5.4.4 为动画添加声音 5.1 动画基本概念 5.1.1 什么是动画 5.1.2 动画的由来 5.1.3 电脑动画 5.2 制作变形动画 5.2.1 变形动画的特色 ●5.2.2 准备首、尾画面 ●5.2.3 制作过程 教学进程

More Related