第7讲_Flash补间动画

1、12 2q教师：柳青 q电子信箱： Lq办公室：信息楼B418q电话： 67703852q元件与场景4q目的：目的：q掌握Flash的补间形状动画制作； q掌握Flash的动画补间动画制作；q区分补间形状动画与动画补间动画；q掌握补间形状与动画补间动画综合运用；q重点：重点：q补间形状动画与动画补间动画的区别； q动画补间动画的参数设置：旋转、运动快慢、元件属性的修改等；q分段分层的综合补间动画；q难点：难点：q对文字或图形的分离操作q过渡帧与关键帧，如何设置补间动画的关键帧q补间参数的设置q不同补间动画之间的衔接q补间形状动画中，如果要控制复杂或罕见的形状变化，可以使用形状提示来控制形状以什

2、么方式渐变。q形状提示会标识起始形状和结束形状中添加相对应的“参考点”，使Flash在计算变形过渡时依一定的规则进行，从而较有效地控制变形过程。q形状提示包含字母（从 a 到 z），用于识别起始形状和结束形状中的相对应的点。最多可以使用 26 个形状提示。 q选择补间形状动画的开始帧，执行“修改/形状/添加形状提示”菜单命令，该帧的形状上就会增加一个带字母的红色圆圈，相应地，在结束帧形状中也会出现一个“提示圆圈”；q分别用鼠标拖动开始和结束帧上的“提示圆圈”，放置在适当位置，安放成功后开始帧上的“提示圆圈”变为黄色，结束帧上的“提示圆圈”变为绿色；q安放不成功或不在一条曲线上时，“提示圆圈”颜

3、色不变还是为红色。q选择形状提示，点击鼠标右键，可以通过快捷菜单添加和删除形状提示q参考“雪人-第2版-样张.swf”，在上节课雪人的基础上运用形状提示，实现雪球变雪人的效果动画（比较有什么不一样的地方）。q知识点：q形状提示q元件应用q补间形状动画q打开“雪人-第2版.fla”文件（形状补间已经做好）q选择第1帧，添加一个形状提示点(修改/形状/添加形状提示，这时提示点颜色为红色) q选择第30帧，调整提示点 (第30帧提示点颜色变成绿色，第1帧提示点颜色变成黄色)q保存为“雪人-第2版.fla”，导出为“雪人-第2版.swf”文件9q传统补间动画的概念q传统补间动画给对象在两个关键帧分别定

4、义不同的属性，如颜色、大小、方位、角度等q在两个关键帧之间建立一种变化关系q位移首尾关键帧中元件位置改变q缩放首尾关键帧中元件大小的 q旋转q扭曲变形q颜色渐变等首尾关键帧中元件的颜色、alpha值等发生改变q传统补间动画的对象通常是元件、组合、文本块等q传统补间动画在CS4以前的版本叫做动作补间动画或动画补间动画q传统补间动画的特点q只对单一的对象有效，包括影片剪辑、图形元件、按钮、文字、位图、组合等等q分离的对象必须组合或转换成元件才能创建传统补间动画10q传统补间动画的创建步骤q在动画开始处创建一个关键帧，并放入对象q在动画结束处创建一个关键帧，并放入改变属性后的对象q选择两关键帧之间任

5、何一帧，按鼠标右键，在快捷菜单中选择“创建传统补间”命令q 或者打开“插入”菜单，选择“传统补间”命令11q动画头尾必须是关键帧，两关键帧中间被带有一个黑箭头和浅紫色背景的中间过渡帧分开(如图层1所示)q如果两关键帧中间的黑箭头变为虚线，代表传统补间动画创建错误q缺少开始或结束关键帧(如图层3,4所示)q关键帧的对象是分离的(如图层2,所示)12q选择传统补间动画中任何一帧，打开传统补间动画的属性面板，设置属性q缓动：使动画加速或减速运动q旋转：实现元件或组的旋转，填入的数值介于0到65535之间q调整到路径：使元件或组按照指定的路径有方向的进行运动q同步：使影片剪辑元件动画在主动画中能准确的

6、完成循环13q参考“卡通动画-样张.swf”制作传统补间动画。q美羊羊由小变大、加速、渐渐出现到地球上q美羊羊在地球上逆时针旋转1圈q与此同时地球顺时针旋转2周q知识点：q多图层传统补间动画q由小到大、渐渐出现、旋转等效果的实现14q打开“卡通动画.fla”q地球转动动画设置q在第1帧将库中地球元件拖到舞台中央q在第40帧插入关键帧q传统补间动画，并设置“旋转”参数，旋转方向为顺时针，旋转圈数为2圈q美羊羊跳到地球上动画设置q在第1帧将库中美羊羊拖到舞台的左上角，改变大小和水平翻转q在第20帧插入关键帧，将美羊羊拖到地球上，改变大小q选择第1帧设置Alpha值为19%q创建传统补间动画，并设置

7、“缓动”值为-100q美羊羊旋转动画设置q在第40帧插入关键帧q创建传统补间动画，并设置“旋转”参数，旋转方向为顺时针，旋转圈数为1圈q保存为“卡通动画.fla”q导出为“.swf”15q在课堂示例2的基础上，参考“卡通动画综合-样张.swf”完成动画q美羊羊绕地球顺时针旋转1圈，q美羊羊变成灰太狼，灰太狼又变成“我爱灰太狼”几个字，停留一会q知识点：q多图层分段动画q传统补间动画与补间形状动画的衔接16q美羊羊绕地球旋转1圈动画设置q在第41帧插入关键帧q运用“自由变形工具”，将美羊羊的变形点拖动到地球中心q在第60帧插入关键帧q创建传统补间动画，并设置“旋转”参数，旋转方向为顺时针，旋转圈

8、数为1圈q美羊羊变成灰太狼，灰太狼又变成“我爱灰太狼”几个字动画设置q在第61帧插入关键帧，将美羊羊分离q在第80帧插入空白关键帧，将库中“灰太狼”元件放入q创建补间形状动画q在第100帧插入空白关键帧，文字“我爱灰太狼”，彻底分离，创建补间形状动画q动画持续到110帧，注意地球旋转的配合q导出为“卡通动画综合.swf”17q为什么“美羊羊绕地球旋转1圈”和“美羊羊变成灰太狼”这两段动画的首关键帧不能和前一段动画的尾关键帧共用？ 18q参考“万科白马花园-样张.swf”，运用传统补间动画，制作楼盘宣传海报动画。q花园图片淡出式切换q文字出现的效果其中文字“万科白马花园”颜色变化为绿、红、蓝、湖

9、蓝、粉红。q知识点：q多图层分段动画qalpha值的设置q翻转效果的设置19q打开“万科白马花园.fla”，舞台大小为700*400像素，舞台背景为黑色q图片动画设置q分别创建4张图片动画（注意转换为元件，为什么？），动画分别持续15帧q逐渐变透明(Alpha值设置)q文字-万科白马花园动画设置q第1帧放入“文字1”元件，第15帧插入关键帧q将第15帧中文字做垂直翻转q第30帧、第60帧同第1帧，第45帧同第15帧，改变颜色q分别创建传统补间q其他文字动画设置q文字-情景花园洋房，第15-30帧，文字从舞台右侧进入舞台q文字-超宽露台设计，第30-45帧，文字从舞台左侧进入舞台q文字-紧邻徐汇

10、商圈，第45-60帧，文字从舞台下方进入舞台q所有图层动画持续到第60帧q保存为“万科白马花园.fla”，导出为“万科白马花园.swf”。qFlash cs4中的全新补间动画方式，能更灵活控制每帧的属性，而且可以看到每个帧上的动画轨迹，这样可创作出更加完美的补间动画。q能够创建补间动画的对象包括按钮、文字、图形元件、影片剪辑。q传统补间动画是由关键帧组成的，而补间动画则是由属性关键帧组成的，属性关键帧是以小菱形图标表示的。q但是补间动画的第一帧例外，还是以关键帧的形式表示，以黑圆点显示。 q手动添加q创建补间动画，选择添加属性关键帧的位置，右击鼠标，在快捷菜单中选择“插入关键帧”子菜单中的命令

11、。q子菜单中的命令都代表了对动画对象的一种属性控制，其具体设置可以在“属性”面板中完成。q自动添加q当鼠标选择所在位置没有属性关键帧的情况下，如果选中舞台中的补间动画对象，并设置其属性（如移动位置、设置Alpha值及色调等），就可以自动在当前位置添加一个属性关键帧。q删除q选择属性关键帧，右击鼠标，在快捷菜单中选择“清除关键帧”子菜单中的命令。q帧组成q传统补间使用关键帧。q补间动画只能具有一个与之关联的对象实例，并使用属性关键帧而不是关键帧。q内容组成q传统补间需要组成动画的两个帧中分别存在对象。q而补间动画则只使用一个对象。q属性变化q使用传统补间可以在不同的属性（如色调和亮度）之间进行变

12、化 。q补间动画只能在一个属性进行变化，因为补间动画是由一个对象组成的。23q参考“补间动画-样张.swf”，制作动画。q知识点：q创建补间动画q补间动画与传统补间动画的区别q打开“.fla”q用传统动画创建五角星的运动q在第1帧将库中黄色五角星元件拖到舞台上q分别在第15、30、45帧插入关键帧q改变第15、30、45帧中五角星的位置q创建3段传统补间动画q设置第1-15帧，五角星顺时针旋转1圈q设置第15-30帧，五角星移到上方q设置第30-45帧，五角星渐渐变大，同时渐渐变模糊q用动画创建五角星的运动q在第1帧将库中红色五角星元件拖到舞台上q分别在第15、30、45帧插入属性关键帧q改变

13、第15、30、45帧中五角星的位置q设置属性五角星逆时针旋转1圈、五角星渐渐变大，同时渐渐变模糊q导出为“.swf”25q完成课堂示例1-5q参考“奔马-样张.swf”，利用素材文件“奔马.fla”，创建逐帧动画和传统补间动画。q打开素材文件“奔马.fla”；q设置舞台大小为360*170像素，帧频调整为12；q把库中bg.png图片文件作为整个动画背景，并持续到第15帧；q新建一个图层“马”，在第1、3、5、7、9、11、13、15帧分别插入空白关键帧，把库中图片文件“horse-1.pnghorse-8.png” 依次放入空白关键帧中，并调整每张图片，使它们在舞台上的位置相同；q新建一个图

14、层“背景”，利用传统补间实现移步换景，注意放大q动画导出为“奔马.swf”。q注意：q调整图片位置可以利用“对齐面板”q一定要把“相对于舞台”按钮按下27q课后练习1：打开“去逛街.fla”，参考“去逛街-样张.swf”效果，利用素材，建立动画q参考步骤：q“马路” 作为背景，延续到50帧q实现“女孩”从远到近，从小变大的运动效果q实现从“白云”变化为“乌云”的效果q课后练习2：参考“去逛街思考-样张.swf”效果，在上个练习基础上添加各种动画q背景移步换景的效果q乌云变成下雨的效果q运用形状提示，参考“翻书-样张.swf”，创建补间形状动画，实现翻书效果动画。q知识点：q形状提示q元件应用q补间形状动画q打开“翻书.fla”文件q把库中“组件1”放入舞台，持续到60帧；q创建新图层，把库中“组件1”放入该图层q并做水平翻转，与前