flashcs3基础动画制作.ppt

第2章 基础动画,动画的原理和“时间轴”面板 使用帧 使用图层 使用场景 创建动画 滤镜与混合,本章重点：,前一章我们讲解了Flash CS3的相关基础知识，本章将具体讲解在Flash CS3中制作基础动画的方法。通过本章学习应掌握一下内容：,2. 1 动画的原理和时间轴面板,提到动画，大家一定会联想到小时候看的卡通影片。这些精彩的卡通影片，都是事先绘制好一帧一帧的连续动作的图片，然后让它们连续播放，利用人的“视觉暂留”特性，在大脑中形成了动画效果。 Flash动画的制作原理也一样，它是把绘制出来的对象放到一格格的帧中，然后进行播放，从而产生动画效果。,2.1.1 动画的原理,在Flash中时间轴位于舞台的正上方，如图2-1所示。它是进行Flash作品创作的核心部分，主要用于组织动画各帧中的内容，并可以控制动画在某一段时间内显示的内容。时间轴从形式上看分为两部分：左侧的图层控制区和右侧的帧控制区。,2.1.2 时间轴面板,帧是形成动画最基本的时间单位，不同的帧对应着不同的时刻。在逐帧动画中，需要在每一个帧上创建一个画面，画面随着时间的推移而连续出现，形成动画；补间动画只需确定动画起点帧和终点帧的画面，而中间部分的画面由Flash根据两帧的内容自动生成。,2. 2 使用帧,2.2.1 播放头,“播放头”以红色矩形 表示，用于指示当前显示在舞台中的帧。使用鼠标沿着时间周左右拖动播放头，从一个区域移动到另一个区域，可以预览动画。,在时间轴上，每5帧有一个“帧序号”标识，单击时间轴右上角的 （帧视图）按钮，会弹出图2-2所示的下拉菜单，通过选择菜单中不同的选项可以改变时间轴中帧的显示模式。,2.2.2 改变帧视图,图2-2 下拉菜单,Flash中关键帧分为空白关键帧、关键帧、普通帧、普通空白帧4种，它们的显示状态如图2-3所示。,2.2.3 帧类型,空白关键帧：空白关键帧显示为空心圆，可以在上面创建内容，一旦创建了内容，空白关键帧就变成了关键帧。 关键帧：关键帧显示为实心圆点，用于定义动画的变化环节，逐帧动画的每一帧都是关键帧，而补间动画则在动画的重要位置创建关键帧。 普通帧：普通帧显示为一个个单元格，不同颜色代表不同的动画，如“动作补间动画”的普通帧显示为浅蓝色；“形状补间动画”的普通帧显示为浅绿色；而静止关键帧后面的普通帧显示为灰色。 普通空白帧：普通空白帧显示为白色，表示该帧没有任何内容。,编辑帧的操作是制作动画时使用频率最高、最基本的操作，主要包括插入帧、删除帧等，这些操作都可以通过帧的快捷菜单命令来实现，调出快捷菜单的具体操作步骤如下：选中需要编辑的帧，然后单击鼠标右键，从弹出的图2-4所示的快捷菜单中选择相关命令即可。 编辑关键帧除了快捷菜单外，在实际工作中我们还经常使用快捷键，下面是常用的编辑帧的快捷键： “插入帧”的快捷键F5； “删除帧”的快捷键Shift+F5； “插入关键帧”的快捷键F6； “插入空白关键帧”的快捷键F7； “清除关键帧”的快捷键Shift+F6；,2.2.4 编辑帧,图2-4 编辑帧的快捷菜单,通常在Flash工作区中只能看到一帧的画面，如果使用了多帧显示，则可同时显示或编辑多个帧的内容，从而便于对整个影片中的对象进行定位。多帧显示包括 （滚动到播放头）、 （绘图纸外观）、 （绘图纸外观轮廓）、（ 编辑多个帧）和 （修改绘图纸标志）5个按钮，如图2-5所示。,2.2.5 多帧显示,1.滚动到播放头,单击 (滚动到播放头）按钮，可以将播放头标记的帧在帧控制区中居中显示，如图2-6所示。,单击 （滚动到播放头）按钮前 单击 （滚动到播放头）按钮前,图2-6 （滚动到播放头）按钮前后效果比较,2.绘图纸外观,单击 （绘图纸外观）按钮，在播放头的左右会出现绘图纸的起始点和终止点，位于绘图纸之间的帧在工作区中由深至浅显示出来，当前帧的颜色最深，如图2-7所示。,图2-7 （绘图纸外观）效果,3.绘图纸外观轮廓,单击 （绘图纸外观轮廓）按钮，可以只显示对象的轮廓线，如图2-8所示。,图2-8 （绘图纸外观轮廓）效果,4.编辑多个帧,单击 （编辑多个帧）按钮，可以对选定为绘图纸区域中的关键帧进行编辑，例如改变对象的大小、颜色、位置、角度等。,图2-9 （编辑多个帧）效果,5.修改绘图纸标志,（修改绘图纸标志）按钮的主要功能就是修改当前绘图纸的标记。通常情况下，移动播放头的位置，绘图纸的位置也会随之发生相应的变化。单击该按钮，会弹出图2-10所示的快捷菜单。,图2-10 （修改绘图纸标志）按钮的快捷菜单,总是显示标记：选中该项，无论是否启用绘图纸模式，绘图纸标记都会显示在时间轴上。 锚定绘图纸：选中该项后，时间轴上的绘图纸标记将锁定在当前位置，不再随着播放头的移动而发生位置上的改变。 绘图纸2：在当前帧左右两侧各显示两帧。 绘图纸5：在当前帧左右两侧各显示5帧。 绘制全部：显示当前帧两侧的所有帧。,2. 3 使用图层,时间轴中的“图层控制区”是对图层进行各种操作的区域，在该区域中可以创建和编辑各种类型的图层。,2.3.1 创建图层,创建图层的具体操作步骤如下： 1）单击“时间轴”面板下方的 （插入图层）按钮，可新增一个图层。 2）单击“时间轴”面板下方的 （添加运动导引层）按钮，可新增一个运动导引层，关于导引层的应用将在“2.6.5 创建引导层动画”中详细讲解。 3）单击“时间轴”面板下方的 （插入图层文件夹）按钮，可新增一个图层文件夹，其中可以包含若干个图层，如图2-11所示。,图2-11新增图层和图层文件夹,2.3.2 删除图层,在当不再需要某个图层时，可以将其进行删除，具体操作步骤如下： 1）选择想要删除的图层。 2）单击“时间轴”面板左侧图层控制区下方的 （删除图层）按钮，如图2-12所示，即可将选中的图层进行删除，如图2-13所示。,2.3.3重命名图层,（根据创建图层的先后顺序，新图层的默认名称为“图层2、3、4.”，在实际工作中为了便于识别经常会对图层进行重命名。重命名图层的具体操作步骤如下： 1）利用鼠标双击图层的名称，进入名称编辑状态，如图2-14所示。 2）输入新的名称，在按键盘上的Enter键确认，即可对图层进行重新命名，如图2-15所示。,图2-14 进入名称编辑状态 图2-15 重命名图层,2.3.4 调整图层的顺序,图层中的内容是相互重叠的关系，上面图层中的内容会覆盖下面图层中的内容，在实际制作过程中，可以调整图层之间的位置关系，具体操作步骤如下： 1）利用鼠标单击需要调整位置的图层（此时选择“图层4”），从而选中它，如图2-16所示。 2）用鼠标按住图层，然后拖动到需要调整的相应位置，此时会出现一个灰色的线条，如图2-17所示。接着释放鼠标，图层的位置就调整好了，如图2-18所示。,2.3.5 设置图层的属性,图层的属性包括图层的名称、类型、显示模式和轮廓颜色等，这些属性的设置可以在“图层属性”对话框中完成。利用鼠标双击图层名称右边的 标记（或右键单击图层名称，从弹出的快捷菜单中选择“属性”命令），即可打开“图层属性”对话框，如图2-19所示。,名称：在该文本框中可输入图层的名称。 显示：选中该复选框，可使图层处于显示状态。 锁定：选中该复选框，可使图层处于锁定状态。 类型：用于选择图层的类型，包括一般、引导层、被引导、遮罩层、被者罩和文件夹6个选项。 轮廓颜色：选中下方的“将图层视为轮廓”复选框，可将图层设置为轮廓显示模式，并可通过单击“颜色框”按钮，对轮廓的颜色进行设置。 图层高度：在其右边的下拉菜单中可设置图层的高度。,2.3.6 设置图层的状态,时间轴的“图层控制区”的最上方有三个图标， 用于控制图层中对象的可视性，单击它，可隐藏所有图层中的对象，再次单击可将所有对象显示出来； 用于控制图层的锁定，图层一旦被锁定，图层中的所有对象将不能被编辑，再次单击它可以取消对所有图层的锁定；用于控制图层中的对象是否只显示轮廓线，单击它，图层中的对象的填充将被隐藏，以便方便编辑图层中的对象，再次单击可恢复到正常状态。图2-20为图层轮廓显示前后比较。,2. 4 使用场景,在制作比较复杂的动画时，可以将动画分为若干个场景，然后再进行组合，Flash会根据场景的先后顺序进行播放，此外，我们还可以利用动作脚本实现不同场景间的跳转。 执行菜单中的“窗口|其他面板|场景”命令，可以调出“场景”面板，如图2-21所示，在“场景”面板中可以进行下列操作： 复制场景：选中要复制的场景，然后单击“场景”面板下方的 （直接复制场景）按钮，即可复制出一个原来场景的副本，如图2-22所示。 添加场景：单击“场景”面板下方的 （直接复制场景）按钮，可以添加一个新景，如图2-23所示。 删除场景：选中要删除的场景，单击“场景”面板下方的 （删除场景）按钮，即可将选中的场景进行删除。,图2-21 “场景”面板 图2-22 复制场景 图2-23 添加场景,更改场景名称：在“场景”面板中双击场景名称，进入名称编辑状态，如图2-24所示，然后输入新名称，按Enter键即可，如图2-25所示。 更改场景顺序：在“场景”面板中按住场景名称并拖动到相应的位置，如图2-26所示，然后松开鼠标即可，如图2-27所示。 转换场景：在“场景”面板中单击要转换的场景名称，即可转换到相应场景中。,图2-24进入名称编辑状态 图2-25更改场景名称,图2-26拖动场景 图2-27拖动后效果,2.5 元件的创建与编辑,元件是一种可重复使用的对象，重复使用它不会增加文件的大小，元件还简化了文档的编辑。当编辑元件时，该元件的所有实例都相应地更新以反映编辑。元件的另一个好处是使用它们可以创建完善的交互性。,2.5.1 元件的类型,元件共分为3种：图形、按钮和影片剪辑，如图2-28所示。,图形：图形元件可用于静态图像，并可用来创建连接到主时间轴的可重用动画片段。图形元件与主时间轴同步运行。交互式控件和声音在图形元件的动画序列中不起作用。 按钮：用于创建交互式按钮。按钮有不同的状态，每种状态都可以通过图形、元件和声音来定义。一旦创建了按钮，就可以对其影片或者影片片断中的实例赋予动作。 影片剪辑：使用影片剪辑元件可以创建可重用的动画片段。影片剪辑拥有它们自己独立于主时间轴的多帧时间轴。可以将影片剪辑看作是主时间轴内的嵌套时间轴，它们可以包含交互式控件、声音甚至其他影片剪辑实例；也可以将影片剪辑元件放在按钮元件的时间轴内，以创建动画按钮。,2.5.2 创建元件,可以通过工作区中选定的对象来创建元件；也可以创建一个空元件，然后在元件编辑模式下制作或导入相应的内容；还可以在 Flash 中创建字体元件。元件可以拥有在 Flash 中创建的所有功能，包括动画。 通过使用包含动画的元件，用户可以在很小的文件中创建包含大量动作的 Flash 应用程序。如果有重复或循环的动作，例如鸟的翅膀上下翻飞这种动作，应该考虑在元件中创建动画。,1.将选定元素转换为元件,将选定元素转换为元件的方法如下： 1）在工作区中选择一个或多个元素，然后执行菜单中的“修改转换为元件”（快捷键F8）命令；或者右键单击选中的元件，从弹出的快捷菜单中选择“转换为元件”命令。 2）在“转换为元件”对话框中，键入元件名称并选择“图形”、“按钮”或“影片剪辑”，然后在注册网格中单击，以便放置元件的注册点，如图2-29所示。,3）单击“确定”按钮。 提示：此时工作区中选定的元素将变成一个元件。如果要对其进行再次编辑，可以双击该元件进入编辑状态。,2.创建一个新的空元件,创建一个新的空元件的方法如下： 1）确保未在舞台上选定任何内容，然后执行菜单中的“插入新建元件”命令；或者单击库面板左下角的 （新建元件）按钮；或者从“库”面板右上角的库选项菜单中选择“新建元件”命令。 2）在“创建新元件”对话框中，键入元件名称及元件类型，然后单击“确定”按钮。 提示：此时Flash 会将该元件添加到库中，并切换到元件编辑模式。在元件编辑模式下，元件的名称将出现在舞台左上角的上面，并由一个十字线表明该元件的注册点。,3.创建“影片剪辑”元件,影片剪辑是位于影片中的小影片。可以在影片剪辑片段中增加动画、动作、声音、其他元件设置及其他的影片片断。影片剪辑有自己的时间轴，其运行独立于主时间轴。与图形元件不同，影片剪辑只需要在主时间轴中放置单一的关键帧就可以启动播放。 创建影片剪辑元件的方法如下： 1）执行菜单中的“插入新建元件”（快捷键Ctrl+F8）命令，在弹出“创建新元件”对话框中输入名称，然后选择“影片剪辑”选项。 2）单击“确定”按钮，即可进入影片剪辑的编辑模式。,4.创建“按钮”元件,按钮实际上是四帧的交互影片剪辑。当为元件选择按钮行为时，Flash 会创建一个四帧的时间轴。前三帧显示按钮的3种可能状态；第四帧定义按钮的活动区域。此时的时间轴实际上并不播放，它只是对指针运动和动作做出反应，跳到相应的帧。 创建按钮元件的方法如下： 1）执行菜单中的“插入新建元件”（快捷键Ctrl+F8），在弹出的“创建新元件”对话框中输入button，并选择“按钮”类型，然后单击“确定”按钮，进入按钮元件的编辑模式。 2）在按钮元件中有4个已命名的帧：弹起、指针经过、按下和点击。分别代表了鼠标的4种不同的状态。如图2-30所示。,图2-30创建按钮元件,弹起帧。在弹起帧中可以绘制图形，也可以使用图形元件、导入图形或者位图。 指针经过帧。这一帧将在鼠标位于按钮之上时显示。在这一帧里可以使用图形元件、位图或者是影片剪辑。 按下帧。这一帧将在按钮被按下时显示。如果不希望按钮在被单击时发生变化，在这里只插入普通帧就可以了。 点击帧。这一帧定义了按钮的有效点击区域。如果在按钮上只是使用文本，这一帧尤其重要。因为如果没有点击状态，那么有效的点击区域就只是文本本身，这将导致点中按钮非常困难。因此在这一帧中，绘制一个形状来定义点击区域。由于这个状态永远都不会被用户实际看到，因此其形状如何并不重要。,5.创建“图形”元件,图形元件是一种最简单的Flash元件。使用这种元件来处理静态图片和动画。注意，图形元件中的动画是受主时间轴控制的。同时，动作和声音在图形元件中不能正常工作。 （1）将所选的对象转换为图形元件 将所选的对象转换为图形元件的方法如下： 1）选中希望包含到元件中的一个或多个对象。 2）执行菜单中的“修改转换为元件”（快捷键F8）命令，在弹出“转换为元件”对话框中输入元件名称，然后单击“图形”选项，如图2-31所示，接着单击“确定”按钮即可。,（2）创建新的图形元件 创建新的图形元件的方法如下： 1）执行菜单中的“插入新建元件”（快捷键Ctrl+F8）命令。 2）在弹出的“创建新元件”对话框中输入名称，然后单击“图形”选项。 3）单击“确定”按钮，即可进入图形元件的编辑模式。,2.5.3 编辑元件,编辑元件时，Flash 会更新文档中该元件的所有实例。Flash 提供了3种方式来编辑元件。 第1种：右键单击要编辑的对象，从弹出的快捷菜单中选择“在当前位置编辑”命令，即可在该元件和其他对象在一起的工作区中编辑它。此时其他对象以灰显方式出现，从而将它们和正在编辑的元件区别开来。正在编辑的元件名称显示在工作区上方的编辑栏内，位于当前场景名称的右侧。 第2种：右键单击要编辑的对象，从弹出的快捷菜单中选择“在新窗口中编辑”命令，即可在一个单独的窗口中编辑元件。此时在单独的窗口中编辑元件可以同时看到该元件和主时间轴。正在编辑的元件名称会显示在工作区上方的编辑栏内。 第3种：双击工作区中的元件，进入它的元件编辑模式，此时正在编辑的元件名称会显示在舞台上方的编辑栏内，位于当前场景名称的右侧。 当用户编辑元件时，Flash 将更新文档中该元件的所有实例，以反映编辑结果。编辑元件时，可以使用任意绘画工具、导入介质或创建其他元件的实例。,1. 在当前位置编辑元件,在当前位置编辑元件的方法如下： 1）执行以下操作之一： 在工作区中双击该元件的一个实例。 提示：一个元件中可以包含多个实例。 右键单击工作区中该元件的一个实例，从弹出菜单中选择“在当前位置编辑”命令。 在工作区中选择该元件的一个实例，执行菜单中的“编辑在当前位置编辑”命令。 2）根据需要编辑该元件。 3）如果要更改注册点，可拖动工作区中的元件。此时十字准线指示注册点的位置。 4）要退出“在当前位置编辑”模式并返回到场景编辑模式，可执行以下操作之一： 单击工作区上方编辑栏左侧的 按钮。 执行菜单中的“编辑编辑文档”命令。,2. 在新窗口中编辑元件,在新窗口中编辑元件的方法如下： 1）右键单击工作区中该元件的一个实例，然后从弹出的快捷菜单中选择“在新窗口中编辑”命令。 2）根据需要编辑该元件。 3）如果要更改注册点，可拖动工作区中的元件。此时十字准线指示注册点的位置。 4）单击右上角的 按钮，来关闭新窗口，然后在主文档窗口内单击以返回到编辑主文档。,3. 在元件编辑模式下编辑元件,在元件编辑模式下编辑元件的方法如下： 1）执行以下操作之一来选择元件： 双击“库”面板中的元件图标。 右键单击工作区中该元件的一个实例，从弹出的快捷菜单中选择“编辑”命令。 在工作区中选中该元件的一个实例，然后执行菜单中的“编辑编辑元件”命令。 在“库”面板中选择该元件，然后从库选项菜单中选择“编辑”命令，或者右键单击“库”面板中的该元件，然后从弹出菜单中选择“编辑”命令。 2）根据需要在舞台上编辑该元件。 3）如果要更改注册点，可拖动工作区中的元件。此时十字准线指示注册点的位置。 4）要退出元件编辑模式并返回到文档编辑状态，可执行以下操作之一： 单击舞台上方编辑栏左侧的“返回”按钮。 执行菜单中的“编辑编辑文档”命令。,4. 将元件加到工作区中,将元件加到工作区中的方法如下： 1）执行菜单中的“窗口库”（快捷键Ctrl+L）命令，调出库面板，如图2-32所示。 2）利用库找到并选中希望加入到影片中去的元件。 3）将元件拖动到工作区中即可。,图2-32 调出“库”面板,5. 元件属性,每个元件都有独立于该元件的自己的属性。可以更改元件的色调、透明度和亮度；可以重新定义元件的行为（例如，把图形更改为影片剪辑）；还可以设置动画在图形实例内的播放形式；也可以倾斜、旋转或缩放元件。 此外，可以给影片剪辑或按钮实例命名，这样就可以使用动作脚本更改它的属性。 如果编辑元件或将某个元件重新链接到其他元件，则任何已经改变的元件属性仍然适用于该元件。,6. 更改元件的颜色和透明度,每个元件实例都可以有自己的色彩效果。要设置元件的颜色和透明度选项，可使用“属性”面板。在属性面板中的设置也会影响放置在元件内的位图。 当在特定帧内改变元件的颜色和透明度时，Flash会在播放该帧时立即进行更改。要进行渐变颜色更改，必须使用补间动画。这将在以后的章节中做具体的讲解。当补间颜色时，要在实例的开始关键帧和结束关键帧输入不同的效果设置，然后补间这些设置，以便让实例的颜色随着时间逐渐变化。 提示：如果对包括多帧的影片剪辑元件应用色彩效果，Flash 会将效果应用于该影片剪辑元件的每一帧。,更改元件颜色和透明度的方法如下： 1）在工作区中选择该元件，然后执行菜单中的“窗口属性”命令。 2）从“属性”面板内的“颜色”弹出菜单中选择以下选项之一： 亮度:用于调节图像的相对亮度或暗度，调整范围为从黑 (-100%) 到白 (100%)。调节时，可以单击数值右侧小三角形并拖动滑块或在文本框中输入一个值，如图2-33所示。,图2-33 调节“亮度”,色调：用相同的色相为元件着色。可使用“属性”检查器中的色调滑块设置色调百分比，调整范围从透明 (0%) 到完全饱和 (100%)。要选择颜色，可以在各自的文本框中输入红、绿和蓝色的值，或单击颜色框并从弹出窗口中选择一种颜色，如图2-34所示。,图2-34 调节“色调”,Alpha：用来调节元件的透明度，它的调整范围从透明 (0%) 到完全饱和 (100%)。调节时，可以单击数值右侧小三角形并拖动滑块或在文本框中输入一个值。如图2-35所示。,图2-35 调节“Alpha”值,高级：用来分别调节元件的红、绿、蓝和透明度的值。对于在诸如位图这样的对象上创建和制作具有微妙色彩效果的动画时，该选项非常有用。左侧的控件使用户可以按指定的百分比降低颜色或透明度的值。右侧的控件使用户可以按常数值降低或增大颜色或透明度的值，如图2-36所示。 单击“设置”按钮，会弹出图2-37所示的“高级效果”对话框。当前的红、绿、蓝和Alpha 的值都乘以百分比值，然后加上右列中的常数值，会产生新的颜色值。例如，如果当前红色值是 100，此时把左侧的滑块设置到 50% 并把右侧滑块设置到 100，就会产生一个新的红色值150 (100 x .5 + 100 = 150)。,图2-36 调节“高级” 图2-37 “高级效果”对话框,7. 将一个元件与另一个元件交换,可以给实例指定不同的元件，从而在工作区中显示不同的实例，并保留所有的原始元件属性（如色彩效果或按钮动作）。 例如，假定用户正在使用 rat 元件创建一个卡通形象作为影片中的角色，但决定将该角色改为 cat。此时用户可以用 cat 元件替换 rat 元件，并让更新的角色出现在所有帧中大致相同的位置上。 给实例指定不同的元件的方法如下： 1）在工作区中选择该元件，然后执行菜单中的“窗口属性”，调出“属性”面板。 2）在属性面板中单击“交换”按钮，如图2-38所示。 3）在弹出的“交换元件”对话框中，选择一个元件，然后单击“交换”按钮，该元件即可替换当前元件。如果要复制选定的元件，可单击在对话框底部的（直接复制元件）按钮，如图2-39所示。 提示：在制作几个具有细微差别的元件时，复制可以在库中现有元件的基础上建立一个新元件，并将复制工作减到最少。,图2-38 单击“交换”按钮 图2-39 单击 （直接复制元件）按钮,4）单击“确定”按钮。,8. 更改元件的类型,可以改变元件的类型来重新定义它在 Flash 应用程序中的行为。例如，如果一个图形元件包含想要独立于主时间轴播放的动画，可以将该图形元件重新定义为影片剪辑元件。 更改元件的类型的方法如下： 1）在工作区中选择该元件，然后执行菜单中的“窗口属性”，调出“属性”面板。 2）从“属性”面板左上角的弹出菜单中选择相应的元件类型，如图2-40所示。,2.6 创建动画,Flash是一个制作动画的软件，通过它可以轻松的制作出各种炫目的动画效果。Flash中的动画可以分为逐帧动画、动作补间动画、形状补间动画、遮罩动画、引导层动画和时间轴特效动画6种类型，下面就来具体讲解它们的使用方法。,2.6.1 创建逐帧动画,逐帧动画是一种常见的动画形式，其原理是在连续的关键帧中分解动画动作，需要更改每一帧中的舞台内容，它最适合于每一帧中的图像都有改变，而并非仅仅简单的在舞台上移动、淡入淡出、色彩变换、旋转的复杂动画。 制作逐帧动画的方法非常简单，只需要一帧一帧的绘制就可以了，关键在于动作设计及节奏的掌握，图2-35为人物走路的逐帧动画的画面分解图。,1.逐帧动画的特点,图2-35人物走路的逐帧动画的画面分解图,由于逐帧动画每一帧的内容都不一样，因此制作是非常繁琐，而且最终输出的文件也很大，但它也有自己的优势，它具有非常大的灵活性，几乎可以表现任何想表现的内容，很适于表演细腻的动画，如动画片中的人物走路、转身以及做各种动作。,2.创建逐帧动画的方法,创建逐帧动画的方法有4种： 导入静态图片：分别在每帧中导入静态图片，建立逐帧动画，静态图片的格式可以是jpg、png等。 绘制矢量图：在每个关键帧中，直接用Flash的绘图工具绘制出每一帧中的图形，前面的“逐帧动画.fla”就采用了这种方法。 导入序列图像：直接导入jpg、gif序列图像。序列图像中包含多个帧，导入到Flash中后，将会把动画中的每一帧自动分配到每一个关键帧中。 导入swf动画：直接导入已经制作完成的swf动画，也一样可以创建逐帧动画，或者可以导入第3方软件（如swish、swift 3D等）产生的动画序列。,2.6.2 创建形状补间动画,形状补间动画也是Flash中非常重要的动画之一，利用它可以制作出各种奇妙的、不可思议的变形效果，譬如动物之间的转变、文本之间的变化等。 形状补间适用于图形对象，可以在两个关键帧之间制作出变形效果，即让一种形状随时间变化变为另外一种形状，还可以对形状的位置、大小和颜色进行渐变。 Flash可以对放置在一个层上的多个形状进行形变，但通常一个层上只放一个形状会产生较好的效果。利用形状提示点还可以控制更为复杂和不规则形状的变化。,1.形状补间的特点,2.创建形状补间的方法,下面通过一个字母变形的小实例来讲解一下形状补间的创建方法，具体操作步骤如下： 1）按快捷键Ctrl+N，新建Flash文档。 2）执行菜单中的“修改|文档”（快捷键Ctrl+J）命令，在弹出的“文档属性”对话框中将背景色设置为白色（#FFFFFF），文档尺寸设置为500px×500px，单击“确定”按钮。 3）选择工具箱中的 （文本工具），在“属性”面板中设置文本颜色为红色(#FF0000),字号为300，如图2-36所示。然后在舞台中输入文本“A”。,4）利用“对齐”面板，将文本居中对齐，如图2-37所示。然后执行菜单中的“修改|分离”（快捷键Ctrl+B）命令，将文本分离为图形，如图2-38所示。,图2-37 将文字居中对齐 图2-38 将文字分离为图形,5）在第10帧，按快捷键F7，插入空白关键帧，然后输入文字“”，字色设为蓝色（#0000FF），然后执行菜单中的“修改|分离”（快捷键Ctrl+B）命令，将文本分离为图形，如图2-39所示。 6）同理，分别在第20帧、第30帧，按快捷键按快捷键F7，插入空白关键帧，分别输入文字“C”和“D”，并设置为不同颜色，然后将文本分离为图形，如图2-40所示。,7）在第40帧，按快捷键F7，插入空白关键帧。然后右键单击第1帧，从弹出的快捷菜单中选择“复制帧”命令，接着右键单击第40帧，在弹出的快捷菜单中选择“粘贴帧”命令，从而将第1帧的内容原地粘贴到第40帧。 8）选中“图层1”，然后在“属性”面板中设置“补间”为“形状”，如图2-41所示。,图2-41设置“图层1”的“补间”为“形状”,9）执行菜单中的“控制|测试影片”（快捷键Ctrl+Enter）命令，即可看到文字从“A”过渡到“B”、然后从“B”过渡到“C”，接着从“C”过渡到“D”，最后从“D”过渡到“A”的效果，如图2-42所示。,3.形状补间的属性,与动画补间一样，形状补间动画的创建及属性设置也是在“属性”面板中完成的，当创建好形状补间动画的两个关键帧后，选中起始帧，打开“属性”面板，在“补间”下拉列表中选择“形状”。可以看到，形状补间动画的“属性”只有两个参数，如图2-43所示。,图2-43 形状补间的属性面板,缓动：用于控制形状补间的速度变化。取值范围为-100到100。当数值小于0时，动画为加速运动；当数值大于0时，动画为减速运动；当数值为0时，动画为匀速运动。 混合：用于选择变形的过渡模式。选择“角形”，可以使中间帧的过渡形状保持关键帧上图形的棱角，此模式只适用于友尖锐角的图形变换；选中“分布式”可以使中间帧的形状过渡更光滑、更随意。,4.形状提示点的应用,在以上介绍的形状补间动画中，图形之间的变形过渡是随机的。利用Flash的形状提示点，可以控制图形对应位置的精确变形。变形提示点用字母的小圆圈表示，英文字母表示部位的名称，最多可以用26个英文字母来代表图形上的部位。 下面通过一个旋转的三角锥实例来讲解形状提示点的使用方法，具体操作步骤如下： 1）按快捷键Ctrl+N，新建Flash文档。 2）执行菜单中的“修改|文档”（快捷键Ctrl+J）命令，在弹出的“文档属性”对话框中将背景色设置为白色，文档大小设为300×300像素，然后单击“确定”按钮。 3）执行菜单中的“视图|网格|显示网格”命令，结果如图2-44所示。 4）执行菜单中的“视图|贴紧|贴紧至网格”命令,然后选择工具箱上的 （直线工具），在工作区中绘制三角锥，如图2-45所示。,5）选择工具箱上的 （颜料桶工具），填充色设置成浅黄色到深黄色的直线渐变色，如图2-46所示，其中浅黄色的RGB值为（250，220，160）；深黄色的RGB值为（220，130，30），填充三角锥正面，结果如图2-47所示。,6）将填充色设置成深黄色到暗黄色的直线渐变色，其中深黄色的RGB值为（240，160，10）；暗黄色的RGB值为（120，70，20），填充三角锥的侧面，结果如图2-48所示。 7）选择工具箱上的 （选择工具），在工作区中双击三棱锥的轮廓线，将所有轮廓线选中，然后按下键盘上的Delete键删除，结果如图2-49所示。,图2-48 填充三角锥侧面 图2-49 删除黑色轮廓线,8）调整渐变色的方向。方法：单击工具箱上的 （填充变形工具），在工作区中单击三棱锥正面，然后调节渐变方向，如图2-50所示。 9）同理，调节三棱锥的侧面渐变方向如图2-51所示。,图2-50 调节正面渐变方向 图2-51 调节侧面渐变方向,10）在图层 1的第20帧单击右键，在弹出菜单中选择“插入关键帧”（快捷键F6）命令，在第20帧插入一个关键帧，如图2-52所示。 11）选择工具箱上的 （选择工具），单击工作区中三棱锥的右侧面。然后执行菜单中的“修改|变形|水平翻转”命令，接着将水平翻转后的右侧面挪动到三棱锥的左侧的位置，如图2-53所示。,图2-52 插入关键帧 图2-53 水平翻转三棱锥侧面图形,12）右键单击时间轴窗口中的任意一帧，在“属性”面板中设置如图2-54所示，此时时间轴如图2-55所示。,图2-54 设置“补间”为“形状” 图2-55 时间轴分布,13）按键盘上的Enter键，播放动画，可以看到三棱锥的变形不正确，如图2-56所示。为此需要设置控制变形的基点。方法：选择图层1的第1个关键帧，然后执行菜单中的“修改|形状|添加形状提示”（快捷键Ctrl+Shift+H）命令，这时将在工作区中出现一个红色的圆圈，圆圈里面有一个字母a，如图2-57所示。,图2-56 变形错误的效果 图2-57 添加形状提示点a,14）继续按快捷键Ctrl+Shift+H，添加形状提示b，c，d，e和f，如图2-58所示。然后利用的 （选择工具）将它们移到图2-59的位置。,图2-58 添加其他形状提示点 图2-59 调整形状提示点的位置,15）按键盘上的Enter键，播放动画，此时会发现三棱锥转动已经正确了，但是为了使三棱锥产生连续转动的效果，还需要加入一个过渡关键帧。方法：右键单击“图层1”的第21帧，然后在弹出菜单中选择“插入关键帧”（快捷键F6)命令，在第21帧处插入一个关键帧。 16）选择工具箱上的（选择工具），在工作区中点击三棱锥的左侧面。然后单击Delete键删除，如图2-60所示。 17）选择时间轴窗口中“图层1”的第22帧，按键盘上的F5键，使“图层1”的帧数增至22帧，如图2-61所示。,图2-60 删除侧面图形 图2-61 在“图层1”的第22帧添加普通帧,18）执行菜单中的“控制|测试影片”（快捷键Ctrl+Enter)命令，即可看到三棱锥的旋转动画，如图2-62所示。,2.6.3 创建动画补间动画,动画补间动画实际上就是给一个对象的两个关键帧分别定义不同的属性，如位置、颜色、透明度、角度等，并在两个关键帧之间建立一种变化关系，即补间动画关系。 构成动画补间的元素为“元件”或“成组对象”，而不能为形状，只有将形状“组合”或者转换成“元件”后才可以成功制作“动画补间动画”。 动画补间动画被创建后，时间帧的背景色变为淡紫色，在起始帧和结束帧之间有一个长长的箭头，如图2-63所示。如果动画补间动画没有被创建成功，在两个关键帧之间会呈现一条虚线，表示补间不完整或者错误，如图2-64所示。,1.动画补间的特点,图2-63 动画补间动画创建成功时的时间轴 图2-64 动画补间动画创建不成功时的时间轴,2.创建动画补间的方法,下面通过一个小实例来讲解一下动画补间的创建方法，具体操作步骤如下： 1）执行菜单中的“文件|打开”命令，打开配套光盘“素材及结果|2.6.3创建动作补间动画|飞机-素材.fla”文件。”文件。 2）从“库”面板中将“背面”、“侧面”、“正面”和“天空”元件拖入舞台，然后同时在舞台中选择这4个元件，单击右键，从弹出的快捷菜单中选择“分散到图层”命令，此时4个元件会被分散到4个不同的层上，并根据元件的名称自动命名其所在图层，如图2-65所示。 3）删除多余的“图层1”。方法：选择“图层1”，单击 按钮，即可将其进行删除，此时时间轴分布如图2-66所示。 4）同时选中4个图层的第135帧，按快捷键F5，插入普通帧，从而使4个图层的总长度延长到第135帧。,图2-65 将元件分散到不同图层 图2-66 删除“图层1”,5）制作飞机加速从远方逐渐飞进的效果。方法：为了便于操作，下面隐藏“背面”和“正面”图层。然后在“侧面”图层的第70帧，按快捷键F6，插入关键帧。再在第1帧，将舞台中的“侧面”元件移动到舞台左上角，并适当缩小，如图2-67所示。接着在第70帧，将舞台中的“侧面”元件移动到舞台右侧中间部分，并适当缩小和旋转一定角度，如图2-68所示。再单击“侧面”图层第1-70帧之间的任意一帧，在“属性”面板中将“补间”设为“动画”，“缓动”设为“-100”，最后在“侧面”层的第71帧，按快捷键F7，插入空白关键帧。此时时间轴分布如图2-69所示。,图2-67 第1帧飞机的位置 图2-68 第70帧飞机的位置,图2-69 时间轴分布,6）制作飞机旋转着冲向镜头的效果。方法：显现“正面”图层，然后将“正面”图层的第1帧移动到第75帧，再调整“正面”元件的位置和大小如图2-70所示。接着在第95帧按快捷键F6,插入关键帧，再调整“正面”元件的位置和大小如图2-71所示。最后在“正面”层的第96帧，按快捷键F7，插入空白关键帧。此时时间轴分布如图2-72所示。,图2-70 第75帧飞机的位置 图2-71 第95帧飞机的位置,图2-72 时间轴分布,7）制作飞机掉头逐渐飞远的效果。方法：显现“背面”图层，然后将“背面”图层的第1帧移动到第96帧，再调整“背面”元件的位置和大小如图2-73所示。接着在第135帧按快捷键F6,插入关键帧，再调整“背面”元件的位置和大小如图2-74所示。此时时间轴分布如图2-75所示。,图2-73 在第1帧调整“背面”元件的位置和大小 图2-74调整“背面”元件的位置和大小,图2-75 时间轴分布,8）执行菜单中“控制|测试影片”(快捷键Ctrl+Enter)命令，就可以看到飞机从左上方飞入舞台，然后旋转着冲向镜头，再掉头逐渐飞远的效果，如图2-76所示。,2.6.4 创建遮罩动画,1.遮罩动画的特点,在Flash中，图层分为好几种，其中一种就是遮