1 / 37

形状补间动画

形状补间动画. 了解形状补间动画原理 学会制作形状 补间动画 掌握形状提示的使用方法. 教学目标. 任务 3.2.2 制作“变魔术”. 演示设计结果. 变魔术效果图. 任务 3.2.2 制作“变魔术”. 任务分析. 利用绘图工具绘制各种图形 利用形状补间动画制作图形变换的效果. 知识点. 1 、形状补间动画概念.

wirt
Download Presentation

形状补间动画

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 形状补间动画

  2. 了解形状补间动画原理 学会制作形状补间动画 掌握形状提示的使用方法 教学目标

  3. 任务3.2.2 制作“变魔术” • 演示设计结果 变魔术效果图

  4. 任务3.2.2 制作“变魔术” • 任务分析 • 利用绘图工具绘制各种图形 • 利用形状补间动画制作图形变换的效果

  5. 知识点 1、形状补间动画概念 形状补间动画是在Flash的时间帧面板上，在一个关键帧上绘制一个形状，然后在另一个关键帧上更改该形状或绘制另一个形状等，Flash将自动根据二者之间的帧的值或形状来创建的动画，它可以实现两个图形之间颜色、形状、大小、位置的相互变化。

  6. 知识点 2、形状补间动画构成元素 构成形状补间动画的元素多为用鼠标绘制出的形状。如果要使用图形元件、按钮、文字，则必须要先打散（Ctrl+B）后才可以做形状补间动画。 • 能创建形状补间动画的对象具有这样的特征： • 对象被选中后出现均匀的白色小点。 • 若对象是位图需转换成矢量图

  7. 知识点 3、形状补间动画的表现 形状补间动画建立后，时间帧面板的背景色变为淡绿色，在起始帧和结束帧之间有一个长长的箭头，如下图所示。

  8. 知识点 4、形状补间动画的分类 • 形状变化 • 淡入淡出 • 颜色渐变 • 添加形状提示

  9. 知识点 5、创建形状补间动画 同一图层上，在绘制着不同矢量图形的的两关键帧之间任选1帧，然后在该帧上右击鼠标，在弹出的快捷菜单中选择【创建补间形状】命令。如果两关键帧之中的任何一个关键帧的内容为空，则创建形状补间动画失败，如图所示 。 创建失败

  10. 知识点 6、形状提示 在制作形状补间动画时，如果使用形状提示在开始和结束形状中选择公共点，这些公共点在过渡形状中保持不变，这样就可以较为精确地控制整个形变过程。 添加形状提示，控制变形过程。

  11. 知识点 • 形状提示是一个有颜色的实心小圆，上面标志着小写的英文字母，用于识别起始形状和结束形状中相对应的点。对于每一个形变过程，可以为它添加26个形状提示，从a标记到z标记，实际上只用几个就够了。

  12. 知识点 • 添加形状提示的方法 • 单击形状补间动画的开始帧，执行【修改】|【形状】|【添加形状提示】命令，该帧的形状就会增加一个带字母的红色圆圈，相应地，在结束帧形状中也会出现一个“提示圆圈”。 • 用鼠标左键单击并分别按住这2个“提示圆圈”，在适当位置安放，安放成功后开始帧上的“提示圆圈”变为黄色，结束帧上的“提示圆圈”变为绿色，安放不成功或不在一条曲线上时，“提示圆圈”颜色不变，如图所示。

  13. 知识点 调整位置后结束帧处变绿色 调整位置后开始帧处变黄色

  14. 知识点 • 添加形状提示的技巧 形状提示要在形状的边缘才能起作用，在调整形状提示位置前，选中工具【贴紧至对象】，这样会自动把“形状提示”吸咐到边缘上。

  15. 任务3.2.2 制作步骤 • 1、绘制图形：小球、五角星、花朵 • 创建FLASH文档，设置舞台大小为550×400像素，背景色为白色。 • 绘制图形：小球、五角星和花朵，如图所示。

  16. 任务3.2.2 制作步骤 • 2、制作形状补间动画 • 分别选中第1帧、第20帧，右击鼠标，在弹出的快捷菜单中选择【创建补间形状】命令。 • 测试动画并保存文件。

  17. 任务3.2.3 制作“旋转的房子” • 演示设计结果 旋转的房子效果图

  18. 任务3.2.3 制作“旋转的房子” • 任务分析 • 利用绘图工具绘制房子 • 利用形状提示工具制作房子旋转的动画效果

  19. 任务3.2.3 制作步骤 • 1、绘制房子 • 创建FLASH文档，设置舞台大小为550×400像素，背景色为灰色。 • 绘制蓝色屋顶及红色墙体，如图所示。

  20. 任务3.2.3 制作步骤 • 使用线条工具，以三角形的顶点为起点，以它的右斜边为固定边，勾勒出另一个三角形区域；以矩形右下角为起点，以右斜边为固定边，勾勒出矩形的另一面，如图所示。

  21. 任务3.2.3 制作步骤 • 使用油漆桶工具 ，在三角形右侧面填充深蓝色，在矩形右侧面填充深红色；使用选择工具 ，选中黑色线条，按Delete键将其删除，如图所示。

  22. 任务3.2.3 制作步骤 • 在第30帧插入关键帧，执行“修改/变形/水平翻转/”命令；使用油漆桶工具 ，将三角形左侧面填充成浅蓝色，矩形右侧面填充为浅红色，如图所示。

  23. 任务3.2.3 制作步骤 • 2、添加形状提示制作房子旋转效果 • 选择第1帧，展开属性面板创建形状补间动画。 • 选择“修改/形状/增加形状提示”命令，会出现一个红色提示点“a”，将其移至三角形的顶点。 • 选择第30帧，将红色提示点“a”移至三角形的顶点。

  24. 任务3.2.3 制作步骤 • 用同样的方法，添加提示点b、c、d、e、f、g、h、i，效果如图所示。 添加形状提示点

  25. 任务3.2.3 制作步骤 翻转后的形状提示点 • 测试动画并保存文件。

  26. 知识点拓展 • 获得最佳形状补间动画效果 • 在复杂的补间形状中，需要创建中间形状然后再进行补间，而不要只定义起始和结束的形状。 • 确保形状提示是符合逻辑的。例如，如果在一个三角形中使用三个形状提示，则在原始三角形和要补间的三角形中它们的顺序必须是一致的。它们的顺序不能在第一个关键帧中是 abc，而在第二个中是 acb。 • 如果按逆时针顺序从形状的左上角开始放置形状提示，它们的工作效果最好。

  27. 知识点拓展 • 形状补间与动作补间动画的区别

  28. 任务3.2.5 制作“校庆礼盒” • 演示设计结果 礼盒效果图

  29. 任务3.2.5 制作“校庆礼盒” • 任务分析 • 制作五角星旋转放大的动画 • 制作五角星转变为文字的动画

  30. 任务3.2.5 制作步骤 • 1、五角星旋转放大的动画 • 创建FLASH文档，设置舞台大小为550×400像素，背景色为白色。 • 导入素材“礼物盒.jpg” 到库中。 • 将“礼物盒.jpg”拖至主场景。

  31. 任务3.2.5 制作步骤 • 添加4个新图层，分别选中每一层的第1帧，使用多角星形工具，在各个图层中绘制一颗五角星。 • 调整五角星的大小、角度和位置，如图所示。

  32. 任务3.2.5 制作步骤 • 按F8键打开“转化为元件”对话框，分别将四颗五角星转化为名为“1”、“2”、“3”、“4”的图形元件。 • 分别选择图层2、图层3、图层4、图层5的第10帧，按F6插入关键帧。 • 选择图层1的第20帧，按F5键插入帧。 • 选择图层2的第1帧，创建动作补间动画，展开属性面板，设置选择旋转下拉菜单中的“顺时针”选项，次数为1。

  33. 任务3.2.5 制作步骤 • 选择图层2第1帧的五角星，按Ctrl+T键打开变形面板，将五角星的宽度和高度比例都设为0%。 • 将五角星移至礼物盒内部。 • 使用同样的方法制作其他三个五角星的旋转放大动画。

  34. 任务3.2.5 制作步骤 • 2、五角星转变为文字的动画 • 选择图层2的第11帧和第20帧，按F6键插入关键帧。 • 选择第20帧，使用文本工具，输入文字“庆经”并删除五角星，如图所示。

  35. 任务3.2.5 制作步骤

  36. 任务3.2.5 制作步骤 • 执行“修改/分离”命令，将文字打散。 • 选择第11帧的五角星，执行“修改/分离”命令，将五角星打散。 • 选择第11帧，创建形状补间动画。

  37. 任务3.2.5 制作步骤 • 使用同样的方法制作剩下的字，如图所示。 • 测试动画，并保存文件。

More Related