网页制作技术(第二版)-07任务七 制作高级动画

1、网页制作技术（第二版）主编 许莉 中国水利水电出版社网页设计与制作任务七 制作高级动画学习目标 理解引导层、遮罩层的概念 理解反向运动的概念 掌握引导层动画的创建方法 掌握遮罩动画的创建方法 掌握骨骼动画的创建方法 掌握声音的添加方法 掌握发布动画的方法任务七 制作高级动画目录：知识1 引导层 知识2 遮罩层 知识3 反向运动 知识4 声音文件的导入 知识5 动画的发布 任务1 创建引导层动画 任务2 创建遮罩层动画 任务3 创建反向运动效果 任务4 为按钮添加声音任务七 制作高级动画知识1 引导层 引导层是用来定义物体运动路径的层。引导层分为“普通引导层”和“运动引导层”两种。其中“普通引导

2、层”只起到辅助定位的作用，多用于版式，而“运动引导层”是引导物体沿着特定的路径运动。如果将多个层链接到一个运动引导层，那么多个对象就将沿同一条路径运动。知识1 引导层 1.创建引导层和被引导层一个最基本“引导路径动画”由两个图层组成，上面一层是“引导层”，下面一层是“被引导层”，同普通图层一样。在普通图层上点右键，选择“添加传统运动引导层”，该层的上面就会添加一个引导层，同时该普通层缩进成为“被引导层”，如图所示，“图层1”是被引导层，而“图层3”是普通图层。知识1 引导层 2.引导层和被引导层中的对象引导层是用来指示元件运行路径的，所以“引导层”中的内容可以是用钢笔、铅笔、线条、椭圆工具、矩

3、形工具或画笔工具等绘制出的线段。而“被引导层”中的对象是跟着引导线走的，可以使用影片剪辑、图形元件、按钮、文字等，但不能应用形状。由于引导线是一种运动轨迹，不难想象，“被引导”层中最常用的动画形式是传统补间动画，当播放动画时，一个或数个元件将沿着运动路径移动。知识1 引导层 3.向被引导层中添加元件“引导动画”最基本的操作就是使一个运动动画“附着”在“引导线”上。所以操作时特别得注意“引导线”的两端，被引导的对象起始、终点的2个“中心点”一定要对准“引导线”的2个端头，如图所示。知识1 引导层 4.应用引导层的技巧“被引导层”中的对象在被引导运动时，还可作更细致的设置，比如运动方向，在“属性”

4、面板上，选中“调整到路径”复选框，对象的基线就会调整到运动路径，对象在运动时两保持与路径的切线夹角不变。而如果选中“贴紧”复选框，元件的注册点就会与运动路径对齐。引导层中的内容在播放时是看不见的，利用这一特点，可以单独定义一个不含“被引导层”的“引导层”，该引导层中可以放置一些文字说明、元件位置参考等。在做引导路径动画时，按下工具箱中的“对齐对象”按钮，可以使“对象附着于引导线”的操作更容易成功，拖动对象时，对象的中心会自动吸附到路径端点上。过于陡峭的引导线可能使引导动画失败，而平滑圆润的线段有利于引导动画成功制作。向被引导层中放入元件时，在动画开始和结束的关键帧上，一定要让元件的注册点对准线

5、段的开始和结束的端点，否则无法引导，如果元件为不规则形，可以点击工具箱中的“任意变形工具”，调整注册点。如果想解除引导，可以把被引导层拖离“引导层”，或在图层区的引导层上单击右键，在弹出的菜单上选择“属性”，在对话框中选择“一般”，作为一般图层类型。如果想让对象作圆周运动，可以在“引导层”画一根圆形线条，再用【橡皮擦工具】擦去一小段，使圆形线段出现2个端点，再把对象的起始、终点分别对准端点即可。引导线允许重叠，比如螺旋状引导线，但在重叠处的线段必需保持圆润，让Flash能辨认出线段走向，否则会使引导失败。知识2 遮罩层 遮罩层上的对象可以看作是孔，透过孔可以看见被遮罩的层。1.创建遮罩层和被遮

6、罩层在Flash中没有一个专门的按钮来创建遮罩层，遮罩层其实是由普通图层转化的。你只要在某个图层上单击右键，在弹出菜单中选择“遮罩层”，使命令的左边出现一个小勾，该图层就会生成遮罩层，“层图标”就会从普通层图标变为遮罩层图标，系统会自动把遮罩层下面的一层关联为“被遮罩层”，在缩进的同时图标变为。如图所示，其中“图层2”为遮罩层，“图层1”为被遮罩层，“图层3”为普通图层。知识2 遮罩层 2.构成遮罩和被遮罩层的元素遮罩层中的图形对象在播放时是看不到的，遮罩层中的内容可以是按钮、影片剪辑、图形、位图、文字等，但不能使用线条，如果一定要用线条，可以将线条转化为“填充”。被遮罩层中的对象只能透过遮罩

7、层中的对象被看到。在被遮罩层，可以使用按钮，影片剪辑，图形，位图，文字，线条。3.遮罩中可以使用的动画形式可以在遮罩层、被遮罩层中分别或同时使用补间形状动画、传统补间动画、补间动画等动画手段，从而使遮罩动画变成一个可以施展无限想象力的创作空间。知识2 遮罩层4.应用遮罩层的技巧遮罩层的基本原理是：能够透过该图层中的对象看到“被遮罩层”中的对象及其属性（包括它们的变形效果），但是遮罩层中的对象中的许多属性如渐变色、透明度、颜色和线条样式等却是被忽略的。比如，我们不能通过遮罩层的渐变色来实现被遮罩层的渐变色变化。要在场景中显示遮罩效果，可以锁定遮罩层和被遮罩层。不能用一个遮罩层试图遮蔽另一个遮罩层

8、。在制作过程中，遮罩层经常挡住下层的元件，影响视线，无法编辑，可以按下遮罩层时间轴面板的显示图层轮廓按钮，使之变成，使遮罩层只显示边框形状，在种情况下，还可以拖动边框调整遮罩图形的外形和位置。知识3 反向运动 反向运动 (IK) 是一种使用骨骼的有关节结构对一个对象或彼此相关的一组对象进行动画处理的方法。使用骨骼，元件实例和形状对象可以按复杂而自然的方式移动，只需做很少的设计工作。例如，通过反向运动可以更加轻松地创建人物动画，如胳膊、腿和面部表情。骨骼链称为骨架。在父子层次结构中，骨架中的骨骼彼此相连。骨架可以是线性的或分支的。源于同一骨骼的骨架分支称为同级。骨骼之间的连接点称为关节。在 Fl

9、ash 中可以按两种方式使用 IK。第一种方式是，通过添加将每个实例与其他实例连接在一起的骨骼，用关节连接一系列的元件实例。第二种方式是向形状对象的内部添加骨架。可以在合并绘制模式或对象绘制模式中创建形状。通过骨骼，可以移动形状的各个部分并对其进行动画处理，而无需绘制形状的不同版本或创建补间形状。知识4 声音文件的导入 2.编辑声音文件 操作步骤如下：1）将声音文件导入到Flash文件中。2）打开属性面板，单击面板中的声音选择框，选择要编辑的声音文件“snow.mp3”。3）单击面板上的“编辑声音封套”按钮，弹出如图所示对话框，窗口的第1个框为左声道波形图编辑区，第2个框为右声道图编辑区。 知

10、识4 声音文件的导入 4）在对话框最上方的“效果”选项框中选择编辑效果，有8个选项：无：不播放任何声音。左声道“只有左声道播放声音。右声道：只有右声道播放声音。从左到右淡出：声音从左声道开始播放，并慢慢转移到右声道，最后消失。从右到左淡出：声音从右声道开始播放，并慢慢转移到左声道，最后消失。淡入：音量从低到高。淡出：音量从高到低。自定义：根据自己需要对音量进行调整。5）拖动声音的开始控制点和结束控制点来改变声音播放长度。6）拖动声音的幅度控制来改变声音大小或增加声音幅度控制点创建复杂声音效果。7）编辑完后，单击“确定”按钮回到属性面板。知识4 声音文件的导入 8）在属性面板中，“同步”选项框用

11、来选择一种声音播放的时段，有4种声音方式：事件：播放不受时间轴的限制，即使是影片播放完毕，声音还在继续，直到自身文件播放完毕为止。开始：和事件类似，不同的是，事件方式的声音在遇见新的声音文件时，仍然不会停止，继续播放，而开始方式的声音则会停止，播放新的声音文件。停止：是声音文件停止播放。数据流：声音文件一边下载，一边播放，当影片播放完毕，声音也随之结束。这是一种常用于网络播放的声音方式，主要用于制作背景音乐。9）在“重复”输入框中输入声音播放的循环次数。知识5 动画的发布 1.动画的测试对作品的测试可以随时查看制作效果、检验影片是否存在错误，还可以检验影片是否播放流畅，所以测试是制作Flash

12、动画的重要环节。可以使用【控制】|【测试影片】或【控制】|【测试场景】命令菜单建立不同的测试环境。【控制】|【测试影片】命令：使影片在测试环境中完成播放。【控制】|【测试场景】命令：只能在测试环境中测试当前场景或场景中的遇见，而不能测试整个影片。知识5 动画的发布 2.动画的导出1）导出文件按照输出作品的不同，可以分为导出动画作品和输出静态图像两种。操作方法如下：执行【导出】|【导出图像】菜单命令或【导出】|【导出影片】菜单命令。 在弹出“导出图像”或“导出影片”对话框中设置导出作品的格式、名称和位置，再单击“保存”按钮。 随后又会弹出对话框，在其中设置该作品格式下的参数。最后单击“确定”按钮

13、结束设置。知识5 动画的发布 2）设置导出文件格式Flash Player(*.swf)文件Window AVI(*.avi)文件 QuickTime(*.mov)文件GIF动画(*.gif)文件、GIF序列(*.gif)文件和GIF图像 WAV音频(*.wav)文件EMF序列和增加元文件(*.emf) WMF序列、Windows元文件(*.wmf) EPS 3.0序列、EPS 3.0 (*.eps)文件 Adobe Illustrator序列(*.ai)文件 DXF序列(*.dxf)文件和AutoCAD DXF图像 位图序列（*.bmp）文件和位图文件 JPEG序列(*.jpg)文件和JPE

14、G图像PNG序列(*.png)文件和PNG图像 知识5 动画的发布 3.动画的发布1）文件发布预览作品在发布前，最好先预览以下刚设置好的参数是否合适，如果不合适，可以返回发布设置对话框再重新进行设置。执行【文件】|【发布预览】菜单命令，可以使用选定的发布格式和设置来预览Flash SWF文件。使用此命令的同时会导出文件，并在默认浏览器上打开。2）发布设置执行【文件】|【发布设置】命令，将弹出如图所示对话框。知识5 动画的发布 3.动画的发布1）文件发布预览执行【文件】|【发布预览】菜单命令，可以使用选定的发布格式和设置来预览Flash SWF文件。使用此命令的同时会导出文件，并在默认浏览器上打开。2）发布设置执行【文件】|【发布设置】命令，将弹出如图所示对话框。在格式标签的类型项中选择所要发布的作品类型，并在相应的标签中对发布作品的格式进行设定。单击“发布”按钮，则所发布的格式将以同名文件的形式（扩展名不同）存储在与所打开Flash文件相同的目录下。 知识5 动画的发布 设置SWF动画格式该格式是Flash动画播放作品格式，要想观看Flash作品，就必须选择该格式。打开“Flash”格式设置对话框，如图所示。知识5 动画的发