第4章-补间形状动画

第4章补间形状动画教师：杨萌QQ：229781818Email：[e-mail]1.2Flash动画设计与制作4.1补间形状动画的基本概念4.2补间形状动画的制作方法4.3补间形状动画实例本章内容第4章补间形状动画1.3Flash动画设计与制作补间形状动画用于创建形状变化的动画效果，使一个形状变成另一个形状，同时也可以设置图形形状位置、大小、颜色的变化。只要创建出两个关键帧中的对象，其他过渡帧便可以通过Flash自己制作出来。什么是补间形状动画4.1补间形状动画的基本概念1.4Flash动画设计与制作制作条件4.1补间形状动画的基本概念制作形状补间动画需要具备以下3个条件：1.在一个形状补间动画中至少有两个关键帧。2.这两个关键帧中的对象必须是可编辑图形，如果是其他类型的对象，则必须将其转换为可编辑的图形。3.这两个关键帧中的图形必须有一些变化，否则制作的动画将没有动的效果。1.5Flash动画设计与制作指直接用绘图工具绘制出来的几何形状之间的变形动画。补间形状动画的分类4.1补间形状动画的基本概念【几何形变】符号实例创建补间形状动画，前提是将文字或符号实例选择“修改”→“打散”命令，打散后分离成的形状。【文字形变】1.6Flash动画设计与制作【补间形状动画帧】创建成功的的补间形状动画在两个关键帧之间绘制一个浅绿色背景填充的实线箭头。成功创建的形状补间帧补间形状帧4.1补间形状动画的基本概念1.7Flash动画设计与制作【未完成或中断的渐变】如果补间动画出现错误，则本应出现的实线箭头符号显示为虚线。未成功创建的形状补间帧4.1补间形状动画的基本概念未完成或中断的渐变1.8Flash动画设计与制作4.2补间形状动画的制作方法在制作形变动画时，如何要控制较为复杂的形变，则会出现变化过程杂乱无章的情况。这时，可以通过添加形状提示，控制形状变化。形状提示是一个有颜色的实心小圆，上面标志着小写的英文字母，用于识别起始形状和结束形状中相对应的点。对于每一个形变过程，可以为它添加26个形状提示，从a标记到z标记，实际上只用几个就够了。在制作形状补间动画时，如果使用形状提示在开始和结束形状中选择公共点，这些公共点在过渡形状中保持不变，这样就可以较为精确地控制整个形变过程。使用形状提示控制形状变化1.9Flash动画设计与制作1、补间形状动画只能作用于形状（要对组合、实例、位图或文本对象应用形状补间动画，必须先将这些对象分离为形状）2、形状间的渐变只能在同一图层3、在复杂的形状补间动画中，最好创建中间形状然后再进行补间，而不要只定义起始和结束的形状。4、在起始和结束的形状中，形状提示的顺序必须是一致的。注意事项4.1补间形状动画的基本概念1.10Flash动画设计与制作4.2补间形状动画的制作方法当满足了制作条件后，就可以制作补间形状动画。可以通过右键菜单，也可以通过菜单命令，两者相比，前者更方便快捷，比较常用。1.通过右键菜单创建补间形状动画选择同一图层的两个关键帧之间的任意一帧，单击鼠标右键，在弹出的菜单中选择【创建补间形状】命令。2.通过菜单创建补间形状动画选择同一图层的两个关键帧之间的任意一帧，单击菜单【插入】|【补间形状】命令。创建补间形状动画1.11Flash动画设计与制作4.2补间形状动画的制作方法如果想删除创建的补间形状动画，可以通过右键菜单，也可以通过菜单命令，两者相比，前者更方便快捷，比较常用。1.通过右键菜单删除补间形状动画选择已经创建补间形状的两个关键帧之间的任意一帧，单击鼠标右键，在弹出的菜单中选择【删除补间】命令。2.通过菜单命令删除补间形状动画选择已经创建补间形状的两个关键帧之间的任意一帧，单击菜单【插入】|【删除补间】命令。删除补间形状动画1.12Flash动画设计与制作4.2补间形状动画的制作方法补间形状动画的属性通过【属性】面板的【补间】选项进行设置。首先选择已经创建补间形状动画两个关键帧之间的任意一帧，然后展开【属性】面板。动画属性设置1.13Flash动画设计与制作4.2补间形状动画的制作方法（1）缓动：默认情况下，过渡帧之间的变化速率是不变的，可以调整变化速率，创建更为自然地由慢到快的加速或先快后慢的减速效果【取值】0：默认，匀速-100-0:加速0-100：减速（2）混合：共有两种选项“分布式”、“角形”【分布式】：创建的动画中间形状更为平滑【角形】：创建的动画中间形状会保留明显的角和直线动画属性设置1.14Flash动画设计与制作4.2补间形状动画的制作方法形状提示点制作方法【步骤】1.选择开始关键帧，单击【修改】|【形状】|【添加形状提示】，可添加一个提示点，再次选择可继续添加提示点2.调整控制点到合适位置，提示点变黄色3.选择结束关键帧，重复步骤1、2，提示点变绿色提示：如果开始关键帧和结束关键帧的形状提示点没有变黄或变绿，则说明这个形状提示点没有在两个帧中对应起来。1.15Flash动画设计与制作4.2补间形状动画的制作方法形状提示点制作实例【正方形变心形】添加提示点前添加提示点后1.16Flash动画设计与制作【课堂实例——日月变换】4.3补间形状动画实例制作“日月变换”动画1.17Flash动画设计与制作1.新建Flash文件，然后设置影片的属性，包括背景色和屏幕大小2.在时间轴窗口选择当前图层，然后单击选择一空白单元格，按F6键，建立起始关键帧。如果是第一帧，可省去此操作3.选择工具箱中的工具绘制图形，作为补间形状的起始图形。在本例中，选用椭圆工具、选择工具、颜料桶工具绘制月牙【步骤】制作“日月变换”动画4.3补间形状动画实例1.18Flash动画设计与制作4.在第30帧处插入关键帧，使用椭圆工具绘制太阳5.在两个关键帧中任选一帧，单击右键选择“创建补间形状”6.出现浅绿色填充的箭头即可制作“日月变换”动画【步骤】4.3补间形状动画实例1.19Flash动画设计与制作制作“文字变形”动画4.3补间形状动画实例1.20Flash动画设计与制作文字对象分散到图层制作“文字变形”动画【技巧】先使用【修改】|【分离】将要变形的文字打散（出现网格点），再进行补间形状设置，方法同几何变形。(1)“分离”命令(2)“分散到图层”命令4.3补间形状动画实例1.21Flash动画设计与制作给“日月变换”动画添加形变提示4.3补间形状动画实例1.22Flash动画设计与制作给“日月变换”动画添加形变提示1.添加变形提示关键点单击【修改】|【形状】|【添加形状提示】，出现提示点a连续执行该命令，可添加更多提示点快捷键（Ctrl+Shift+H）2.调整变形提示关键点鼠标拖拽可以调整提示点位置4.3补间形状动画实例1.23Flash动画设计与制作制作“进度条”动画4.3补间形状动画实例1.24Flash动画设计与制作1.图层1命名为“框”，编辑内容：一个进度条的框和文字loading2.新建一个图层“颜色”，内容：画一个颜色条长宽刚好和框的大小一致3.在第50帧处插入关键帧，将颜色条的宽度调整为和“框”的宽度一样4.在第1帧和第50帧之间的任意一帧处单击右键，选择【创建补间形状】制作“进度条”动画【步骤】4.3补间形状动画实例1.25Flash动画设计与制作图7-35制作完成的封面图7-36入库后的封面制作“翻书效果”动画4.3补间形状动画实例1.26Flash动画设计与制作制作“翻书效果”动画1.制作封底新建图层“封底”，在第1帧处使用矩形工具绘制封底矩形（黑色），并绘制一个小的内页矩形（蓝色）放置其上方，在第90帧处插入帧（F5）。4.3补间形状动画实例1.27Flash动画设计与制作制作“翻书效果”动画2.制作封面•新建图层“封面”，在第1帧处使用矩形工具绘制矩形（橙色，与封底一样大小），放置在封底上方，并对齐。•在第15帧处插入关键帧（F6），修改矩形为棱形。•选1-15之间的任意帧，添加补间形状4.3补间形状动画实例1.28Flash动画设计与制作4.3补间形状动画实例制作“翻书效果”动画2.制作封面•在第16帧处插入关键帧（F6），将菱形水平翻转，并移动到封底左侧。•在第30帧处插入关键帧，将第1帧处的矩形复制粘贴过来，并对齐。•选16-30之间的任意帧，添加补间形状1.29Flash动画设计与制作4.3补间形状动画实例制作“翻书效果”动画3.制作内页•新建图层“内页1”，在第31帧处插入关键帧（F6），将内页矩形复制粘贴过来。•在第45帧处插入关键帧（F6），修改矩形为棱形。•选31-45之间的任意帧，添加补间形状1.30Flash动画设计与制作4.3补间形状动画实例制作“翻书效果”动画3.制作内页•在第46帧处插入关键帧（F6），将菱形水平翻转，并移动到封底左侧。•在第60帧处插入关键帧，将第31帧处的矩形复制粘贴过来，并对齐。•选46-60之间的任意帧，添加补间形状1.31Flash动画设计与制作更为复杂的翻书效果制作关键界面4.3补间形状动画实例