时间轴与帧-Flash.ppt

1、第六章时间轴与帧,时间轴帧洋葱皮工具时间轴特效应用实例闪客之家本章小结习题六,时间轴是Flash中的一个重要面板，用于组织动画在不同时刻时的内容并进行控制。一、时间轴的组成时间轴主要由层操作区和帧操作区组成，如图6.1.1所示。,第一节时间轴,图6.1.1时间轴,1层操作区层操作区位于时间轴的左侧，主要由层列、3个图标和4个按钮组成，下面简单介绍图标和按钮的功能。（1）“显示/隐藏所有图层”图标：用于显示或隐藏所有图层。（2）“锁定/解除锁定所有图层”图标：用于锁定所有图层或解除对所有图层的锁定。（3）“显示所有图层的轮廓”图标：用于以轮廓方式显示所有图层中的内容。（4）“插入图层”按钮：用于

2、创建图层。,（5）“添加运动引导层”按钮：用于为当前图层添加运动引导层。（6）“插入图层文件夹”按钮：用于创建图层文件夹。（7）“删除图层”按钮：用于删除当前图层。2帧操作区帧操作区由播放指针、播放时间、洋葱皮工具和帧频等组成。播放指针即时间轴中红色的指示线，用户可以通过拖动它来查看不同帧的内容，如图6.1.2所示。,播放时间指第1帧与当前帧之间的时间间隔，如图6.1.2所示的播放时间分别为0.1s和0.4s，即动画播放到第2帧时用了0.1s，播放到第6帧时用了0.4s。一般情况下，在工作区中只能显示一帧的内容，为了更好地编辑动画，可以使用洋葱皮工具启动洋葱皮功能，从而查看当前帧及其前、后各帧

3、的内容。在启动洋葱皮功能时，当前帧正常显示，而其他各帧则半透明显示，如图6.1.3所示。帧频用来控制动画播放的速度，单位为fps，即每秒钟播放的帧数，其值越大，速度越快，反之越慢。标准的动画频率为24fps，若要将动画用到网络上，一般设置帧频为12fps。,二、操作时间轴默认情况下，时间轴位于工作区的上面。用户可以任意移动时间轴、调整时间轴的尺寸以及改变时间轴中层列表的宽度。1移动时间轴用户可以将时间轴停靠在工作区的底部或者任意一边，甚至可以将其在一个窗口中独立显示。其操作方法为按住时间轴的左上角，拖动鼠标到新的位置后释放，如图6.1.4所示。,将时间轴停靠在工作区的底部,将时间轴停靠在工作区

4、的一边,图6.1.4移动时间轴,2调整时间轴的尺寸用户可以调整时间轴的尺寸，操作步骤如下：（1）移动鼠标指针到时间轴的边缘，当其变为形状时，拖动鼠标，如图6.1.5所示。,图6.1.5调整时间轴的尺寸（一）,（2）拖动到合适的位置后释放鼠标，如图6.1.6所示。,图6.1.6调整时间轴的尺寸（二）,3改变时间轴中层列表的宽度用户可以改变时间轴中层列表的宽度，操作步骤如下：（1）移动鼠标指针到层列表与帧列表的中间，当其变为形状时，拖动鼠标，如图6.1.7所示。,图6.1.7改变时间轴中层列表的宽度（一）,（2）拖动到合适的位置后释放鼠标，如图6.1.8所示。,图6.1.8改变时间轴中层列表的宽度

5、（二）,在Flash中，对动画的操作实质上是对帧的操作，因此，在学习制作动画之前，首先要学习帧的相关知识。一、帧的分类帧包括普通帧和关键帧，其中关键帧又分为无内容的关键帧和有内容的关键帧。,第二节帧,1普通帧普通帧指处在两个关键帧之间的帧，以灰色方格显示。在动画中增加一些普通帧，可以延长动画的播放时间，如图6.2.1所示。增加的普通帧原播放时间延长后的播放时间,2关键帧关键帧指在动画播放过程中，呈现出关键性动作或内容变化的帧，有内容的关键帧以小黑点表示，无内容的关键帧以空心圆圈表示，如图6.2.2所示。Flash动画并不像传统动画那样，需要定义每一帧才能实现动画创作，它只需定义两个关键帧，而自

6、动生成在两个关键帧之间的帧，从而使动画创作变得轻松简单。,注意：在逐帧动画中，每一帧都是关键帧。无内容的关键帧有内容的关键帧。,二、创建帧帧的创建方法有多种，下面介绍使用菜单命令、快捷菜单命令和快捷键3种方法创建帧。（1）使用菜单命令。将鼠标指针放到时间轴中要创建帧的位置，选择“插入”“时间轴”“帧”/“关键帧”/“空白关键帧”命令（见图6.2.3），创建相应的帧。（2）使用快捷菜单命令。将鼠标指针放到时间轴中要创建帧的位置，单击鼠标右键，在弹出的快捷菜单中选择“插入帧”/“插入关键帧”/“插入空白关键帧”命令（见图6.2.4），创建相应的帧。,图6.2.3菜单命令图6.2.4快捷菜单命令,（

7、3）使用快捷键。将鼠标指针放到时间轴中要创建帧的位置，按F5键插入普通帧；按F6键插入关键帧；按F7键插入空白关键帧，该种方法最为方便。注意：在Flash动画中，关键帧的多少决定了动画的细致程度，关键帧越多动画越细致。如果把补间动画中的所有帧都做成了关键帧，那么就成了逐帧动画。,三、编辑帧在时间轴中，用户可以方便地对帧进行各种编辑操作，包括选择、移动、删除、清除、翻转、复制与粘贴帧。1选择帧要对帧进行编辑，首先需要选择帧，即选择单个帧、连续的多个帧、不连续的多个帧或所有帧，下面分别进行介绍。（1）选择单个帧。直接在时间轴中单击该帧所在的位置即可，如图6.2.5所示。,（2）选择连续的多个帧。选

8、择单个帧之后，在按住Shift键的同时单击另外一个帧，可以选择连续的多个帧，如图6.2.6所示。,图6.2.5选择单个帧图6.2.6选择连续的多个帧,（3）选择不连续的多个帧。选择单个帧之后，在按住Ctrl键的同时单击其他帧，可以选择不连续的多个帧，如图6.2.7所示。（4）选择所有帧。选择单个帧之后，单击鼠标右键，在弹出的快捷菜单中选择“选择所有帧”命令，可以选择所有帧，如图6.2.8所示。,图6.2.7选择不连续的多个帧图6.2.8选择所有帧,2移动帧在使用Flash制作动画的过程中，经常需要将单个或多个帧移动到同一层的其他位置或其他层上，操作步骤如下：（1）选中需要移动的帧并将鼠标指针停

9、留在选中的帧上，当其下方出现一个虚线方框时，按住鼠标左键不放并拖动帧，如图6.2.9所示。（2）当移动到目标位置时，释放鼠标左键即可，如图6.2.10所示。,图6.2.9移动帧的过程图6.2.10移动帧到目标位置,3删除帧删除帧指将选中的帧删除，同时其后的帧自动左移，操作步骤如下：（1）选中要删除的单个帧或多个帧。（2）选择“编辑”“时间轴”“删除帧”命令进行删除，如图6.2.11所示。,删除前删除后图6.2.11删除帧前后的效果,4清除帧清除帧指清除某一帧所对应的对象，从而使其变为空白关键帧或空白帧，操作步骤如下：（1）选中要清除的单个帧或多个帧。（2）选择“编辑”“时间轴”“清除帧”命令进

10、行清除。如果清除的是单个帧或关键帧，则该帧变为空白关键帧；如果清除的是一串连续的帧，则第1个帧变为空白关键帧，后面的帧变为普通帧，如图6.2.12所示。,5翻转帧在动画制作过程中，有时需要将两个关键帧之间的一组帧翻转过来，也就是使一组中的第一帧变成翻转后的最后一帧，使最后一帧变成第一帧，如图6.2.13所示。操作步骤如下：（1）选择单个帧，单击鼠标右键，在弹出的快捷菜单中选择“选择所有帧”命令，选择所有帧。（2）再次单击鼠标右键，在弹出的快捷菜单中选择“翻转帧”命令。,注意：动画翻转后的播放顺序与翻转前的播放顺序恰好相反。,翻转前翻转后图6.2.13翻转帧前后的效果,6复制和粘贴帧在Flash

11、8中，不仅可以直接创建帧，还可以把帧复制到需要的位置，如图6.2.14所示。操作步骤如下：（1）选择单个帧或多个帧。（2）单击鼠标右键，在弹出的快捷菜单中选择“复制帧”命令。（3）在需要的位置单击鼠标右键，在弹出的快捷菜单中选择“粘贴帧”命令。,复制所选帧粘贴所选帧图6.2.14复制和粘贴帧前后的效果,四、创建帧标签为了便于识别、控制和定位帧，经常需要为动画的一些关键帧创建标签，其操作步骤如下：（1）选中要创建标签的关键帧，（2）在属性面板的“帧”文本框中输入标签的名称，例如“aa”，如图6.2.15所示。,图6.2.15输入标签的名称,（3）在“标签类型”下拉列表中选择标签的类型，包括“名称

12、”、“注释”和“锚记”3个选项，不同的标签类型在时间轴中会有不同的显示，如图6.2.16所示。,提示：帧标签作为文件的一部分，它的长短将影响文件的大小，因此应采用比较短的帧标签来缩小文件的大小。,五、帧浏览选项帧浏览选项位于时间轴的右上角，单击“帧浏览选项”按钮，会弹出如图6.2.17所示的下拉菜单，用户可以通过选择其中的命令改变时间轴中各帧的显示状态。（1）很小：选择该命令，可以使时间轴中各帧的间距最小，如图6.2.18所示。,（2）小：选择该命令，可以使时间轴中各帧的间距比较小，如图6.2.19所示。（3）标准：该命令是系统的默认命令，选择该命令，可以使时间轴中各帧的间距正常，如图6.2.

13、20所示。,图6.2.19选择“小”选项时的效果图6.2.20选择“标准”选项时的效果,（4）中：选择该命令，可以使时间轴中各帧的间距比较大，如图6.2.21所示。（5）大：选择该命令，可以使时间轴中各帧的间距最大，如图6.2.22所示。,图6.2.21选择“中”选项时的效果图6.2.22选择“大”选项时的效果,（6）预览：选择该命令，显示各帧的缩略图，如图6.2.23所示。（7）关联预览：选择该命令，显示各帧内容相对于整个工作区的大小和位置，如图6.2.24所示。,图6.2.23选择“预览”选项时的效果图6.2.24选择“关联预览”选项时的效果,（8）较短：选择该命令，将改变时间轴中帧的高度

14、，如图6.2.25所示。（9）彩色显示帧：该命令是系统的默认命令，选择该命令，将按照帧的不同属性进行着色，如图6.2.26所示为取消选中该命令时的时间轴。,图6.2.25选择“较短”选项时的效果图6.2.26选择“彩色显示帧”选项时的效果,在Flash动画的制作过程中，同一时刻内只能显示动画中一帧的内容，但为了定位，有时需要同时查看多个帧的内容，这时可以使用洋葱皮工具。当选择了洋葱皮工具之后，在时间轴上将标识出洋葱皮标记，以确定帧的显示范围，用户可以按住鼠标左键拖动标记左边或右边的小圆点，改变洋葱皮标记的范围，如图6.3.1所示。,第三节洋葱皮工具,对洋葱皮工具中各按钮的说明如下：（1）“绘图

15、纸外观”按钮：单击该按钮，启动洋葱皮功能，层叠显示洋葱皮标记内各帧的内容，如图6.3.2所示。,图6.3.2启动“绘图纸外观”前后效,注意：在“绘图纸外观”显示状态下，播放指针处的内容以正常颜色显示，其他内容以半透明颜色显示。（2）“绘图纸外观轮廓”按钮：单击该按钮，以轮廓形态显示当前帧以外各帧的内容，如图6.3.3所示。（3）“编辑多个帧”按钮：单击该按钮，同时显示洋葱皮标记内各帧的内容，如图6.3.4所示。,（4）“修改绘图纸标记”按钮：单击该按钮，弹出如图6.3.5所示的下拉菜单，对其中的各项说明如下：总是显示标记：选择该命令，无论是否启动洋葱皮功能，都会在时间轴上显示洋葱皮标记。锚定绘

16、图纸：通常情况下，洋葱皮标记随播放指针的移动而移动，若选择该命令，则将洋葱皮标记锁定在当前位置。绘图纸2：选择该命令，在当前帧左右两边各显示两帧，如图6.3.6所示。,图6.3.5“修改绘图纸标记”下拉菜单图6.3.6“绘图纸2”效果,绘图纸5：选择该命令，在当前帧左右两边各显示5帧，如图6.3.7所示。绘制全部：选择该命令，显示整个动画中所有帧的运动轨迹，如图6.3.8所示。,图6.3.7“绘图纸5”效果图6.3.8“绘制全部”效果,Flash8提供了预建的时间轴特效，使用户可以通过执行最少的步骤创建复杂的特效动画。用户可以对以下对象应用时间轴特效。（1）文本。（2）图形，包括形状、组以及图

17、形元件。（3）位图图像。（4）按钮元件。注意：用户还可以对影片剪辑应用时间轴特效，但当用户将时间轴特效应用于影片剪辑时，Flash将把特效嵌套在影片剪辑中。,第四节时间轴特效,一、添加时间轴特效当用户向对象添加时间轴特效时，如果当前层中只有一个对象，Flash将在当前层对该对象应用时间轴特效；如果当前层中有多个对象，Flash将创建一个新层并将对象及所有的补间和变形都存放至该层。Flash8提供的时间轴特效共有变形、转换、分散式直接复制、复制到网格、分离、展开、投影和模糊8种，下面分别进行介绍。,1变形利用变形特效，可以调整选中动画元素的位置、缩放比例、旋转角度、Alpha透明度和颜色等。将变

18、形特效应用于动画元素的操作步骤如下：（1）选中要添加变形特效的动画元素，例如文本“Flash8”，如图6.4.1所示。（2）选择“插入”“时间轴特效”“变形/转换”“变形”命令，弹出如图6.4.2所示的“变形”对话框。对其中各项参数说明如下：,图6.4.1选中文本图6.4.2“变形”对话框,1）“效果持续时间”：设置变形特效持续的时间，以帧为单位。2）“更改位置方式”：设置选中动画元素在X轴和Y轴方向上的偏移量，以像素为单位。3）“旋转”：设置选中动画元素的旋转角度和次数。4）“更改颜色”：应用或取消颜色的更改。5）“最终颜色”：指定选中动画元素最后的颜色。6）“最终的Alpha”：指定选中动

19、画元素最后的透明度。7）“移动减慢”：设置选中动画元素速度变化的方式。,（3）设置各项参数（见图6.4.3），单击“确定”按钮。（4）按Ctrl+Enter键，测试动画效果，将看到文本在旋转、缩放的同时，颜色及透明度也跟着发生改变，如图6.4.4所示。,图6.4.3设置各项参数图6.4.4“变形”效果,2转换利用转换特效，可以创建淡入淡出效果。将转换特效应用于动画元素的操作步骤如下：（1）选中要添加转换特效的动画元素，例如文本“Flash8”，如图6.4.1所示。（2）选择“插入”“时间轴特效”“变形/转换”“转换”命令，弹出如图6.4.5所示的“变形”对话框。对其中各项参数说明如下：1）“效

20、果持续时间”：设置转换特效持续的时间，以帧为单位。2）“方向”：设置转换特效过渡的方向。3）“淡化”：设置淡化效果。,图6.4.5“变形”对话框,4）“涂抹”：设置选中动画元素的擦除效果。5）“移动减慢”：设置选中动画元素速度变化的方式。（3）设置各项参数（本例采用默认设置），单击“确定”按钮。（4）按Ctrl+Enter键，测试动画效果，将看到文本被逐渐显示出来，如图6.4.6所示。,图6.4.6“转换”效果,3分散式直接复制利用分散式直接复制特效，可以根据设置的次数复制选中的动画元素。将分散式直接复制特效应用于动画元素的操作步骤如下：（1）选中要添加分散式直接复制特效的动画元素，例如文本“

21、Flash8”，如图6.4.1所示。（2）选择“插入”“时间轴特效”“帮助”“分散式直接复制”命令，弹出如图6.4.7所示的“分散式直接复制”对话框。对其中各项参数说明如下：,图6.4.7“分散式直接复制”对话框,1）“副本数量”：设置要拷贝的副件数。2）“偏移距离”：设置选中动画元素在X轴和Y轴方向上的偏移量。3）“偏移旋转”：设置偏移旋转的角度。4）“偏移起始帧”：设置偏移开始的帧编号。5）“指数缩放比例”：以指数方式在X轴和Y轴方向上同时缩放。6）“更改颜色”：设置是否改变副件的颜色。7）“最终颜色”：指定选中动画元素最后的颜色。8）“最终的Alpha”：指定选中动画元素最后的透明度。,

22、（3）设置各项参数，单击“确定”按钮。（4）按Ctrl+Enter键，测试动画效果，将看到复制出的很多文本，其颜色、位置和透明度的变化非常平滑，如图6.4.8所示。,图6.4.8“分散式直接复制”效果,4复制到网格利用复制到网格特效，可以按照列数复制选中的动画元素，然后按照行数列数创建该元素的网格。将复制到网格特效应用于动画元素的操作步骤如下：（1）选中要添加复制到网格特效的动画元素，例如文本“Flash8”，如图6.4.1所示。（2）选择“插入”“时间轴特效”“帮助”“复制到网格”命令，弹出如图6.4.9所示的“复制到网格”对话框。对其中各项参数说明如下：1）“网格尺寸”：设置网格的行数和列

23、数。2）“网格间距”：设置网格的行间距和列间距。,（3）设置各项参数，单击“确定”按钮。（4）按Ctrl+Enter键，测试动画效果，将看到一个文本阵列，如图6.4.10所示。,图6.4.9“复制到网格”对话框图6.4.10“复制到网格”效果,5分离利用分离特效，可以向选中的动画元素添加类似爆炸的效果。将分离特效应用于动画元素的操作步骤如下：（1）选中要添加分离特效的动画元素，例如文本“Flash8”，如图6.4.1所示。（2）选择“插入”“时间轴特效”“效果”“分离”命令，弹出如图6.4.11所示的“分离”对话框。对其中各项参数说明如下：,图6.4.11“分离”对话框,1）“分离方向”：设置

24、分离特效的方向。2）“弧线大小”：设置选中动画元素在X轴和Y轴方向上的偏移量。3）“碎片旋转量”：设置碎片的旋转角度，以度为单位。4）“碎片大小更改量”：设置碎片的大小，以像素为单位。5）“最终的Alpha”：设置分离特效最终的透明度，用户可以直接输入百分比数字，也可以拖动百分比滑块来改变透明度。,（3）设置各项参数（本例采用默认设置），单击“确定”按钮。（4）按Ctrl+Enter键，测试动画效果，将看到文本被抛撒出去，如图6.4.12所示。,图6.4.12“分离”效果,6展开利用展开特效，可以扩展或收缩选中的动画元素。将展开特效应用于动画元素的操作步骤如下：（1）选中要添加展开特效的动画元

25、素，例如文本“Flash8”，如图6.4.1所示。（2）选择“插入”“时间轴特效”“效果”“展开”命令，弹出如图6.4.13所示的“展开”对话框。对其中各项参数说明如下：,图6.4.13“展开”对话框,1）“效果持续时间”：设置展开特效持续的时间，以帧为单位。2）“展开”、“压缩”和“两者皆是”：设置特效的运动形式。3）“移动方向”：设置展开特效的运动方向。4）“组中心转换方式”：设置运动中心在X轴和Y轴方向上的偏移量。5）“碎片偏移”：设置碎片的偏移量。6）“碎片大小更改量”：设置碎片的大小，以像素为单位。,（3）设置各项参数（本例采用默认设置），单击“确定”按钮。（4）按Ctrl+Ente

26、r键，测试动画效果，将看到文本在伸展，如图6.4.14所示。,图6.4.14“展开”效果,7投影利用投影特效，可以为选中的动画元素创建一种阴影效果。将投影特效应用于动画元素的操作步骤如下：（1）选中要添加投影特效的动画元素，例如文本“Flash8”，如图6.4.1所示。（2）选择“插入”“时间轴特效”“效果”“投影”命令，弹出如图6.4.15所示的“投影”对话框。对其中各项参数说明如下：,图6.4.15“投影”对话框,1）“颜色”：设置阴影的颜色。2）“Alpha透明度”：设置阴影的透明度。3）“阴影偏移”：设置阴影在X轴和Y轴方向上的偏移量，以像素为单位。（3）设置各项参数，单击“确定”按钮

27、。（4）按Ctrl+Enter键，测试动画效果，将看到文本及其投影，如图6.4.16所示。,图6.4.16“投影”效果,8模糊利用模糊特效，可以通过改变动画元素的Alpha值、位置或缩放比例等参数，自动创建模糊效果。将模糊特效应用于动画元素的操作步骤如下：（1）选中要添加模糊特效的动画元素，例如文本“Flash8”，如图6.4.1所示。（2）选择“插入”“时间轴特效”“效果”“模糊”命令，弹出如图6.4.17所示的“模糊”对话框。对其中各项参数说明如下：,图6.4.17“模糊”对话框,1）“效果持续时间”：设置特效持续的时间长度，以帧为单位。2）“分辨率”：设置进行模糊特效的格式。3）“缩放比

28、例”：设置模糊的缩放比例。4）“允许水平模糊”：使选中动画元素在水平方向上产生模糊效果。5）“允许垂直模糊”：使选中动画元素在垂直方向上产生模糊效果。6）“移动方向”：设置模糊运动的方向。,（3）设置各项参数（本例采用默认设置），单击“确定”按钮。（4）按Ctrl+Enter键，测试动画效果，将看到文本逐渐变模糊，如图6.4.18所示。,图6.4.18“模糊”效果,二、编辑时间轴特效如果用户对所创建的时间轴特效不满意，可以使用特效设置对话框进行再次编辑，操作步骤如下：（1）选中添加了时间轴特效的动画元素。（2）单击属性面板的“编辑”按钮，如图6.4.19所示。（3）在弹出的特效设置对话框中根据

29、需要修改设置，设置完成后，单击“确定”按钮即可。,图6.4.19属性面板,三、删除时间轴特效如果用户要删除所创建的时间轴特效，可以执行下列操作：（1）选中添加了时间轴特效的动画元素。（2）单击鼠标右键，在弹出的快捷菜单中选择“时间轴特效”“删除特效”命令即可，如图6.4.20所示。,图6.4.20删除时间轴特效前、后效果,下面根据本章所学的知识来制作“闪客之家”，操作步骤如下：（1）选择“文件”“新建”命令，创建一个新的动画文件。（2）选择“修改”“文档”命令，弹出“文档属性”对话框，设置“尺寸”为“550px400px”，“背景颜色”为“黑色”，单击“确定”按钮。,第五节应用举例闪客之家,（

30、3）选择工具箱中的文本工具，在属性面板中设置字体为“方正姚体”，字体大小为“100”，文本颜色为“白色”，并且单击“切换粗体”按钮，在工作区中输入文本“闪客之家”，如图6.5.1所示。（4）选中文本，选择“修改”“分离”命令两次，将其打散，如图6.5.2所示。,图6.5.1输入文本,打散前打散后图6.5.2打散文本前后效果,（5）选择工具箱中的铅笔工具，在打散的文本上分别绘制线条，如图6.5.3所示。（6）使用选择工具移动线条左侧的文本部分，如图6.5.4所示。,（7）选中所有线条，按Delete键将其删除，如图6.5.5所示。,（8）按Ctrl+A键选中所有对象，选择“插入”“时间轴特效”“效果”“分离”命令，弹出如图6.5.6所示的“