第8章AP元素11.24.docVIP

8.3 制作AP元素动画 在网页中很多漂亮的动画是可以通过更改AP元素和图像在一段时间内的属性直接创建的。 8.3.1.认识“时间轴”面板 动画的实现原理就是将画面连起来播放，产生运动的错觉。对于要在页面加载后执行的其他操作，时间轴非常有用。 下面我们来认识一下Dreamweaver时间轴。 1.“时间轴”面板 选择【窗口】|【时间轴】命令即可打开“时间轴”面板。如图8-31所示。 图8-31“时间轴”面板 （1）“时间轴”弹出式菜单：指定当前在【时间轴】面板中显示文档的哪些时间轴。 （2）播放栏：播放栏所处的位置就是动画当前所在时间轴的帧。 （3）动画条：显示每个对象的动画的持续时间。一个行可以包含表示不同对象的多个条。不同的条无法控制同一帧中的同一对象。 （4）关键帧: 是动画条中已经为对象指定属性(如位置)的帧。Dreamweaver会计算关键帧之间帧的中间值。小圆标记表示关键帧。 （5）帧编号：指示帧的序号。【后退】和【播放】按钮之间的数字8是当前帧编号。可以通过设置帧的总数和每秒帧数来控制动画的持续时间。每秒15帧这一默认设置是比较适当的平均速率，可用于在通常的Windows和Macintosh系统上运行的大多数浏览器。 （6）“行为”通道：是应该在时间轴中特定帧处执行的行为的通道。 （7）“动画”通道：显示用于制作AP元素和图像动画的条。 （8）：前进按钮将播放栏移至时间轴中的第一帧。 （9）：后退按钮将播放栏向左移动一帧。单击【后退】按钮并按住鼠标可向后播放时间轴。 （10）：播放按钮将播放栏向右移动一帧。单击【播放】按钮并按住鼠标可向前播放时间轴。 （11）自动播放：勾选自动播放选项可以使时间轴在浏览器中加载时自动开始播放。“自动播放”将一个行为附加到页的body标签，它在页加载时执行“播放时间轴”操作。 （12）循环：勾选循环选项可以使时间轴于当前页在浏览器中打开时无限地循环。“循环”在动画的最后一帧之后将“转到时间轴帧”行为插入到“行为”通道中。在“行为”通道中双击该行为的标记可编辑此行为的参数并更改循环的次数。 8.3.2　创建时间轴动画 由于时间轴只能移动层，因此如果要移动图像或文本，则要创建一个层，然后在该层中插入图像、文本或其它类型的内容。要创建时间轴动画： 在中插入GIF动画，如图所示。 图在中插入GIF动画添加层或选择要将做好的层添加到时间轴面板中。在时间轴中就可以看到一条从第1帧到第15帧的动画栏了。在选中1，将最后一帧拖长至30帧，在第15帧的位置点鼠标右键插入关键帧。插入关键帧选中第15帧，然后分别在显示区选中层，使鼠标变成，将拖向右上角，然后选中最后一帧，将拖回起点位置，如图所示。 图设置运动路径如果希望有更复杂的动画路径，可多定义一些关键帧及在画面中的位置，按住播放按钮不放即可预览网页中的动画。 图8-36面板中的“自动播放” 信息提示框 图8-37面板中的“循环” 信息提示框 制作完成，现在我们可以保存网页并按F12测试效果。 行为通道 动画通道 时间轴弹出式菜单 关键帧 播放条