时间轴动画

图13-25 时间轴中帧的分布
（10）按<Enter>键预览动画，或者按<Ctrl+Enter> 10） <Enter>键预览动画 或者按<Ctrl+Enter> 键预览动画， 组合键测试动画。 组合键测试动画。
工作情境二 制作“跳动的篮球”动 制作“跳动的篮球” 画
一、工作情境描述及效果 • 工作情境描述 通过制作“跳动的篮球”动画， 通过制作“跳动的篮球”动画，让用户进一步 熟悉时间轴动画的制作方法与技巧， 熟悉时间轴动画的制作方法与技巧，在播放过 程中可以看到一只篮球在地面上弹动的动画效 在本案例中涉及时间轴中关键帧的设置。 果。在本案例中涉及时间轴中关键帧的设置。 具体分析如表13- 所示。 具体分析如表13-2所示。
工作情境二 制作“跳动的篮球”动 制作“跳动的篮球” 画
图13-27 “篮球”元件
图13-28 调整“篮球”的中心点 图13-29 “篮球”调扁的效果
工作情境二 制作“跳动的篮球”动 制作“跳动的篮球” 画
（ 6 ） 在第 45 帧处按快捷键 <F6> 插入关键帧 ， 按 帧处按快捷键<F6 插入关键帧， <Shift>键的同时将 篮球” 拖曳到舞台上方（ <Shift> 键的同时将 “ 篮球 ” 拖曳到舞台上方 （ 注 键的同时将“ 篮球”高度一定要比第1帧的略低） 意 ， “ 篮球 ” 高度一定要比第 1帧的略低 ） 。 分别 右击第1 帧和第27 帧 27 右击第 1 帧和第 27帧 ， 在弹出的快捷菜单中选择 【创建传统补间】命令。为了创造出符合物理原理 创建传统补间】命令。 篮球”下落时越来越快， 篮球” （即“篮球”下落时越来越快，“篮球”弹起时越 来越慢）的运动效果，选择第1 属性】 来越慢 ） 的运动效果 ， 选择第 1帧 ， 在 【 属性 】 面 板中将【补间】区域中的【缓动】设置为“ 100输 板中将【补间】区域中的【缓动】设置为“-100输 利用同样方法将第27 帧的 缓动】 帧的【 入 ” 。 利用同样方法将第 27帧的 【 缓动 】 设置为 100输出 输出” “100输出”。
工作情境一 制作“树叶飘落”动画 制作“树叶飘落”
（6）单击【新建图层】按钮，新建【图层2】。 单击【新建图层】按钮，新建【图层2 树叶”元件拖曳到【图层2 使用【 将“树叶”元件拖曳到【图层2】中，使用【任 意变形工具】调整“树叶”的大小和方向， 意变形工具】调整“树叶”的大小和方向，使 之位于“树背景”的顶端。 之位于“树背景”的顶端。在【图层 1】的 第 120帧处按快捷键<F5>，即可将【图层1】扩 120帧处按快捷键 帧处按快捷键<F5>，即可将【图层1 充到第120帧 充到第120帧。 图层2 的第20帧处按快捷键 帧处按快捷键<F6>插入 （7）在【图层2】的第20帧处按快捷键<F6>插入 关键帧，然后使用【任意变形工具】调整“ 关键帧，然后使用【任意变形工具】调整“树 的位置、大小、倾斜和旋转， 树叶” 叶”的位置、大小、倾斜和旋转，使“树叶” 产生下落位移。右击第1 产生下落位移。右击第1帧，在弹出的快捷菜单 中选择【创建传统补间】命令。 中选择【创建传统补间】命令。
子模块一 时间轴动画的原理和制作要点
一、时间轴动画的原理及制作要点 1．时间轴的作用 2．时间轴动画的原理 3．时间轴动画的制作
子模块一 时间轴动画的原理和制作要点
二、时间轴控制 1．时间轴的组成 2．时间轴的控制
工作情境一 制作“树叶飘落”动画 制作“树叶飘落”
一、工作情境描述与效果 • 工作情境描述 通过制作“树叶飘落”动画， 通过制作“树叶飘落”动画，用户可以熟悉时间 轴动画的制作方法与技巧， 轴动画的制作方法与技巧， 在播放过程中可以看 到一片一片的树叶从树上飘落的动画效果。 到一片一片的树叶从树上飘落的动画效果。在本 案例中分别涉及图层、变形的调整和时间轴动画。 案例中分别涉及图层、变形的调整和时间轴动画。 具体分析如表13- 所示。 具体分析如表13-1所示。
工作情境二 制作“跳动的篮球”动 制作“跳动的篮球” 画
• 工作情境效果 “跳动的篮球”动画的最终效果如图13-26所示。 跳动的篮球”动画的最终效果如图13-26所示。 所示
图13-26 “跳动的篮球”动画的最终效果
工作情境二 制作“跳动的篮球”动 制作“跳动的篮球” 画
二、工作情境详解 新建一个Flash动画文档 并命名为“ 动画文档， （1）新建一个Flash动画文档，并命名为“跳动的篮 设置舞台的背景颜色为淡黄色。 球”，设置舞台的背景颜色为淡黄色。在工作区右 上角的下拉列表中选择【显示全部】选项。 上角的下拉列表中选择【显示全部】选项。 选择【插入】 新建元件】命令， （2）选择【插入】→【新建元件】命令，新建一个 图形元件，并命名为“篮球” 图形元件，并命名为“篮球”。 <Shift>键的同时在舞台上绘制一个圆 键的同时在舞台上绘制一个圆， （3）按<Shift>键的同时在舞台上绘制一个圆，设置 笔触颜色为无，填充颜色为#FF9900。 笔触颜色为无，填充颜色为#FF9900。为篮球画上 线条，设置线条笔触应略粗一些比较美观， 线条，设置线条笔触应略粗一些比较美观，如图 13-27所示。 13-27所示。 所示 返回场景， 篮球” （4）返回场景，将“篮球”元件由库中拖曳到舞台 上方，使用【任意变形工具】 篮球” 上方，使用【任意变形工具】将“篮球”实例的中 心点调整到实例下方并与下方相切，如图13-28所 心点调整到实例下方并与下方相切，如图13-28所 示。
工作情境一 制作“树叶飘落”动画 制作“树叶飘落”
• 工作情境效果 树叶飘落”动画的最终效果如图13-22所示 所示。 “树叶飘落”动画的最终效果如图13-22所示。
图 13-22 果
“树叶飘落”动画最终效
工作情境一 制作“树叶飘落”动画 制作“树叶飘落”
二、工作情境详解 新建一个Flash动画文档 并将其命名为“ 动画文档， （1）新建一个Flash动画文档，并将其命名为“树 叶飘落” 设定场景大小为600像素 400像素 像素× 像素， 叶飘落”，设定场景大小为600像素×400像素， 背景颜色为黑色。 背景颜色为黑色。在工作区右上角的下拉列表中 选择【显示全部】选项。 选择【显示全部】选项。 选择【文件】 导入】 导入到库】 （2）选择【文件】→【导入】→【导入到库】命 分别导入图像素材“树背景.jpg”、 令，分别导入图像素材“树背景.jpg”、和“树 .jpg”到库中 到库中。 叶.jpg”到库中。
工作情境一 制作“树叶飘落”动画 制作“树叶飘落”
（3）将“树叶.jpg”由库中拖曳到舞台上，用户可 树叶.jpg”由库中拖曳到舞台上 由库中拖曳到舞台上， 以看到“树叶.jpg”图像有白色底色 如图13图像有白色底色， 以看到“树叶.jpg”图像有白色底色，如图13-23 所示。要想使白色底色去除，其方法是， 所示。要想使白色底色去除，其方法是，按 <Ctrl+B>组合键将 树叶.jpg”图像打散成图形 <Ctrl+B>组合键将“树叶.jpg”图像打散成图形， 组合键将“ 图像打散成图形， 然后利用【套索工具】 然后利用【套索工具】和【魔术棒】按钮将“树 魔术棒】按钮将“ .jpg”图像的白色底色选中 图像的白色底色选中， <Delete>键将 叶.jpg”图像的白色底色选中，按<Delete>键将 选中的部分删除，如果不能完全选中， 选中的部分删除，如果不能完全选中，可多重复 操作几次，删除后效果如图13-24所示 所示。 操作几次，删除后效果如图13-24所示。
工作情境一 制作“树叶飘落”动画 制作“树叶飘落”
知 识 点 功 能 实 现 效 果
图层运用：正确 弄清图层叠加关 系，使所学知识 更扎实 知 识 点
动画重要 的组成部 分
功 能 Flash中的 最重要应 用
实
现
效
果
时间轴运用：灵 活运用时间轴可 以创作出更完美 的效果
表13-1 “树叶飘落”动画工作任务分析表
工作情境一 制作“树叶飘落”动画 制作“树叶飘落”
图13-25 时间轴中帧的分布
（10）按<Enter>键预览动画，或者按<Ctrl+Enter> 10） <Enter>键预览动画 或者按<Ctrl+Enter> 键预览动画， 组合键测试动画。 组合键测试动画。
工作情境一 制作“树叶飘落”动画 制作“树叶飘落”
工作情境一 制作“树叶飘落”动画 制作“树叶飘落”
图13-23 白色底色
图13-24 去除白色底色
工作情境一 制作“树叶飘落”动画 制作“树叶飘落”
（4）选中整个“树叶”，按快捷键<F8>将处理好 选中整个“树叶” 按快捷键<F8>将处理好 的图片转换为图形元件，并命名为“树叶” 的图片转换为图形元件，并命名为“树叶”。 将舞台上的“树叶”实例删除。 将舞台上的“树叶”实例删除。 从库中将“树背景.jpg”图像拖曳到场景中的 （5）从库中将“树背景.jpg”图像拖曳到场景中的 图层1”中 单击工具栏中的【对齐】按钮， “图层1”中，单击工具栏中的【对齐】按钮， 打开【对齐】面板，在其中单击【相对于舞台】 打开【对齐】面板，在其中单击【相对于舞台】 按钮、 匹配宽度】按钮、 匹配高度】按钮、 按钮、【匹配宽度】按钮、【匹配高度】按钮、 水平中齐】按钮和【垂直中齐】按钮， 【水平中齐】按钮和【垂直中齐】按钮，然后 将其作为图形背景。 将其作为图形背景。
模块十三 时间轴动画
模块十三
时间轴动画
重点提示： 重点提示： • • • 时间轴的原理 时间轴控制 时间轴的使用方法
模块十三Baidu Nhomakorabea
时间轴动画
子模块一 时间轴动画的原理和制作要点 制作“树叶飘落” 工作情境一 制作“树叶飘落”动画 制作“跳动的篮球” 工作情境二 制作“跳动的篮球”动画 制作“幻影小蜻蜓” 工作情境三 制作“幻影小蜻蜓”动画 模块小结 模块训练
工作情境二 制作“跳动的篮球”动 制作“跳动的篮球” 画
功 知 识 点 关键帧运用： 使用【属性】 面板对时间轴 中的关键帧进 行调整 【属性】面板 中“缓动”选 项数值的调整， 使篮球跳动更 符合自然规律 能 实 现 效 果
时间轴运用： 灵活运用时间 Flash中的最重 轴可以创作出 要应用 更完美的效果 表13-2 “跳动的篮球”动画工作任务分析表
工作情境二 制作“跳动的篮球”动 制作“跳动的篮球” 画
（ 5 ） 在 【 图层 1】 的第 25帧处按快捷键<F6> 插入关 图层1 的第25 帧处按快捷键 6 帧处按快捷键<F 键帧， 篮球”移动到舞台下方适当位置。 键帧，将“篮球”移动到舞台下方适当位置。在第 26帧处按快捷键 6 插入关键帧， 使用【 26 帧处按快捷键 <F6> 插入关键帧 ， 使用 【 任意变 帧处按快捷键<F 形工具】 篮球”调扁一些，如图13-29所示 所示。 形工具 】 将 “ 篮球 ” 调扁一些 ， 如图 13-29所示 。 在时间轴的第25帧处右击 帧处右击， 在时间轴的第25帧处右击，在弹出的快捷菜单中选 复制帧】命令，然后右击第27帧 择【复制帧】命令，然后右击第27帧，在弹出的快 捷菜单中选择【粘贴帧】命令。 捷菜单中选择【粘贴帧】命令。
工作情境一 制作“树叶飘落”动画 制作“树叶飘落”
（8）同步骤（7），分别在【图层2】的第50帧、 同步骤（ ），分别在 图层2 的第50帧 分别在【 100帧和第 帧和第120帧处按快捷键 帧处按快捷键<F6>插入关键帧 插入关键帧， 第100帧和第120帧处按快捷键<F6>插入关键帧， 并调整每个关键帧中图形的位置、大小、倾斜、 并调整每个关键帧中图形的位置、大小、倾斜、 旋转，使树叶形成Z字形下落轨迹。 旋转，使树叶形成Z字形下落轨迹。 新建【图层3 图层4 图层5 （9）新建【图层3】、【图层4】、【图层5】、 图层6 图层7 图层8 【图层6】、【图层7】和【图层8】，同步骤 （3）～（8）分别制作多片“树叶”下落的动 ）～（8 分别制作多片“树叶” 为使动画效果符合自然规律， 画。为使动画效果符合自然规律，各图层的关 键帧位置应有所不同，如图13-25所示 所示。 键帧位置应有所不同，如图13-25所示。