第6章计算机动画技术

1、西北农林科技大学信息工程学院西北农林科技大学信息工程学院作业作业以学校为背景，设计如下主题：大小：以学校为背景，设计如下主题：大小：980*125-220（素材、源文件、素材、源文件、swf文件文件）元旦主题元旦主题校庆主题校庆主题国庆主题国庆主题欢送毕业生欢送毕业生新生篇新生篇端午节端午节中秋节中秋节教师节教师节1. 劳动节劳动节一班一班二班二班三班三班课程引入课程引入 动画片； 多媒体； 互联网； 在线电脑游戏以及电视广告等领域。学习目标学习目标 了解动画的基本原理 了解传统动画制作的流程和方法 掌握Flash动画制作的基本方法内容框架内容框架回顾：回顾：动画的产生原理动画的产生原理-视觉

2、暂留视觉暂留传统动画的制作流程传统动画的制作流程v脚本创作阶段v设计制作阶段v实施创作阶段v拍摄阶段脚本创作阶段脚本创作阶段创建分镜脚本创建分镜脚本设计制作阶段设计制作阶段设计制作阶段分两个步骤：一是进行角色造型设计；二是记录声音。实施创作阶段实施创作阶段拍摄阶段拍摄阶段 将创作好的单张动画胶片进行拍摄，在拍摄过程中可移动各层产生动画效果，还可利用摄像机的移动、变焦、旋转等变化和淡入、淡出等特技功能，生成多种动画特技效果。 拍摄完成后，按照脚本和故事板完成动画各片段的连接、排序和剪辑等。 最后，编辑人员和导演将录制好的声音加上特技音效配合动画的动作。术语术语v帧（Frame）：动画中的一个画面

3、就对应一帧v普通帧：用于显示同一层上，前一个关键帧的内容并截止到下一个关键帧v关键帧（Key Frame）：定义动画的变化v空白关键帧：用于画面与画面之间形成间隔，没有任何内容6.3 二维动画制作软件二维动画制作软件FlashvFlash CS3是Adobe公司出品的一款交互式二维动画设计软件，具有操作简单、功强大的编程能力、易学易用、浏览速度快等优点，已成为网页动画网页动画制作的主流工具。二维动画制作软件二维动画制作软件Flashv Flash CS3的特点及应用v Flash CS3的工作界面v Flash CS3绘画工具及使用v Flash CS3逐帧动画的制作v Flash CS3补间

4、动画的制作v Flash CS3引导层动画的制作v Flash CS3遮罩动画的制作Flash CS3的特点及应用的特点及应用vFlash CS3的特点vFlash CS3的应用Flash CS3的特点的特点 源文件格式为fla，标准动画格式为swf 生成的动画文件量小，适合在网络上传播。 基于矢量的图形，可任意缩放尺寸、修改颜色而不会影响图像的质量。 支持真彩色以及播放声音文件。 使用流媒体播放技术，可以边播放边下载，加快网页的浏览速度。 通过ActionScript脚本实现动画的交互操作。Flash CS3的应用的应用绘制精美插画绘制精美插画制作动漫制作动漫网站开发网站开发Flash应用程

5、序开发应用程序开发6.3 Flash CS3的工作界面的工作界面 功能强大、操作方便、界面美观的新版本Flash CS3。其工作界面主要由标题栏、菜单栏、绘图工具栏、状态栏、功能面板、时间轴和工作区构成。6.3 Flash CS3绘画工具及使用绘画工具及使用v在Flash中，所有被绘制出来的图形都是矢量图形，缩放后不会产生失真（出现“马赛克”）效果，其工具栏中工具的分组情况及分组名称如图所示。v Flash图形都由线条和填充两部分构成v 左图为绘制的圆形图形，中图为该图形的线条部分，右图为该图的填充部分。v （设置边框为不同颜色，以便区分） Flash绘制的图形有两种状态，打散状态和群组状态，

6、如下图所示，左图为打散状态，右图为群组状态。 可以利用快捷键在打散状态和群组状态之间相互转换： 从打散状态到群组状态：CtrlG。 从群组状态到打散状态：CtrlB。工具介绍工具介绍v选择工具组选择工具组v 箭头工具 。用它来选择绘图对象时，既可以框选也可以单击对象及进行选取；还可以用它来移动对象、改变线条或者对象造型。v 部分选取工具 。用它单击对象后显示该对象的矢量路径锚点，与钢笔工具配合使用可精确地调整贝塞尔曲线的形状。 任意变形工具 。单击右下角的小三角出现变形工具中的子选项，如图所示。任意变形工具可对图形、元件、文本等进行缩放、旋转、倾斜、扭曲等操作； 渐变变形工具。可通过调整填充的

7、大小、方向或中心点，改变渐变填充的方式和形状。v 套索工具 。是一种简单而自由的选择工具，根据鼠标的闭合区域来选择部分图像。绘图工具组绘图工具组v钢笔工具 。是用来绘制线条的常用工具，单击右下角的小三角出现钢笔工具中的子选项，利用子选项可以绘制出贝塞尔曲线。贝塞尔曲线由线段和锚点构成，通过子选项中的工具来绘制精确的曲线，并且控制曲线的形状和造型。 文本工具文本工具 。用来绘制文本，绘制出的文用来绘制文本，绘制出的文本只有填充方式没有边线，而且文本是群本只有填充方式没有边线，而且文本是群组状态。结合文本属性面板，可为文字设组状态。结合文本属性面板，可为文字设置参数，如字体、大小、对齐、颜色等。置

8、参数，如字体、大小、对齐、颜色等。v线条工具 。是最简单的绘图工具。结合线条工具属性面板，可设置线条的参数，绘制出各种样式的线条。矩形工具矩形工具 。用来绘制各种变化多样的图形，用来绘制各种变化多样的图形，单击右下角的小三角出现矩形工具中包含单击右下角的小三角出现矩形工具中包含的其他矢量图形绘制子选项。结合矩形工的其他矢量图形绘制子选项。结合矩形工具属性面板，可为绘制出的图形分别设置具属性面板，可为绘制出的图形分别设置线条和填充的参数。线条和填充的参数。v铅笔工具 。用来绘制自由线条。其属性面板和线条工具相同，惟一的区别是在工具栏的其他选项组中包含铅笔工具的模式按钮，单击按钮可选择不同的线条模

9、式。v笔刷工具 。和铅笔工具不同，此工具绘制出的图形不是线条而是填充类。在工具栏的其他工具组中包含笔刷工具的模式按钮，单击按钮可选择笔刷的绘画方式、大小和形状。颜色与擦除工具组颜色与擦除工具组v 墨水瓶工具 。结合属性面板可以改变线条的样式和颜色v 油漆桶工具 。对指定区域进行填充，结合其他选项组的不同填充模式，不但可以填充封闭区域，还能对非封闭区域进行填充。如果不封闭的开口太大，则无法进行填充v吸管工具 。用来吸取线条的颜色以及填充部分的颜色，并运用到别的图形上。吸管工具还可进行位图填充和渐变填充。v橡皮擦工具 。可删除线条和填充，双击该工具，则删除舞台上的所有对象，结合其他工具组的擦除模式

10、，还可“智能”地选择擦除内容。其他工具组其他工具组v其他工具组包含手型工具、缩放工具、线条颜色、填充颜色。有的工具包含不同的模式选项时将出现在其他工具组的最下方，例如橡皮擦工具的模式选项，油漆桶工具的模式选项。6.4 Flash基础动画制作分类基础动画制作分类逐帧动画和补间动画。逐帧动画和补间动画。逐帧动画：逐帧动画：每一帧都是关键帧，每一帧的舞台内容都要更改，适应于每一帧中的图象都在更改的动画，其缺点是文件较大。补间动画补间动画则只需绘制首尾关键帧的画面，中间的部分由Flash补充完成，所以被称作补间动画。而补间动画又分为两种情况，一是一是补间的形状补间的形状，指对舞台上的对象形状改变进行补

11、间，要求该对象处于打散状态，例如动画中经常出现的对象变形的镜头；二是二是补间的动作补间的动作，用于改变舞台对象的大小、颜色、位置等补间动作。6.5 Flash动画技巧动画技巧v引导线动画-在运动对象上方添加一个运动路径的图层，然后在该层中绘制对象的运动路线，使对象沿该路线运动。v遮罩动画-蒙版动画。某个特殊的层可以作为遮罩，遮罩层之下的一层是被遮罩层遮住的，只有在遮罩层上填充色块之下的内容是看见的，而遮罩层的填充色块本身则是不可见的。6.6 Flash动画制作实例动画制作实例 实例1 手写字效果（逐帧动画） 实例2 字母变换（形状补间动画） 实例3 形状变形（形状补间动画） 实例4 运动（动作

12、补间动画） 实例5 飞机起飞（引导层动画） 实例6 打字效果（遮罩层动画） 实例7 图片变化 实例8 不间断滚动图片 实例9 动画设计（我们毕业了） 实例10 端午节快乐（逐帧动画） 实例11 新年快乐（gif图片的使用，影片剪辑）1 制作逐帧动画的制作逐帧动画的手写字效果。手写字效果。v（1）新建文件，命名为“手写字”，单击“文字”工具，在文本属性面板设置文本参数。输入文字“FLASH”，按CtrlB快捷键，将文字打散（两次）。v（2）单击F6键，添加关键帧，用【橡皮擦】工具从笔画的最后开始擦除，。v（3）单击F6键，继续添加关键帧，用【橡皮擦】工具擦除剩余的笔画。擦除过程与笔画的书写顺序相

13、反v（4）完全删除笔画后舞台为空，时间轴对应的方格为空白关键帧。（5）单击倒数第2帧，并按住鼠标向左拖动，选中所需的帧，然后单击鼠标右键，在弹出的对话框中单击“翻转帧”命令。（6）动画制作完成后，按CtrlEnter测试动画。2 形状补间动画形状补间动画字母变换。字母变换。v（1）新建文件“字母变换”，在舞台“图层1”中输入字母A，按CtrlB键将其打散。v（2）单击选择第30帧，按F6键在第30帧处添加关键帧，输入字母B并打散。v（3）单击时间轴上任意帧的小方格，在属性面板的“补间”下拉列表框中选择“形状”，为“图层1”创建形状补间动画。（4）动画制作完成后，按CtrlEnter测试动画。3

14、 制作形状补间动画制作形状补间动画制作形状补间动画的案例制作形状补间动画的案例3-添加形状提示点添加形状提示点（修改（修改-形状形状-添加形状添加形状CTRL+SHIFT+H）创建补间动画后添加提示，比较效果创建补间动画后添加提示，比较效果v（1）新建文件“运动”，单击“文件”“导入”“导入到库”菜单命令，选择素材文件将其导入到Flash的库中。单击F11键，可调出“库面板”，查看其内容。4 补间动画补间动画运动运动（2）将小猪图片拖入到舞台上，单击F8键，在弹出的“转换为元件”对话框中，将其设置为影片剪辑，并命名为“运动“。v（3）将素材实例移动到舞台的左边，在第10帧处单击F6键添加一个关

15、键帧，并将素材沿水平方向移向舞台的右边。v （4）在时间轴第1帧到第10帧之间的空白处单击鼠标右键，在弹出的对话框中单击“创建补间动画”按钮。v （5）时间轴上出现了实心的黑色箭头连接线，表示补间动画创建成功。 CtrlEnter测试动画Flash CS3遮罩动画的制作遮罩动画的制作动作补间动画制作的限制：关键帧的内容必须是同一元件的实例关键帧的实例只能有一个需要多个图层来实现多个实例运动的复杂动画Flash元件的作用及类型元件的作用及类型v作用：作用：v1、可以有效减小影片文件的大小；v 2、可以加快影片的播放速度；v 3、将元件拖放到舞台，用户可以对实例进行任意的修改，而不会影响到元件的任

16、何属性；Flash元件的作用及类型元件的作用及类型v元件的类型：元件的类型： v1、图形元件，一般用于制作静态图像或简单动画；v 2、按钮元件，用来创建影片中的相应鼠标事件的交互按钮；v 3、影片剪辑元件，有自己的时间轴和属性，具有交互性，可以说影片剪辑就是一个小的分支影片。5 引导层动画引导层动画飞机起飞飞机起飞v1）新建“飞机起飞”文件，单击“文件”“导入”“导入到库”菜单命令，选择飞机”图片，单击“确定”按钮，将其导入到Flash的库中。单击F11键，可调出“库面板”，查看其内容。v（2）将飞机图片拖入到舞台上，由于“飞机”图片较大，在属性面板中修改其参数，将其缩小。单击F8键，在弹出的

17、“转换为元件”对话框中，将其设置为影片剪辑，并命名为“飞机”，并将飞机放置在舞台的左下角。v（3）在“图层1”的第20帧处单击F6键，添加一个关键帧，并将飞机从舞台的左下角移动到舞台的右上角。v（4）单击图层面板上的“添加引导线”按钮，在“图层1”上添加一个引导层，并用“铅笔”工具绘制一条引导线。v（5）单击“图层1”的第1帧，将“飞机”实例的中心点套在引导线的起始处，同时利用“任意变形工具”旋转“飞机”实例，使飞机运动的方向沿曲线的切线方向。同理，单击“图层1”的第20帧，将“飞机”实例的中心点套在引导线的结束点，利用“任意变形工具”旋转“飞机”实例，使飞机运动的方向沿曲线的切线方向。v（6

18、）在“图层1”时间轴上第1帧到第20帧之间的空白处单击鼠标右键，在弹出的对话框中单击“创建补间动画”按钮，然后按CtrlEnter播放测试动画，在生成的SWF文件中，引导线将被隐藏。6 遮罩动画遮罩动画打字效果打字效果（1）新建文件“打字效果”，单击“文本”工具创建文本“FLASH IS SO COOL！”v（2）新建“图层2”，单击“矩形工具”按钮，绘制一个矩形，并且将文字全部遮住。（3）在“图层2”第30帧处单击F6键添加关键帧，在图层1的第30帧处单击F5添加普通帧。（4）单击“图层2”的第1帧，切换到“任意变形工具”，将鼠标移动到遮罩图形右边缘处，当鼠标的指针变成双向的箭头，按下鼠标左

19、键不松手，同时按住Shift键，并向左方向拖动鼠标，将遮罩图形缩小。v（5）在“图层2”时间轴第1帧到第30帧之间的空白处单击鼠标右键，在弹出的对话框中单击“创建补间动画”按钮。v（6）在“图层2”的名称处单击鼠标右键，在弹出的对话框中单击“遮罩层”，创建遮罩。v （7）遮罩创建成功，文字出现打字效果，CTRL+ENTER测试。后面添加普通帧，保持文字几秒钟7 综合实例综合实例-图片的几种变化示例图片的几种变化示例v1透明度v2 位置v3 大小v4 旋转v5 颜色v1. 首先准备好参与滚动的图片，将几张图片导入到flash库中。v点击“插入新建元件”，新建一个图形元件，将库的图片拖到舞台上，首尾相接拼好。8 综合实例综合实例-不间断滚动图片不间断滚动图片v2. 回到Flash主场景，将图片元件拖到舞台上，打开对齐面板，选择相对舞台，左对齐，垂直居中对齐。v3. 在第101帧插入关键帧，将图片水平移到左面刚好舞台之外，使图片元件的右边与舞台的左边对齐。v 4. 创建补间动画。选择第一帧，在图片元件上点右键复制。