网页设计与制作 教学课件 作者 于筱荔 第18章 时间轴.pptVIP

18.2.2 通过拖动路径创建时间轴 方法步骤如下： （1）将网页上要创建动画的层移至动画开始时的位置， 并选定该层。 （2）选择【修改】|【时间轴】|【录制层路径】菜单命令，或是单击“时间轴”面板中右上角的按钮，或是右击层边框，从弹出的快捷菜单中选择【记录路径】命令。 （3）在页面上拖动层以创建一条路径。 （4）当到达动画的结束位置时释放鼠标， Dreamweaver会自动在时间轴中添加一个动画条，而且带有一定数目的关键帧，如图所示。 18.2.3 创建多条时间轴 1.添加一条新的时间轴 选择【修改】|【时间轴】|【添加时间轴】菜单命令。 右击“时间轴”面板，从弹出的快捷菜单中选择【添加时间轴】命令。 单击“时间轴”面板中右上角的按钮，从菜单中选择【添加时间轴】命令。 以上方法都可在“时间轴”面板中新建一条时间轴。 2.删除一条时间轴 首先在“时间轴”面板中从时间轴下拉菜单中选中一条时间轴，如图所示，然后执行如下操作之一： 选择【修改】|【时间轴】|【移除时间轴】菜单命令。 右击时间轴面板，从弹出的快捷菜单中选择【移除时间轴】命令。 单击“时间轴”面板中右上 角的按钮，从菜单中选择 【移除时间轴】命令。 9.将动画顺序应用于不同的对象 （1）在“时间轴”面板中，选择动画序列然后将其复制。 （2）单击“时间轴”面板的任一帧，粘贴该动画序列。 （3）在已经粘贴好的动画序列上右击，然后选择快捷菜单中的“更改对象”命令。 （4）在弹出的对话框中， 选择“要动态化的对象”下 拉菜单中的另一对象，然后单击“确定”按钮，如图所示。 18.5 本章小结 本章详细的介绍了Dreamweaver一个独特的功能——时间轴。学完本章，首先应该知道什么是时间轴面板，掌握创建时间轴动画、通过拖动路径创建时间轴、修改时间轴、使用多条时间轴和控制时间轴的行为等有关时间轴的操作，对时间轴的应用有一个全面的了解，并且能够利用时间轴做出生动的动画，而不需再借助别的动画制作软件。 * 第18章 时间轴 第18章 时间轴 时间轴是最激动人心的特性。利用时间轴，用户可以构建丰富多彩的层动画或动态网页，实现极具魅力的网页效果。时间轴通过在不同的时间改变层的位置、大小、可见性和叠放顺序等来创建动画。 18.1 “时间轴”面板 18.2 创建时间轴动画 18.3 编辑和修改时间轴 18.4 用时间轴生成动画的技巧 18.5 本章小结 18.1 “时间轴”面板 1.时间轴 时间轴是以帧的概念对时间进行划分。关键帧是动画效果中的标志点，在关键帧上才能编辑对象的状态。关键帧之间的帧属于过渡过程，是不可编辑的。只要确定了关键帧上网页对象的状态，Dreamweaver会自动计算过渡过程中网页对象的状态，从而实现动态效果。 说明：只有4.0以上版本的浏览器才支持时间轴的层功能。在编辑包含时间轴的HTML的文件时，不要移动、重命名或删除与时间轴相关的任何内容。 2.“时间轴”面板 选择【窗口】|【时间轴】菜单命令，打开“时间轴”面板，如图所示： 18.1 “时间轴”面板 18.2.1 通过添加对象创建时间轴 方法步骤如下： （1）将网页上要创建动画的层移至动画开始时的位置。 （2）打开“时间轴”面板。并选定要创建为动画的层。 （3）选择【修改】|【时间轴】|【增加对象到时间轴】菜单命令，或在层的边框上右击，在弹出的快捷菜单中选择【添加到时间轴】命令，或直接把选中的层拖入时间轴面板中。一个动画条将显示在时间轴的第一个通道中。动画条里显示了层的名字，如图所示。 18.2 创建时间轴动画 18.2 创建时间轴动画 （4）单击动画条的最后一帧关键帧，把图层拖到动画的结束位置，如图所示。 （5）单击并按住“时间轴”面板中的“播放”按钮，即可看到所操作的层沿设置的路线移动。 （6）如果需要动画自动播放，则可选中“时间轴”面板中的自动播放复选框。 （7）如果需要动画持续播放，则可选中“时间轴”面板中的循环复选框。 （8）如果希望层按曲线移动，可以在动画条中的非关键帧处单击鼠标右键，从快捷菜单中选择“增加关键帧” 命令，然后在新增的关键帧处将层拖动到希望的位置即可。 18.2 创建时间轴动画 18.2 创建时间轴动画 （5）在“时间轴”面板中，选中“自动播放”和“循环”复选框；然后保存文件并预览动画效果。 18.2 创建时间轴动画 18.2 创建时间轴动画 18.2 创建时间轴动画 1.延长动画的播放时间 向右拖动结束帧标记。所有关键帧的位置都会相应向右移动，以保持它们的相对位置不变。如果要防止其他关键帧的移动，在拖动结束帧标记的同时按住