补间形状动画课件.ppt

第第4章章补间形状动画补间形状动画 1.2Flash动画设计与制作动画设计与制作 4.1 4.1 补间形状动画的基本概念补间形状动画的基本概念 4.2 4.2 补间形状动画的制作方法补间形状动画的制作方法 4.34.3 补间形状动画补间形状动画实例实例本章内容本章内容第第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动画设计与制作动画设计与制作 1.1.新建新建FlashFlash文件，然后设置影片的属性，包括背景色和屏文件，然后设置影片的属性，包括背景色和屏幕大小幕大小2.2.在时间轴窗口选择当前图层，然后单击选择一空白单元在时间轴窗口选择当前图层，然后单击选择一空白单元格，按格，按F6F6键，建立起始关键帧。如果是第一帧，可省去键，建立起始关键帧。如果是第一帧，可省去此操作此操作3.3.选择工具箱中的工具绘制图形，作为补间形状的起始图选择工具箱中的工具绘制图形，作为补间形状的起始图形。在本例中，选用椭圆工具、选择工具、颜料桶工具形。在本例中，选用椭圆工具、选择工具、颜料桶工具绘制月牙绘制月牙 【步骤步骤】制作制作制作制作“日月变换日月变换日月变换日月变换”动画动画动画动画4.3 补间形状动画实例补间形状动画实例 1.16Flash动画设计与制作动画设计与制作 4.4.在第在第3030帧处插入关键帧，使用椭圆工具绘制太阳帧处插入关键帧，使用椭圆工具绘制太阳5.5.在两个关键帧中任选一帧，单击右键选择在两个关键帧中任选一帧，单击右键选择“创建补间形创建补间形状状”6.6.出现浅绿色填充的箭头即可出现浅绿色填充的箭头即可 制作制作制作制作“日月变换日月变换日月变换日月变换”动画动画动画动画【步骤步骤】4.3 补间形状动画实例补间形状动画实例 1.17Flash动画设计与制作动画设计与制作 文字对象分散到图层文字对象分散到图层 制作制作制作制作“文字变形文字变形文字变形文字变形”动画动画动画动画【技巧技巧】先使用先使用【修改修改】|【分离分离】将要变形的文字打散（出将要变形的文字打散（出现网格点），再进行补间形状设置，方法同几何变形。现网格点），再进行补间形状设置，方法同几何变形。(1)(1)“分离分离”命令命令 (2)(2)“分散到图层分散到图层”命令命令 4.3 补间形状动画实例补间形状动画实例 1.18Flash动画设计与制作动画设计与制作 给给给给“日月变换日月变换日月变换日月变换”动画添加形变提示动画添加形变提示动画添加形变提示动画添加形变提示1.1.添加变形提示关键点添加变形提示关键点 单击单击【修改修改】|【形状形状】|【添加形状提示添加形状提示】，出现提示点，出现提示点a a连续执行该命令，可添加更多提示点连续执行该命令，可添加更多提示点快捷键（快捷键（Ctrl+Shift+HCtrl+Shift+H）2.2.调整变形提示关键点调整变形提示关键点鼠标拖拽可以调整提示点位置鼠标拖拽可以调整提示点位置 4.3 补间形状动画实例补间形状动画实例 1.19Flash动画设计与制作动画设计与制作 1.1.图层图层1 1命名为命名为“框框”，编辑内容：一个进度条的框和文，编辑内容：一个进度条的框和文字字loadingloading2.2.新建一个图层新建一个图层“颜色颜色”，内容：画一个颜色条长宽刚好，内容：画一个颜色条长宽刚好和框的大小一致和框的大小一致3.3.在第在第5050帧处插入关键帧，将颜色条的宽度调整为和帧处插入关键帧，将颜色条的宽度调整为和“框框”的宽度一样的宽度一样4.4.在第在第1 1帧和第帧和第5050帧之间的任意一帧处单击右键，选择帧之间的任意一帧处单击右键，选择【创建补间形状创建补间形状】制作制作制作制作“进度条进度条进度条进度条”动画动画动画动画【步骤步骤】4.3 补间形状动画实例补间形状动画实例 1.20Flash动画设计与制作动画设计与制作 制作制作制作制作“翻书效果翻书效果翻书效果翻书效果”动画动画动画动画 1.1.制作封底制作封底 新新建建图图层层“封封底底”，在在第第1 1帧帧处处使使用用矩矩形形工工具具绘绘制制封封底底矩矩形形（黑黑色色），并并绘绘制制一一个个小小的的内内页页矩矩形形（蓝蓝色色）放放置置其其上上方方，在第在第9090帧处插入帧（帧处插入帧（F5F5）。）。4.3 补间形状动画实例补间形状动画实例 1.21Flash动画设计与制作动画设计与制作 制作制作制作制作“翻书效果翻书效果翻书效果翻书效果”动画动画动画动画 2.2.制作封面制作封面新新建建图图层层“封封面面”，在在第第1 1帧帧处处使使用用矩矩形形工工具具绘绘制制矩矩形形（橙橙色色，与与封封底底一一样样大大小小），放放置置在封底上方，并对齐。在封底上方，并对齐。在在 第第 1515帧帧 处处 插插 入入 关关 键键 帧帧（F6F6），修改矩形为棱形。），修改矩形为棱形。选选1-151-15之之间间的的任任意意帧帧，添添加加补间形状补间形状4.3 补间形状动画实例补间形状动画实例 1.22Flash动画设计与制作动画设计与制作 4.3 补间形状动画实例补间形状动画实例制作制作制作制作“翻书效果翻书效果翻书效果翻书效果”动画动画动画动画 2.2.制作封面制作封面在在 第第 1616帧帧 处处 插插 入入 关关 键键 帧帧（F6F6），将将菱菱形形水水平平翻翻转转，并并移动到封底左侧。移动到封底左侧。在在第第3030帧帧处处插插入入关关键键帧帧，将将第第1 1帧帧处处的的矩矩形形复复制制粘粘贴贴过过来来，并对齐。并对齐。选选16-3016-30之之间间的的任任意意帧帧，添添加加补间形状补间形状 1.23Flash动画设计与制作动画设计与制作 4.3 补间形状动画实例补间形状动画实例制作制作制作制作“翻书效果翻书效果翻书效果翻书效果”动画动画动画动画 3.3.制作内页制作内页新新建建图图层层“内内页页1 1”，在在第第3131帧帧处处插插入入关关键键帧帧（F6F6），将将内内页矩形复制粘贴过来。页矩形复制粘贴过来。在在 第第 4545帧帧 处处 插插 入入 关关 键键 帧帧（F6F6），修改矩形为棱形。），修改矩形为棱形。选选31-4531-45之之间间的的任任意意帧帧，添添加加补间形状补间形状 1.24Flash动画设计与制作动画设计与制作 4.3 补间形状动画实例补间形状动画实例制作制作制作制作“翻书效果翻书效果翻书效果翻书效果”动画动画动画动画 3.3.制作内页制作内页在在 第第 4646帧帧 处处 插插 入入 关关 键键 帧帧（F6F6），将将菱菱形形水水平平翻翻转转，并并移动到封底左侧。移动到封底左侧。在在第第6060帧帧处处插插入入关关键键帧帧，将将第第3131帧帧处处的的矩矩形形复复制制粘粘贴贴过过来来，并对齐。并对齐。选选46-6046-60之之间间的的任任意意帧帧，添添加加补间形状补间形状 1.25Flash动画设计与制作动画设计与制作 更为复杂的翻书效果制作关键界面更为复杂的翻书效果制作关键界面更为复杂的翻书效果制作关键界面更为复杂的翻书效果制作关键界面 4.3 补间形状动画实例补间形状动画实例