网页设计实用教程 第13章 使用Flash制作网页动画

13.2.7、 13.2.7、引导动画 将一个或多个层连接到一个运动引导层， 将一个或多个层连接到一个运动引导层，使一个或多个对象沿 同一条路径运动的动画形式称为“引导动画” 同一条路径运动的动画形式称为“引导动画”，这种动画可 以使一个或多个元件完成曲线或不规则运动。 以使一个或多个元件完成曲线或不规则运动。这里的引导层 是用来指示路径的，所以“引导层”中的内容可以是钢笔、 是用来指示路径的，所以“引导层”中的内容可以是钢笔、 铅笔、线条、椭圆、矩形或画笔工具等绘制出的线段， 铅笔、线条、椭圆、矩形或画笔工具等绘制出的线段，而被 引导层中的对象是跟着引导线走的，可以使用影片剪辑、 引导层中的对象是跟着引导线走的，可以使用影片剪辑、图 形元件、按钮和文字等，但不能使用形状。 形元件、按钮和文字等，但不能使用形状。 在Flash CS4中遮罩就是通过遮罩图层中的图形或者文字等对象， CS4中遮罩就是通过遮罩图层中的图形或者文字等对象 中遮罩就是通过遮罩图层中的图形或者文字等对象， 透出下面图层中的内容。打个比方，遮罩层就像一张纸， 透出下面图层中的内容。打个比方，遮罩层就像一张纸，在 这张纸上挖一个洞，当洞下面的物体经过洞口时， 这张纸上挖一个洞，当洞下面的物体经过洞口时，就产生了 一个小动画。 一个小动画。
第13章 13章
使用Flash制作网页 使用Flash制作网页 动画
制作人：曾俊国 制作人：
重点和难点 掌握Flash CS4基础知识 掌握Flash CS4基础知识。 基础知识。 了解Flash CS4的主菜单、工具栏、工具箱。 了解Flash CS4的主菜单、工具栏、工具箱。 的主菜单 掌握制作动画的基本步骤和方法。 掌握制作动画的基本步骤和方法。 掌握元件和库元件的概念及其运用技巧。 掌握元件和库元件的概念及其运用技巧。 在动画中灵活运用声音。 在动画中灵活运用声音。
13.3.3、 13.3.3、在动画中使用声音 CS4中可以导入多种格式的声音文件 中可以导入多种格式的声音文件， 在Flash CS4中可以导入多种格式的声音文件，其导入的 方法与导入图形图像类似，所导入的声音文件与位图、 方法与导入图形图像类似，所导入的声音文件与位图、元件 等一同保存在“ 面板中。 等一同保存在“库”面板中。 13.3.4、 13.3.4、使用视频 CS4中 用户可导入视频剪辑到动画中， 在Flash CS4中，用户可导入视频剪辑到动画中，此时所选视 频文件将成为动画文档的元件， 频文件将成为动画文档的元件，而插入到文档中的内容则成 为了该元件的实例， CS3相比 CS4导入视频文件 相比， 为了该元件的实例，与Flash CS3相比，CS4导入视频文件 的步骤更为简单，操作非常方便。 的步骤更为简单，操作非常方便。
（3）在“工具箱”中选择“颜料桶”工具，按“Shift+F9”组合 工具箱”中选择“颜料桶”工具， Shift+F9”组合 键打开“颜色”面板， 类型”设置为“Radial（ 键打开“颜色”面板，将“类型”设置为“Radial（放射 状）”，在颜色条中设置两个颜色块 （4）用鼠标单击颜色面板上的“颜料桶”按钮，在弹出颜料面板 用鼠标单击颜色面板上的“颜料桶”按钮， 中选择面板底部处的红色渐进颜色，然后用鼠标左键单击“ 中选择面板底部处的红色渐进颜色，然后用鼠标左键单击“心” 图中央，即可看到红色的“ 图中央，即可看到红色的“心”图了 13.2.3、 13.2.3、输入文字 在Flash CS4中创建文本，在“工具箱”中选择“文本” CS4中创建文本 中创建文本， 工具箱”中选择“文本” 工具， Ctrl+F3”组合键打开 属性”面板， 组合键打开“ 工具，按“Ctrl+F3”组合键打开“属性”面板，在属性面板 中可对文本样式进行个性化设置，如设置文本类型、字体、 中可对文本样式进行个性化设置，如设置文本类型、字体、 字号、字体颜色等。 字号、字体颜色等。 13.2.4、 13.2.4、逐帧动画 逐帧动画是一种常见的动画形式， 逐帧动画是一种常见的动画形式，其原理是在连续的关键帧中 绘制不同的动画动作，然后连续播放形成动画， 绘制不同的动画动作，然后连续播放形成动画，该方法主要用于 创建不规则的运动动画，它的每一帧都是关键帧， 创建不规则的运动动画，它的每一帧都是关键帧，可通过逐帧动 画的形式让圣诞贺卡上的“红心”跳动起来。 画的形式让圣诞贺卡上的“红心”跳动起来。
13.1.2、 13.1.2、 Flash CS4概述 CS4概述 Flash CS4是Adobe公司于2008年8月推出的网页动画设计软 CS4是Adobe公司于 公司于2008年 CS4作为最新的 作为最新的Flash版本 版本， 件，Flash CS4作为最新的Flash版本，在其早期版本的基础上 新增了许多功能，运用Flash CS4能制作出更加绚丽 能制作出更加绚丽、 新增了许多功能，运用Flash CS4能制作出更加绚丽、交互性 更强的动画效果。下面简单介绍一下Flash CS4新增的一些特 更强的动画效果。下面简单介绍一下Flash CS4新增的一些特 点及功能。 点及功能。 1．新颖独特及友好的界面风格 2．Flash CS4的新功能 CS4的新功能 3．其他扩展组件
wk.baidu.com
13. 案例剖析： 13.2 案例剖析：制作一张圣诞贺卡
13.2.1、 13.2.1、绘制基本图形 内容再丰富生动的动画也是由若干个基本图形组合而成的。 内容再丰富生动的动画也是由若干个基本图形组合而成的。 设计动画时，首先要规划一下本贺卡的大致模型， 设计动画时，首先要规划一下本贺卡的大致模型，确定动画 剧本内容，并分析涉及到哪些基本的图形。 剧本内容，并分析涉及到哪些基本的图形。本贺卡主要有跳 动的红心图案和一棵圣诞树组成，涉及到的基本图形有圆、 动的红心图案和一棵圣诞树组成，涉及到的基本图形有圆、 三角形、矩形等。 三角形、矩形等。 13.2.2、 13.2.2、编辑图形对象 （1）在“工具栏”中单击“选择”工具按钮，然后移动鼠标， 工具栏”中单击“选择”工具按钮，然后移动鼠标， 框选两个圆，按住组合键“Ctrl+B”将圆做打散操作，接下 框选两个圆，按住组合键“Ctrl+B”将圆做打散操作， 将圆做打散操作 来选择中间相交的两段圆弧， Delete”键将其删除得到 来选择中间相交的两段圆弧，按“Delete”键将其删除得到 红心圆的大致轮廓 。 （2）在“工具箱”中单击“部分选取”工具按钮，然后用鼠 工具箱”中单击“部分选取”工具按钮， 标单击图像， 标单击图像，则图形将显示多个锚点 ，选择下侧中心的锚 并向下拖动，然后选择其相邻的左锚点并按“ 点，并向下拖动，然后选择其相邻的左锚点并按“delete” 按同样的方法删除其相邻的右锚点， 键，按同样的方法删除其相邻的右锚点，得到了一个红心 的雏形
13.2.5、 13.2.5、形状补间动画 所谓形状补间动画，就是由一个对象变成另一个对象， 所谓形状补间动画，就是由一个对象变成另一个对象，而 该过程只需要用户提供两个分别包含有变形前和变形后对象 的关键帧，中间过程由Flash自动完成 在本典型案例中， 自动完成。 的关键帧，中间过程由Flash自动完成。在本典型案例中，可 通过形状补间的动画方式，在圣诞贺卡中添加夜空中的“ 通过形状补间的动画方式，在圣诞贺卡中添加夜空中的“繁 闪烁的效果。 星”闪烁的效果。 13.2.6、 13.2.6、动作补间动画 动作补间动画与形状补间动画类似，二者主要不同的是： 动作补间动画与形状补间动画类似，二者主要不同的是：前 者构成的动画元素是元件，而后者则是图形，至于什么是元件， 者构成的动画元素是元件，而后者则是图形，至于什么是元件， 将在下一节中介绍。在本实例中将利用动作补间动画的原理， 将在下一节中介绍。在本实例中将利用动作补间动画的原理， 在圣诞卡中添加一张不断变化的笑脸。 在圣诞卡中添加一张不断变化的笑脸。
13.4 习题
一、选择题 1、Flash CS4是哪家公司最新开发的动画设计软件（ CS4是哪家公司最新开发的动画设计软件 是哪家公司最新开发的动画设计软件（ ）。 A）微软公司 B）Adobe公司 Adobe公司 C） Macromedia公司 Macromedia公司 2、在工具箱中，下面的哪一工具不属于线条工具（ 在工具箱中，下面的哪一工具不属于线条工具（ ）？ A）“钢笔”工具 钢笔” B）“铅笔”工具 铅笔” C） 刷子” “刷子”工具 3、要对图形进行从中心向四周的填充，应选择哪种类型的填 要对图形进行从中心向四周的填充， 充（ ）？ A）线性 B）放射状 C）位图 4、在Flash的时间轴面板中，创建关键帧的快捷键是（ Flash的时间轴面板中 创建关键帧的快捷键是（ ）？ 的时间轴面板中， A）F1 B）F5 C）F3 D）F6 5、一般默认的动画速度是（ 一般默认的动画速度是（ ）？ A） 12fps B）24fps C）30fps
13. 13.1 Flash CS4 基础 CS4
13.1.1、Flash概述 13.1.1、Flash概述 在学习使用Flash制作动画之前，有必要先了解其相关基本概念: 在学习使用Flash制作动画之前，有必要先了解其相关基本概念: 制作动画之前 1．Stage（舞台） Stage（舞台） 2．Timeline（时间轴） Timeline（时间轴） 3．Frame（帧） Frame（ 4．Key Frame（关键帧） Frame（关键帧） 5．Scene（场景） Scene（场景） 6．Layer（图层） Layer（图层） 7．Symbol（符号） Symbol（符号）
图: 开始菜单中与Flash CS4配套的8个组件 开始菜单中与Flash CS4配套的 配套的8
13.1.3、使用Flash 13.1.3、使用Flash制作动画的过程 Flash制作动画的过程 Flash动画的制作需要经过很多环节的处理， Flash动画的制作需要经过很多环节的处理，每个环节都相 动画的制作需要经过很多环节的处理 当重要。如果处理或制作不好，会直接影响到动画的效果。 当重要。如果处理或制作不好，会直接影响到动画的效果。下 面介绍制作动画的步骤， 面介绍制作动画的步骤，只有对创作动画的流程有一个清楚的 了解，用户才能灵活熟练地制作动画。 了解，用户才能灵活熟练地制作动画。 一般来说，Flash动画制作的过程可分为六步 动画制作的过程可分为六步： 一般来说，Flash动画制作的过程可分为六步： 首先应确定动画剧本及分镜头脚本; （1）首先应确定动画剧本及分镜头脚本; 设计不同的动画人物形象， （2）设计不同的动画人物形象，一般由具有一定美术功底的动 画设计人员设计; 画设计人员设计; 绘制、编排出分镜头画面脚本; （3）绘制、编排出分镜头画面脚本; 动画绘制人员进行具体的动画绘制; （4）动画绘制人员进行具体的动画绘制; 将相关动画导入到flash中 进行后期制作; （5）将相关动画导入到flash中，进行后期制作; 剪辑配音。 （6）剪辑配音。
13. Flash中多媒体元素的使用 13.3 Flash中多媒体元素的使用
在上一节所举的实例中反复用到了元件，可见元件在Flash 在上一节所举的实例中反复用到了元件，可见元件在Flash CS4的应用中非常广泛 也是非常重要的， CS4的应用中非常广泛，也是非常重要的，通过元件的制作 的应用中非常广泛， 并存入到“ 面板中，从而起到重复使用的作用， 并存入到“库”面板中，从而起到重复使用的作用，以提高 动画制作的效率。根据元件的作用不同，可将其分为图形元 动画制作的效率。根据元件的作用不同， 影片剪辑元件和按钮元件。 CS4除了制作动画外 除了制作动画外， 件、影片剪辑元件和按钮元件。Flash CS4除了制作动画外， 对声音和视频的支持也相当出色， CS4能提供多种使 对声音和视频的支持也相当出色，Flash CS4能提供多种使 用声音的方法，还支持多种视频格式， 用声音的方法，还支持多种视频格式，能制作出令人满意的 作品。 作品。 13.3.1、 13.3.1、创建库元件 1．新建库元件 2．导入库元件 13.3.2、 13.3.2、创建库元件 “按钮”是Flash的基本元件之一，它具有多种形态，并且会响应 按钮” Flash的基本元件之一 它具有多种形态， 的基本元件之一， 鼠标事件，执行指定的动作，是实现动画交互效果的关键对象。 鼠标事件，执行指定的动作，是实现动画交互效果的关键对象。 1．按钮元件的组成 2．制作按钮元件的过程