第6章补间动画元件和元件实例动画补间动画形状补间动画6.1元件和元件实例6.1.1元件的类型和作用Flash中的元件分为3种类型,分别是图形元件、影片剪辑和按钮元件。下面,我们分别介绍这3种元件的作用:图形元件:用于制作可重复使用的静态图像,以及附属于主影片时间轴的可重复使用的动画片段。但是,不能在图形元件中加入声音,也不能在图形元件上添加动作脚本。按钮元件:用于创建响应鼠标单击、滑过或其他动作的交互按钮。影片剪辑元件:用来制作可重复使用的、独立于主影片时间轴的动画片段。影片剪辑中可以包括动作脚本、声音,甚至其他影片剪辑实例或图形元件实例。影片剪辑元件具有图形元件的所有功能。6.1.2创建元件1.将对象转换为元件“转换为元件”对话框创建元件的方法有两种,一种是将对象转换为元件,另一种是直接创建元件,下面分别介绍这两种方法。要将舞台上的对象转换为元件,应先选中舞台上要转换的对象,然后按快捷键【F8】,在打开的“转换为元件”对话框中的进行设置,然后单击“确定”按钮,即可将选中的对象转换为相应的元件。2.直接创建元件“创建新元件”对话框在元件内部绘制并返回主场景1.按快捷键【Ctrl+F8】,在打开的“创建新元件”对话框中进行设置,然后单击“确定”按钮。2.创建元件后会进入新建元件的编辑状态,在编辑状态下的舞台中绘制或编辑图形,然后单击舞台左上角的按钮返回主场景,这样即可创建一个新的元件。将元件拖入舞台3.利用“创建新元件”对话框生成的元件,只会保存在“库”面板中,要按快捷键【F11】打开“库”面板,然后将创建的元件从“库”面板拖到舞台中,才会在舞台上形成一个元件实例。6.1.3编辑元件和元件实例1.编辑元件编辑或修改元件后,该元件在舞台上的所有元件实例也会随之改变。要编辑或修改元件有以下几种方法:使用“选择工具”在舞台上双击元件实例,即可进入元件编辑状态,此时元件中的对象正常显示表示可以编辑,舞台中其他对象以高光显示表示不能编辑。进入元件编辑状态在舞台上选中要编辑的元件实例,然后选择“编辑”“在当前位置编辑”菜单,或右击元件实例,在弹出的快捷菜单中选择“在当前位置编辑”菜单,即可进入元件的编辑状态。在舞台上选中要编辑的元件实例后,选择“编辑”“编辑元件”菜单,可在打开的元件编辑窗口中修改元件。在“库”面板中双击要编辑的元件名称,即可打开元件编辑窗口编辑元件。打开元件编辑窗口编辑元件单击编辑区上方的“编辑元件”按钮,在弹出的下拉列表中选择要编辑的元件,便可在打开的元件编辑窗口中修改元件。2.编辑元件实例编辑元件实例只对当前编辑的元件实例产生作用,对“库”中的元件和其他元件实例不起作用,下面介绍编辑元件实例的方法:修改元件实例色调要修改元件实例的色调,可先使用“选择工具”选中要修改的元件实例,然后打开“属性”面板,在“颜色”选项的下拉列表中选择“色调”选项,然后单击右侧的色块,可在打开的“拾色器”对话框中选择色调,在右侧的“色彩数量”编辑框中还可以设置色调的强度。修改元件实例亮度修改元件实例透明度要修改元件实例的亮度,可选中要修改的元件实例后打开“属性”面板,在“颜色”选项的下拉列表中选择“亮度”选项,然后在右侧的“亮度数量”编辑框中设置亮度。要修改元件实例的透明度,可选中要修改的元件实例后打开“属性”面板,在“颜色”选项的下拉列表中选择“Alpha”选项,然后在右侧的“Alpha数量”编辑框中设置透明度6.2动画补间动画组成元素:制作动画补间动画时,两个关键帧上的对象必须是元件实例在时间轴面板上的表现形式:在两个关键帧之间创建动画补间动画后,两个关键帧之间的背景变为淡紫色,在起始帧和结束帧之间有一个长长的箭头6.2.1动画补间动画的特点动画补间动画的特点如下:设置动作补间动画后的时间轴6.2.2创建动画补间动画的方法下面通过一个小实例来学习动画补间动画的创建方法:绘制天空背景拖入“战斗机”图形元件1.打开素材文档,将“图层1”重命名为“天空”,然后使用“矩形工具”绘制一个没有填充颜色的矩形,并为其填充由“青色#00FFFF”到“深蓝色#000099”的线性渐变。2.在“天空”图层上新建一个图层,并将其重命名为“飞机”,然后按【F11】键打开“库”面板,我们会看到一个“战斗机”图形元件。将该元件拖到舞台上,适当缩小后放在舞台右上测。插入普通帧和关键帧移动并放大元件实例3.选中“天空”图层的第25帧,然后按【F5】键插入普通帧,选中“飞机”图层的第25帧,然后按【F6】键插入关键帧。4.将“飞机”图层第25帧上的“战斗机”元件实例移动到舞台下方偏左位置,并使用“任意变形工具”将“战斗机”元件实例放大。设置元件实例亮度创建动画补间动画通过“属性”面板创建补间动画5.使用“选择工具”选中“飞机”图层第1帧上的“战斗机”元件实例,然后打开“属性”面板,在“颜色”下拉列表中选择“亮度”选项,然后将“亮度数量”设为“-100%”。6.在时间轴上“飞机”图层第1帧与第25帧之间右击鼠标,在弹出的快捷菜单中选择“创建补间动画”菜单。另一种创建动画补间动画的方法是,选中动画的开始帧,然后打开“属性”面板,在“补间”下拉列表中选择“动画”选项。缩放:当两个关键帧上对象大小不同时,勾选该选项可使对象在动画中按比例进行缩放。缓动:通过在“缓动”文本框输入数值,可调整运动补间的变化速度。其中,如果希望动画开始时较慢,然后加速,可将“缓动”值设置为一个负值,数值越大效果越明显;如果希望动画开始时快,然后减速,可将“缓动”值设置成一个正值。默认情况下,“缓动”值为“0”,表示动画匀速变化。动画补间动画的参数“属性”面板中部分选项意义如下:旋转:要在动画中旋转对象,可在“旋转”下拉列表中选择适当选项。其中:“无”表示禁止旋转;“自动”表示根据用户在舞台中的设置旋转;“顺时针”表示让对象顺时帧旋转;“逆时针”表示让对象逆时针旋转。旋转次数是指对象从一个关键帧过渡到另一个关键帧时旋转的次数,360度为一次。调整到路径和对齐:这两个复选框,在制作引导路径动画时才起作用。同步:勾选该复选框,可使图形元件实例中的动画和主时间轴同步。6.3形状补间动画6.3.1形状补间动画的特点形状补间动画具有如下特点:形状补间动画可以实现两个图形之间颜色、形状、大小、位置的相互变化,其强调的是“形状”变化,而动画补间强调的是“动作”。形状补间动画的组成元素只能是分离的矢量图形,如果使用图形元件、按钮、文字、组合等,需要先将它们分离才能创建形状补间动画。设置形状补间动画后的时间轴形状补间动画建好后,时间帧面板的背景色变为淡绿色,在起始帧和结束帧之间有一个长长的箭头。如果箭头变为虚线,说明制作不成功,原因可能是某个关键帧上的图形没有被分离。6.3.2创建形状补间动画的方法下面通过一个简单的小实例来学习形状补间动画的创建:舞台中的图形将第1帧上的飞机图形剪切到第20帧1.打开素材文档。2.在“图层1”的第20帧处插入空白关键帧,然后将第1帧上的飞机图形剪切到第20帧,再将第1帧上的小鸟图形移动到舞台中间位置。创建形状补间动画设置形状补间动画参数3.选中第1帧与第20帧之间的任意帧,然后打开“属性”面板,在“补间”下拉列表中选择“形状”选项,即可创建形状补间动画。4.创建形状补间动画后,打开“属性”面板,其中“缓动”选项的作用与动画补间动画的一样,在“混合”选项的下拉列表中有“分布式”和“角形”两个选项,这里选择“分布式”。分布式:选择该选项,则动画中间形状的过渡比较平滑和不规则。角形:选择该选项,则动画中间形状的过渡会保留有明显的角和直线,适合于具有锐化转角和直线的形状变化。6.3.3形状提示的使用使用形状提示功能可以控制形状变化,使形状按照自己希望的方式变化。下面以一个简单的实例介绍形状提示的应用:过渡动画添加形状提示1.打开素材文档,并按【Enter】键预览动画。2.选中“图层1”的第1帧,然后选择“修改”“形状”“添加形状提示”菜单,添加一个形状提示。第1帧与第30帧上的形状提示3.添加形状提示后在第1帧上会出现一个红色的形状提示,相应的在第30帧上也出现了一个红色的形状提示。调整后的形状提示4.使用“选择工具”将第1帧上的形状提示移动到鸡的嘴尖位置,再将第30帧上的形状提示移动到孔雀的嘴尖位置,表示在变形时鸡的头会变为孔雀的头。此时第1帧上的形状提示会变为黄色,第30帧上的形状提示会变为绿色,表示它们在一条曲线上。添加更多的形状提示5.按快捷键【Ctrl+Shift+H】3次,再添加3个形状提示,然后将第1帧与第30帧上的形状提示“b”移动到鸡和孔雀的后背位置,将形状提示“c”移动到右前爪位置,将形状提示“d”移动到尾巴尖位置。选择“视图”“显示形状提示”菜单项,可以隐藏或显示形状提示。要删除所有的形状提示,可选择“修改““形状”“删除所有提示”菜单;要删除单个形状提示,可右击要删除的形状提示,在弹出的快捷菜单中选择“删除提示”菜单。在使用形状提示时,应注意以下几点:开始帧与结束帧上的形状提示是一一对应的,例如动画开始处形状提示“a”的所在位置,会变化到动画结束处形状提示“a”的所在位置。按逆时针顺序从形状的左上角开始放置形状提示,这样的变形效果最好。形状提示要在形状的边缘才能起作用,在调整形状提示的位置前,可选中工具箱中的“贴紧至对象”按钮,这样会自动把形状提示吸咐到图形边缘上。课堂练习——制作节日贺卡图6-29节日贺卡利用本章所学知识制作一个电子贺卡,具体步骤请参考书中内容。