Flash8第7章使用时间轴.ppt

《Flash8第7章使用时间轴.ppt》由会员分享，可在线阅读，更多相关《Flash8第7章使用时间轴.ppt（94页珍藏版）》请在三一办公上搜索。

1、第7章 使用时间轴,7.1 时间轴 7.2 帧 7.3 层 7.4 翩翩飞舞的蝴蝶 7.5 遮罩效果 过关练习,时间轴是Flash中的一个重要概念，它使用层和帧按照时间顺序组织和控制动画的内容，时间轴如图所示。,7.1 时间轴,图7.1.1 时间轴,7.1.1 洋葱皮工具在Flash动画的制作过程中，同一时刻内只能显示动画中一帧的内容，但为了定位，有时需要同时查看多个帧的内容，这时可以使用洋葱皮工具。当选择了洋葱皮工具之后，在时间轴上将标识出洋葱皮标记，以确定帧的显示范围，用户可以按住鼠标左键拖动标记左边或右边的小圆点，改变洋葱皮标记的范围，如图所示。,图7.1.2 改变洋葱皮标记的范围,对洋

2、葱皮工具中各按钮的说明如下：（1）“绘图纸外观”按钮：单击该按钮，启动洋葱皮功能，层叠显示洋葱皮标记内各帧的内容，如图所示。（2）“绘图纸外观轮廓”按钮：单击该按钮，以轮廓形态显示当前帧以外各帧的内容，如图所示。（3）“编辑多个帧”按钮：单击该按钮，同时显示洋葱皮标记内各帧的内容，如图所示。,图7.1.3 启动“绘图纸外观”前后效果,图7.1.4“绘图纸外观轮廓”效果 图7.1.5“编辑多个帧”效果,（4）“修改绘图纸标记”按钮：单击该按钮，将弹出如图所示的下拉菜单。,图7.1.6“修改绘图纸标记”下拉菜单,对其中各项说明如下：1）“总是显示标记”：选择该命令，无论是否启动洋葱皮功能，都会在时

3、间轴上显示洋葱皮标记。2）“锚定绘图纸”：通常情况下，洋葱皮标记随播放指针的移动而移动，若选择该命令，则将洋葱皮标记锁定在当前位置。3）“绘图纸2”：选择该命令，在当前帧左右两边各显示两帧。4）“绘图纸5”：选择该命令，在当前帧左右两边各显示5帧。5）“绘制全部”：选择该命令，显示整个动画中所有帧的运动轨迹。,7.1.2 帧频帧频用来控制动画播放的速度，单位为fps，即每秒钟播放的帧数，其值越大，速度越快；反之越慢。标准的动画频率为24 fps，若要将动画用到网络上，一般设置帧频为12 fps，其操作步骤如下：（1）选择“修改”“文档”命令，弹出“文档属性”对话框，如图所示。（2）在“帧频”文

4、本框中输入要定义的帧频数值，如“12”。（3）单击“确定”按钮。,图7.1.7“文档属性”对话框,7.1.3 播放头和运行时间播放头即时间轴中红色的指示线，用户可以拖动它查看不同帧的内容，例如查看第6帧，将其移至第6帧上即可，如图所示。运行时间指第1帧与当前帧之间的时间间隔，如图所示的运行时间为0.4 s，即动画播放到第8帧时共用了0.4秒。,图7.1.8 移动播放头查看第6帧的内容,7.1.4“帧浏览选项”按钮单击“帧浏览选项”按钮，弹出如图所示的下拉菜单，用户可以通过选择其中的命令改变时间轴中各帧的显示状态。（1）“很小”：使时间轴中帧的间隔距离最小，如图所示。（2）“小”：使时间轴中帧的

5、间隔距离比较小。（3）“标准”：使时间轴中帧的间隔距离正常，为系统默认选项。,图7.1.10 选择“很小”选项时的效果,图7.1.9“帧浏览选项”下拉菜单,（4）“中”：使时间轴中帧的间隔距离比较大。（5）“大”：使时间轴中帧的间隔距离最大，如图所示。,图7.1.11 选择“大”选项时的效果,（6）“较短”：改变时间轴中帧的高度。（7）“彩色显示帧”：将不同属性的帧以不同颜色显示，为系统默认选项。（8）“预览”：在时间轴中显示各帧内容的缩略图，如图所示。,图7.1.12 选择“预览”选项时的效果,（9）“关联预览”：在时间轴中显示各帧内容相对于整个动画的大小和位置，如图所示。,图7.1.13

6、选择“关联预览”选项时的效果,Flash动画其实是以时间轴为基础的帧动画，其中，帧就是在最小的时间单位中出现的画面，而帧的多少可以用来衡量一部动画的时间长短。7.2.1 帧的分类帧可以分为普通帧和关键帧两种。普通帧（即通常所说的“帧”）指处在两个关键帧之间的过渡帧，以灰色方格显示；关键帧指在动画播放过程中，呈现出关键性动作或内容变化的帧，有内容的关键帧以小黑点表示，无内容的关键帧（即空白关键帧）以空心圆圈表示，如图所示。,7.2 帧,图7.2.1 帧的分类,Flash动画并不像传统动画那样，需要定义每一帧才能实现动画创作，它只需要定义起始关键帧和结束关键帧，而在两个关键帧之间的过渡帧则由Fla

7、sh计算生成，从而使动画创作变得轻松简单了。,7.2.2 创建帧帧的创建方法有多种，下面介绍使用菜单命令、快捷菜单命令和快捷键3种方法创建帧。（1）使用菜单命令。将鼠标指针放到时间轴中要创建帧的位置，选择“插入”“时间轴”“帧”/“关键帧”/“空白关键帧”命令（见图），创建相应的帧。（2）使用快捷菜单命令。将鼠标指针放到时间轴中要创建帧的位置，单击鼠标右键，在弹出的快捷菜单中选择“插入帧”/“插入关键帧”/“插入空白关键帧”命令（见图），创建相应的帧。,图7.2.2 菜单命令 图7.2.3 快捷菜单命令,（3）使用快捷键。将鼠标指针放到时间轴中要创建帧的位置，按F5键插入普通帧；按F6键插入关

8、键帧；按F7键插入空白关键帧，该种方法最为方便。,7.2.3 编辑帧在时间轴中，用户可以方便地对帧进行各种编辑操作，包括选择、移动、删除、清除、翻转、复制与粘贴帧。1选择帧要对帧进行编辑，首先需要选择帧，即选择单个帧、连续的多个帧、不连续的多个帧或所有帧，下面分别进行介绍。,（1）选择单个帧。直接在时间轴中单击该帧所在的位置即可，如图所示。（2）选择连续的多个帧。选择单个帧之后，在按住Shift键的同时单击另外一个帧，可以选择连续的多个帧，如图所示。,图7.2.4 选择单个帧 图7.2.5 选择连续的多个帧,（3）选择不连续的多个帧。选择单个帧之后，在按住Ctrl键的同时单击其他帧，可以选择不

9、连续的多个帧，如图所示。（4）选择所有帧。选择单个帧之后，单击鼠标右键，在弹出的快捷菜单中选择“选择所有帧”命令，可以选择所有帧，如图所示。,图7.2.6 选择不连续的多个帧 图7.2.7 选择所有帧,2移动帧在使用Flash制作动画的过程中，经常需要将单个或多个帧移动到同一层的其他位置或其他层上，操作步骤如下：（1）选中需要移动的帧并将鼠标指针停留在选中的帧上，当其下方出现一个虚线方框时，按住鼠标左键不放并拖动帧，如图所示。（2）当移动到目标位置时，释放鼠标左键即可，如图所示。,图7.2.8 移动帧的过程 图7.2.9 移动帧到目标位置,3删除帧删除帧指将选中的帧删除，同时其后的帧自动左移，

10、操作步骤如下：（1）选中要删除的单个帧或多个帧。（2）选择“编辑”“时间轴”“删除帧”命令进行删除，如图所示。,图7.2.10 删除帧前后的效果,删除前 删除后,4清除帧清除帧指清除某一帧所对应的对象，从而使其变为空白关键帧或空白帧，操作步骤如下：（1）选中要清除的单个帧或多个帧。（2）选择“编辑”“时间轴”“清除帧”命令进行清除。如果清除的是单个帧或关键帧，则该帧变为空白关键帧；如果清除的是一串连续的帧，则第1个帧变为空白关键帧，后面的帧变为普通帧，如图所示。,图7.2.11 清除帧前后的效果,清除单个关键帧前后的效果,清除多个帧前后的效果,清除单个帧前后的效果,5翻转帧在动画制作过程中，有

11、时需要将两个关键帧之间的一组帧翻转过来，也就是使一组中的第一帧变成翻转后的最后一帧，使最后一帧变成第一帧，如图所示。操作步骤如下：（1）选择单个帧，单击鼠标右键，在弹出的快捷菜单中选择“选择所有帧”命令，选择所有帧。（2）再次单击鼠标右键，在弹出的快捷菜单中选择“翻转帧”命令。,图7.2.12 翻转帧前后的效果,6复制和粘贴帧在Flash 8中，不仅可以直接创建帧，还可以把帧复制到需要的位置，如图所示。操作步骤如下：,图7.2.13 复制和粘贴帧前后的效果,（1）选择单个帧或多个帧。（2）单击鼠标右键，在弹出的快捷菜单中选择“复制帧”命令。（3）在需要的位置单击鼠标右键，在弹出的快捷菜单中选择

12、“粘贴帧”命令。,7.2.4 创建帧标签为了便于识别、控制和定位帧，经常需要为动画的一些关键帧创建标签，其操作步骤如下：（1）选中要创建标签的关键帧，（2）在属性面板的“帧标签”文本框中输入标签的名称，例如“aa”，如图所示。,图7.2.14 输入标签的名称,（3）在“标签类型”下拉列表中选择标签的类型，包括“名称”、“注释”和“锚记”3个选项，不同的标签类型在时间轴中会有不同的显示，如图所示。,图7.2.15 创建帧标签,为了更好地创建与管理动画，Flash引入了层的概念。对于新建的Flash文件，在默认情况下只有一个层。随着复杂程度的增加，用户可以根据需要新建若干层，然后将不同类型的对象置

13、于不同的层中。7.3.1 层的分类根据用途的不同，可以将层分为普通层、引导层和遮罩层3种类型。（1）普通层：即系统默认层，用于存放元件、位图、矢量图和声音等对象，以图标显示。,7.3 层,（2）引导层：用于设置对象的运动轨迹，以图标显示，如图所示。引导层中的对象不随动画输出，因此不会增加文件的大小。,图7.3.1 引导层,（3）遮罩层：用于遮盖与之相链接的层中的对象，以图标显示，如图所示。与引导层一样，遮罩层中的对象也不随动画输出。,图7.3.2 遮罩层,7.3.2 层的操作下面介绍层的有关操作，包括创建层、重命名层、选择层、改变层的顺序、锁定与解锁层、隐藏与显示层、以轮廓方式显示层、以层文件

14、夹形式组织层。1创建层对于新建的Flash文件，系统默认有一个层，即“图层1”，如果要创建新层，可以使用以下方法：,（1）单击时间轴面板中的“插入图层”按钮。（2）选择“插入”“时间轴”“图层”命令。（3）将鼠标指针置于层名区上，单击鼠标右键，在弹出的快捷菜单中选择“插入图层”命令。在Flash中，层按照创建的先后顺序，由下至上叠加，并且自动命名为“图层2”、“图层3”等，如图所示为添加层前后的效果。,图7.3.3 添加层前后的效果,2重命名层一个复杂的Flash动画，可能要创建几十甚至几百个层，如果沿用默认的名称，将难以区分和记忆每一层的内容，因此，需要根据层中内容重命名层，操作步骤如下：（

15、1）选中要重命名的层。（2）双击该层的名称，使其进入可编辑状态。（3）输入新的名称，例如“声音”。（4）输入完毕后，在非白色区域单击鼠标左键，如图所示。,图7.3.4 重命名层,3选择层选择层也就是激活层，使该层成为当前可操作的层，操作方法如下：（1）在时间轴中单击要选择层的名称。（2）在时间轴中单击要选择层所包含的帧。（3）在舞台中选择该层中的某个对象。,有时为了编辑的需要，可能要同时选择多个层，遇到这种情况，可以利用Shift键或Ctrl键来完成。当用户选择第一个层后，在按住Shift键的同时，单击要选择的最后一层，可以选择连续的多个层；在按住Ctrl键的同时，单击不相邻的层，可以选择不连

16、续的多个层，如图所示。,图7.3.5 选择多个层,4改变层的顺序层的顺序会直接影响层中对象的重叠形式，即处于上面层中的内容会遮挡住下面层中的内容，如图所示。,图7.3.6 层的遮挡关系,改变层顺序的操作步骤如下：（1）选择要改变顺序的层。（2）按住鼠标左键并拖动。（3）在需要的位置释放鼠标左键即可，如图所示。,图7.3.7 改变层的顺序,5锁定与解锁层当对某一层的操作已经完成，为了避免由于误操作而导致辛苦的工作付诸东流，用户可以将该层锁定，直接单击该层与“锁定/解除锁定所有图层”按钮交叉的图标，使其变为图标即可，如图所示。,图7.3.8 锁定层,如果要编辑锁定层中的内容，单击层与“锁定/解除锁

17、定所有图层”按钮交叉的图标，将其变为图标即可。注意：如果锁定的是当前层，则该层中的图标将变成图标，表示该层同时处于不可编辑状态，如图所示。另外，单击“锁定/解除锁定所有图层”按钮，可以同时锁定所有层或者解除对所有层的锁定，如图所示。,图7.3.9 锁定当前层 图7.3.10 锁定所有层,如果锁定的是当前层，则该层中的。,6隐藏与显示层当用户对某层进行编辑时，有些层可能会影响到用户的操作，那么就需要将这些层进行隐藏，单击该层与“显示/隐藏所有图层”按钮交叉的图标，将其变为图标即可，如图所示。,图7.3.11 隐藏层,对于隐藏层中的所有对象，在舞台中将不予显示，如果要编辑隐藏层中的内容，单击该层与

18、“显示/隐藏所有图层”按钮交叉的图标，将其变为图标即可。技巧：单击“显示/隐藏所有图层”按钮，可以同时隐藏所有层或者将它们重新显示，如图所示。,图7.3.12 同时隐藏或显示所有层,7以轮廓方式显示层在默认情况下，层中的内容以完整的实体显示，如图所示。但有时为了便于查看对象的边缘，需要以轮廓方式显示层，此时，Flash将只显示对象的轮廓，如图所示。,图7.3.13 以实体方式显示对象 图7.3.14 以轮廓方式显示对象,若要以轮廓方式显示层，直接单击该层与“显示所有图层的轮廓”按钮交叉的图标，使其变为图标即可，如图所示。,图7.3.15 层的两种显示方式,8以层文件夹形式组织层层文件夹能有效地

19、组织层，从而便于用户编辑和调试动画，创建层文件夹的操作步骤如下：（1）执行下列操作之一，创建空的层文件夹。1）选择“插入”“时间轴”“图层文件夹”命令。2）单击时间轴面板中的“插入图层文件夹”按钮。3）将鼠标指针置于某个层名上，单击鼠标右键，在弹出的快捷菜单中选择“插入文件夹”命令。,（2）为层文件夹命名，若要存放图片，可命名为“image”；若要存放声音，可命名为“sound”。（3）按住并拖动相关层到层文件夹中。提示：如果要展开层文件夹，单击文件夹左侧的小三角即可，如图所示。,如果要展开层文件夹，单击文件夹左侧的小三角。,图7.3.16 展开层文件夹,7.3.3 引导层的创建为了在Flas

20、h动画的制作过程中对齐对象，可以创建引导层，然后将其他层上的对象与引导层上的对象对齐。引导层分为普通引导层和运动引导层两种类型，下面分别进行介绍。1创建普通引导层普通引导层是在普通层的基础上建立的，主要起辅助静态定位的作用。创建普通引导层的操作步骤如下：,（1）将鼠标指针置于普通层的层名区。（2）单击鼠标右键，在弹出的快捷菜单中选择“引导层”命令，将该层转换为普通引导层，普通引导层以丁字尺图标表示，如图所示。,图7.3.17 将普通层转换为普通引导层,若要将引导层转换为普通层，将鼠标指针置于该层的层名区中，然后单击鼠标右键，在弹出的快捷菜单中选择“引导层”命令即可。2创建运动引导层与普通引导层

21、相比，运动引导层是一个新层，在创建时必须指定为哪个层创建运动引导层。下面介绍运动引导层的创建和应用。创建运动引导层的操作步骤如下：,（1）选择要创建运动引导层的层，例如“图层3”。（2）单击时间轴面板中的“添加运动引导层”按钮，创建一个运动引导层，如图所示。,图7.3.18 创建运动引导层前、后的效果,用户还可以把普通引导层转换为运动引导层，操作步骤如下：（1）选中普通引导层下方的层。（2）将鼠标指针置于该层名区，单击鼠标右键，在弹出的快捷菜单中选择“属性”命令，弹出“图层属性”对话框（见图），在“类型”选项区中选中“被引导”单选按钮，如图所示。,图7.3.19“图层属性”对话框 图7.3.2

22、0 设置层类型,（3）单击“确定”按钮即可，如图所示。,图7.3.21 将普通引导层转换为运动引导层,7.3.4 遮罩层的创建使用“遮罩层”命令可以创建探照灯、百叶窗等遮罩效果，遮罩效果的制作必须用两个层完成，上面的层叫做遮罩层，下面的层叫做被遮罩层。创建遮罩层的操作步骤如下：（1）将鼠标指针置于要作为遮罩层的层名区。（2）单击鼠标右键，在弹出的快捷菜单中选择“遮罩层”命令，则该层的图标将变为形状，其下方被遮罩层的图标将变为形状，如图所示。,图7.3.22 遮罩前、后的效果,注意：在创建遮罩层时，Flash会锁定遮罩层和被它遮罩的层。如果用户需要编辑遮罩层，应先解除锁定，但是，解除锁定后将不会

23、显示遮罩效果；如果需要显示遮罩效果，必须再次将它们锁定。若要取消遮罩效果，将鼠标指针置于遮罩层的层名区中，然后单击鼠标右键，在弹出的快捷菜单中选择“遮罩层”命令即可。,本例将制作翩翩飞舞的蝴蝶。在制作过程中，将用到“导入到舞台”命令、“添加运动引导层”按钮、“创建补间动画”命令，效果如图所示。,7.4 翩翩飞舞的蝴蝶,图7.4.1 效果图,操作步骤如下：（1）启动Flash 8软件。（2）按Ctrl+J键，弹出“文档属性”对话框，设置“尺寸”为“550 px400 px”，“背景颜色”为“白色”，单击“确定”按钮。（3）按Ctrl+F8键，弹出“创建新元件”对话框，在“名称”文本框中输入“蝴蝶

24、”，在“类型”选项区中选中“影片剪辑”单选按钮，如图所示。,图7.4.2“创建新元件”对话框,（4）单击“确定”按钮，进入该元件的编辑窗口。选择“文件”“导入”“导入到舞台”命令，弹出“导入”对话框，导入一段蝴蝶动画到舞台的中心位置。（5）单击“场景1”图标，返回到主场景。（6）选择“窗口”“库”命令，打开库面板，从中拖动“蝴蝶”元件到舞台中。（7）单击时间轴中的“添加运动引导层”按钮，添加一个引导层，如图所示。,图7.4.3 添加引导层,（8）选择工具箱中的铅笔工具，作为蝴蝶飞舞的路线，如图所示。在选项栏中设置铅笔模式为“墨水”，在引导层中绘制一条曲线。,图7.4.4 绘制蝴蝶飞舞的路线,（

25、9）选中引导层的第35帧，按F5键插入帧，选中“图层1”的第35帧，按F6键插入关键帧。（10）选中第1帧中的蝴蝶，调整其中心点与引导线的左端点对齐，如图所示。,图7.4.5 使第1帧中的蝴蝶对齐引导线的左端点,图7.4.6 使第35帧中的蝴蝶对齐引导线的右端点,（11）选中第35帧中的蝴蝶，调整其中心点与引导线的右端点对齐，如图所示。,（12）选中“图层1”的第1帧，单击鼠标右键，在弹出的快捷菜单中选择“创建补间动画”命令，创建一段运动补间动画。（13）按Ctrl+Enter键预览，效果如图所示。,本例将制作遮罩效果。在制作过程中，将用到矩形工具、“创建补间动画”命令和“遮罩层”命令，效果如

26、图所示。,7.5 遮罩效果,图7.5.1 效果图,操作步骤如下：（1）启动Flash 8软件。（2）按Ctrl+J键，弹出“文档属性”对话框，设置“尺寸”为“400 px300 px”，“背景颜色”为“#330099”，单击“确定”按钮。（3）选择工具箱中的矩形工具，在属性面板中设置笔触颜色为“无”，填充颜色为“#8ADC01”，在舞台的左侧位置绘制一个矩形，如图所示。（4）选择工具箱中的矩形工具，在属性面板中设置填充颜色为“黑色”，单击选项栏中的“边角半径设置”按钮，在弹出的“矩形设置”对话框中设置“边角半径”为“15”，单击“确定”按钮关闭对话框后，在如图所示的位置绘制一个圆角矩形。,图7

27、.5.2 绘制矩形 图7.5.3 绘制圆角矩形,（5）选择工具箱中的直线工具，在如图所示的位置绘制一条直线。（6）删除直线及其左侧的圆角矩形，如图所示。,图7.5.4 绘制直线 图7.5.5 删除直线及其左侧的圆角矩形,（7）单击时间轴中的“插入图层”按钮，插入“图层2”，然后在该层中绘制一个黄色的圆角矩形，如图所示。（8）在如图所示的位置绘制一个蓝色的圆角矩形。,图7.5.6 绘制黄色的圆角矩形 图7.5.7 绘制蓝色的圆角矩形,（9）选择工具箱中的直线工具，在如图所示的位置绘制一条直线。（10）填充直线左侧的圆角矩形为黄色，并且删除直线，如图所示。,图7.5.8 绘制直线 图7.5.9 填

28、充圆角矩形并删除直线,（11）选择“插入”“新建元件”命令，弹出“创建新元件”对话框，设置“名称”为“文本”，“类型”为“图形”，单击“确定”按钮，进入其编辑窗口。（12）选择工具箱中的文本工具，在属性面板中设置字体为“Bookman Old Style”，字体大小为“100”，文本颜色为“灰色”，并单击“切换粗体”按钮，然后在舞台中输入字符“MASK”，如图所示。,图7.5.10 输入字符,（13）单击“场景1”图标，返回到主场景。（14）选中“图层2”，单击时间轴中的“插入图层”按钮，插入“图层3”。选择“窗口”“库”命令，打开库面板，从中拖动“文本”元件到如图所示的位置。,图7.5.11

29、 拖入“文本”元件,（15）分别选中“图层1”和“图层2”的第40帧，按F5键插入帧。（16）选中“图层3”的第40帧，按F6键插入关键帧，然后选择工具箱中的任意变形工具，调整该帧中文本的大小和位置，如图所示。（17）选中“图层3”的第1帧，单击鼠标右键，在弹出的快捷菜单中选择“创建补间动画”命令，创建一段动作补间动画，然后将鼠标指针置于“图层3”的层名区，单击鼠标右键，在弹出的快捷菜单中选择“遮罩层”命令，创建遮罩效果，如图所示。,（18）按Ctrl+Enter键预览，效果如图所示。,图7.5.12 调整第40帧中文本的大小和位置 图7.5.13 创建遮罩效果,填空题1时间轴使用层和帧按照_顺序组织和控制动画的内容。2_可用来控制动画播放的速度，单位为fps，即每秒钟播放的帧数，其值越大，速度越快；反之越慢。选择题1若要将动画应用到网络上，一般设置帧频为（）。（A）24 fps（B）12 fps（C）16 fps（D）48 fps,过关练习,2帧的类型包括（）。（A）普通帧（B）关键帧（C）起始关键帧（D）结束关键帧简答题1为了便于识别、控制和定位帧，经常需要做何种操作？2简述层的类型。上机操作题1新建文件，在时间轴上创建不同类型的帧。2练习帧的插入、选取、删除和移动。3打开一个Flash文件，利用不同的洋葱皮工具观察其内容。,