《动画补间动画10月21日课案课件》由会员分享，可在线阅读，更多相关《动画补间动画10月21日课案课件（43页珍藏版）》请在金锄头文库上搜索。
1、Flash中动画类型,动画类型 逐帧动画 动画补间动画 形状补间动画 引导动画 遮罩动画 脚本动画,基础动画,逐帧动画 动画补间动画 形状补间动画,基础动画,逐帧动画：由多个连续关键帧组成的动画 传统补间动画：同一对象在不同关键帧的大小、位置、旋转、透明度等差别形成的动画。 补间形状动画：不同关键帧的对象形状形成的动画。,补间动画,所谓补间动画，就是将同一个对象的两个不同的状态分别放在两个不同的关键帧中时，然后让计算机自动地生成中间的过渡动作。 Flash生成的补间动画有两种：动画补间动画和形状补间动画。利用运动补间动画可以实现对象的位置、大小、透明度、旋转和颜色等多种变化。 要创建运动补间动
2、画，初始帧和终止帧都必须是关键帧；两个关键帧中的对象必须是元件或者群组。,动画补间动画,在动作补间动画中，在一个关键帧放置一个元件实例，然后在另一个关键帧改变这个元件实例的大小、颜色、位置、透明度、方向等，Flash根据二者之间差值创建的动画称为动作补间动画。,Flash 动画制作,动画补间动画,动画补间动画实际上就是给一个对象的两个关键帧分别定义不同的属性，如位置、颜色、透明度、角度等，并在两个关键帧之间建立一种变化关系，即补间动画关系。 构成动画补间的元素为“元件”或“成组对象”，而不能为形状，只有将形状“组合”或者转换成“元件”后才可以成功制作“动画补间动画”。,逐帧动画+补间动画运动的
3、马,Flash逐帧动画,案例：传统补间之弹簧,Flash传统补间动画,2 传统补间动画命令,Flash传统补间动画,2 传统补间动画命令,1 设置黑色背景绘制小矩形自由变形移动中心 2 窗口变形15，复制23个,Flash传统补间动画,3 全选转化为元件（图形1） 4 场景中拖入元件50帧处关键帧旋转360传统补间顺指针缓动100 5 另起一层拖入元件同上位置逆时针缓动,Flash传统补间动画,动画补间动画的构成要素和时间轴表现 构成动作补间动画的元素是元件实例，包括影片剪辑、图形元件、按钮、文字、位图、组合等等，时间帧面板的背景色变为淡紫色，在起始帧和结束帧之间有一个长长的箭头，如图所示，如
4、果制作错误显示为虚线。,动作补间动画在时间轴表现,技巧提示：若要对象是形状，只有把形状“组合”或者转换成“元件”后才可以做“动作补间动画”，否则会出现虚线显示。,6.2 动画补间动画,组成元素：制作动画补间动画时，两个关键帧上的对象必须是元件实例。 在时间轴面板上的表现形式：在两个关键帧之间创建动画补间动画后，两个关键帧之间的背景变为淡紫色，在起始帧和结束帧之间有一个长长的箭头。,6.2.1 动画补间动画的特点,动画补间动画的特点如下：,设置动作补间动画后的时间轴,与逐帧动画相比，补间动画具有以下几个特点:,制作方法简单方便。只需要为动画的第一个关键帧和最后一个关键帧创建内容，两个关键帧之间帧
5、的内容由Flash自动生成，不需要人为处理。 相对于逐帧动画来说，补间动画更为连贯自然。因为逐帧动画是由手工控制，帧与帧之间的过渡很可能会不自然、不连贯，而补间动画除了两个关键帧由手工控制外，中间的帧都由Flash自动生成，技术含量很高，因此过渡更为自然连贯。 相对于逐帧动画来说，补间动画的文件更小，占用内存少。,动作补间动画只对某个图层上单一的对象有效，如果想让一个动画中的多个对象一起动，必须将它们分别放在不同的图层上分别产生动作渐变。,制作动作补间动画的过程实际就是在两个关键帧上分别定义不同的属性，如对象的大小、位置、角度等，然后在两个关键帧之间建立一种运动渐变关系。下面制作一个瓢虫在绿叶
6、上爬行的动画，其具体操作如下。,6.2.2 创建动画补间动画的方法,（1）新建一个文件，导入图片“叶子.jpg”，调整其大小，使其能覆盖整个舞台，然后在第120帧按【F5】键沿用帧，如图10-25所示。,图10-25,（2）新建一个图层，在第1帧中导入图片“瓢虫.eps”，调整到适当大小，选中瓢虫，选择修改转换为元件菜单命令，打开“转换为符号”对话框，在其中进行如图10-26所示的设置。,图10-26,（3）单击 按钮，即可将瓢虫转换为图形元件，并将其移动到叶子的左下角，如图10-27所示。,图10-27,（4）在第120帧按【F6】键插入关键帧，并将瓢虫从叶子的左下角移动到右上角。 （5）用
7、鼠标右键单击第1帧，在弹出的快捷菜单中选择“创建补间动画”命令，即可在第1帧和第120帧之间创建动画补间动画，如图10-28所示。,图10-28,（6）按【Ctrl+Enter】键播放该动画，会发现瓢虫慢慢地从叶子的左下角爬到叶子的右上角，如图10-29所示。,图10-29,在创建动作补间动画时，除了可用快捷菜单命令创建动画外，还可以在“属性”面板中进行设置。只需在其中的“补间”下拉列表框中选择“动作”选项即可。,在“属性”面板的“补间”下拉列表框中选择“动作”选项后，“属性”面板如图10-30所示。,图10-30,该面板与形状补间动画的“属性”面板类似，下面介绍它与形状补间动画的“属性”面板
8、不同的选项。 ：选中该复选框可使对象在运动时按比例缩放。如在上面的例子中，如果要让瓢虫逐渐变小，可以将最后一帧的瓢虫缩小，然后选中该复选框。,旋转：该下拉列表框中有“无”、“自动”、“顺时针”、“逆时针”4个选项。“无”表示不旋转对象，“自动”表示对象以最小的角度进行旋转，“顺时针”表示对象沿顺时针方向旋转到终点位置，“逆时针”表示对象沿逆时针方向旋转到终点位置。如果选择“顺时针”或“逆时针”选项，其后都会出现“次”文本框，用于设置旋转次数。,：使对象沿设置的路径运动，并随路径的改变而改变角度。 ：使动画在主场景中首尾连续地循环播放。 ：使对象沿路径运动时，自动捕捉路径。,6.2.2 创建动画
9、补间动画的方法,下面通过一个小实例来学习动画补间动画的创建方法：,绘制天空背景 拖入“战斗机”图形元件,1.打开素材文档，将“图层1”重命名为“天空”，然后使用“矩形工具” 绘制一个没有填充颜色的矩形，并为其填充由“青色#00FFFF”到“深蓝色#000099”的线性渐变。,2.在“天空”图层上新建一个图层，并将其重命名为“飞机”，然后按【F11】键打开“库”面板，我们会看到一个“战斗机”图形元件。将该元件拖到舞台上，适当缩小后放在舞台右上测 。,插入普通帧和关键帧,移动并放大元件实例,3.选中“天空”图层的第25帧，然后按【F5】键插入普通帧，选中“飞机”图层的第25帧，然后按【F6】键插入
10、关键帧 。,4.将“飞机”图层第25帧上的“战斗机”元件实例移动到舞台下方偏左位置，并使用“任意变形工具” 将“战斗机”元件实例放大。,设置元件实例亮度 创建动画补间动画,通过“属性”面板创建补间动画,5.使用“选择工具” 选中“飞机”图层第1帧上的“战斗机”元件实例，然后打开“属性”面板，在“颜色”下拉列表中选择“亮度”选项，然后将“亮度数量”设为“-100%”。,6.在时间轴上“飞机”图层第1帧与第25帧之间右击鼠标，在弹出的快捷菜单中选择“创建补间动画”菜单 。,另一种创建动画补间动画的方法是，选中动画的开始帧，然后打开“属性”面板，在“补间”下拉列表中选择“动画”选项 。,缩放：当两个
11、关键帧上对象大小不同时，勾选该选项可使对象在动画中按比例进行缩放。 缓动：通过在“缓动”文本框输入数值，可调整运动补间的变化速度。其中，如果希望动画开始时较慢，然后加速，可将“缓动”值设置为一个负值，数值越大效果越明显；如果希望动画开始时快，然后减速，可将“缓动”值设置成一个正值。默认情况下，“缓动”值为“0”，表示动画匀速变化。,动画补间动画的参数,“属性”面板中部分选项意义如下：,课堂案例汽车行驶,【学习目标】使用物体移动动画的制作，以及物体进行加速或减速运动的设置技巧。 【知识要点】使用动画补间动画命令制作汽车行驶的动画效果。如图所示。,汽车行驶最终效果,旋转：要在动画中旋转对象，可在“
12、旋转”下拉列表中选择适当选项。其中：“无”表示禁止旋转；“自动”表示根据用户在舞台中的设置旋转；“顺时针”表示让对象顺时帧旋转；“逆时针”表示让对象逆时针旋转。旋转次数是指对象从一个关键帧过渡到另一个关键帧时旋转的次数，360度为一次。 调整到路径和对齐：这两个复选框，在制作引导路径动画时才起作用。 同步：勾选该复选框，可使图形元件实例中的动画和主时间轴同步。,6.3 形状补间动画,6.3.1 形状补间动画的特点,形状补间动画具有如下特点：,形状补间动画可以实现两个图形之间颜色、形状、大小、位置的相互变化，其强调的是“形状”变化，而动画补间强调的是“动作”。 形状补间动画的组成元素只能是分离的
13、矢量图形，如果使用图形元件、按钮、文字、组合等，需要先将它们分离才能创建形状补间动画。,设置形状补间动画后的时间轴,形状补间动画建好后，时间帧面板的背景色变为淡绿色，在起始帧和结束帧之间有一个长长的箭头 。,如果箭头变为虚线，说明制作不成功，原因可能是某个关键帧上的图形没有被分离 。,6.3 形状补间动画,6.3.2 创建形状补间动画的方法,下面通过一个简单的小实例来学习形状补间动画的创建：,舞台中的图形 将第1帧上的飞机图形剪切到第20帧,1.打开素材文档 。,2.在“图层1”的第20帧处插入空白关键帧，然后将第1帧上的飞机图形剪切到第20帧，再将第1帧上的小鸟图形移动到舞台中间位置 。,创
14、建形状补间动画 设置形状补间动画参数,3.选中第1帧与第20帧之间的任意帧，然后打开“属性”面板，在“补间”下拉列表中选择“形状”选项，即可创建形状补间动画 。,4.创建形状补间动画后，打开“属性”面板，其中“缓动”选项的作用与动画补间动画的一样，在“混合”选项的下拉列表中有“分布式”和“角形”两个选项，这里选择“分布式” 。,分布式：选择该选项，则动画中间形状的过渡比较平滑和不规则。 角形：选择该选项，则动画中间形状的过渡会保留有明显的角和直线，适合于具有锐化转角和直线的形状变化。,6.3.3 形状提示的使用,使用形状提示功能可以控制形状变化，使形状按照自己希望的方式变化。下面以一个简单的实
15、例介绍形状提示的应用：,过渡动画 添加形状提示,1.打开素材文档，并按【Enter】键 预览动画 。,2.选中“图层1”的第1帧，然后选择“修改”“形状”“添加形状提示”菜单，添加一个形状提示 。,第1帧与第30帧上的形状提示,3.添加形状提示后在第1帧上会出现一个红色的形状提示，相应的在第30帧上也出现了一个红色的形状提示 。,调整后的形状提示,4.使用“选择工具” 将第1帧上的形状提示移动到鸡的嘴尖位置，再将第30帧上的形状提示移动到孔雀的嘴尖位置，表示在变形时鸡的头会变为孔雀的头。此时第1帧上的形状提示会变为黄色，第30帧上的形状提示会变为绿色，表示它们在一条曲线上。,添加更多的形状提示
16、,5.按快捷键【Ctrl+Shift+H】3次，再添加3个形状提示，然后将第1帧与第30帧上的形状提示“b”移动到鸡和孔雀的后背位置，将形状提示“c”移动到右前爪位置，将形状提示“d”移动到尾巴尖位置 。,选择“视图”“显示形状提示”菜单项，可以隐藏或显示形状提示。要删除所有的形状提示，可选择“修改“形状”“删除所有提示”菜单；要删除单个形状提示，可右击要删除的形状提示，在弹出的快捷菜单中选择“删除提示”菜单。,在使用形状提示时，应注意以下几点：,开始帧与结束帧上的形状提示是一一对应的，例如动画开始处形状提示“a”的所在位置，会变化到动画结束处形状提示“a”的所在位置。 按逆时针顺序从形状的左上角开始放置形状提示，这样的变形效果最好。 形状提示要在形状的边缘才能起作用，在调整形状提示的位置前，可选中工具箱中的“贴紧至对象”按钮 ，这样会自动把形状提
