《Dreamweaver应用与网页设计案例教程 普通高等教育十一五 国家级规划教材 教学课件 PPT 作者 杨长安 沈大林 孟昭勇 第6章时间轴和行为》由会员分享，可在线阅读，更多相关《Dreamweaver应用与网页设计案例教程 普通高等教育十一五 国家级规划教材 教学课件 PPT 作者 杨长安 沈大林 孟昭勇 第6章时间轴和行为（65页珍藏版）》请在金锄头文库上搜索。
1、 163 第 第 6 6 章 章 时间轴和行为时间轴和行为 6.1 “时间轴”面板和动画制作 【相关知识】 “时间轴”面板和直线移动动画的制作 “时间轴”面板是一种用来控制网页中层的属性随时间变化而改变的工具，利用它可以产生动画效 果。 注意， Dreamweaver MX 2004 的最初版本将原来 Dreamweaver MX 的时间轴功能取消了， 而 Dreamweaver 8 版本又将时间轴功能恢复了。 1 “时间轴”面板 单击“窗口”“时间轴”菜单命令或按 Alt+F9 组合键，即可调出“时间轴”面板，如图 6-1-1 所 示。该面板中的各个工具及其他选项的作用如下。 164 图 6
2、-1-1 “时间轴”面板 （1） “时间轴”下拉列表框：其内列出了当前页面内所有时间轴动画的名称，选中其中一个选项后， 165 相应的动画就会在“时间轴”面板中显示出来。鼠标右键点击“时间轴”面板内部，调出“时间轴”快 捷菜单，单击该菜单中的“添加时间轴”菜单命令，即可在“时间轴”下拉列表框内添加一个新的时间 轴动画（默认名称为“Timeline”+序号） 。 （2）回放头：播放动画时，它在时间标尺上移动，好像放映机的磁头一样。用鼠标拖曳它在时间标 尺上移动，当它移到某一时间单位处时，相应的动画画面就会出现在网页窗口内。 （3） “播放”按钮 ：单击它，可以使动画前进一帧。按住该按钮不放，可以
3、向正常方向播放动画。 （4） “回放”按钮 ：单击它，可以使动画回退一帧。按住该按钮不放，可以向相反方向播放动画。 （5） “归位”按钮 ：将动画图像移到起始位置，同时回放头也移动到该位置处。 （6） “当前帧号码” （也是回放头当前位置）文本框：用来显示和设置“回放头”所处的时间轴位置 号，即当前帧号码。 166 （7） “速率”文本框：用来输入每秒钟播放的帧数。 （8） “自动播放”复选框：选中它后，从网上下载后会自动播放。不选中它时，需要在使用行为事 件时才可以播放。 （9） “循环”复选框：选中它后，则循环播放动画，否则只播放一次动画。 （10）动画通道：它由许多图层组成，表示可以在一
4、个页面内加入多个时间轴动画，但最多可以加 32 个。它的左边标有图层的编号，图层编号大的动画在图层编号小的动画之上。 （11）动画条：表示一个动画所占的帧数，上面标有该动画所在层的名称。它的起始处和终止处各 有一个小圆，表示首帧和终止帧。如果设置了关键帧，则关键帧也会有一个小圆。 （12）行为通道左边标有字母“B” ，可以在该通道的特定帧使用行为。 （13）行为帧：加入了行为的帧，它在“行为通道”内。 167 （14）时间标尺：给出了与时间对应的帧数码。 2直线移动动画的制作 下面使用“时间轴”面板制作一个简单的、沿直线移动的动画。该动画的制作方法如下。 （1）在页面内插入一个层，给该层起一个
5、名字，例如“Layer1” ，然后在层内插入一个图像、动画 或输入一些文字等。此处层中插入的是 GIF 动画，如图 6-1-2 所示。 （2）将插有图像或文字的层移到动画的起始位置。 （3）单击“窗口”“时间轴”菜单命令，调出“时间轴”面板。 （4）用鼠标将层拖曳到“时间轴”面板的动画通道内，或单击“修改”“时间轴”“增加对象 到时间轴”菜单命令。这时， “时间轴”面板的动画通道内会出现一个动画条。如果选中了“循环”复 选框，则在动画通道中会同时出现一个动作帧 。 168 （5）默认的动画帧数是 15 帧，如果要调整动画的帧数，可用鼠标拖曳动画条终止帧的小圆。在改 变了终止帧的位置之后，如果此
6、时选中了“循环”复选框，还应用鼠标拖曳行为通道的行为帧到终止帧 的下一个位置处。选中动画条的终止帧，用鼠标向右拖曳第 15 帧小圆到第 30 帧处，如图 6-1-3 所示。 图 6-1-2 层中插入的 GIF 动画 图 6-1-3 动画通道内出现一个动画条 （6）用鼠标拖曳动画层到目标处，当松开鼠标左键时，会看到一条直线，表示图像移动的路径，如 图 6-1-4 所示。 在选中“循环”复选框的情况下，如果先用鼠标拖曳动画层到目标处，再调整“时间轴”面板中终 169 止帧的位置，则还需要用鼠标拖曳调整动作帧 到终止帧的下一帧位置处。 图 614 表示图像移动路径的一条直线 （7）按住“播放”按钮
7、不放，即可在网页设计窗口内看到动画。 【相关知识】制作沿曲线路径移动的动画 1添加关键帧 “时间轴”面板可以在用户给出起始帧和终止帧后自动产生中间过程的各帧。如果动画的移动路径 不是直线的，中间有转折点，则转折点处的画面就是关键帧。加入关键帧，可以使沿直线路径移动的动 170 画变为沿曲线或折线路径移动的动画。添加关键帧的方法如下。 （1）单击动画条内要加入关键帧的位置，回放头会随之移到此时间位置，同时回放头回移到此处， 用来指示选中的位置。例如，选择第 15 帧（将终止帧移到第 30 帧处） 。 （2）右击“时间轴”面板中的动画条，调出时间轴快捷菜单，再单击该菜单中的“增加关键帧”菜 单命令
8、，即可在选中的位置处插入一个关键帧，如图 6-1-5 所示。按住 Ctrl 键单击要加入关键帧的位 置，也可以添加关键帧。 2移动和删除关键帧 （1）移动关键帧：如果对关键帧的位置不满意，可以用鼠标拖曳关键帧上的小圆。 （2）删除关键帧：如果要删除关键帧，可以选中要删除的关键帧，单击鼠标右键，调出时间轴快捷 菜单，再单击该菜单中的“移除关键帧”菜单命令即可。 171 3制作沿曲线路径移动的动画 （1）方法 1：单击选中关键帧，用鼠标拖曳动画层到新的位置，即可确定关键帧图像的位置。此时， 动画移动的路径线会变为一条曲线，如图 6-1-6 所示。大家可以看出，路径线的起始位置与终止位置不 变。如果
9、要改变关键帧图像的位置，可再用鼠标拖曳动画层到新的位置。 按住“播放”按钮 不放，即可在网页设计窗口内看到沿曲线路径移动的动画了。 图 6-1-5 加入关键帧后的“时间轴”面板 图 6-1-6 曲线路径线 172 （2）方法 2：可以用鼠标拖曳的方法来制作沿曲线路径移动的动画，操作方法如下。 在页面内插入一个层，并给该层起一个名字，然后在层内插入一个图像或输入一些文字等，再 将插有图像或文字的层移到动画的起始位置。此处，层中插入的是图像。 选中该层，再单击“修改”“时间轴”“录制层路径”菜单命令，或者单击时间轴快捷菜 单中的“录制层路径”菜单命令。 在网页设计窗口内，按照希望的曲线路径，用鼠标
10、拖曳层。随着鼠标的拖曳，会产生一条曲线 路径线，如图 6-1-7 所示。 松开鼠标左键， 即可生成复杂的曲线路径。 此时， “时间轴” 面板会自动产生动画条， 如图 6-1-8 所示。由产生的动画条可以看出，用鼠标拖曳所用的时间越长，组成动画的帧数也越多。鼠标拖曳时的 转折点越多，自动产生的关键帧也越多。 173 按住“播放”按钮 不放，即可在网页设计窗口内看到沿曲线路径移动的动画。 图 6-1-7 用鼠标拖曳层产生一条曲线路径线 图 6-1-8 “时间轴”面板内自动产生的动画条 【相关知识】动画的更名、删除、复制和移动 1动画的更名 动画的更名方法如下。 174 （1）直接在“时间轴”面板的
11、列表框内更改动画的名称。 （2）单击时间轴菜单中的“重命名时间轴”菜单命令，调出“重命名时间轴”对话框，如图 6-1-9 所示。在该对话框的“时间轴名称”文本框内输入新名称，再单击“确定”按钮即可。 图 619 “重命名时间轴”对话框 2动画的删除 动画的删除方法如下。 （1）删除动画条：选中要删除的动画条，按 Delete 键或单击“编辑”“剪切”菜单命令。 175 （2）删除所有动画条：单击时间轴菜单中的“移除时间轴”菜单命令。 3动画的复制 动画的复制方法如下。 （1）选中要复制的动画条，再单击时间轴菜单中的“拷贝”菜单命令。 （2）调整回放头的位置，再单击时间轴菜单中的“粘贴”菜单命令
12、，即可在选中的动画条右边复制 一个动画条。用户也可以将复制的内容粘贴到其他页面的“时间轴”面板中。 4动画的移动 动画的移动方法如下。 （1）选中要移动的动画条，再单击时间轴菜单中的“剪切”菜单命令。调整回放头的位置，再单击 时间轴菜单中的“粘贴”菜单命令，即可将动画条移到回放头所处的位置处，而且可以移动到其他页面 176 的“时间轴”面板中。 （2）用鼠标拖曳一个动画条在整个动画通道内移动；按住 Shift 键单击要移动的动画条，选中多个 动画条，用鼠标拖曳选中的动画条，即可同时移动多个动画条。 6.2 动作和事件 行为是动作（Actions）和事件（Events）的组合。动作就是计算机系统
13、执行的一个动作，例如， 调出一个提示框、执行一段程序或一个函数、播放声音或影片、启动或停止“时间轴”面板中的动画等。 动作通常是由预先编写好的 JavaScript 程序脚本实现的。 Dreamweaver 8 自带了一些动作的 JavaScript 程序脚本，可供用户直接调用，用户也可以自己用 JavaScript 语言编写 JavaScript 程序脚本，创建新 的行为。 177 事件是指引发动作产生的事情，例如，鼠标移到某对象之上、鼠标单击某对象、 “时间轴”面板中 的回放头播放到某一帧等。要创建一个行为，就要指定一个动作，再确定触发该动作的事件。有时，某 几个动作可以被相同的事件触发，
14、则需要指定动作发生的顺序。 Dreamweaver 8 采用了“行为”面板（也叫“行为控制器” ）来完成行为中动作和事件的设置，从 而实现动态交互效果。 【相关知识】动作和事件名称及其作用 1动作名称及其作用 单击“窗口”“行为”菜单命令或按 Shift+F3 组合键，即可调出“行为”面板，如图 6-2-1 所示。 单击“行为”面板中的“添加行为”按钮 ，调出“动作名称”菜单，再单击某一个动作名称，即可进 行相应的动作设置。进行完动作的设置后，在“行为”面板的列表框内会显示出动作的名称与默认的事 178 件名称。大家可以看到，在选中动作名称后， “事件”栏中默认的事件名称右边会出现一个 按钮。
15、 图 621 “行为”面板 “动作名称”菜单内各动作的作用如表 6-2-1 所示。注意，对于选择不同的浏览器，可以使用的 动作也不一样，版本低的浏览器可以使用的动作较少。当选定的对象不一样时， “动作名称”菜单中可 179 以使用的动作也不一样。 表 6-2-1 动作名称及其作用 序 号 动作的英文名称 动作的中文名称 动作的作用 1 Swap Image 交换图像 交换图像 2 Popup Message 调出信息 调出消息栏 3 Swap Image Restore 恢复交换图像 恢复交换图像 4 Open Browser Window 打开浏览器窗口 打开新的浏览器窗口 5 Drag L
16、ayer 拖曳层 拖曳层到目标位置 6 Control Shockwave or Flash 控制 Shockwave 或 Flash 控制 Shockwave 或 Flash 影像 7 Play Sound 播放声音 播放声音 8 Change Property 改变属性 改变对象的属性 180 续表 序 号 动作的英文名称 动作的中文名称 动作的作用 9-1 Play Timeline 时间轴（播放时间轴） 播放时间轴上的动画 9-2 Stop Timeline 时间轴（停止时间轴） 停止时间轴上动画的播放 9-3 Go To Timeline Frame 时间轴（转到时间轴帧） 跳转到时间轴上的某一帧 10 Show-Hide Layers 显示隐藏层 显示或隐藏层 11 Show-Menu 显示调出菜单 为图像添加调出菜单 12 Check Plugin 检查插件 检查
