《网页设计与制作教程》-第十七章讲稿

第十七章Flash动画Flash软件的三大基本功能是补间动画、绘图和遮罩，它们是Flash软件的基础。其中补间动画是Flash的核心功能，使用补间动画可以自动生成动画一些中间画面，简化了动画制作过程，提高了动画制作效率。Flash动画主要分为逐帧动画和补间动画。17.1补间动画补间动画是在起始帧和终止帧之间自动生成动画的一种动画制作方式。补间动画是一种计算机自动生成的动画。补间动画分为动作补间和形状补间两种形式。

17.1.1制作补间动画【例17-1】制作了一个补间动画，创建补间动画过程如下：

首先创建一个新的Flash文档，选择菜单栏的【文件】→【新建】→【Flash文档】，点击确定创建。

用鼠标点击图层1的第一帧，表示选中图层1的第1帧，将要在此帧的舞台上添加对象。17.1.1制作补间动画选择Flash绘图工具栏中的椭圆工具，然后在“椭圆”工具属性面板中设置“椭圆”工具的笔触颜色为黑色，填充颜色为蓝色。将鼠标移动到舞台中央绘制一个圆，按住shift键并拖曳鼠标即可实现。

选择Flash绘图工具栏中的“选择”工具，将鼠标移动到舞台并框选刚绘制的蓝色圆，然后选择菜单栏【修改】→【转换为元件】，弹出元件定义对话框，元件命名为“蓝色圆”，并设置为图形元件。17.1.1制作补间动画将鼠标移动到图层1的第60帧，然后点击右键，选择“插入关键帧”，这时在第1帧与第60帧之间由Flash软件自动插入普通帧。

选中第1帧，然后将舞台上的蓝色小球移动到舞台的左侧，再选中第60帧，并将舞台中的蓝色小球移动到舞台右侧。

在第1帧到第60帧之间选择任意一帧，然后点击右键，选择“创建补间动画”，得到如图17-1所示的动画。

图17-1补间动画17.1.1制作补间动画选择菜单栏的【控制】→【测试影片】，可以看到一个蓝色的小球从左边移动到右边。

上述动画制作过程中仅绘制两个帧的舞台内容，即起始关键帧和终止关键帧。其它中间的普通帧的内容由Flash软件自动生成。17.1.1制作补间动画分解上述动画，小球起始位置在左侧，终止位置在右侧，要产生从左到右的动画效果，中间帧必须在舞台上绘制小球所处的一些中间位置，如图17-2所示Flash生成的第30帧位置。图17-2补间动画第30帧舞台中小球的位置

17.1.1制作补间动画Flash可以制作各种类型的补间动画，补间动画是Flash主要的动画实现技术，下面我们讲到的形状动画、移动动画、旋转动画、引导线动画和遮罩动画，都可以使用补间动画这种动画制作技术来实现。17.2Flash动画制作Flash按照实现动画技术可以分为逐帧动画和补间动画，按照动画的效果可以分为移动动画、形状动画、旋转动画、引导线动画和遮罩动画。大多数Flash动画都会包括多种动画效果。17.2.1移动动画移动动画就是指动画中的对象有位置移动的动画。制作移动动画的关键是确定起始帧舞台图形的位置和终止帧舞台图形的位置。制作移动动画的对象可以是线条、图形、文字或位图等对象。下面制作一个移动动画，【例17-2】制作了一个文字移动动画，主要步骤如下：

17.2.1移动动画创建一个新的Flash文档，选择菜单栏的【文件】→【新建】→【Flash文档】，点击确定创建。

用鼠标点击图层1的第1帧，表示选中图层1的第1帧，将要在此帧的舞台上添加对象。

选择Flash绘图工具栏中的“文本”工具，然后在“文本”工具属性面板中设置文本工具。设置文字大小为38，文字颜色为蓝色，字体为“华文琥珀”，文字加粗，水平布局选择左对齐。17.2.1移动动画将鼠标移动到舞台中央输入文字“Flash移动文字”。选择Flash绘图工具栏中的“选择”工具，将鼠标移动到舞台并“框选”刚输入的文字对象，然后选择菜单栏的【修改】→【转换为元件】，弹出元件定义对话框，元件命名为“文字”，并设置为图形元件。17.2.1移动动画将鼠标移动到图层1的第60帧，然后点击右键，选择“插入关键帧”，这时在第1帧与第60帧之间由Flash软件自动插入普通帧。

选中第1帧，然后将舞台上的文字对象移动到舞台的右下角，再选中第60帧，并将舞台中的文本对象移动到舞台左上角。

在第1帧到第60帧之间选择任意一帧，然后点击右键，选择“创建补间动画”，得到如图17-3所示的动画。

图17-3文字移动动画17.2.1移动动画选择菜单栏的【控制】→【测试影片】，可以看到文字对象从右下角移动到左上角。

17.2.2形状动画形状动画是指动画中对象的形状有所改变的动画。形状动画的关键是定义起始帧舞台对象的形状和终止帧舞台对象的形状。形状动画分两种类型：一种完全形状动画，就是形状动画的起始帧和终止帧对象是完全不同的两个对象。一种是部分形状动画，就是形状动画的起始帧和终止帧是同一个对象，只不过它们大小、形状、颜色或透明度等属性不同。17.2.2形状动画完全形状动画

首先必须将文字或位图对象打散。打散处理过程是首先选中被打散的对象，然后选择菜单栏的【修改】→【分离】，对象被打散后转换成图形。【例17-3】制作了一个完全形状动画，主要制作步骤如下：

17.2.2形状动画完全形状动画

创建一个新的Flash文档，选择菜单栏的【文件】→【新建】→【Flash文档】，点击确定创建。

用鼠标点击图层1的第1帧，表示选中图层1的第1帧，将要在此帧的舞台上添加对象。

17.2.2形状动画完全形状动画

选择Flash绘图工具栏中的“文本”工具，然后在“文本”工具属性面板中设置文本工具。设置文字大小为78，文字颜色为蓝色，字体为“WideLatin”，文字加粗，水平布局选择左对齐。

将鼠标移动到舞台中央输入文字“Flash”。选择Flash绘图工具栏中的“选择”工具，将鼠标移动到舞台并“框选”刚输入的文字对象，然后选择菜单栏的【修改】→【分离】，“Flash”文字被分离为四个对象，如图17-4所示，然后再次选择【修改】→【分离】，“Flash”文本被彻底的分离为图形，如图17-5所示，这样文本对象才能制作形状动画。图17-4文本对象被打散过一次后的效果图17-5文本对象被打散过两次后的效果17.2.2形状动画完全形状动画

将鼠标移动到图层1的第60帧，然后点击右键，选择“插入空白关键帧”，这时在第1帧与第60帧之间由Flash软件自动插入普通帧。选择绘图工具栏中的“文本”工具，在舞台中输入文本17.2.2形状动画完全形状动画

“Dreamweaver”，然后选择菜单栏的【修改】→【分离】将文字打散，每个字母作为一个对象存在，然后再次选择菜单栏的【修改】→【分离】将文字打散，最终变为图形对象。

在第1帧到第60帧之间选择任意一帧，然后打开属性面板，选择“补间类型”下拉列表，选择【形状】，得到如图17-6所示的动画。

选择菜单栏的【控制】→【测试影片】，可以看到文字对象“Flash”逐渐变成为文字对象“Dreamweaver”的动画效果。图17-6形状动画17.2.2形状动画部分形状动画

部分形状动画主要用于制作舞台中对象本身发生形状、大小、透明度或颜色等变化的动画。【例17-4】制作一个文字由小到大，并且由透明到清晰的形状动画，制作步骤如下：17.2.2形状动画部分形状动画

创建一个新的Flash文档，选择菜单栏的【文件】→【新建】→【Flash文档】，点击确定创建。

用鼠标点击图层1的第1帧，表示选中图层1的第1帧，将要在此帧的舞台上添加对象。

选择Flash绘图工具栏中的“文本”工具，然后在“文本”工具属性面板中设置文本工具。设置文字大小为78，文字颜色为蓝色，字体为“WideLatin”，文字加粗，水平布局选择左对齐。

将鼠标移动到舞台中央输入文字“Flash”。17.2.2形状动画部分形状动画

将鼠标移动到图层1的第60帧，然后点击右键，选择“插入关键帧”，这时在第1帧与第60帧之间由Flash软件自动插入普通帧。

选择图层1的第1帧，选择绘图工具栏中的“任意变形”工具，在舞台中点击文本对象，控制任意变形工具缩小舞台中的文本。然后打开属性面板，选择“颜色”下拉列表中的Alpha选项，右边弹出Alpha值的设置拉杆，调整文本对象的透明度。17.2.2形状动画部分形状动画

在第1帧到第60帧之间选择任意一帧，右键点击，选择“创建补间动画”。得到如图17-7所示的动画。

选择菜单栏的【控制】→【测试影片】，可以看到文字对象“Flash”逐渐变大，并且越来越清晰的动画效果。

图17-7文本的放大效果动画17.2.3旋转动画旋转动画是指可以实现对象旋转效果的动画。旋转动画的关键是定义对象的起始状态和对象的终止状态。制作旋转动画需要舞台对象是元件或对象。【例17-5】制作一个文字旋转的动画，制作步骤如下：

17.2.3旋转动画创建一个新的Flash文档，选择菜单栏的【文件】→【新建】→【Flash文档】，点击确定创建。用鼠标点击图层1的第1帧，表示选中图层1的第1帧，将要在此帧的舞台上添加对象。

选择Flash绘图工具栏中的“文本”工具，然后在“文本”工具属性面板中设置文本工具。设置文字大小为58，文字颜色为蓝色，字体为“WideLatin”，文字加粗，水平布局选择左对齐。

将鼠标移动到舞台中央输入文字“Flash”。

17.2.3旋转动画将鼠标移动到图层1的第60帧，然后点击右键，选择“插入关键帧”，这时在第1帧与第60帧之间由Flash软件自动插入普通帧。

在第1帧到第60帧之间选择任意一帧，打开属性面板，选择“补间类型”下拉列表框，选择动画，选择旋转选项为“顺时针”，选中次数设置为3次，属性面板如图17-8所示。

选择菜单栏的【控制】→【测试影片】，可以看到文字对象“Flash”顺时针旋转。图17-8旋转动画属性面板17.2.4引导线动画引导线动画是指舞台中的对象沿着引导线运动。引导线动画关键是绘制一个用于引导的线条和确定引导线动画的起始和终止的位置。【例17-6】制作一个小球沿着固定引导线运动的动画，制作步骤如下：

17.2.4引导线动画创建一个新的Flash文档，选择菜单栏的【文件】→【新建】→【Flash文档】，点击确定创建。用鼠标点击图层1的第1帧，表示选中图层1的第1帧，将要在此帧的舞台上添加对象。

选择Flash绘图工具栏中的“椭圆”工具，然后在“椭圆”工具属性面板中设置椭圆工具的属性。笔触颜色设置为黑色，填充色设置为蓝色。

使用“椭圆”工具在舞台上绘制一个蓝色小球，然后用绘图工具栏的“选择”工具“框选”小球，选择菜单栏的【修改】→【转换为图形元件】，将小球转换为元件，取名为圆。17.2.4引导线动画将鼠标移动到图层1的第60帧，然后点击右键，选择“插入关键帧”，这时在第1帧与第60帧之间由Flash软件自动插入普通帧。

建立当前图层的引导层，首先选中当前图层，然后点击图层面板中的添加运动引导线按钮，在当前图层上面产生一个引导层。

选中引导层的任意一帧，然后使用Flash的绘图工具绘制一个弧形的引导线。

17.2.4引导线动画选中图层1的第1帧，然后在舞台上用鼠标按住蓝色小球的中心点，将其拖曳到引导线的起始点，并且必须让小球的中心与引导线的起点重合。当小球中心点与引导线起点重合时，小球中心会变为一个稍大的圆圈。同样，选中图层1的第60帧，用鼠标拖曳小球的中心，将其拖曳到引导线的终点。这样就定义好引导线动画的起始点和终止点。

17.2.4引导线动画在第1帧到第60帧之间选择任意一帧，点击右键选择“创建补间动画”。

选择菜单栏的【控制】→【测试影片】，可以看到蓝色小球沿着弧形引导线运动，如图17-9所示。

图17-9引导线动画17.2.5遮罩动画遮罩动画是通过遮罩效果实现的动画，遮罩效果是使用遮罩图层的对象对其它图层的对象进行遮罩，从而产生被遮罩图层内对象局部显现的效果。遮罩动画的关键是定义用于遮罩其它层的遮罩层，以及被遮罩的层。

17.2.5遮罩动画遮罩动画中，遮罩图层中的对象是不可见的，遮罩层中的对象会变为透明效果，显示被遮罩层的对象。遮罩层中的对象可以是文字、图形、影片剪辑、按钮等，但不能使用线条。如果想使用线条，必须首先将线条转换为填充。17.2.5遮罩动画遮罩动画中，被遮罩层的对象只能透过遮罩层内的对象显示出来。遮罩层中可以使用文字、图形、影片剪辑、按钮和线条。

遮罩层和被遮罩层中的动画可以是移动动画、形状动画、旋转动画、引导线动画，也可以是几种动画的混合。17.2.5遮罩动画【例17-7】制作了一个遮罩动画，主要制作步骤如下：

创建一个新的Flash文档，选择菜单栏的【文件】→【新建】→【Flash文档】，点击确定创建。在舞台上单击，然后打开属性面板，画布大小选择600px×600px，背景选择黑色。17.2.5遮罩动画选中图层1的第1帧，然后选择绘图工具栏中的“文本”工具，在“文本”工具的属性面板设置字体为“_sans”，字体大小为68，字体颜色为红色。在舞台上输入文本“Flash遮罩效果”。然后选择图层1的第60帧，点击右键，选择插入关键帧，从第1到第60帧之间自动添加普通帧。制作遮罩动画时，将图层1作为被遮罩层。

17.2.5遮罩动画选择图层面板中的添加图层按钮，添加新的图层2。选中图层2的第1帧，选择Flash绘图工具栏中的“椭圆”工具，然后在“椭圆”工具属性面板中设置椭圆工具的属性。“笔触”颜色设置为黑色，“填充色”设置为蓝色。

17.2.5遮罩动画使用“椭圆”工具在舞台上绘制一个蓝色小球，然后将小球转换为元件。用绘图工具栏的“选择”工具“框选”小球，选择菜单栏的【修改】→【转换为图形元件】，将小球转换为元件，取名为“圆”。

将鼠标移动到图层2的第60帧，然后点击右键，选择“插入关键帧”，这时在第1帧与第60帧之间由Flash软件自动插入普通帧。选中图层2第1帧，然后将舞台上蓝色圆移动到文本“Flash遮罩效果”的左侧，并与之保持同一水平位置，如图17-10所示。选中图层2第60帧，然后将舞台中的蓝色圆移动到文本“Flash遮罩效果”的右侧，并与之保持同一水平位置。图17-10遮罩层蓝色小球定位17.2.5遮罩动画选中图层2的第1帧到第60帧之间的任意一帧，点击右键，然后选择“创建补间动画”。

在图层管理面板中，选中图层2并点击右键，右键弹出菜单上选择“遮罩层”。

选择菜单栏的【控制】→【测试影片】，可以看到一个圆形透照区域从左移动到右，如图17-11所示。图17-11遮罩动画17.2.6动画中添加声音动画中添加声音既可以增强动画的交互性，又可以使动画变得更加生动。动画设计时可以根据设计需要为动画中的对象添加声音。动画中添加声音的关键是选择导入的声音文件，控制声音在动画中的播放效果。Flash动画可以添加的音频文件格式有MP3、WAV、AIFF等。【例17-8】制作了一个添加声音的动画，制作步骤如下：

创建一个新的Flash文档，选择菜单栏的【文件】→【新建】→【Flash文档】，点击确定创建。

17.2.6动画中添加声音选中图层1的第1帧，使用绘图工具栏的“椭圆”工具在舞台上绘制一个椭圆。使用“选择”工具“框选”绘制的椭圆，选择菜单栏中的【修改】→【转换为元件】，将椭圆转换为元件。

17.2.6动画中添加声音选中图层1的第60帧，点击右键菜单选择“插入关键帧”。选中图层1的第1帧，将舞台中椭圆拖动到舞台的左侧，然后选中图层1的第60帧，将舞台中的椭圆移动到舞台右侧。在第1帧与第60帧之间选择任意一帧，点击右键并创建补间动画。

17.2.6动画中添加声音导入音乐到库，选择菜单栏中的【文件】→【导入】→【导入到库】，选择导入音乐的路径并将文件导入到元件库中。

选择图层面板中的添加图层按钮，添加新的图层2。选中图层2的第1帧，然后从元件库中选择要插入的音乐，并用鼠标将其拖入到舞台。将鼠标移动到图层2的第60帧然后选择插入关键帧。

17.2.6动画中添加声音选择菜单栏的【控制】→【测试影片】，可以看到一个椭圆伴随着音乐从左移动到右，如图17-12所示。

图17-12声音动画17.2.7动画应用实际上Flash动画制作过程中会同时使用一种或几种动画形式，【例17-9】制作一个企鹅旋转并淡入淡出的引导线动画，动画制作步骤如下：

17.2.7动画应用创建一个新的Flash文档，选择菜单栏的【文件】→【新建】→【Flash文档】，点击确定创建。

导入企鹅图像到库，选择菜单栏的【文件】→【导入】→【导入到库】，将绘制有企鹅的位图文件导入到Flash元件库中，企鹅位图作为一个元件存在于库中。

导入音乐到库，选择菜单栏的【文件】→【导入】→【导入到库】，将“企鹅旋转伴音”的音乐导入到Flash元件库中，命名为“企鹅旋转伴音”，音乐作为一个元件存在于库中。如图17-13所示。图17-13位图与声音元件17.2.7动画应用创建一个企鹅旋转的影片剪辑，选择菜单栏中的【插入】→【新建元件】，类型选择“影片剪辑”，取名为“旋转企鹅”。进入影片剪辑的编辑场景，鼠标点击影片剪辑场景中的图层1的第1帧，选择元件库中的企鹅，并用鼠标将其拖曳到舞台上。然后在影片剪辑场景中的图层1选中第38帧，选择元件库中的企鹅，并用鼠标将其拖曳到舞台上。17.2.7动画应用在影片剪辑中的第1帧到第38帧之间任意选择一帧，然后右键点击，选择“创建补间动画”。然后打开属性面板，补间类型选择“动画”，旋转选项选择“顺时针”，旋转次数选择3次。选择旋转企鹅场景的图层面板，点击图层添加按钮，新建图层2。选择新建的图层2的第1帧，然后选择元件库中的音乐并将其拖曳到舞台中。17.2.7动画应用在属性面板中【同步声音】选择“数据流”，【声音循环】选择“循环”。这样伴有音乐的旋转企鹅影片剪辑制作完毕，在元件库中生成一个名为“旋转企鹅”的影片剪辑元件，如图17-14所示，“旋转企鹅”影片剪辑最终的设计场景如图17-15所示。图17-14旋转企鹅影片剪辑图17-15影片剪辑设计场景17.2.7动画应用点击时间轴左上角的场景1，回到主场景，选中图层1的第1帧，在元件库中选择“旋转企鹅”影片剪辑，并用鼠标将其拖曳到舞台。在主场景中，选中图层1的第30帧，点击右键，选择“插入关键帧”。在主场景中，选中图层1的第60帧，点击右键，选择插入关键帧。

17.2.7动画应用然后选中主场景中的图层1的第30帧，选中绘图工具栏中的“任意变形”工具点击舞台中的企鹅图标，编辑企鹅对象的形状，将图像缩小到约原来的一半大小。然后通过Alpha值调整企鹅的透明度，选中主场景中图层1第30帧舞台中的企鹅图像，选择绘图工具栏的“选择”工具，选中企鹅影片剪辑，打开属性面板，颜色样式选择“Alpha”，并使用右边的拉杆调整Alpha值为18%，企鹅图像变成半透明