Flash CS4快速入门第4章

1、大连理工大学出版社Flash CS4 Professional 实用案例教程实用案例教程第第4 4章章有条不紊有条不紊 图层与时间轴图层与时间轴 FLASH CS4 PROFESSIONAL SHIYONG ANLI JIAOCHENG主编：洪主编：洪 光光4.1 任务-01 了解图层与时间轴 在【时间轴】面板上，影片中的“图层”在时间轴左侧的列中，每个层中包含的帧则显示在该层名称右侧的一行中。在时间轴上可以查看每一帧的情况，调整动画播放的速度，安排帧的内容，改变帧与帧之间的关系以及添加各种特效，从而可以实现不同的动画效果。因此，对时间轴的了解以及对图层与帧的操作显得尤为重要。时间轴中的层与帧

2、的功能如图4-1所示。图4-1【时间轴】面板 4.1 任务-01 了解图层与时间轴4.1.1 4.1.1 任务简介任务简介 本任务通过对时间轴中的图层与帧中术语的了解，详细介绍帧与【图层】面板的属性及功能，为后续完成制作“引导层”动画、“遮罩”动画奠定基础。任务快速流程任务快速流程 了解安装注意事项启动安装填入序列号确认位置进入安装完成安装。 4.1.2 4.1.2 知识点知识点1.1. 时间轴时间轴 时间轴的主要组件是图层、帧和播放头。在时间轴底部显示的时间轴状态指示所选的帧编号、当前帧速率以及到当前帧为止的运行时间。播放头指示当前在舞台中显示的帧，播放动画时，播放头从左向右通过时间轴。与胶

3、片一样，Flash文档也将时长分为帧。帧是构成动画的基本单位。4.1 任务-01 了解图层与时间轴2.2.时间轴有关术语时间轴有关术语（1）帧频率 帧频率是动画播放的速度，以每秒播放的帧数 (fps) 为度量单位。帧频率太慢会使动画看起来一顿一顿的，帧频率太快会使动画的细节变得模糊。24 fps的帧速率是新Flash文档的默认设置，通常在Web上提供最佳效果。标准的动画速率也是24 fps。 （2）帧 关键帧关键帧：是指时间轴中其元件实例首次出现在舞台上的帧。用来定义动画变化，也包括含有动作脚本的帧。在时间轴中关键帧以黑色的实心圆点显示，用来实现无法用渐变动画实现的效果。 空白关键帧空白关键帧

4、：空白关键帧是特殊的关键帧，以空心圆表示。它的作用是将前面的关键帧内容清除掉，而使画面的内容变为空白，即使动画中的对象消失掉。4.1 任务-01 了解图层与时间轴 属性关键帧属性关键帧：属性关键帧是在补间范围中为补间目标对象显示定义一个或多个属性值的帧。定义的每个属性都有它自己的属性关键帧。可以在【动画编辑器】面板中查看补间范围的每个属性及其属性关键帧；还可以从补间范围上下文菜单中选择可在时间轴中显示的属性关键帧类型。补间帧补间帧：是作为补间动画的一部分的任何帧。静态帧静态帧：静态帧也称为普通帧，显示同一层上最后一个关键帧的内容。（3）图层的属性 Flash CS4 Professional中

5、的图层具有多种不同的属性，可以通过【图层属性】对话框对图层的属性进行设置，每一层都有唯一的一组属性。弹出【图层属性】对话框最快的方法是双击当前图层的名称左侧的“图层”图标 。4.1 任务-01 了解图层与时间轴 【图层属性】对话框如图4-2所示。 图层高度：可设置图层的高度，这在层中处理波形（如声波）时很实用，有100%、200%和300%三种高度。设置前的图层如图4-3所示。将该【图层】面板中图层1的图层高度设置为200%，将引导层：图层1的图层高度设置为300%，如图4-4所示。 图4-2 【图层属性】对话框图4-3 设置前的图层 图4-4 设置为不同高度的图层 4.2 任务-02 制作“

6、绿叶与瓢虫”引导层动画案例4.1.2 4.1.2 任务简介任务简介 本任务主要完成“绿叶与瓢虫”引导层动画的制作，完成的动画效果如图4-5所示。 任务快速流程任务快速流程 图4-5“瓢虫与绿叶”的效果新建文件文档属性导入素材插入关键帧添加传统引导层绘制路径完成动画制作。 4.2.2 4.2.2 知识点知识点 本任务主要应用创建新层、导入位图、转换为元件、时间轴中的帧、添加引导层、创建传统补间动画等知识来完成。通过本案例的制作，能够深刻理解时间轴中“图层与帧”的应用方法。4.2 任务-02 制作“绿叶与瓢虫”引导层动画案例4.2.3 4.2.3 快速上手快速上手 步骤步骤1 1 新建一个动画文件

7、。选择【修改】【文档】命令，在打开的【文档属性】对话框中修改动画的属性，设置背景色为黑色。 步骤步骤2 选择“导入”“导入到库”，导入一个“绿叶”的背景图像，如图4-6所示。创建一名为“瓢虫”的图形元件，如图4-7所示。图4-6导入到库中的图像 图4-7创建“瓢虫”元件 步骤步骤3 3 单击【新建图层】按钮 ，新增一个图层，命名为“瓢虫” 选取【窗口】【库】，打开元件库，在元件库中选取导入的“背景”与“瓢虫”元件，将其拖入到舞台，创建该元件的实例。并调整到合适大小，如图4-8所示。 图4-8创建的元件实例 4.2 任务-02 制作“绿叶与瓢虫”引导层动画案例4.2 任务-02 制作“绿叶与瓢虫

8、”引导层动画案例 步骤步骤4 选中“背景”图层，在时间轴的第30帧处右击，在弹出的菜单中选取【插入帧】命令，令背景一直可见，并锁定，如图4-9所示。 步骤步骤5 5 选择“瓢虫”图层，在30帧处右击，在弹出的菜单中选择【插入关键帧】命令或按F6键，将第30帧设置为关键帧。在第30帧的画面上，将“瓢虫”移动到绿叶上的合适位置，并适当缩小其尺寸，如图4-10所示。图4-9 令背景一直可见 图4-10将“瓢虫”移动到绿叶上的合适位置 4.2 任务-02 制作“绿叶与瓢虫”引导层动画案例 步骤步骤6 6 在“瓢虫”图层上右击，在弹出的菜单中选择【添加传统运动引导层】命令，添加一个“引导层”。引导层的功

9、能是为一般的图层提供路径，以制作自定义轨迹的“引导层动画”，如图4-11所示。图4-11 添加一个“传统运动引导层” 步骤步骤7 将播放头移动到第1帧，单击【工具】面板上的【铅笔工具】 ，再单击选项的【平滑】按钮 ，在引导层上绘制一条平滑的路径，如图4-12所示。图4-12 在引导层上绘制一条平滑的路径 4.2 任务-02 制作“绿叶与瓢虫”引导层动画案例 步骤步骤8 单击“主工具栏”或工具选项中的【贴紧至对象】按钮，启动该模式。 步骤步骤9 选取“瓢虫”图层的第1帧，拖曳“瓢虫”元件的中心点（小十字）到路径的右端点，使瓢虫上的中心点与路径相结合。 步骤步骤10 将播放头移至第30帧，选取瓢虫

10、，拖曳瓢虫的中心点（小十字）到路径的左端点，使瓢虫上的圆点与路径相结合，如图4-13所示。图4-13 使瓢虫上的圆点与路径相结合 4.2 任务-02 制作“绿叶与瓢虫”引导层动画案例 步骤步骤1111 选取“瓢虫”层，在中间帧的位置右击，在出现的快捷菜单中选取【创建传统补间】命令。在时间轴面板上的第1帧到第29帧将出现淡色底纹。如图4-14所示。 步骤步骤1212 启动绘图纸功能，设置绘图纸效果范围为全部，查看瓢虫运动效果，如图4-15所示。图4-14 创建传统补间 图4-15 洋葱皮效果 4.2 任务-02 制作“绿叶与瓢虫”引导层动画案例 步骤步骤1313 按Enter键，播放动画，按Ct

11、rl+Enter键，可以测试动画。若觉得路径碍事，可以将运动引导图层隐藏 4.2.4 4.2.4 相关知识相关知识铅笔工具铅笔工具（1）选择【铅笔工具】。 （2）选择【窗口】【属性】命令，然后选择笔触颜色、线条粗细和样式。 （3）在【工具】面板的“选项”下，选择一种绘制模式： 若要绘制直线，并将接近三角形、椭圆、圆形、矩形和正方形的形状转换为这些常见的几何形状，可选择“伸直” 。若要绘制平滑曲线，可选择“平滑” 。若要绘制不用修改的手画线条，可选择“墨水” 。 若要使用【铅笔工具】绘制，可单击舞台并拖动，按住Shift键拖动可将线条限制为垂直或水平方向。 4.2 任务-02 制作“绿叶与瓢虫”

12、引导层动画案例4.2.5 4.2.5 相关知识相关知识帧的操作帧的操作1. 1. 在时间轴中插入帧在时间轴中插入帧 选择【插入】【时间轴】【关键帧】或者右击要在其中放置关键帧的帧，然后从上下文菜单中选择【插入关键帧】；还可以在时间轴上选取一帧，再按F6键，可以创建新关键帧。 选择【插入】【时间轴】【空白关键帧】或者右键单击要在其中放置关键帧的帧，然后从上下文菜单中选择【插入空白关键帧】。还可以在时间轴上选取一帧，再按F7键，可以创建新的空白关键帧。2. 2. 在时间轴中选择帧在时间轴中选择帧 若要选择一个帧，可以单击该帧。如果已启用“基于整体范围的选择”，可以按住Ctrl键并单击该帧。若要选择

13、多个连续的帧，可以按住Shift键并单击其他帧。选择【插入】【时间轴】【帧】或按F5键，可以插入新帧。4.2 任务-02 制作“绿叶与瓢虫”引导层动画案例 若要选择多个不连续的帧，可以先按下Ctrl键，然后分别单击要选取的帧。 若要选择时间轴中的所有帧，可以选择【编辑】【时间轴】【选择所有帧】。 若要选择整个静态帧范围，可以双击两个关键帧之间的帧。如果已启用【基于整体范围的选择】，可以单击序列中的任何帧。3. 3. 复制、粘贴帧或帧序列复制、粘贴帧或帧序列 选择帧或序列并选择【编辑】【时间轴】【复制帧】。选择要替换的帧或序列，然后选择【编辑】【时间轴】【粘贴帧】。或按住Alt键再单击，并将关键

14、帧拖到要粘贴的位置。4. 4. 删除帧或帧序列删除帧或帧序列 选择帧或序列并选择【编辑】【时间轴】【删除帧】或者右击帧或序列，从上下文菜单中选择【删除帧】。 4.2 任务-02 制作“绿叶与瓢虫”引导层动画案例5. 5. 移动关键帧或帧序列及其内容移动关键帧或帧序列及其内容将关键帧或序列拖到目标位置。如图4-16、图4-17所示。图4-16 移动单个帧 图4-17 移动帧序列 6. 6. 更改静态帧序列的长度更改静态帧序列的长度 在按住Ctrl键的同时向左或向右拖动范围的开始或结束帧，可以更改静态帧序列的长度。7. 7. 将关键帧转换为帧将关键帧转换为帧 选择关键帧并选择【编辑】【时间轴】【清

15、除关键帧】或者右击关键帧并从上下文菜单中选择【清除关键帧】。4.2 任务-02 制作“绿叶与瓢虫”引导层动画案例8. 8. 帧居中和帧居中和【绘图纸绘图纸】工具工具在时间轴下方的状态栏上设置如下的功能： （1）帧居中 ：帧居中按钮。单击该按钮可以将播放指针所在的帧在时间轴中间显示出来，在动画较长且播放指针位于最多可显示的帧总数一半以上的位置时才有效，如图4-18所示。图4-18 帧居中（2）“绘图纸”功能：绘图纸外观。：绘图纸外观轮廓。：编辑多个帧。4.3 任务-03 制作“遮罩文字”动画案例4.3.1 4.3.1 任务简介任务简介 本任务将以一个具体实例来演示创建简单“遮罩文字动画”的过程。

16、通过本任务的制作，可以深刻理解时间轴中“图层”的应用方法。本案例完成的效果如图4-19所示。图4-19 遮罩文字动画任务快速流程任务快速流程 新建文件输入文字导入素材转换为元件编辑文字创建动画测试动画保存动画。 4.3.2 4.3.2 知识点知识点 “遮罩文字动画”的制作主要是应用【文本工具】 创建遮罩的文字层；然后导入位图，应用“传统运动补间动画”的原理，创建运动的被遮罩层，完成制作。4.3 任务-03 制作“遮罩文字”动画案例4.3.3 4.3.3 快速上手快速上手 步骤步骤1 1 新建文件，命名为“遮罩文字”，将背景设为白色，大小为400200像素。 步骤步骤2 2 输入文字。将“图层1

17、”名称改为“文字”，选择工具箱中的文本工具，在舞台上输入文本“Mask”，文字大小为100，字体为Arial Black，颜色任意（因为变成遮罩层后，文字的颜色不显示），执行【对齐】面板中的与命令，将文字与舞台中心对齐，如图4-20、图4-21所示。图4-20 文字图层 图4-21 输入文本 4.3 任务-03 制作“遮罩文字”动画案例 步骤步骤3 3 新建图层，命名为“图像”，将“图像”层移动到“文字”层下方，如图4-22所示。 步骤步骤4 4 导入图像。选择【文件】【导入】【导入到舞台】，将光盘“素材”“遮罩动画”文件夹中的“花.jpg”导入到舞台上，使用【任意变形工具】 ，将图片缩放到合

18、适大小（可以比舞台本身更长一些），将其与文字左端靠近，如图4-23所示。图4-22 创建图像图层 图4-23 导入图像 4.3 任务-03 制作“遮罩文字”动画案例 步骤步骤5 5 转换为元件。将位图图像选中，选择【修改】【转换为元件】命令，将图像转换为图形元件，命名为“图像”，如图4-24所示。 步骤步骤6 6 选中图像层的第20帧，按F6键，插入关键帧，如图4-25所示。图4-24 转换为元件图4-25 插入关键帧 步骤步骤7 7 在文字层上选中第20帧，按F5键，插入帧。在图像层的第20帧上将图片移动到舞台左侧，使其右边与文字靠近，如图4-26所示。图4-26 将图片移动到舞台左侧 4.

19、3 任务-03 制作“遮罩文字”动画案例 步骤步骤8 8 创建动画。选择“图像”层中间帧，右击，在弹出的快捷菜单中选择【创建传统补间】，创建运动补间动画，如图4-27所示。 步骤步骤9 9 创建遮罩层。在“文字”层上右击，在弹出菜单中选择【遮罩层】，如图4-28所示。图4-27 创建运动补间动画 图4-28 创建遮罩层 4.3 任务-03 制作“遮罩文字”动画案例 步骤步骤1111 测试动画。我们可以看到图像在文字中流过的效果，如图4-30所示。步骤步骤1010 创建完成后的图层显示如图4-29所示。图4-29 图层显示 图4-30 图像在文字中流过的效果 4.3 任务-03 制作“遮罩文字”

20、动画案例4.3.4 4.3.4 相关知识相关知识创建和编辑图层或文件夹创建和编辑图层或文件夹1. 1. 创建图层或文件夹创建图层或文件夹执行下列操作之一：单击图层底部的【插入图层】 按钮或【新建文件夹】 按钮。 右击一个图层名称，然后选择快捷菜单中的【插入图层】或【插入文件夹】。2. 2. 选择图层或文件夹选择图层或文件夹执行下列操作之一：单击图层或文件夹的名称。 单击要选择的图层的任意一个帧或在舞台中选择要选择的图层上的一个对象。 要选择连续的几个图层或文件夹，可按住Shift键单击它们的名称。 若要选择几个不连续的图层或文件夹，可按住Ctrl键单击时间轴中它们的名称。4.3 任务-03 制

21、作“遮罩文字”动画案例3. 3. 移动、展开、折叠图层或文件夹移动、展开、折叠图层或文件夹 要将图层或文件夹移动到文件夹中，可将该图层或文件夹的名称拖到目标文件夹的名称中。 要更改图层或文件夹的顺序，可将一个或多个图层或文件夹拖到所需位置。 要展开或折叠文件夹或所有文件夹，可单击该文件夹名称左侧的三角形；或右击，选择快捷菜单中的【展开所有文件夹】或【折叠所有文件夹】。4. 4. 重命名图层或文件夹重命名图层或文件夹执行下列操作之一：双击图层或文件夹的名称，然后输入新名称。 选择该图层或文件夹或右击其名称，然后选择【修改】【时间轴】【图层属性】或从弹出的菜单中选择【属性】。在【图层属性】对话框的

22、“名称”中输入新名称，然后单击【确定】。4.3 任务-03 制作“遮罩文字”动画案例5. 5. 复制图层或文件夹复制图层或文件夹 （1）要复制图层或文件夹的内容，可选择图层或文件夹。然后选择【编辑】【时间轴】【复制帧】。 （2）单击新图层，然后选择【编辑】【时间轴】【粘贴帧】，便可将图层或文件夹的内容复制了。6. 6. 删除图层或文件夹删除图层或文件夹 单击时间轴中的【删除图层】 按钮或将图层或文件夹拖到【删除图层】 按钮。执行下列操作之一： 右击该图层或文件夹的名称，然后选择快捷菜单中的【删除图层】或【删除文件夹】。4.3 任务-03 制作“遮罩文字”动画案例7. 7. 锁定或解锁一个或多个

23、图层或文件夹锁定或解锁一个或多个图层或文件夹 要锁定图层或文件夹，可以单击该图层或文件夹名称右侧的“锁定”列。要解锁该图层或文件夹，可再次单击“锁定”列。 要锁定所有图层和文件夹，可以单击挂锁图标。要解锁所有图层和文件夹，可再次单击它。 要锁定或解锁多个图层或文件夹，可以在“锁定”列中拖动。 若要锁定所有其他图层或文件夹，可以按住Alt键单击图层或文件夹名称右侧的“锁定”列。要解锁所有图层或文件夹，可再次按住Alt键单击“锁定”列。8. 8. 图层的轮廓图层的轮廓如图4-31、图4-32所示。调出轮廓显示的方法如下：4.3 任务-03 制作“遮罩文字”动画案例 单击图层名称右边的显示模式栏即可

24、将图层转换为轮廓模式；再次单击显示模式栏则取消轮廓模式。 图4-31 为舞台中各层的对象 图4-32 为显示轮廓后的效果 单击【显示所有图层的轮廓】 图标，可以将所有图层以轮廓模式显示；再次单击轮廓模式图标则取消轮廓模式。4.4 任务-04 使用命名锚记、帧标签与帧注释 如果要在最终的Flash影片中使用“命名锚记”关键帧，需要在【发布设置】对话框中的HTML选项卡的【模板】下拉菜单中选择“带有命名锚记的Flash”选项，如图4-33所示。图4-33 设置命名锚记4.4 任务-04 使用命名锚记、帧标签与帧注释4.4.1 4.4.1 任务简介任务简介 本任务通过在帧【属性】面板的“名称”文本框里输入文本，在类型下拉列表中选择“锚记”、“注释”或“名称”，可为帧添加命名锚记、帧注释或帧标签。添加了命名锚记后的【属性】面板和时间轴如图4-34、图4-35所示。 图4-34 添加“命名锚记”名称 图4-35 时间轴上的“命名锚记” 4.4 任务-04 使用命名锚记、帧标签与帧注释4.4.2 4.4.2 知识点知识点 无论在帧中添加