8.2 基本动画制作及网站动态banner制作（课件）-高二《网页设计与制作》同步教学（北京出版社）

8.2 基本动画制作及网站动态banner制作 任务导入： 经过老张的指导和自己的努力，小赵已经掌握了Flash文件的新建和保存，熟悉了软件的工作界面及动画制作的基本知识。接下来，到底该如何制作动画呢？本任务将学习Flash动画中5种动画（逐帧动画、形状补间动画、动作补间动画、遮罩动画、引导路径动画）的制作方法，并学习制作动态banner的方法。 学习目标： 1）掌握逐帧动画、形状补间动画、动作补间动画、遮罩动画、引导路径动 画五种基本动画的制作方法。 3）掌握动画的测试、优化与发布。 4）掌握网站动态banner的制作方法。 8.2.1 制作逐帧动画——翱翔的鹰（一） 逐帧动画是最传统的动画方式，它是通过细微差别的连续帧画面，来完成动画作品。因此，帧动画的每1帧都有一个关键帧，也就是每个帧都可以放置不同的图形，这种在不同的时间段（帧）放置变化的图形，以此构成的动画就是逐帧动画。 逐帧动画的制作方法包括两个要点，一是逐帧添加关键帧，二是在关键帧中绘制不同的图形。 下面以制作一只“翱翔的鹰”飞舞动画为例，学习具体制作方法。 8.2.1 制作逐帧动画——翱翔的鹰（二） 新建文档 新建Flash文档，如图设置新文档大小为“250×222”。 8.2.1 制作逐帧动画——翱翔的鹰（三） 导入外部素材 单击“文件”菜单→“导入”→“导入到库”命令，在“导入到库”对话框中，选择需要素材文件夹下的的飞鹰文件夹下所有图片，单击“打开”按钮。导入后，可以在“库”面板内看到导入的文件。 8.2.1 制作逐帧动画——翱翔的鹰（四） 因为有15幅图片，所以在新建的Flash文档中，单击第2帧并拖动至第15帧，选中这15帧。点击右键，在弹出的快捷菜单中选择“转换为关键帧”，此时效果如图8-24所示。另外，也可以“插入”菜单→“时间轴”→“转换为关键帧”命令，或按下快捷键F6键，同样可以转换为关键帧。 选中第一帧，在“库”中面板，选中第一张图片，然后左键按下不放，把图片拖到舞台中。并调成属性栏的坐标为（X:0，Y:0），使图片位于舞台中央（前提是图片和舞台同样大小）如图所示。 用同样的方法，把剩下的14幅图片分别插入到剩下的14帧中，按住红色小框不放并向后拉动。在舞台内可以浏览到此时效果。 8.2.1 制作逐帧动画——翱翔的鹰（五） 保存影片。选择“文件”菜单→“保存”命令，在弹出的“另存为”对话框中，指定影片保存的文件夹，输入文件名，单击“保存”按钮。这样我们就将影片文档保存起来了，文件的扩展名是fla。 测试电影。选择“控制”菜单→“测试影片”命令，或按Ctrl+Enter键，将弹出测试窗口，在窗口中可以观察到影片的效果，并且还可以对影片进行调试。关闭测试窗口可以返回到影片编辑窗口对影片继续编辑。 接下来在刚才文档保存的文件夹，可以观察到两个文件，如图所示。左边是影片文档源文件（扩展名是fla），也就是第（6）步保存的文件。右边是影片播放文件（扩展名是swf），也就是第（7）步测试影片时自动产生的文件。直接双击影片播放文件可以在Flash播放器中播放动画。 8.2.2 制作形状补间动画：五边形变成五角星（一） Flash可以创建两种类型的补间动画：补间动画和补间形状，我们在此先学习补间形状。通过补间形状，可以创建类似于形变的效果，使一个形状看起来随着时间变成另一个形状，就像《西游记》中孙悟空的“七十二般变化”一样。Flash可以补间形状的位置、大小、颜色。 补间形状的基本制作方法是，在一个关键帧上绘制一个形状，然后在另一个关键帧更改该形状或绘制另一个形状。接着定义补间形状，Flash就会自动补上中间的形状渐变过程。 下面制作一个五边形变成五角星的动画效果，如图所示。 五边形变成五角星 8.2.2 制作形状补间动画：五边形变成五角星（一） 新建一个Flash文档，保持文档属性默认设置。 选择“多角星形工具”，在舞台上绘制一个无边框红色填充的五边形。 在“图层1”的第20帧，按F7键插入一个空白关键帧，如图所示。 绘制五边形 插入关键帧 8.2.2 制作形状补间动画：五边形变成五角星（二） 用“矩形工具”中的多边星形工具，在“工具设置”对话框中，设置“样式”为“星形”，单击“确定”按钮绘制一个无边框红色填充的五角星。 添加补间动画。选择第1帧，在“属性”面板中选择“补间”下拉列表中的“形状”。这时，“图层1”第1帧到第20帧之间出现了一条带箭头的实线，并且第1帧到第20帧之间的帧格变成绿色。这样就制作完成了一个补间形状动画。 按下Enter键，可以看到一个五边形逐渐变化为五角形。 定义补间形状 8.2.3 制作动作补间动画：鹰飞天空（一） 动作补间动画的基本制作方法是，在一