1、模块十三 时间轴动画,模块十三 时间轴动画,重点提示： 时间轴的原理 时间轴控制 时间轴的使用方法,模块十三 时间轴动画,子模块一 时间轴动画的原理和制作要点 工作情境一 制作“树叶飘落”动画 工作情境二 制作“跳动的篮球”动画 工作情境三 制作“幻影小蜻蜓”动画 模 块 小 结 模 块 训 练,子模块一 时间轴动画的原理和制作要点,一、时间轴动画的原理及制作要点 1时间轴的作用 2时间轴动画的原理 3时间轴动画的制作,子模块一 时间轴动画的原理和制作要点,二、时间轴控制 1时间轴的组成 2时间轴的控制,工作情境一 制作“树叶飘落”动画,一、工作情境描述与效果 工作情境描述 通过制作“树叶飘落
2、”动画，用户可以熟悉时间轴动画的制作方法与技巧，在播放过程中可以看到一片一片的树叶从树上飘落的动画效果。在本案例中分别涉及图层、变形的调整和时间轴动画。具体分析如表13-1所示。,工作情境一 制作“树叶飘落”动画,表13-1 “树叶飘落”动画工作任务分析表,工作情境一 制作“树叶飘落”动画,工作情境效果 “树叶飘落”动画的最终效果如图13-22所示。,图 13-22 “树叶飘落”动画最终效果,工作情境一 制作“树叶飘落”动画,二、工作情境详解 （1）新建一个Flash动画文档，并将其命名为“树叶飘落”，设定场景大小为600像素400像素，背景颜色为黑色。在工作区右上角的下拉列表中选择【显示全部
3、】选项。 （2）选择【文件】【导入】【导入到库】命令，分别导入图像素材“树背景.jpg”、和“树叶.jpg”到库中。,工作情境一 制作“树叶飘落”动画,（3）将“树叶.jpg”由库中拖曳到舞台上，用户可以看到“树叶.jpg”图像有白色底色，如图13-23所示。要想使白色底色去除，其方法是，按组合键将“树叶.jpg”图像打散成图形，然后利用【套索工具】和【魔术棒】按钮将“树叶.jpg”图像的白色底色选中，按键将选中的部分删除，如果不能完全选中，可多重复操作几次，删除后效果如图13-24所示。,工作情境一 制作“树叶飘落”动画,图13-23 白色底色 图13-24 去除白色底色,工作情境一 制作“
4、树叶飘落”动画,（4）选中整个“树叶”，按快捷键将处理好的图片转换为图形元件，并命名为“树叶”。将舞台上的“树叶”实例删除。 （5）从库中将“树背景.jpg”图像拖曳到场景中的“图层1”中，单击工具栏中的【对齐】按钮，打开【对齐】面板，在其中单击【相对于舞台】按钮、【匹配宽度】按钮、【匹配高度】按钮、【水平中齐】按钮和【垂直中齐】按钮，然后将其作为图形背景。,工作情境一 制作“树叶飘落”动画,（6）单击【新建图层】按钮，新建【图层2】。将“树叶”元件拖曳到【图层2】中，使用【任意变形工具】调整“树叶”的大小和方向，使之位于“树背景”的顶端。在【图层 1】的第 120帧处按快捷键，即可将【图层1
5、】扩充到第120帧。 （7）在【图层2】的第20帧处按快捷键插入关键帧，然后使用【任意变形工具】调整“树叶”的位置、大小、倾斜和旋转，使“树叶”产生下落位移。右击第1帧，在弹出的快捷菜单中选择【创建传统补间】命令。,工作情境一 制作“树叶飘落”动画,（8）同步骤（7），分别在【图层2】的第50帧、第100帧和第120帧处按快捷键插入关键帧，并调整每个关键帧中图形的位置、大小、倾斜、旋转，使树叶形成Z字形下落轨迹。 （9）新建【图层3】、【图层4】、【图层5】、【图层6】、【图层7】和【图层8】，同步骤（3）（8）分别制作多片“树叶”下落的动画。为使动画效果符合自然规律，各图层的关键帧位置应有所
6、不同，如图13-25所示。,工作情境一 制作“树叶飘落”动画,图13-25 时间轴中帧的分布,（10）按键预览动画，或者按 组合键测试动画。,工作情境一 制作“树叶飘落”动画,图13-25 时间轴中帧的分布,（10）按键预览动画，或者按 组合键测试动画。,工作情境二 制作“跳动的篮球”动画,一、工作情境描述及效果 工作情境描述 通过制作“跳动的篮球”动画，让用户进一步熟悉时间轴动画的制作方法与技巧，在播放过程中可以看到一只篮球在地面上弹动的动画效果。在本案例中涉及时间轴中关键帧的设置。具体分析如表13-2所示。,工作情境二 制作“跳动的篮球”动画,表13-2 “跳动的篮球”动画工作任务分析表,
7、工作情境二 制作“跳动的篮球”动画,工作情境效果 “跳动的篮球”动画的最终效果如图13-26所示。,图13-26 “跳动的篮球”动画的最终效果,工作情境二 制作“跳动的篮球”动画,二、工作情境详解 （1）新建一个Flash动画文档，并命名为“跳动的篮球”，设置舞台的背景颜色为淡黄色。在工作区右上角的下拉列表中选择【显示全部】选项。 （2）选择【插入】【新建元件】命令，新建一个图形元件，并命名为“篮球”。 （3）按键的同时在舞台上绘制一个圆，设置笔触颜色为无，填充颜色为#FF9900。为篮球画上线条，设置线条笔触应略粗一些比较美观，如图13-27所示。 （4）返回场景，将“篮球”元件由库中拖曳到
8、舞台上方，使用【任意变形工具】将“篮球”实例的中心点调整到实例下方并与下方相切，如图13-28所示。,工作情境二 制作“跳动的篮球”动画,（5）在【图层1】的第25帧处按快捷键插入关键帧，将“篮球”移动到舞台下方适当位置。在第26帧处按快捷键插入关键帧，使用【任意变形工具】将“篮球”调扁一些，如图13-29所示。在时间轴的第25帧处右击，在弹出的快捷菜单中选择【复制帧】命令，然后右击第27帧，在弹出的快捷菜单中选择【粘贴帧】命令。,工作情境二 制作“跳动的篮球”动画,图13-27 “篮球”元件 图13-28 调整“篮球”的中心点 图13-29 “篮球”调扁的效果,工作情境二 制作“跳动的篮球”
9、动画,（6）在第 45 帧处按快捷键插入关键帧，按键的同时将“篮球”拖曳到舞台上方（注意，“篮球”高度一定要比第1帧的略低）。分别右击第1帧和第27帧，在弹出的快捷菜单中选择【创建传统补间】命令。为了创造出符合物理原理（即“篮球”下落时越来越快，“篮球”弹起时越来越慢）的运动效果，选择第1帧，在【属性】面板中将【补间】区域中的【缓动】设置为“-100输入”。利用同样方法将第27帧的【缓动】设置为“100输出”。,工作情境二 制作“跳动的篮球”动画,（7）同步骤（5）（6）延时间轴继续添加关键帧，但要注意“篮球”的落下与弹起的运动周期越来越短，如图13-30所示。,图13-30“跳动的篮球”时间
10、轴,（8）为制作完整运动效果，在所有关键帧的末尾应适当延长20帧左右的普通帧。 （9）按键预览动画，或者按组合键测试动画。,工作情境三 制作“幻影小蜻蜓”动画,一、工作情境描述及效果 工作情境描述 通过制作“幻影小蜻蜓”动画，用户可以熟悉时间轴动画的制作方法与技巧，在播放过程中可以看到一只小蜻蜓在河塘中飞过，同时在它身后有很多幻影的动画效果。 在本情境中分别涉及图层、元件、透明度的调整和时间轴动画。具体分析如表13-3所示。,工作情境三 制作“幻影小蜻蜓”动画,表13-3 “幻影小蜻蜓”动画工作任务分析表,工作情境三 制作“幻影小蜻蜓”动画,工作情境效果 “幻影小蜻蜓”动画的最终效果如图13-
11、31所示。,图13-31 “幻影小蜻蜓”动画最终效果,工作情境三 制作“幻影小蜻蜓”动画,二、工作情境详解 （1）新建一个Flash动画文档，并将其命名为“幻影小蜻蜓”，在工作区右上角的下拉列表中选择【显示全部】选项。 （2）选择【文件】【导入】【导入到舞台】命令，导入图像素材“寂静的河塘.jpg”到舞台上，作为【图层1】背景图形。单击工具栏中的【对齐】按钮，在打开的【对齐】面板中单击【相对于舞台】按钮、【匹配宽度】按钮、【匹配高度】按钮、【水平中齐】按钮和【垂直中齐】按钮。在【图层1】的第100帧处按快捷键将静态图像延续到第100帧。,工作情境三 制作“幻影小蜻蜓”动画,（3）选择【插入】【
12、新建元件】命令，新建一个图形元件，将其命名为“身体”，并绘制蜻蜓的身体。再创建一个图形元件，将其命名为“翅膀”，并绘制蜻蜓的翅膀。 （4）再创建一个影片剪辑元件，将其命名为“小蜻蜓”，将“身体”元件与“翅膀”元件分别拖曳到“小蜻蜓”元件的图层1和图层2中，制作翅膀扇动的动画效果。单击【新建图层】按钮新建【图层3】，制作蜻蜓的另一对翅膀的扇动动画。,工作情境三 制作“幻影小蜻蜓”动画,（5）返回场景，单击【新建图层】按钮新建【图层2】，将影片剪辑元件“小蜻蜓”拖曳到【图层2】中，并调整其位置、大小和角度。右击【图层2】的第1帧，在弹出的快捷菜单中选择【创建补间动画】命令。在第18帧、第32帧、第
13、49帧、第63帧、第71帧和第80帧分别调整“小蜻蜓”实例的位置、大小和飞行角度，使动画更流畅美观。,工作情境三 制作“幻影小蜻蜓”动画,（6）单击【时间轴】面板左下角的【新建图层】按钮，新建【图层3】、【图层4】、【图层5】和【图层6】。选中【图层2】的所有帧，在帧显示区中右击，在弹出的快捷菜单中选择【复制帧】命令。分别选中【图层3】、【图层4】、【图层5】和【图层6】，并在其帧显示区中右击，在弹出的快捷菜单中选择【粘贴帧】命令。这样就将【图层2】中已经完成的动画复制到其他图层了。,工作情境三 制作“幻影小蜻蜓”动画,（7）单击【图层3】的第1帧，然后选中实例，在【属性】面板的【色彩效果】区
14、域中单击【样式】右侧的下三角按钮，在弹出的下拉列表中选择【Alpha】选项，并将其值设置为80%。以此类推，将【图层4】、【图层5】和【图层6】中实例的【Alpha】选项分别设置为60%、40%和20%。 （8）分别选中【图层3】、【图层4】、【图层5】、【图层6】，并将其图层中所有帧依次向右拖曳至相差2帧，如图13-32所示。,工作情境三 制作“幻影小蜻蜓”动画,图13-32 “幻影小蜻蜓”时间轴,（9）右击所有图层的第100帧，在弹出的快捷菜单中选择【插入帧】命令，这样可以使动画的末尾帧平齐。 （10）按键预览动画，按组合键测试动画。,模 块 小 结,在Flash CS4中，时间轴动画的原理与时间轴控制的技巧的掌握，直接决定了是否能制作出美丽的动画效果。本模块对Flash动画制作的原理进行了细致的阐述，对时间轴的控制进行了深入的介绍。希望通过本模块的学习，用户能灵活地将所学知识应用到解决实际问题当中去，这样才能更扎实地掌握时间轴的相关知识。,模 块 训 练,1为了解Flash动画的制作原理，请将许多静止的画面按照一定的时间顺序进行播放，看画面会不会动起来。 2试用影片剪辑元件结合时间轴动画技巧来制作行走的小绵羊的运动动画。 要求： 绘制绵羊、背景、小山、小树和小草等图画，绵羊形象自拟。 绵羊的4条腿要一步一步往前走。 3制作水波荡漾的动画效果。,
