1、动画制作技术,第 8 章,8.1 动画基本概念8.1.1 什么是动画8.1.2 制作动画的设备8.1.3 制作动画的软件8.1.4 纪录动画的文件 8.2 变形动画及其制作8.2.1 制作变形动画的软件8.2.2 首、尾画面的加工与使用8.2.3 确定动画文件的格式和参数8.2.4 确定变形的参考点8.2.5 生成与保存变形动画,8.3 网页动画及其制作8.3.1 什么是网页动画8.3.2 网页动画的制作工具8.3.3 使用GIFCON制作网页动画8.3.4 使用FLASH制作网页动画8.3.5 FLASH的界面特点与绘制工具8.3.8 动画的画法8.3.7 制作帧动画8.3.8 制作自动动画
2、8.3.9 为动画添加声音8.3.10 保存动画,8.1,动画基本概念, 动画由多幅画面组成,当画面快速、连续地播放时,由于人类眼睛存在 “视觉滞留效应” 而产生动感。,8.1.1 什么是动画,教学进程,最原始的动画,1831年,法国人约瑟夫 安东尼 普拉特奥 (Joseph Antoine Plateau) 在一个可以转动 的圆盘上按照顺序画了一些图片,教学进程,动画的历史,1908年 美国人J斯泰瓦德(JSteward)制作了一部名叫“滑稽面孔的幽默形象”的短片,非常接近现代动画概念,1908年 法国人Emile Cohl首创用负片制作动画影片,负片从概念上解决了影片载体的问题,为今后动画
3、片的发展奠定了基础,1909年 美国人Winsor McCay用一万张图片表现一段动画故事,这是迄今为止世界上公认的第一部真正的动画短片,1915年 美国人Eerl Hurd创造了在赛珞璐片上画动画片,再拍成胶片电影的动画制作工艺,这种工艺一直沿用至今,1928年 美国人华特迪斯尼 (Walt Disney) 完善了动画体系和制作工艺,被誉为商业动画影片之父,他把动画影片推向颠峰,今 天 动画本质没有多大变化,而动画制作手段却发生了巨大变化, 如:电脑动画、电脑特技动画,教学进程,动画的构成规则,1) 动画由多画面组成,并且画面必须连续 2) 画面之间的内容必须存在差异 3) 画面表现的动作必
4、须连续,即后一幅画面是前一幅画面的继续,教学进程,传统动画,8) 上色人员为赛珞璐片上色, 传统动画是怎样制成的,教学进程,全动画与半动画, 半动画 又名“有限动画”,为追求经济效益,6帧s的动画,不足的画面,采用动作重复或延长画面停顿时间补足,教学进程,123456,电脑动画, 电脑动画的发展,教学进程, 帧动画 模拟以帧为基本单位的传统动画,占动画产品的98%,电脑动画的分类, 颜色动画,教学进程,制作动画的设备,8.1.2,教学进程,制作动画的软件,8.1.3,Animator Pro 平面动画制作软件。用于制作帧动画,绘制功能强,Animation Studio 平面动画处理软件。用于
5、加工帧动画,处理能力强,Flash MX 网页动画软件。用于绘制帧、矢量动画,可添加声音,WinImage: morph 变形动画软件。根据首、尾画面自动生成变形动画,GIF Construction 网页动画软件。把动画和图片序列转换成网页动画,3D Studio Max 三维动画制作软件。用于制作三维造型动画,Cool 3D 三维文字动画软件。用于制作帧动画、视频,Maya 三维动画制作软件。用于制作动画片、广告、电影等,Premiere 动画视频处理软件。用于处理视频、广告、电影等,教学进程,8.1.4, 动画文件的种类与格式,纪录动画的文件,教学进程,8.2,变形动画及其制作,变形过程
6、,(画面数量、变形参考),教学进程,8.2.2,首、尾画面的加工与使用, 首、尾画面处理规则, 参与变形的两个主体轮廓形状应接近, 在画面中的相对位置也应尽可能一致, 色调应保持一致或接近, 背景不适宜采用彩色图案,应一律采用单色, 首、尾画面的尺寸一致, 目的:变形自然、和谐,便于后期加工, 变形效果,教学进程,启动Morph,教学进程,8.2.3,确定动画文件的格式和参数, 选择输出文件格式, 选择“FileOutput File Type”菜单,教学进程,设置文件输出参数, 操作步骤,(9) 单击“OK”按钮,(2) 设置总画面数,(3) 设置开始画面,(4) 设置结束画面,(5) 设置
7、当前画面,(8) 输入路径和文件名(与文件格式对应),(7) 确定画面尺寸(取首画面尺寸)“Set to Start Frame Size”,(8) 使Use / Save两项有效,(1) 选择“Settings/sequence controls .”菜单,教学进程,8.2.4,确定变形的参考点, 操作步骤,教学进程,8.2.5,生成与保存变形动画, 生成,在生成过程中,依次显示中间画面和图片序列,并自动保存, 选择“Generate/Sequence generate.”菜单,生成过程开始,教学进程,变形动画制作举例, 首、尾画面, 帧数:12, 输出格式:GIF图片序列,操作步骤 启动M
8、orph 打开首、尾画面 选择输出文件格式 设置文件输出参数 规定变形的参考点 生成 退出Morph, 输出尺寸:与首画面相同,教学进程,8.3,网页动画及其制作,教学进程,8.3.2,网页动画的制作工具,(2) 选择“FileNew”菜单,清除命令窗口, GIFCON是一种网页动画转换软件,全称GIF Construction Set,(3) 选择“FileExit”菜单,退出系统,教学进程,8.3.3,使用GIFCON制作网页动画, 插入图像文件与控制命令,(2) 单击“Insert”按钮,(3) 单击“Loop”按钮,(4) 双击“Loop”命令行循环次数设为“0”,(5) 单击“Ins
9、ert”按钮,(8) 单击“Control”按钮,(7) 双击“Control”命令行设置时间间隔,单击“OK”按钮,Loop,Control,教学进程,插入图像文件与控制命令, 操作步骤 (续),(8) 单击“Insert”按钮,(9) 单击“Image”按钮,(10) 选择路径、文件序列单击“OK”按钮,(11) 选择调色板及其他单击“OK”按钮,(2) 按Ctrl+C键复制,(3) 按Ctrl+V键,把“Control”命令行分别粘贴到各图片之间,Loop,Control,(4) 双击“Control”命令行,并修改时间间隔,可控制动画的节奏,教学进程,下一張圖片顯示前,會先以背景顏色塗
10、掉目前的圖片,动画预览,(2) 输入文件名,单击“View”按钮预览 单击鼠标右键结束预览,(3) 单击“OK”按钮, 可使用ACDSee和Internet Explorer观看动画效果 制作网页动画过程中,GIFCON产生一个THN格式的文件,可予以删除,教学进程,使用GIFCON制作动画举例, 素材:使用变形动画例题中生成的GIF图片序列,t01.gif t12.gif, 时间间隔:8/100s, 输出格式:gif,操作步骤 启动GIFCON 清除命令窗口 插入Loop命令 插入Control命令 插入Image图片 复制Control命令 保存 退出 GIFCON, 无限循环,教学进程,
11、Sun00.gif,Sun01.gif,Sun02.gif,8.3.4,使用Flash制作网页动画,教学进程,硬件、软件环境, Intel Pentium 200 MHz Windows 98/ME/NT 4.0/2000/XP 84 MB of RAM (128 MB recommended) 85 MB of available disk space 18-bit color and 1024 x 788 resolution CD-ROM drive,教学进程,8.3.5,FLASH的界面特点与绘制工具,(1) 选择开始/程序/Macromedia FLASH MX v8.0或双击图标,
12、(2) 选择“文件 / 新建”菜单 (此步不可省略,否则窗口尺寸有误),教学进程,设置动画尺寸及其他,(1) 单击底部“属性”工具条, 操作步骤,(2) 单击“尺寸”按钮,(3) 输入“尺寸”数值,(5) 输入“帧频” fps (取值1225),(4) 单击“背景颜色”框确定动画窗口背景色,(8) 确定标尺单位 (像素、英寸、厘米、毫米等),(7) 单击“设为默认值”按钮,保存当前设置,(8) 单击“确定”按钮,(9) 单击“属性”标题栏,关闭,教学进程,画图形,(2) 选择圆内单色或渐变色,(3) 画圆 (鼠标椭圆 /Shift+鼠标正圆),(1) 选择画圆工具,(2) 选择单色或渐变色,(
13、3) 单击“圆角” 按钮,设置圆角, 画圆,(4) 画方框 (鼠标任意 /Shift+鼠标正方),教学进程,处理图形,(1) 选择橡皮工具,(3) 选择橡皮尺寸,(2) 选择擦除模式,(4) 擦除图形,(2) 移动图形, 擦除图形,教学进程,动画的画法,(1) 选择铅笔工具,(2) 选择铅笔颜色,(3) 选择轮廓模式,(4) 描绘轮廓, 绘制轮廓线,8.3.6,(1) 选择颜料桶工具,(2) 选择填充模式 (渐变、单色均可),(3) 选择封闭模式,(4) 单击图形内部填充颜色,教学进程,北京 BEIJING,输入文字,(1) 选择文本工具,(2) 鼠标左键划出文本框,(3) 输入文本内容,(4
14、) 光标条覆盖文本,(8) 鼠标对准文本输入框,移动文字,(7) 单击非文本输入区结束,教学进程,制作帧动画, 绘制图形,8.3.7,教学进程,制作自动动画, 直线移动动画,(4) 鼠标右键单击第1帧,选择“创建动画动作”,(8) 预览动画效果,图形从第1帧的位置移动到第20帧的位置,8.3.8,(1) 在第1帧中画一个图形,(2) 鼠标右键单击某一帧,如第20帧选择“插入关键帧”,(5) 鼠标右键单击第20帧,选择“创建动画动作”,教学进程,自由路径移动动画,(3) 单击铅笔工具,(10) 预览动画效果,(1) 制作直线移动动画,(5) 画自由路径,(2) 单击 (添加引导图层)按钮,(4)
15、 选择“平滑”效果,(8) 单击图形图层,(8) 单击第1帧,把图形置于路径的起始位置,(9) 单击最后1帧,把图形置于路径的终了位置,教学进程,为动画添加声音,(2) 指定文件类型和声音文件,(3) 单击“打开”按钮,(4) 单击某个动画图层, 操作步骤,(5) 单击“属性”工具栏,(8) 在“声音”框中指定声音文件,(7) 指定“同步”对象 (事件、开始、停止、数据流),(8) 预览动画 (可听到声音),8.3.9,(1) 选择“文件/导入”,教学进程,保存动画, 保存可编辑文件 fla,(1) 选择“文件/另存为”,(2) 输入文件名,(3) 单击“保存”按钮,8.3.10,(3) 单击
16、“保存”按钮,教学进程,使用Flash制作动画举例, 帧数:5 动画文件格式:GIF, 绘制一组虫子爬行的画面,教学进程,8.1 动画基本概念8.1.1 什么是动画 基本概念传统动画电脑动画8.1.2 制作动画的设备8.1.3 制作动画的软件8.1.4 纪录动画的文件 8.2 变形动画及其制作8.2.1 制作变形动画的软件 8.2.2 首、尾画面的加工与使用 8.2.3 确定动画文件的格式和参数 8.2.4 确定变形的参考点8.2.5 生成与保存变形动画,8.3 网页动画及其制作 8.3.1 什么是网页动画8.3.2 网页动画的制作工具 8.3.3 使用GIFCON制作网页动画8.3.4 使用FLASH制作网页动画8.3.5 FLASH界面特点与绘制工具 8.3.6 动画的画法 8.3.7 制作帧动画 8.3.8 制作自动动画8.3.9 为动画添加声音 8.3.10 保存动画,第8章 动画制作手段,教学进程,小结,