计算机绘图与多媒体64

1、6.4 动画技术本节中，在介绍了动画的类型和计算机动画的常用格式后，主要介绍利用flash软件制作二维动画的基本方法。16.4.1 动画的类型按照动画制作技术和手段来分，动画可分为手工绘制和计算机动画。按照计算机动画实现的方式来分，动画可分为帧动画和造型动画。按照空间视觉效果来分，动画可分为二维动画和三维动画。按照播放进行方式来分，动画可分为顺序动画和交互动画。下面就仅描述计算机动画实现的方式和动画的空间视觉效果。2帧动画帧动画（Frame）由图形或画像序列构成序列中的每幅静态图像称为一个“帧”。帧动画可以分为逐帧动画和补间动画。逐帧动画每一个关键帧上都有可编辑的角色对象，设计者可以分别进行修

2、改。补间动画只需要设计者在一个表演时间段的两端分别给出两个角色对象，表示运动物体的初始和终结状态画面，动画制作软件就可通过一定的算法计算并生成自然、平滑的中间帧，从而产生细腻的动画效果。3造型动画造型动画（Object）也被称为对象动画。制作造型动画时至少有绘图、造型、动画三个步步骤。绘图，分别对动画中的每个对象进行特征设计，造型，就是利用三维软件创造三维形体。动画，再由这些具有个性化的对象组成完整的动画画面。经过特征设计的对象，必须按照一定的要求经过实时转换后才能形成连续的动画。4二维动画和三维动画二维动画2D图像设计只局限于平面，缺乏立体感，对诸如光、影、景深、景浅要求不高，所以制作也比较

3、简单。三维动画3D图像设计强调空间概念，配上真实色彩和3D虚拟环境，动画效果将显得相当逼真。实质上，3D动画是基于计算机特殊的3D动画软件给出的一个虚拟的三维空间，通过创建物体的模型，把模型放在这个虚拟的三维空间，配上灯光效果，然后赋予对象以动态效果和质感效果。5动画、视频文件中常见格式 6网页制作应该高度体现动态效果和交互性Micromedia公司开发的网页设计三剑客Dreamweaver、Flash、Fireworks是非常杰出的工具。新版本的MX在功能上的进一步整合将使创作人员的操作更加得心应手。76.4.2 Flash 软件的功能Flash MX的主要特点是能绘制图形、创建动画和建立交

4、互功能。它继承和发展了前期版本的功能，整体优点体现在具有更加优化的集成工作环境、增强型的颜色管理、便捷的元件库组织、动作脚本的设计支持、强大的文件支持和XML的集成应用支持等方面。本书以Macromedia Flash professional 8为背景8Flash MX的特点优化的集成工作环境舞台可以直接绘制图形、输入文本、导入作品，添加声音等。播放时，舞台外的内容都不会被显示。舞台面板时间轴工具箱显示比例图6-4-1 Flash的工作界面9属性检查器用来检查文本、对象、组件、元素实例、帧等相关属性。只要选择对象便可同步得到属性提示。10Flash MX的特点增强型颜色管理颜色混合器集成了颜

5、色混合工具、渐变、位图填充等多种编辑功能。只要点击“颜色样本”面板，便能增加或者删除被编辑对象的颜色。11Flash MX的特点便捷的元素库组织Flash MX使用公共库和影片文件库：用来存放可反复调用的对象元素，包括影片剪辑、按钮和图形等元件。元件可以被使用于场景、元件、客户/服务交互、音视频对象等各种场合。公共库内存放着Flash内置的元素，可以提供所有用户使用。影片文件库的组件是随着影片的制作而导入、创建和保存的。12Flash MX的特点支持动作脚本的设计动作脚本是Flash MX 的脚本撰写语言用于创建具有双向通信方式的交互式影片。简便方法是通过“动作”面板指定基本动作，进一步的方法

6、可使用动作脚本去撰写脚本。通过软件提供的调试工具，允许在代码中设置断点来实行单步执行代码。Flash MX还提供了彩色突出显示语法代码提示，以帮助作品的检测和修改。13Flash MX的特点强大的文件支持支持导入任何格式的文件：包括多种图象、声音和视频格式文件，并可以直接导入到帧和库中。使用动作脚本可直接将JPEG和MP3格式文件下载到Flash的层中。支持多种文件格式的导出：包括多种图象、声音和视频格式文件。影片也可以同时发布为多种格式的文件，以适合不同的作品应用环境。14Flash MX的特点支持 XML的集成应用XML是可扩展标记语言正成为 Internet 应用程序中交换结构化数据的标

7、准。基于Flash网络开发的数据可以与使用XML技术的服务器集成在一起，从而创建高级的交互和管理应用程序，如网上商店、网络聊天系统。156.4.3 Flash 软件的使用基础舞台是多媒体对象展示的空间。显示标尺和辅助线，有助于在舞台上精确地定位内容。时间轴：主要组件有图层、帧和播放头。它是用来通知 Flash 显示图形和其它项目元素的时间，时间的最小单位是帧。时间轴也可以指定舞台上各图形的分层顺序，位于上层的表演对象将显示在最表面。层中还可以使用文件夹来组织和访问所组成的内容。16按钮从左到右分别是：帧居中、绘图纸外观、绘图纸外观轮廓、编辑多个帧和修改绘图纸标记播放头当前帧播放头运行时间当前帧

8、播放头17时间轴中帧视图的使用帧视图按钮18多帧编辑打开绘图纸和多帧编辑按钮打开外观轮廓和多帧编辑按钮19菜单和工具栏20工具面板的使用工具面板中集中提供了位图和矢量图制作和修改工具。“工具”面板分为四个部分：“工具”包含绘图、上色和选择等工具。 “查看”包含在应用程序窗口内进行缩放和移动的工具。 “颜色”包含笔触颜色、填充颜色等工具。 “选项”显示与当前所选工具有关的功能键。 21创建新文档的二种方式个性化方式选择“文件”/“新建”命令建立新文档。定义文档属性。选择“窗口”/“属性”命令打开属性检查器，并单击右下角的白色三角使面板完全展开。利用模板方式选择“文件”/“从模板新建”，打开“新文

9、档”对话框。选择“类别”列表中的类别，如选择“演示文稿”。选“类别项目”列表中项目，如选择“演示文稿_样式1”。选择“创建”按钮，将得到按该模板建立的新文档。22铅笔工具可以用来绘制任意线条和形状铅笔工具提供了三种绘画模式：“伸直”可绘制直线并将接近三角形、椭圆、矩形和正方形的形状转换为这些常见几何形状。“平滑”可绘制出平滑曲线。“墨水”可绘制任意形状的线条。通过铅笔工具“属性”可以改变笔触颜色、线条粗细和样式。在使用铅笔工具绘画的同时按住 Shift 键，那么绘制的线条将被限制在垂直或水平方向上。图6-21 铅笔选项23钢笔工具用来绘制精确路径绘制路径的基本方法一：点击以建立起始锚点。再在新

10、的位置点击创建新的锚点，立即在相邻两个锚点间建立直线段。若创建新的锚点时，拖曳鼠标，会在该点左右出现方向转动柄，在释放鼠标前可随意转动方向柄查看可能形成的曲线形状，释放鼠标后才能结束该段曲线的绘制。如果按住Shift键创建线段时，可以将线条限制为倾斜 45 度的倍数的方向上。图6-22 绘制路径24钢笔工具用来绘制精确路径绘制路径的基本方法二：需要建立开放路径时，应双击最后一个锚点，或单击工具箱中的钢笔工具，或按住 Ctrl 键单击路径外的任意一点。若要建立闭合路径时，应将钢笔工具移动到起始锚点上，当钢笔尖处出现一个小圆圈时，单击或拖动完成闭合路径的制作。若要按现状完成形状，可选择“编辑”/“

11、取消全选”或在工具箱中选择其他工具。路径绘制结束后，可以直接在路径上点击来增加锚点，点击已有的锚点可删除锚点。25橡皮擦工具可擦除笔触和填充区域橡皮擦选项：“擦除模式”可实现不同的擦除效果，例如选择了“擦除填色”模式，只能擦除填色而不能擦除框线。“水龙头”可擦除鼠标点击处的笔触段或填充区域。“形状”列表选项用来指定橡皮擦工具的形状和大小。如果双击橡皮擦工具可快速删除舞台上的所有内容。26画笔工具能以填充色进行涂色或绘制出画笔般的笔触提供了模式、大小和形状选择：可选择“标准绘画”、“颜料填充”、“后面绘画”等画笔模式。按住Shift 键的同时拖动鼠标，可使画笔笔触限定为水平和垂直方向。27箭头工

12、具可选择和移动对象、改变线条或图形形状选择对象：直接点击选中对象，若按住Shift键可同时选中多个对象，或用箭头工具拖曳区域。改变对象的形状：不选中任何对象，使用箭头工具在对象上移动时，指针形式不同，以表明可实施的操作不同。表示为移动指针时，可拖曳对象实施移动操作。指针出现弧形时，拖动可改变对象的形状。指针出现转角时，可直接拖动改变转角或端点的位置。若按住Ctrl键同时拖动线条可以创建一个新的转角点。28部分选取工具用来移动或修改路径当用鼠标单击路径或对象边缘时，将显示路径锚点。如果移动鼠标，鼠标指针显示为箭头状，且当箭头右下方出现黑色小方块时，拖动鼠标可移动路径。当箭头右下方出现白色小方块时

13、，点击路径锚点，将出现锚点中心以及左右方向柄。这时，鼠标拖动路径锚点可以改变该点的中心位置，转动左右方向柄可改变曲线的弧度，将方向柄缩小至中心处可以变曲线为直线。29线形、椭圆和矩形工具用来创建几何图形线形以笔触色绘制椭圆和矩形可以笔触色和填充色进行绘制在“墨水瓶”属性中可以选择或自定义笔触样式。通过修改笔触色和填充色，可得到不同的效果。选择矩形工具时，可设置圆角矩形半径。30墨水瓶、颜料桶和吸管工具墨水瓶用来以笔触颜色为对象描边，颜料桶用来以填充色为区域填色。吸管通过吸取场景上的颜色直接改变笔触颜色和填充色。图6-25 笔触颜色和填充色31 任意变形工具当用鼠标选中笔触或填充物时笔触或填充物

14、时，所选对象上出现中心点和分布在周围的控制点，用鼠标直接拖动中心点或控制点，可以改变中心位置或改变形状，选择“选项”功能按钮，再进行变形操作。旋转与倾斜 缩放和封套32填充变形工具可改变渐变颜色的填充效果可对所填充的渐变颜色进行旋转、缩放或倾斜。33套索工具用来选择对象当不使用任何功能时，使用套索工具可以用不规则线段勾画选择区域，若按住 Alt 键可以直线段方式勾画选择区域。若使用“魔术棒”，再用上述方法选择区域时，会包含所勾画区域边线处一定的“阀值”范围。如果使用“多边形模式”，可以用画直线段的方法选择对象。使用套索工具时，操作只需用鼠标勾画一个开放或闭合区域，直接双击去完成区域的选择。多边

15、形模式魔术棒模式34面板的作用是什么？面板用来改变对象、颜色、文本、实例、帧、场景或整个文档的属性。Flash面板主要包括：对象的基本属性、影片脚本组件控制。35图6-4-15 Flash面板列36如何打开和使用面板？“窗口”菜单可打开或关闭面板。若按下 Tab 键，可直接显示或隐藏所有面板。用鼠标拖动“移动柄”标志可改变面板的位置，拖曳边框可改变面板大小。使用折叠开关可改变面板显示标题栏上的折叠开关，可以使面板以正常或标题栏形式出现。面板右下方的折叠开关可打开或关闭更高级的控制界面。 37面板可以重新排列选择面板的布局从“窗口”/“面板设置”子菜单中选择一种布局。建立新面板组、调整面板组内容

16、直接拖动面板的“移动柄”进行面板调整如果使它离开了面板组，将独立创建成为一个新的面板组。如果将一个面板组移动到另一个面板上面，便将添加到该面板组中去。创建并保存自定义排列的面板布局调整面板布局后，选择“窗口”/“保存面板布局”。38Flash元件分为影片剪辑、按钮、图形和声音等Flash元件通常存放在影片的库中库中元件的来源包括：可以使用“插入”/“新建元件”来创建，也可以选择“文件”/“导入”导入，还可以从Flash组件中引进所包括的单选按钮、复选框、普通按钮、组合框、列表框、滚动窗格、文本滚动条等元件。39Flash使用“库”面板来组织和管理影片中所使用的元件选择“窗口”/“库”命令可打开

17、库面板。编辑库中元件用右键打开库中元件的快捷菜单，选择“编辑”或“在新窗口中编辑”命令，然后用任意绘画工具进行编辑。库中的元件被编辑后，Flash会更新影片中该元件的所有实例。编辑舞台上的元件用右键单击打开舞台上元件的快捷菜单，并使用“在当前位置编辑”命令，便可在该元件和其他对象在一起的舞台上直接编辑它。4041文档属性面板文档属性值将影响整个影片。42动作面板 图6-4-18 flash的动作面板436.4.4 Flash 动画的制作和发布首先保存影片文档用“文件”/“保存”将动画文档保存为FLA格式。配置文件的发布方式选择“文件”/“发布设置”确定要发布的文档文件：Flash影片文件（sw

18、f）、IE浏览器播放文件（html）、压缩图像文件（gif、jpg、png）、Windows和Macintosh环境放映文件（exe、hqx）、QuickTime动画（mov）等格式文件。44Flash 动画可以在多种环境中播放发布的影片要用 Flash Player 播放。HTML文档能在浏览器窗口中插入swf文件。除了Windows和Macintosh外，每选中一种格式就增加一张选项卡以供设置。45发布预览和发布发布预览发布设置之后，选择“文件”/“发布预览”将提供要发布的各格式文件列表，选择点击后可直接预览效果。发布发布意味着将Flash 的Fla格式文件复制并转换成其他格式的文件。选择

19、“文件”/“发布”命令，Flash根据“发布设置”的配置，创建文件并保存在Fla格式文件所在的文件夹中。46例创建“变色龙”动画，将文档保存在“我的文档”文件夹中，并创建swf、html、gif、exe格式文件。创建“变色龙”动画后，选择“文件”/“保存”，在“保存在”设置为“我的文档”，输入“文件名”为“变色龙”，按下“保存”按钮。选择“文件”/“发布设置”打开对话框，配置如上图所示。直接按下对话框的“发布”按钮或按下“确定”后选择“文件”/“发布”进行发布。打开Windows“资源管理器”/我的文档”文件夹，可见上面所发布的文件。47图层操作的基本方法每个图层右边有三个开关分别代表：隐藏或

20、显示图层锁定或解锁图层图层内容显示为轮廓。底层“添加”按钮的作用可直接在当前图层上添加图层、引导层和文件夹。使用图层快捷菜单可选择更多的图层命令。48动画的图形主要取决于关键帧的编辑Flash可以创建逐帧动画或补间动画。逐帧动画每个帧上的图形都必须由设计者创建。补间动画至少有两个关键帧，设计者只要创建起始帧和结束帧，中间的帧可由Flash根据起始帧和结束帧的对象大小、旋转、颜色和其它属性来自动创建完成。49创建和测试动画的基本过程如下：新建一个文档，并设置其文档的参数。创建库元件。选择“插入”/“新建元件”可创建元件。选择“文件”菜单导入元件，或直接使用共享图库。返回场景。选择时间轴上的“场景

21、”按钮。建立场景动画。创建逐帧动画或创建补间动画。可预览动画效果按下Ctrl+Enter键，或使用“控制”菜单的有关命令，可以调试、测试影片或者播放影片。选择“窗口”/“工具栏”/“控制器”，利用所显示常规的控制按钮进行播放。保存影片文档和发布影片50Flash 基本动画的制作下面例举移位动画、形变动画、色变动画、遮罩动画、向导动画以及交互动画的制作。在作图时，如果需要可选择“查看”/“网格”/“显示网格”，以便绘图时精确定位。516.1：组件变形文字变形 52例2：点阵变形图案变形 创建图形分别新建图形元件“花案图形1”“花案图形5”，并绘制5种不同的花案。场景编辑在图层1的第1帧插入关键帧

22、，并拖入“花案图形1”元件。第3帧中插入关键帧。在第11、13帧中插入空白关键帧并拖入“花案图形2”元件。在第21、23帧中插入空白关键帧并拖入“花案图形3”元件。在第31、33帧中插入空白关键帧并拖入“花案图形4”元件。在第41、43帧中插入空白关键帧并拖入“花案图形5”元件。53例2：点阵变形图案变形对齐图案：按下“绘图纸”和“多帧编辑”按钮，并选择“修改标记”/“绘制全部”。选中各帧上的所有元件，然后选择“窗口”/“工具栏”/“主要栏”，选择打开“对齐”面板，对齐如图。分离元件：用“箭头工具”拖动选择所有元件，按Ctrl+B键分离元件。创建补间动画分别选中第3、13、23、33、43帧各

23、关键帧，设置其属性“补间”为“形状”。预览动画效果。54例3：颜色变化变色龙 图6-39 变色龙55操作方法新建电影的文档背景颜色设置为“999999”选择“文件”/“导入到库”，导入 “金龙.jpg”。新建图形“龙”。将“金龙”拖入编辑区。用“修改”/“分离”分离元件。选择“套索”/“魔术棒”工具，设置其“魔术棒属性”的阀值为50，点击图中的白色并按下Delete键删除白色。用“箭头工具”选中剩余龙身，用“修改”/“组合”重组。“场景”编辑将库中“龙”拖入图层1的第1帧上，在第15、30帧插入关键帧。修改各关键帧属性“颜色”为“色调”，并将第1、15、30帧的RGB颜色值，分别设置为（0、0

24、、0）、（0、255、102）和（0、255、51）。56例4：亮度变化星星闪烁 新建图形“背景”。选择“矩形”绘制黑色矩形图作为背景。新建图形“五角星”。用“线形”绘制五角星图形。将五角星填充为蓝色。选择“箭头工具”去选择并删除“五角星”的边线。点击“场景”，将库中“背景”元件拖入图层1的第1帧添加图层2。将库中“五角星”元件拖入，并在第5、10帧插入关键帧。在第1帧上设置“属性”/“颜色”/“亮度”/“80”创建补间动画。用同样的方法修改第5帧，选择“亮度”/“60”。修改第10帧，选择“亮度”/“80”。用类似(3)的方法创建图层3、4、5、6动画57例4：亮度变化星星闪烁58例5：运动

25、引导写字 59例6.：影片剪辑汽车行进 新建电影导入getcarimage.jpg，导入的图片位于图层1第1帧。选择“插入”/“转换成元件”，转换成“源图片”图形元件。选择“修改”/“分离”使元件分离，使用“套索工具”勾出汽车选择“插入”/“转换成元件”，使转换成“汽车”图形元件。新建图形元件“车轮”，确保中心点位于车轮中央。60创建“转动的汽车”影片剪辑安排车身、前车身、后车身三个层在影片剪辑的前车身、后车身两个层的第1帧上，分别设置帧属性。61例6.：影片剪辑汽车行进在“场景”图层1的第1帧中拖入“转动的汽车”剪辑，在60帧上插入关键帧。为图层1添加引导层，在第1帧用铅笔画运动轨迹线。调整

26、图层1上关键帧的位置和方向，使第1帧和第60帧的汽车分别位于运动轨迹线的左、右端，使车的中心点紧贴运动轨迹线，并转变其方向在运动轨迹线的切线方向。在图层1上创建补间动画。如果希望汽车车身沿途都能在运动轨迹线的切线方向，可以添加一些关键帧，并调整车身的方向。 62例7：向导编辑堆雪人 63例7：向导编辑堆雪人64例8：遮罩动画探照灯效果 新建一个电影，并打开影片库。新建图形元件，名为“文字”。选择“文字”工具，修改属性中的字号为60，在编辑区中输入文字“WELCOME”。新建图形元件，名为“探照灯”。选择“椭圆”工具，绘制一个圆形图案。点击“场景”按钮，在图层1的第一帧中插入“文字”元件，在30

27、帧上插入关键帧。在图层2的第一帧中插入“探照灯”元件，使位置与“WELCOME”的“W”重合，在30帧上插入关键帧，使位置与文字最后的“E”重合。在图层2创建补间动画。右键单击图层2，选择“遮罩”命令，按Ctrl+Enter预览动画效果。65例9：遮罩剪辑转动的地球 66例10 遮罩逐帧动画描绘五彩缤纷的文字 新建图形元件“文字”，在输入文字“爱我中华”。新建图形元件“彩带”。绘制矩形彩带图案。67例11 描绘五彩缤纷的文字上添加背景音乐68编辑声音“效果”的选项列表包括：无、左声道、右声道、从左到右淡出、从右到左淡出、淡入、淡出和自定。当选择“自定”或“编辑”按钮，将打开“编辑封套”对话框。

28、上下部分分别代表左右声道，各个声道都有音量控制线，在控制线上左击可插入最多8个控制点，控制点可调整音量，控制点位于上方表示放大音量，反之降低音量。中间是时间轴，可以用时间或帧来表示。时间轴上有左右二个滑杆，移动它们可控制部分声音内容用于影片帧的播放。696.4.5 Flash交互动画制作 交互式影片允许观众自主控制影片的播放，通过键盘或鼠标来控制影片中的不同片断、移动对象、填写信息等操作。70按钮是控制元件的主要工具，也是键盘或鼠标操作的对象。可从“窗口”/“公用库”/“按钮”中提取也可用“插入”/“新建元件”自制。按钮图形可由多个图层合成。了解按钮的制作将公用库中的按钮插入到场景上，双击该按

29、钮，进入按钮编辑区如图，请仔细观察学习按钮的创建。图6-48 按钮元件编辑区71Flash提供许多可以添加到脚本中动作函数，通过动作面板可对“帧”或“元件”添加动作创建交互式影片添加动作函数的基本方法：先在动作面板上选择要添加动作的“帧”或“元件”。然后双击“动作”列表下的函数或按下“”选择动作功能函数，需要时还需设置一些参数。使用“”按钮可删除动作函数。控制场景上的影片播放：“动作”/“影片控制”下提供goto转向、on事件发生、play播放、stop停止、stopAllSounds停止所有声音等几个函数，可直接控制场景上的影片播放。72例12：在影片文档中，增加按钮层 在第一帧上添加三个按

30、钮，并为每个按钮选择一个事件选择一个事件73例12：在影片文档中，增加按钮层 分别为这三个按钮添加“play”、“stop”、“goto”动作，使得点击并释放这些按钮时，能控制转当前场景的播放、停止、转向第一帧重新开始播放 74例12：在影片文档中，增加按钮层 Play按钮stop按钮goto按钮75控制影片剪辑的播放影片库中可以创建多个影片剪辑，剪辑可作为实例被 Flash 文档多次调用。为了区分不同的实例，必须给每个实例定义一个名称。用Tell Target函数指向不同的实例。使用play、stop等函数来控制电影剪辑的播放。76例6.15创建一个影片，使得按下按钮后可以控制电影剪辑的播放和停止。新建影片文档，修改图层名为“场地”，在场景1的第1帧上绘制播放器界面。增加“按钮”图层，在“窗口”/“公用库”/“按钮”中选择Play、Stop按钮拖入。创建图片组件保龄球、瓶和场地如图所示。77创建“保龄球剪辑”影片剪辑影片剪辑编辑最底层为场地图片，上面建立10个瓶层、保龄球层和帧动作层，分别创建每个瓶以及保龄球的动画。在“帧动作”层添加Stop( ) 动作。 在场景上插入剪辑：增加图层名为“保龄球”，从库中将“保龄球”剪辑拖入第一帧。在剪辑属性中输入实名为“film” 78图6-51 影片剪辑控制动画的时间轴79设置按钮动作打开“动作”面板选择Play按