第5章 时间轴及行为.ppt

第5章 时间轴和行为 5.1 【案例15】“显示器展示”网页 5.1.1 学习目标 “显示器展示”网页的显示效果如图5-1-1所示。利用时间轴功能，可以在网页中插入一个动画，增加网页的动态效果。 它通过在不同的时间改变层的位置、大小、可见性和叠放顺序等来创建动画。时间轴的层功能只在IE 4.0及更高版本的浏览器中有效。 5.1.2 操作过程 5.1.3 相关知识 1．“时间轴”面板 单击“窗口”→“时间轴”菜单命令，或按Alt+F9键，即可弹出“时间轴”面板，如图5-1-3所示。该面板中的各个工具及各项目的作用如下。 （1）“时间轴”面板的工具栏 ?“时间轴”下拉列表框：其内列出了当前页面内所有时间轴动画的名字，选中其中一个选项后，相应的动画就会在“时间轴”面板中显示出来。 ?“归位”按钮 ：将动画图像移到起始位置，同时回放头也移动到该位置处。 ?“回放”按钮 ：单击它，可以使动画回退一个帧。单击按住该按钮不放，可以向相反方向播放动画。 “当前帧号码”（也是回放头当前位置）文本框：用来输入和显示“回放头”所处的时间轴位置号，即当前帧号码。 “播放”按钮 ：单击它，可使动画前进一个帧。按住该按钮不放，可以向正常方向播放动画。 “速率”文本框：用来输入每秒钟播放的帧数。 ?“自动播放”复选框：选中它后，则在网上下载动画后会自动播放。不选中它时，需要在使用行为事件时才可以播放。 ?“循环”复选框：选中它后，则循环播放动画，否则只播放一次动画。 （2）通道 行为通道：其左边标有字母“B”。可以在该通道的特定帧使用行为事件。 行为帧：加入了行为事件的帧，它在“行为通道”内。 时间标尺：给出了与时间对应的帧数码。 回放头：播放动画时，它在时间标尺上移动，好像放像机的磁头一样。用鼠标拖曳它在时间标尺上移动，当它移到某一时间单位处时，相应的动画画面会出现在网页窗口内。 动画条：表示一个动画所占的帧数，上面标有该动画所在层的名字。它的起始处和终止处各有一个小圆，表示首帧和终止帧。如果设置了关键帧，则关键帧也会有一个小圆。 动画通道：它由许多图层组成，表示可以在一个页面内加入多个时间轴动画，但最多只可以加32个。它的左边标有图层的编号，图层编号大的动画在图层编号小的动画之上。 2．时间轴的相关操作 （1）动画的更名 可以直接在“时间轴”面板的列表框内更改动画的名字。 单击时间轴菜单中的“重命名时间轴”菜单命令，弹出“重命名时间轴”对话框，如图5-1-4所示。在该对话框内的“时间轴名称”文本框内输入新的名字，再单击“确定”按钮即可。 （2）动画的删除 删除动画条：选中要删除的动画条，再单击“编辑”→“剪切”菜单命令。 删除动画的移动路径：选中要删除的动画条，再按Delete按键。 删除所有动画条：单击时间轴菜单中的“删除时间轴”菜单命令。 （3）动画的复制 单击选中要复制的动画条。再单击时间轴菜单中的“复制”菜单命令。 调整回放头的位置。再单击时间轴菜单中的“粘贴”菜单命令，即可在选中的动画条的右边复制一个动画条。而且可以复制到其他页面的“时间轴”面板中。 （4）动画的移动 单击选中要移动的动画条。再单击时间轴菜单中的“剪切”菜单命令。 调整回放头的位置，再单击时间轴菜单中的“粘贴”菜单命令，即可将动画条移到回放头所处的位置处。利用此方法，还可以移动到其他页面的“时间轴”面板中。 可以用鼠标拖曳一个动画条在整个动画通道内移动。按住Shift键，单击要移动的动画条，可以选中多个动画条，鼠标拖曳一个动画条即可同时移动多个动画条。 5.2 【案例16】为“Word操作演示”网页增加控制按钮 5.2.1 学习目标 为“Word操作演示”网页增加控制按钮后，该网页的显示效果如图5-2-1所示。在该网页的底部，添加了3个控制按钮，单击其中的任意一个按钮，即可实现网页中控制Flash动画的开始、停止及重新播放。 行为是动作（Actions）和事件（Events）的组合。动作就是计算机系统做的一个动作，例如，弹出一个提示框、执行一段程序或一个函数、播放声音或影片、启动或停止“时间轴”面板中的动画等。 动作通常是由预先编写好的JavaScript程序脚本实现的，Dreamweaver 8自带了一些动作的JavaScript程序脚本，可供用户直接调用。用户也可以自己用JavaScript语言编写JavaScript程序脚本，创建新的行为。 事件是指引发动作产生的事情，例如，鼠标移到某对象上、鼠标单击某对象、“时间轴”面板中的回放头播放到某一帧等。要创建一个行为，就是要指定一个动作，