网页设计第15章.pptVIP

第15章 基本动画制作 内容提要 逐帧动画 形状补间动画 动作补间动画 遮罩动画 引导路径动画 动画实例 15.1 逐帧动画 创建逐帧动画的几种方法 制作过程 15.1 逐帧动画(续) 1. 什么是逐帧动画 逐帧动画也叫“帧帧动画”，它需要具体定义每一帧的内容，以完成动画的创建。 2. 特点 需要对每帧画进行控制，设置它们的颜色、形状和大小等变化。 在时间帧上表现为连续出现的关键帧 复杂的动画，尤其是一个图形在每帧上都有变化，但又不是简单的运动变化的动画，适合于用逐帧动画来制作。 逐帧动画的大小增加得比渐变动画要快。 创建逐帧动画的几种方法 用导入的静态图片建立逐帧动画 绘制矢量逐帧动画 文字逐帧动画 指令逐帧动画 导入序列图像 制作过程 例1：制作闪烁的星星。 步骤如下： 1．新建一个动画文件，在“时间轴”面板上双击当前图层名并重新命名为“背景”，在“属性”面板中设置背景色为深蓝色，并在第8帧处按F5键插入普通帧（这时蓝色的背景一直沿用到第8帧）。 2．在“时间轴”面板的当前层上右击，在弹出的快捷菜单中选择“插入图层”命令，并重命名为“星星”。 3．单击“星星”层的第1帧，选择“矩形工具”，设置“笔触颜色”为无，“填充颜色”为#A5A092(可以根据自己的需要来选择填充颜色)，按住Shift键，在舞台上画出一个正方形。 4．选中图形，选择“修改”|“变形”|“缩放和旋转…”命令，在弹出的对话框中设置旋转角度为45°。 制作过程(续) 5．利用“选择工具”调整这个图形。 6．利用“选择工具”选中图形，按F8键，在弹出的“转换为元件”对话框中设置元件名称为“星星”，并选择元件类型为“图形”。（这时舞台上的图形变成了一个实例） 7．选择“星星”层的第2帧，按F6键，插入关键帧。选中图形，然后选择“任意变形工具”将图形适当地缩小，在“属性”面板的“颜色：”下拉列表中选择“Alpha”（透明），并将透明度值适当调小些。 8．重复第7步的操作，设置第3、4、5、6、7、8帧实例的属性。要求每一帧比前一帧变小，透明度降低。第8帧上的实例设置为完全透明。 预览动画的方法 直接在场景窗口敲回车键预览，当前场景上的各帧内容依次播放一遍。 选择菜单命令“控制”|“测试场景”，Flash打开一个专门的窗口预览，循环播放当前场景的各帧内容。关闭预览就可以回到场景编辑窗口，继续编辑。 选择菜单命令“控制”|“测试影片”，在打开的一个专门的预览窗口中依次循环播放各场景的动画。 形状补间动画 1. 什么是形状补间动画 在一个关键帧中绘制一个形状，然后在另一个关键帧中更改该形状或绘制另一个形状，Flash 根据二者之间的帧的值或形状来创建的动画。 2.创建形状补间动画的方法 在时间轴面板上动画开始播放的地方创建或选择一个关键帧并设置要开始变形的形状，一般一帧中以一个对象为好，在动画结束处创建或选择一个关键帧并设置要变成的形状，再单击开始帧，在“属性”面板上单击“补间”旁边的小三角，在弹出的菜单中选择“形状”，一个形状补间动画就创建完毕。 形状补间动画制作过程 例2：变形文字。 步骤如下： 1．新建一个文档。在“属性”面板中设置影片的大小为500×400像素，背景色为白色。 2．选中“工具栏”中的“文本工具”，在舞台上单击并输入大写字母“A”，选中字母“A”，在文本“属性”面板中设置字体为“黑体”、字号“96”、“粗体”、颜色为“红色”（#FF0000）。 3．在第10、20、30帧处分别按F6键建立关键帧，用“文本工具”将第10帧的文字改为“B”、颜色改为“绿色”（#00FF00），将第20帧的文字改为“C”、颜色改为“蓝色”（#0000FF），将第30帧的文字改为“D”、颜色改为“黄色”（#FFFF00）。 形状补间动画制作过程（续） 4．分别选择各关键帧的文字，选择菜单命令“修改”|“分离”，将各关键帧上的文字打散。 5．创建形状补间动画。分别选择第1、10、20帧，将其“属性”面板中的“补间”设为“形状”。 6．按Ctrl+Enter快捷键预览动画。 动作补间动画 1. 什么是动作补间动画 给一个对象在两个关键帧分别定义不同的属性，如颜色、大小 、方位和角度等，并在两个关键帧之间建立一种变化关系，即运动渐变关系。 2. 创建动作补间动画的方法 先创建好两个帧的状态，然后在两个关键帧之间建立动作补间关系。 先创建好起点关键帧，然后给此帧赋予动作补间模式，再去创建终点关键帧，两帧之间就建立了动作补间关系。 动作补间动画的属性面板 动作补间动画的属性面板（续） 2. “旋转”选项 选择“无”（默认设置）可禁止元件旋转； 选择“自动”可使元件在需要最小动作的方向上旋转对象一次；