网页投计与制作教程 第18章时间轴 FIREWO FLASHP
第18章 时间轴
网页设计与制作教程 第18章时间轴 本章目录 时间轴是最激 动人心的特性。利 冬18.1“时间轴”面板 用时间轴，用户可 以构建丰富多彩的 冬18.2创建时间轴动画 层动画或动态网页 18.3编辑和修改时间轴 实现极具魅力的网 页效果。时间轴通 ?18.4用时间轴生成动画的技巧 过在不同的时间改 18.5本章小结 变层的位置、大小 可见性和叠放顺序 等来创建动画。 慨要说明
第18章 时间轴 时间轴是最激 动人心的特性。利 用时间轴，用户可 以构建丰富多彩的 层动画或动态网页， 实现极具魅力的网 页效果。时间轴通 过在不同的时间改 变层的位置、大小、 可见性和叠放顺序 等来创建动画。 ❖18.1 “时间轴”面板 ❖18.2 创建时间轴动画 ❖18.3 编辑和修改时间轴 ❖18.4 用时间轴生成动画的技巧 ❖18.5 本章小结
网页设计与制作教程 18.1时间轴”面板 1.时间轴 时间轴是以帧的概念对时间进行划分。关键帧是动 画效果中的标志点，在关键帧上才能编辑对象的状态。 关键帧之间的帧属于过渡过程，是不可编辑的。只要确 定了关键帧上网页对象的状态，Dreamweaver会自动计 算过渡过程中网页对象的状态，从而实现动态效果。 说明：只有4.0以上版本的浏览器才支持时间轴的层功能。 在编辑包含时间轴的HTML的文件时，不要移动、重命 名或删除与时间轴相关的任何内容
18.1 “时间轴”面板 1.时间轴 时间轴是以帧的概念对时间进行划分。关键帧是动 画效果中的标志点，在关键帧上才能编辑对象的状态。 关键帧之间的帧属于过渡过程，是不可编辑的。只要确 定了关键帧上网页对象的状态，Dreamweaver会自动计 算过渡过程中网页对象的状态，从而实现动态效果。 说明：只有4.0以上版本的浏览器才支持时间轴的层功能。 在编辑包含时间轴的HTML的文件时，不要移动、重命 名或删除与时间轴相关的任何内容
内页设计与制作敦程 18.1时间轴”面板 2.“时间轴”面板 选择【窗口】|【时间轴】菜单命令，打开“时间轴” 面板，如图所示： 后退 自动播放复选框 每秒帧数 循环复选框 下装框 时间独 Timelinel 自动播放循环 动画条 关 当前帧指示线
2.“时间轴”面板 选择【窗口】|【时间轴】菜单命令，打开“时间轴” 面板，如图所示： 18.1 “时间轴”面板
网页设计与制作教程 18.2创建时间轴动画 18.2.1通过添加对象创建时间轴 方法步骤如下： (1)将网页上要创建动画的层移至动画开始时的位置。 (2)打开“时间轴”面板。并选定要创建为动画的层。 (3)选择【修改】」【时间轴】」【增加对象到时间轴】 菜单命令，或在层的边框上右击，在弹出的快捷菜单 中选择【添加到时间轴】命令，或直接把选中的层拖 入时间轴面板中。一个动画条将显示在时间轴的第一 个通道中。动画条里显示了层的名字，如图所示
18.2.1 通过添加对象创建时间轴 方法步骤如下： （1）将网页上要创建动画的层移至动画开始时的位置。 （2）打开“时间轴”面板。并选定要创建为动画的层。 （3）选择【修改】|【时间轴】|【增加对象到时间轴】 菜单命令，或在层的边框上右击，在弹出的快捷菜单 中选择【添加到时间轴】命令，或直接把选中的层拖 入时间轴面板中。一个动画条将显示在时间轴的第一 个通道中。动画条里显示了层的名字，如图所示。 18.2 创建时间轴动画
网页设计与制作教程 18.2创建时间轴动画 (4)单击动画条的最后一帧关键帧，把图层拖到动画 的结束位置，如图所示
18.2 创建时间轴动画 （4）单击动画条的最后一帧关键帧，把图层拖到动画 的结束位置，如图所示
内页设计与制作敦程 18.2创建时间轴动画 (5)单击并按住“时间轴”面板中的“播放”按钮，即 可看到所操作的层沿设置的路线移动。 (6)如果需要动画自动播放，则可选中“时间轴”面板 中的自动播放复选框。 (7)如果需要动画持续播放，则可选中“时间轴”面板 中的循环复选框。 (8)如果希望层按曲线移动，可以在动画条中的非关键 帧处单击鼠标右键，从快捷菜单中选择“增加关键帧” 命令，然后在新增的关键帧处将层拖动到希望的位置即 可
（5）单击并按住“时间轴”面板中的“播放”按钮，即 可看到所操作的层沿设置的路线移动。 （6）如果需要动画自动播放，则可选中“时间轴”面板 中的自动播放复选框。 （7）如果需要动画持续播放，则可选中“时间轴”面板 中的循环复选框。 （8）如果希望层按曲线移动，可以在动画条中的非关键 帧处单击鼠标右键，从快捷菜单中选择“增加关键帧” 命令，然后在新增的关键帧处将层拖动到希望的位置即 可。 18.2 创建时间轴动画
网页设计与制作教程 18.2创建时间轴动画 18.2.2通过拖动路径创建时间轴 方法步骤如下： (1)将网页上要创建动画的层移至动画开始时的位置， 并选定该层。 (2)选择【修改】」【时间轴】|【录制层路径】菜单命 令，或是单击“时间轴”面板中右上角的按钮，或是右 击层边框，从弹出的快捷菜单中选择【记录路径】命令 (3)在页面上拖动层以创建一条路径
18.2.2 通过拖动路径创建时间轴 方法步骤如下： （1）将网页上要创建动画的层移至动画开始时的位置， 并选定该层。 （2）选择【修改】|【时间轴】|【录制层路径】菜单命 令，或是单击“时间轴”面板中右上角的按钮，或是右 击层边框，从弹出的快捷菜单中选择【记录路径】命令 。 （3）在页面上拖动层以创建一条路径。 18.2 创建时间轴动画
网页设计与制作教程 18.2创建时间轴动画 (4)当到达动画的结束位置时释放鼠标， Dreamweaver会自动在时间轴中添加一个动画条， 而且带有一定数目的关键帧，如图所示。 1++40+ps15 (5)在“时间轴”面板中，选中“自动播放”和 “循环”复选框；然后保存文件并预览动画效果
（4）当到达动画的结束位置时释放鼠标， Dreamweaver会自动在时间轴中添加一个动画条， 而且带有一定数目的关键帧，如图所示。 （5）在“时间轴”面板中，选中“自动播放”和 “循环”复选框；然后保存文件并预览动画效果。 18.2 创建时间轴动画
网页设计与制作敦程 18.2创建时间轴动画 18.2.3创建多条时间轴 1.添加一条新的时间轴 冬选择【修改】」【时间轴】|【添加时间轴】菜单命令。 冬右击“时间轴”面板，从弹出的快捷菜单中选择【添 加时间轴】命令。 单击“时间轴”面板中右上角的按钮，从菜单中选择 【添加时间轴】命令。 以上方法都可在“时间轴”面板中新建一条时间 轴
18.2.3 创建多条时间轴 1.添加一条新的时间轴 ❖ 选择【修改】|【时间轴】|【添加时间轴】菜单命令。 ❖右击“时间轴”面板，从弹出的快捷菜单中选择【添 加时间轴】命令。 ❖单击“时间轴”面板中右上角的按钮，从菜单中选择 【添加时间轴】命令。 以上方法都可在“时间轴”面板中新建一条时间 轴。 18.2 创建时间轴动画