网页设计与制作实用教程 教学课件 作者 马绍惠 第8章 时间轴.pptVIP

第8章 时间轴 学习要求 本章重点 了解Dreamweaver 8时间轴面板使用的方法 掌握使用时间轴创建动画的方法 通过“行为”面板控制层和时间轴来创建复杂的动画 主要内容 时间轴与时间轴面板 时间轴与动画 时间轴应用实例 8.1时间轴与时间轴面板 “时间轴”面板用于控制层和图像的属性在一段时间内的变化，通过控制层的大小、位置、可视性、叠放次序等属性在时间轴上随时间的变化，可以创建丰富的动画效果。单击“窗口”→“时间轴”菜单命令，打开的“时间轴”面板如图8-1所示。“时间轴”面板中各项的含义如下。 8.1时间轴与时间轴面板 ⑴“时间轴”列表框 被选定的时间轴上的动画将在“时间轴”面板中显示。 ⑵“归位”按钮 单击此按钮可将动画图像及播放头移动至动画的第一帧处。 ⑶“回放”按钮 单击该按钮，动画将向左（向后）移动一帧。 ⑷“播放”按钮 单击此按钮，可使动画向前移动一帧。“回放”按钮右边的文本框中显示了“播放”头当前所在的帧的位置。 ⑸“帧频”文本框 用于设置每秒种播放的帧数。 8.1时间轴与时间轴面板 ⑹“自动播放”复选框 选择此项，将动画从网上下载后会自动播放，不选择该项，则动画的播放需要由行为事件来控制。 ⑺“循环”复选框 选择该项，动画会循环播放，否则只播放一次。 ⑻“通道” “通道”包括“行为通道”和“动画通道”。在“行为通道”中可以为指定的帧设置行为。“动画通道”由多个图层组成，表示可在一个页面内添加的时间轴动画数，最多可以添加32个。在动画通道的左侧有图层的编号，编号大的图层在编号小的图层之上。 8.2时间轴与动画 8.2时间轴与动画 8.2时间轴与动画 8.2时间轴与动画 沿曲线运动的动画 1）单击动画条上要加入关键帧的位置，播放头也会自动移到此位置处。如将上一节中直线运动动画的尾帧移至第30 帧处，并将播放头移至第15帧处。 2）单击“修改”→“时间轴”→“增加关键帧”菜单命令，增加一个关键帧。 3）单击选中新建的关键帧，在文档中用鼠标拖拽层至新的位置，此时该动画层的移动路径为如图8-5所示的曲线。 4）保存页面，按“F12”键浏览网页，即可看到动画沿曲线运动的效果。 8.2时间轴与动画 录制层路径动画 1）在文档中创建一个层，并向层中插入一副图像。 2）单击选中该层并利用以下三种方法之一调用“录制层路径”命令。单击“修改”→“时间轴”→“录制层路径”菜单命令；或者单击“时间轴”面板右上角的小黑三角按钮，在弹出的菜单中单击“录制层路径”的命令；也可以在动画通道中单击鼠标右键，在调出的快捷菜单中单击“录制层路径”命令。 3）在文档中用鼠标拖动层，随着鼠标的拖拽会产生一条曲线如图8-6所示。松开鼠标左键复杂的动画路径就生成了，此时“时间轴”面板以上会自动生成动画条如图8-7所示。由图可以看出，在动画条中产生了许多的关键帧，这些关键帧产生在用鼠标进行拖拽时的转折点处，转折点越多自动产生的关键帧也就越多。 4）保存页面，按“F12”键浏览网页，即可看到动画的运动效果。 8.2时间轴与动画 8.2时间轴与动画 动画的删除复制和移动 1．动画的删除 动画的删除可以通过删除动画条的方式来实现，具体的操作方法为单击选中要删除的动画条，再单击鼠标右键，在弹出的快捷菜单中单击“删除”命令。 2.动画的复制 单击选中要复制的动画条，再单击鼠标右键，在弹出的快捷菜单中单击“复制”命令。调整播放头到目标位置，再单击鼠标右键，在弹出的快捷菜单中单击“粘贴”命令就可以将动画条粘贴到目标位置。 复制到粘贴板中的动画也可以粘贴到不同的时间轴上，甚至不同页面的“时间轴”面板中。 8.2时间轴与动画 3.动画的移动 单击选中要移动的动画条，再单击鼠标右键，在弹出的快捷菜单中单击“剪切”命令，再调整播放头的位置至目标处，单击鼠标右键，在弹出的快捷菜单中单击“粘贴”命令，就可以将动画条移动至目标位置。 8.3时间轴应用实例 时间轴动画的播放可由行为来控制，将行为添加到按钮中可以实现动画播放的实时控制。本实例使用了停止和开始两个按钮来控制捕鸟这个动画。 该动画创建的具体操作步骤如下： ⑴ 插入背景图像 单击“文件”→“新建”菜单命令，创建一个新的Dreamweaver文档。单击“修改”→“页面属性”菜单命令，在弹出的“页面属性”对话框中设置页面的背景图像如图8-8所示。 ⑵ 插入层 单击“插入”→“布局对象”