第3章 创建时间轴

本章学习内容元件1逐帧动画2形状渐变动画3传统补间4补间动画5引导层动画6遮罩层动画7骨骼动画8动画编辑器93D转换动画103.1元件1Flash元件的类型2建立、复制和修改元件3库面板元件的类型图形元件：可用于静态图像，与主时间轴同步运行按钮元件：通过事件来激发它的动作。按钮元件有四种状态，即“弹起”、“指针经过”、“按下”、“点击”影片剪辑元件：本身就是一段小动画，可以包含交互控制、声音甚至嵌套其他影片剪辑的实例，是用途和功能最多的元件3.1元件元件的有效利用同一图层的元件如何分散至不同图层：执行命令：“修改”“时间轴”“分散至图层”注意分散至图层后的特点不同文件间共享元件注意将元件分门别类地放好，可以在库面板新建文件夹3.1元件建立元件将现有的矢量对象转换成元件（快捷键：F8）建立元件的方法使用元件编辑模式新建元件（快捷键：Ctrl+F8）3.1元件建立元件建立元件中要注意的细节元件左上角对准中心十字3.1元件修改元件修改与编辑元件，必须进入元件模式下才能进行切换到元件编辑模式的方法在舞台上，双击元件实例在库面板中，双击元件名在库面板对元件右键/编辑注意：在元件编辑模式下进行的更改会影响该元件的所有实例3.1元件复制元件创建元件后，用户可以在文档中重复使用该元件的实例。修改元件会影响到其每个实例，但改变实例的大小不会影响其它实例或原始元件。复制元件实例的方法是：在按下“Alt”键的同时用鼠标将待复制的元件拖动出一个副本，即可创建该元件的另一个实例。复制元件的方法是：在库面板中单击鼠标右键，在出现的快捷菜单中选择“直接复制”命令，即可创建元件的副本。3.1元件元件的存放处——库公用库面板：窗口/公用库库如何库里的元件加入舞台3.1元件3.2时间轴面板1动画中的图层2时间轴面板的组成3帧的类型动画中的图层当用户创建动画时，可以使用图层和图层文件夹来组织动画序列的组件和分离动画对象，这样它们就不会互相擦除、相连或分割。Flash的舞台在同一时间做多个对象的动画，每个组或元件等舞台对象必须在独立的图层上。3.2时间轴面板图层的操作ConceptBECDA插入图层改变图层顺序新建图层文件夹删除图层重命名图层3.2时间轴面板时间轴面板3.2时间轴面板帧的类型关键帧空白关键帧普通帧过渡帧3.2时间轴面板不同性质的帧的区别关键帧在时间轴上显示为实心的圆点，空白关键帧在时间轴上显示为空心的圆点，普通帧在时间轴上显示为灰色填充的小方格3.2时间轴面板不同性质的帧的区别同一层中，在前一个关键帧的后面任一帧处插入关键帧，是复制前一个关键帧上的对象，并可对其进行编辑操作如果插入普通帧，是延续前一个关键帧上的内容，不可对其进行编辑操作插入空白关键帧，可清除该帧后面的延续内容，可以在空白关键帧上添加新的实例对象。关键帧和空白关键帧上都可以添加帧动作脚本，普通帧上则不能添加3.2时间轴面板3.3逐帧动画逐帧动画是一种常见的动画形式（FrameByFrame），其原理是在“连续的关键帧”中分解动画动作，也就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。技术点睛逐帧动画是flash动画最基本的形式，是通过更改每一个连续帧在编辑舞台上的内容来建立的动画。因为逐帧动画的帧序列内容不一样，不但给制作增加了负担而且最终输出的文件量也很大。逐帧动画的优势：逐帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容，而它类似与电影的播放模式，很适合于表演细腻的动画。通常第一个关键帧会在空白舞台上第一个实例生成时会自动生成，但第二帧以后的关键帧需要手动添加。

3.3逐帧动画例子：人物表情变化——微笑点头3.3逐帧动画影片剪辑元件中逐帧动画的运用影片剪辑元件拥有它们自己的独立于主时间轴的多帧时间轴，如果针对影片剪辑元件进行逐帧动画制作，则可以拥有一个独立于主时间轴的动画元件例子：蝴蝶3.3逐帧动画技术点睛如何选择多个帧复制帧粘贴帧时间轴上的快捷菜单3.3逐帧动画“Deco工具”是一种图案装饰性工具，它主要包括3种模式：利用Deco工具生成逐帧动画1藤蔓式填充2网格填充3对称刷子3.3逐帧动画网格填充选择“Deco工具”，在属性面板的“绘制效果”选项卡中的下拉菜单中选择“网格填充”模式，在工作区中单击鼠标，则图案将以网格的方式填充整个区域。3.3逐帧动画对称刷子选择“Deco工具”，在属性面板的“绘制效果”选项卡中的下拉菜单中选择“对称刷子”模式，在工作区中单击鼠标，则图案将以对称的形式填充整个区域。在工作区中出现一个轴线，同时在属性面板的“高级选项”选项卡中的下拉菜单中提供了4种模式，选择不同的模式，图案的对称形式和调整形式也会有所不同3.3逐帧动画藤蔓式填充选择“Deco工具”，在属性面板的“绘制效果”选项卡中的下拉菜单中选择“藤蔓式填充”模式，在工作区中单击鼠标，则会在舞台中出现树叶和花朵的蔓延过程，在蔓延的图案上再单击鼠标停止填充。若是在空白处单击鼠标则继续从单击位置开始填充。3.3逐帧动画生成逐帧动画若想将图案蔓延过程生成逐帧动画效果，则需要选择“藤蔓填充模式”，然后在属性面板中勾选“动画图案”的复选框，然后设置动画的帧步骤，然后在工作区中单击，则在时间轴上将以逐帧动画的形式展示图案蔓延过程3.3逐帧动画举一反三利用关键帧和逐帧动画，可以绘制一把自动展开和折起的扇子！只需要先绘制出一个扇叶，将其做成元件，然后在不同的关键帧上依次放置不同数量的扇叶就可以形成扇子自动张合的动画。3.3逐帧动画绘制扇子要点提示：直线工具选择工具的灵活应用任意变形工具填充工具滤镜变形面板3.3逐帧动画绘制扇子步骤一、建立新文档

点新建-文档，在文档属性里把背景颜色改为黑色，其它默认。二、绘制扇片元件1、绘制羽毛，重命名第一个图层为“羽毛”，在工具箱中选择"直线工具"，笔触颜色红色，在场景画一竖线，然后选择"选择工具"（快捷键为“V”）在线条的中间把线条拉弯，在拉弯的线上再画一条竖线同样拉弯形成封闭状的月牙形，如图12、用放射状填充颜色，颜色可自己选择，如选择左色标：#0000FF、右色标：#000000，（注意如填充不了颜色，可使用修改｜形状｜将线条转换为填充）填充好颜色后把笔触删除按着Alt键向右复制三个共四个形成一组，然后全部选中，调整大小后，按着Alt键向左复制四个，中间间隔要有一定距离做到可以单独选择一组，然后选择每组改变填充颜色，右色标：#000000不变，左色标可以选择自己喜欢的颜色。如图23、选中每一组用方向键向第一组靠拢，形成一个整体。用选择工具在羽毛的顶部拉成一个球形，如图3:4、用“直线”勾画图形，如图4：5、删除圆角部分线条外的图形，并删除笔触颜色，再用“选择工具”做细微调整，如图5所示：6、选中羽毛图层第1帧,在全部选中的情况下右键/转换为影片剪辑元件，在弹出框中选择元件名为“羽毛”，选项中羽毛元件在属性面板/滤镜/按钮“添加滤镜”/模糊，模糊度如图6：7、新插入图层二，改名称为扇柄，利用矩形工具画出一个填充色为线型，左右色标：#CC6600，中色标：#FEA64E，用“选择工具”和“部分选取工具”把矩形调整成合适的形状，再放置在羽毛的合适位置，选中整个扇页，转化为图形元件，取名为扇页，到此扇片就制作完毕。如图7：三、绘制扇子1、选中扇页，用“任意变形工具”调整扇页的中心点，如图8所示：2、通过“窗口”、“变形”打开变形面板，设置旋转读数为10度，点击变形面板当中的复制并应用变形多次，得到如图9所示：图层1的第18帧处插入关键帧，选中第1帧至第18帧（如果图中有18片扇片）的所有帧，按【F6】键插入关键帧。如图363.3逐帧动画扇子的展开点选扇片图层第1帧，把左边第二片扇片元件按【Delete】键删除，然后用选择工具框选除左边第一片以外的所有扇片元件，保留左边第一片扇片元件，选中第2帧方法同上不同处是保留左边的第一、第二片扇片元件，依此类推，第18帧保留所有的扇片元件。37扇子的展开3.3逐帧动画扇子的合拢：点选扇片图层第1帧，再按住【Shift】键同时点击第18帧即可全选所有关键帧。然后右击鼠标出现快捷菜单，选择【复制帧】命令。在第30帧处右击鼠标出现快捷菜单，选择【粘贴帧】命令，即可把第1帧至第18帧内容复制到第30帧至第47帧处。在第30帧至第47帧全选中的情况下右击鼠标出现快捷菜单，选择【翻转帧】命令，把第1帧到第18帧的状态翻转过来。在第60帧右击鼠标出现快捷菜单，选择【插入帧】命令进行延时。如图383.3逐帧动画补间的类型利用Flash可以处理两种类型的补间效果（过渡）：形状补间动画补间（传统补间和补间动画）

3.4形状补间

3.4形状补间形状补间可将一个简单形状（矢量对象）变形（也可移动/变色）适用对象：矢量图形对象（合并模式下绘制的）注意：不能用于元件/组合（群组）对象/文本框如需应用于文字，先要打散成矢量对象。

一个图层中允许多个对象应用形状补间。形状渐变制作气氛背景颜色和形状变换多环变换灯光移动

3.4形状补间利用形状提示符实现翻页特效关键技术：书页的翻动要沿中心轴进行，实现的技巧：添加形状提示符

3.4形状补间技术点睛形状提示符与形状补间相互配合可以起到约束调整矢量对象形状变化的作用，在制作翻书效果，文字书写效果时常常会用到。在添加形状提示符时，要特别注意每个提示符的一一对应关系，只有准确设定了关键帧中的形状提示符的位置，才可能达到预想的效果。添加形状提示符快捷键：Ctrl+shift+H

3.4形状补间3.5传统补间处理元件、群组或文本框的大小、位置、旋转、透明度等变化。适用对象：元件、群组或文本框（如是矢量对象需要转成元件）注意：一层中不能多个对象同时应用传统补间策略：分多层。一层一个传统补间。

传统补间实例图片动作效果晃动文字飞行文字渐变文字文字特效中动作补间的运用

一个有创意的动漫作品，少不了文字动画的制作。动作补间经常运用于文字动画特效中。两种补间动画的外观特征总结形状补间帧至少需要用两个关键帧来标识，它们被带有一个黑箭头和浅绿背景的中间过渡帧分开传统补间帧至少需要用两个关键帧来标识，这两个关键帧被带有一个黑箭头和浅蓝背景的中间过渡帧分开有问题的过渡帧，例如丢失了前后关键帧的内容，会用虚线来标识，这时需要取消该次补间动画再重新作。技术点睛

传统补间适合于大小、颜色、位置、旋转、透明度等变化，运动的对象必须是元件或是一个对象，不能是矢量图形。形状补间则适合于图形之间的变化（如圆到方的变化），运动的对象只能是矢量图形，不能是元件。如果在形状过渡中使用文字，首先需将文本分离打散。导入到库的图形对象是无法设置透明度的，只有把图形对象转化成元件才能设置Alpha样式。同一时刻同一层要保证只有一个元件进行传统补间动画设置，否则无法设置动画。引导层补间动画

引导层的功能是可以让元件沿着绘制的行进路线按照设定的方法移动。引导层补间动画

引导层的功能是可以让元件、组合图形、文本沿着绘制的行进路线按照设定的方法移动。案例1：蝴蝶飞舞技术点睛

本案例中在另外的flash文档中导入了一个蝴蝶的影片剪辑元件。可以看出通过库面板，元件得到了共享。引导层补间动画可以自定义对象运动路径。通过在对象上方添加一个运动路径的层，在该层中绘制矢量运动路线，而让对象沿路线运动。引导层上的内容生成swf文档播放时是不可见的。观察一下引导层和对象图层的递归状态，形成如图的隶属状态。案例2：星球运动引导层补间动画

技术点睛

本案例中将运动路线复制在另一图层中显示出来，并隐藏和锁定。通过将已画有运动路径的图层转换为引导层，如左图所示，再用鼠标将小球图层拖动到引导层上，形成如右图的隶属状态。这样，引导层才能真正起到引导的作用。

可以将多个层链接到一个引导层，使多个对象沿同一个路线运动。课后实践制作动画：滚动的小球要求：1、有背景，背景为山坡或楼梯等有坡度的地方

2、小球上有图案

3、作出小球从上方一边弹跳滚下一边旋转的效果

4、动画不少于50帧

5、提交.fla文档

6、在满足以上要求的基础上可以加入自己的创意提示：分图层绘制小球做成元件引导层创建传统补间引导层补间动画

思考问题1、引导层上是否要做传统补间？2、是否可以将多个图层链接到同一个引导层？3、下图中哪一种是起引导作用的引导层？4、引导层上的内容播放时是否可见？使用元件的优势可以重复利用，利于控制文件大小可以通过元件的嵌套，做出复杂的动画方便动画的循环播放3.7遮罩层补间动画

在Flash的图层中有一个遮罩图层类型，为了得到特殊的显示效果,可以在遮罩层上创建一个任意形状的“视窗”，遮罩层下方的对象可以通过该“视窗”显示出来，而“视窗”之外的对象将不会显示。遮罩主要有两种用途用在整个场景或特定区域，使场景外的对象或特定区域外的对象不可见。用来遮罩住某一元件的一部分,从而实现一些特殊的效果望远镜看风景遮罩层：视窗的形状被遮罩层：透过视窗所看到的内容技术点睛

创建遮罩在Flash中没有一个专门的按钮来创建遮罩层，遮罩层其实是由普通图层转化的。只要在要某个图层上单击右键，在弹出菜单中把“遮罩”前打个勾，该图层就会生成遮罩层，“层图标”就会从普通层图标变为遮罩层图标，系统会自动把遮罩层下面的一层关联为“被遮罩层”

技术点睛构成遮罩和被遮罩层的元素遮罩层中的图形对象在播放时是看不到的，遮罩层中的内容可以是按钮、影片剪辑、图形、位图、文字等，但不能使用线条，如果一定要用线条，可以将线条转化为“填充”。被遮罩层中的对象只能透过遮罩层中的对象被看到。文字的探照灯效果别样的绿文字（遮罩层）绿叶（被遮罩层）画卷画轴矩形（遮罩层）画卷（被遮罩层）遮罩层动画做转场效果3.8骨骼动画

使用骨骼工具可以对元件实例和形状绘制骨骼，同时结合使用绑定工具可以调整形状对象的各个骨骼和控制点之间的协调关系。关键技术：FlashCS4中的骨骼系统可以帮助用户方便地将各个元素以父子形式链接起来。例:昕昕走路火柴人骨骼技术点睛

骨骼工具是FlashCS4中新增的一个强有力制作人物动作的工具。使用骨骼根据可以让元件实例和形状对象按复杂而自然的方式移动，同时只需做很少的设计工作。骨骼可以是线性的或者是分支的。例如蛇的骨架或是人的手臂仅需要线性链，而整个人体图形则需要包含四肢分支的结构。骨骼之间的连接点称为关节。使用骨骼工具向元件的实例内部添加骨骼时，每个元件的实例只能具有一个骨骼。使用骨骼工具向单个形状的内部添加骨骼时，可以添加多个骨骼。一旦创建骨骼后，所有被骨骼关联的元件都会移动到“骨架”图层中。在使用骨骼工具的时候，首先需要确定一个主要的支点（如案例中昕昕的身体），然后拖动出其他的分支点（如案例中昕昕的头部和四肢）；通过在时间轴上添加姿势来实现动画人物的姿势或表情的变化。青蛙骨骼3.9动画编辑器

创建传统补间前后两个关键帧、补间颜色、有补间箭头创建补间动画前面一个关键帧、补间颜色、无补间箭头蝴蝶飞技术点睛

动画编辑器是FlashCS4新增的功能面板，可以精确地调整动画的属性值。这里有5个栏目，可分别调整相应在的动画属性添加、移除和关键帧导航:在关键帧一栏中，有两个方向相反的小三角形，它可以用来跳转到另一个关键帧，中间的棱形可添加和删除关键帧基本动画：x,y,z属性控制了缓动动画的位置，叫做空间属性缓动：缓动一栏可以为相应属性设置缓动效果色彩栏和滤镜栏：用法跟缓动一样，通过点击“+”号来添加相应效果，并设置其属性值3.103D转换动画

3D转换功能是FlashCS4中又一新增的功能。可以通过3D旋转和3D平移工具为原本2D的动画元件添加具有空间感的补间动画，沿X、Y、Z轴任意旋转和移动对象能够产生极具透视效果的动画。文字3D动画技术点睛

1、“3D旋转工具”只作用于影片剪辑元件，选择“3D旋转工具”后，三维轴向旋转颜色分别为R、G、B，即分别对应对象的X、Y、Z轴上的旋转空间。在各个空间轴上可以对对象进行任意的旋转。选择“3D旋转工具”，在对象的中央会出现一个类似瞄准镜的小图形，十字的外围是两个圈，并且呈现不同的颜色，当鼠标移动到红色的中心垂直线时，鼠标右下角会出现一个“X”，表示此为X轴。当鼠标移动到绿色水平线时，鼠标右下角会出现一个“Y”。当鼠标移动到蓝色圆圈时，鼠标右下角会出现一个“Z”。技术点睛2、“3D平移工具”同“3D旋转工具”一样，只对影片剪辑元件有效。选择“3D平移工具”后，在对象上将会出现带有颜色的3个轴向坐标，即X、Y、Z轴。沿着每个轴向可以对对象在三维空间的位置进行控制和移动，同时借助于属性面板的设置，可以更好地控制对象的三维轴向。3D工具可以与动画编辑器配合使用。3.11小结

基本类型逐帧动画——是FlashCS4动画最基本的形式，是通过更改每个连续帧在编辑舞台上的内容来建立的动画。补间形状——是在两个关键帧端点之间，通过改变基本图形的形状或色彩变化，并由程序自动创建中间过程的形状变化而实现的动画。传统补间——是在两个关键帧端点之间，通过改变舞台上实例的位置、大小、旋转角度、色彩变化等等属性，并由程序自动创建中间过程的运动变化而实现的动画。补间动画——可使用动画编辑器、3D工具区别1）逐帧动画的每一帧使用单独的画面，适合于每一帧中的图像都在更改而不是仅仅简单地在舞台中移动的复杂动画。对需要进行细微改变（比如头发飘动）的复杂动画是很理想的方式；形状补间动画在起始端点绘制一个图形，再在终止端点绘制另一个图形，可以实现一副图形变为另一副图形的效果；运动补间动画在可以分为传统补间和补间动画两种，原理都是在起始端点定义一个实例的位置、大小、色彩等属性，在终止端点改变这些属性，可以实现翻转、渐隐渐现等效果。2）逐帧动画保存每一帧上的完整数据，补间动画只保存帧之间不同的数据，因此运用补间动画可