第4章_补间形状动画.ppt

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