
2.8 时间轴、图层和帧
通过使用时间轴上的关键帧,Animate CC就会自动生成运动中的动画帧,这就是动画的制作原理,所以时间轴在动画制作中起着关键作用。
新建的Animate CC文档中只包含一个图层,为了方便制作和控制动画效果,根据不同的要素分类将不同的元素分到不同的图层。每个图层编辑对象时,就不会影响到其他图层里的内容。多个图层的组合形成复杂的动画效果。
帧是组成动画的最基本的元素,通过帧的设定,连续播放即形成Animate动画效果。根据帧的特点可分为普通帧、关键帧和空白关键帧等多种类型。
2.8.1 “时间轴”面板
“时间轴”面板位于Animate CC界面的左下方,由“控制区”“图层区”和“时间轴”3部分组成。“时间轴”面板是Animate CC制作动画的核心部分,如图2-58所示。

图2-58 “时间轴”面板
2.8.2 图层的基本操作
在Animate动画中,图层犹如一张张堆叠在舞台上的透明纸,每一张纸上面绘制不同的对象,将这些对象按照一定的需要重叠在一起形成了一幅幅复杂的画面。图层可分为普通图层、遮罩层和引导层3种类型。
1.插入和删除图层
选择“插入”→“时间轴”→“图层”命令,插入图层,如图2-59所示。
将光标移到时间轴现有图层上面,单击鼠标右键,在弹出的菜单中选择“插入图层”,如图2-60所示。

图2-59 插入图层

图2-60 插入图层
选中要删除的图层,单击“时间轴”面板控制区左下角的“删除图层”按钮,如图2-61所示。

图2-61 删除图层
选中要删除的图层,单击鼠标右键,在弹出的菜单中选择“删除图层”,如图2-62所示。

图2-62 删除图层
2.重命名图层
鼠标双击需要重命名的图层,然后输入新的名称即可,如图2-63所示。
选中需重命名的图层,单击鼠标右键,在弹出的菜单栏中选择“属性”,弹出“图层属性”对话框,在“名称”中输入新的名称,如图2-64所示。单击“确定”,即可完成重命名操作。

图2-63 重命名

图2-64 “图层属性”对话框
3.调整图层顺序
选中图层,按住鼠标左键拖动,将图层拖到相应位置以后,释放鼠标,此时图层的位置发生改变,如图2-65所示。
4.设置图层属性
选中“修改”→“时间轴”→“图层属性”命令,弹出“图层属性”面板。或者将光标移到图层面板处,单击鼠标右键,在弹出的菜单中选择“属性”,弹出属性面板,如图2-66所示。

图2-65 调整图层顺序

图2-66 “图层属性”面板
2.8.3 图层的编辑
图层分为普通图层、遮罩层和引导层3种类型,图层的编辑主要以这3种图层的运用来实现。
1.普通图层的创建
选择已有图层,单击鼠标右键,在弹出的菜单栏中选择“插入图层”,如图2-67所示。或直接单击控制区左下角的“新建图层”按钮,如图2-68所示。普通图层相当于一张张透明的纸,通过在上面绘制的对象,实现动画的制作。
2.引导层的创建
引导层分为普通引导层和运动引导层,普通引导层可以辅助静态对象定位,如图2-69所示。运动引导层通过在引导层上创建特殊路径,使选定对象沿着这一路径运动,如图2-70所示。

图2-67 插入图层

图2-68 插入图层

图2-69 普通引导层
提示
引导层不能导出,因此,不会显示在发布的SWF文件中,引导层中的路径只是用来引导对象运动的辅助线。
3.遮罩层的创建
放置在遮罩层上的遮罩物可对其他图层的图形进行遮罩,当设置一个图层为遮罩层时,该图层的下一图层便被默认为被遮罩层,如图2-71所示。遮罩层的运动,还可以创造出各种各样的动态效果动画。

图2-70 运动引导层

图2-71 遮罩层
提示
不能对遮罩层上的对象使用3D工具,包含3D对象的图层也不能用作遮罩层。
2.8.4 帧的类型与编辑
通过对不同类型帧的运用和编辑,来实现动画效果。
1.帧的类型
根据帧的不同功能和含义,可将帧分为普通帧、关键帧、空白关键帧。
在“时间轴”面板中,有实心原点或空白原点的是“关键帧”,其中的空白原点也称为“空白关键帧”,普通帧则以空白方格为代表,如图2-72所示。

图2-72 帧的类型
2.帧的编辑
选中需复制的帧,单击鼠标右键,在弹出的菜单中选择“复制帧”选项,如图2-73所示。或者选中需复制的帧,选择“编辑”→“时间轴”→“复制帧”命令。
然后在目标位置单击鼠标右键,在弹出的菜单中选择“粘贴帧”命令,完成帧的复制,如图2-74所示。

图2-73 选择“复制帧”

图2-74 选择“粘贴帧”
选中要移动的帧,单击鼠标右键,在弹出的菜单中选择“剪切帧”命令,然后同样在目标位置单击鼠标右键,在弹出的菜单中选择“粘贴帧”命令,完成帧的移动,如图2-75所示。
选中要删除的帧,单击鼠标右键,在弹出的菜单中选择“删除帧”命令,如图2-76所示。或在选中需删除的帧后直接单击<Delete>键即可删除。

图2-75 选择“剪切帧”

图2-76 选择“删除帧”
提示
可以执行“编辑”→“全选/取消全选”命令来选中时间轴中的所有帧,或取消选中所有帧。