Dreamweaver8和Flash8案例教程时间轴和行为

第5章时间轴和行为

【案例15】“显示器展示”网页5.1

【案例16】为“Word操作演示”网页增加控制按钮5.2【案例17】“产品促销之游戏页”网页5.35.1【案例15】“显示器展示”网页5.1.1学习目标

“显示器展示”网页的显示效果如图5-1-1所示。利用时间轴功能，可以在网页中插入一个动画，增加网页的动态效果。图5-1-1“显示器展示”网页的显示效果

它通过在不同的时间改变层的位置、大小、可见性和叠放顺序等来创建动画。时间轴的层功能只在IE4.0及更高版本的浏览器中有效。5.1.2操作过程5.1.3相关知识1．“时间轴”面板单击“窗口”→“时间轴”菜单命令，或按Alt+F9键，即可弹出“时间轴”面板，如图5-1-3所示。该面板中的各个工具及各项目的作用如下。图5-1-3“时间轴”面板（1）“时间轴”面板的工具栏

“时间轴”下拉列表框：其内列出了当前页面内所有时间轴动画的名字，选中其中一个选项后，相应的动画就会在“时间轴”面板中显示出来。

“归位”按钮：将动画图像移到起始位置，同时回放头也移动到该位置处。

“回放”按钮：单击它，可以使动画回退一个帧。单击按住该按钮不放，可以向相反方向播放动画。“当前帧号码”（也是回放头当前位置）文本框：用来输入和显示“回放头”所处的时间轴位置号，即当前帧号码。“播放”按钮：单击它，可使动画前进一个帧。按住该按钮不放，可以向正常方向播放动画。“速率”文本框：用来输入每秒钟播放的帧数。

“自动播放”复选框：选中它后，则在网上下载动画后会自动播放。不选中它时，需要在使用行为事件时才可以播放。

“循环”复选框：选中它后，则循环播放动画，否则只播放一次动画。（2）通道行为通道：其左边标有字母“B”。可以在该通道的特定帧使用行为事件。行为帧：加入了行为事件的帧，它在“行为通道”内。时间标尺：给出了与时间对应的帧数码。回放头：播放动画时，它在时间标尺上移动，好像放像机的磁头一样。用鼠标拖曳它在时间标尺上移动，当它移到某一时间单位处时，相应的动画画面会出现在网页窗口内。

动画条：表示一个动画所占的帧数，上面标有该动画所在层的名字。它的起始处和终止处各有一个小圆，表示首帧和终止帧。如果设置了关键帧，则关键帧也会有一个小圆。动画通道：它由许多图层组成，表示可以在一个页面内加入多个时间轴动画，但最多只可以加32个。它的左边标有图层的编号，图层编号大的动画在图层编号小的动画之上。（1）动画的更名可以直接在“时间轴”面板的列表框内更改动画的名字。单击时间轴菜单中的“重命名时间轴”菜单命令，弹出“重命名时间轴”对话框，如图5-1-4所示。在该对话框内的“时间轴名称”文本框内输入新的名字，再单击“确定”按钮即可。2．时间轴的相关操作图5-1-4“重命名时间轴”对话框（2）动画的删除删除动画条：选中要删除的动画条，再单击“编辑”→“剪切”菜单命令。删除动画的移动路径：选中要删除的动画条，再按Delete按键。删除所有动画条：单击时间轴菜单中的“删除时间轴”菜单命令。（3）动画的复制单击选中要复制的动画条。再单击时间轴菜单中的“复制”菜单命令。调整回放头的位置。再单击时间轴菜单中的“粘贴”菜单命令，即可在选中的动画条的右边复制一个动画条。而且可以复制到其他页面的“时间轴”面板中。（4）动画的移动单击选中要移动的动画条。再单击时间轴菜单中的“剪切”菜单命令。调整回放头的位置，再单击时间轴菜单中的“粘贴”菜单命令，即可将动画条移到回放头所处的位置处。利用此方法，还可以移动到其他页面的“时间轴”面板中。

可以用鼠标拖曳一个动画条在整个动画通道内移动。按住Shift键，单击要移动的动画条，可以选中多个动画条，鼠标拖曳一个动画条即可同时移动多个动画条。5.2.1学习目标为“Word操作演示”网页增加控制按钮后，该网页的显示效果如图5-2-1所示。在该网页的底部，添加了3个控制按钮，单击其中的任意一个按钮，即可实现网页中控制Flash动画的开始、停止及重新播放。5.2【案例16】为“Word操作演示”网页增加控制按钮图5-2-1添加控制按钮后的“Word操作演示”网页

行为是动作（Actions）和事件（Events）的组合。动作就是计算机系统做的一个动作，例如，弹出一个提示框、执行一段程序或一个函数、播放声音或影片、启动或停止“时间轴”面板中的动画等。

动作通常是由预先编写好的JavaScript程序脚本实现的，Dreamweaver8自带了一些动作的JavaScript程序脚本，可供用户直接调用。用户也可以自己用JavaScript语言编写JavaScript程序脚本，创建新的行为。

事件是指引发动作产生的事情，例如，鼠标移到某对象上、鼠标单击某对象、“时间轴”面板中的回放头播放到某一帧等。要创建一个行为，就是要指定一个动作，再确定触发该动作的事件。有时，某几个动作可以被相同的事件触发，则需要指定动作发生的顺序。Dreamweaver8采用“行为”面板（也叫做行为控制器）来完成行为中的动作和事件的设置，从而实现动态交互效果。5.2.2操作过程1．“行为”面板单击“窗口”→“行为”菜单命令或按Shift+F3键，即可弹出“行为”面板，如图5-2-2所示。“行为”面板的使用方法与“行为”面板中的各按钮与列表框等的作用如下。5.2.3相关知识（1）“添加行为”按钮：单击此按钮，将弹出“动作”快捷菜单，通过选择菜单的相应项目，进行插入动作的操作。（2）“删除行为”按钮：单击此按钮将删除选中的行为。（3）“向上移动”按钮：单击此按钮，将选中的行为在“行为”面板中向顶部移动。（4）“向下移动”按钮：单击此按钮，将选中的行为在“行为”面板中向底部移动。（5）“显示所有事件”按钮：单击此按钮后，在“行为”面板中将显示出此对象所能使用的所有事件，如图5-2-4所示。图5-2-4“显示所有事件”的“行为”面板（6）“显示设置事件”按钮：单击此按钮后，在“行为”面板中只显示已经使用的事件，如图5-2-2所示。（1）如果要更改系统默认的事件，可以单击“事件”栏中默认的事件名称右边的按钮，弹出事件名称菜单。菜单中列出了该对象可以使用的所有事件。（2）各个事件所能作用的对象与它的作用如表5-2-1所示。2．选择事件序号事件名称事件可以作用的对象事件的作用1onAbort图像、页面等中断对象载入操作时2onAfterUpdate图像、页面等对象更新之后3onBeforeUpdate图像、页面等对象更新之前4onFocus按钮、链接和文本框等当前对象得到输入焦点时5onBlur按钮、链接和文本框等焦点从当前对象移开时6onClick所有对象单击对象时表5-2-1 事件名称菜单中各个事件所能作用的对象与它的作用序号事件名称事件可以作用的对象事件的作用7onDblClick所有对象双击对象时8onError图像、页面等载入图像等中间产生错误时9onHelp图像等调用帮助时10onLoad图像、页面等载入对象时11onMouseDown链接图像和文字等在热字或图像处按下鼠标左键时12onMouseUp链接图像和文字等在热字或图像处鼠标左键弹起时13onMouseOver链接图像和文字等鼠标指针移入热字或图像区域时14onMouseOut链接图像和文字等鼠标指针移出热字或图像区域时15onMouseMove链接图像和文字等鼠标指针在热字或图像上移动时16onReadyStateChange图像等对象状态改变时续表

17onKeyDown链接图像和文字等当焦点在对象上，按键处于按下状态时18onKeyPress链接图像和文字等当焦点在对象上，按键按下时19onKeyUp链接图像和文字等当焦点在对象上，按键抬起时20onSubmit表单等表单提交时21onReset表单等表单重置时22onSelect文字段落、选择框等选定文字段落或选择框内某项时23onUnload主页面等当离开此页时24onResize主窗口、帧窗口等当浏览器内的窗口大小改变时25onScroll主窗口、帧窗口、多行输入文本框等当拖曳浏览器窗口的滚动条时26onRowEnterShockwave等动画载入时27onRowExitShockwave等动画卸载时续表

（3）如果出现带括号的事件，则该事件是链接对象的，使用它们时，系统会自动在行为控制器下拉列表框内显示的事件名称前面增加一个“#”号，表示空链接。（4）其他操作。

选中行为控制器列表框内的某一个行为项（即动作和事件）时，再单击按钮，即可删除选中的行为项。选中行为项后，单击按钮，可以使选中的行为执行次序提前；单击选中行为项后，单击按钮，可以使选中的行为执行次序下降。

在页面内插入Shockwave或Flash影像的情况下，选择该动作名称后，会弹出“控制Shockwave或Flash”对话框，如图5-2-3所示。（1）“影片”下拉列表框：用来选择Shockwave或Flash影像的名字。3．控制Shockwave或Flash（2）“操作”栏：该栏有4个单选项，各选项的含义如下。

“播放”：使指定的Flash或Shockwave播放。

“停止”：使指定的Flash或Shockwave停止。“后退”：使指定的Flash或Shockwave回到第一帧并开始播放。

“前往帧”：选择该选项后，在后面的“前往帧”文本框中输入一个数值，即可将网页中的Flash或Shockwave转到指定的帧。单击“确定”按钮后，即可在网页中插入“控制Shockwave或Flash”行为。5.3.1学习目标商家在促销产品时，为了吸引消费者的注意，经常会设置一些小游戏。网上促销也一样，“产品促销之游戏页”就是模拟商家的促销行为，制作一个带有游戏的产品宣传网页。该网页的显示效果如图5-3-1所示。5.3【案例17】“产品促销之游戏页”网页图5-3-1“产品促销之游戏页”网页的显示效果

拼图游戏是利用层和行为制作的一个非常有意思的网页实例。利用“行为”中的“拖曳层”动作，可以使层脱离位置的限制，随意在网页中进行移动，而靠齐文本框设置可以使层在接近单元格的时候自动对齐，使游戏时的操作更简单。

在网页中添加音乐后，可以增加游戏的可玩性，提高浏览者对该网页的欢迎程度。5.3.2操作过程1．显示-隐藏层创建层后，单击选择该动作名称，弹出“显示-隐藏层”对话框，如图5-3-2所示。如果要设置层为显示状态，单击选中“命名的层”列表框内层的名称，再单击“显示”按钮，此时“命名的层”列表框内选中的层名称右边会出现“（显示）”文字。5.3.3相关知识

如果要设置层为不显示状态，则单击“隐藏”按钮。单击“默认值”按钮后，可将层的显示与否设置为默认状态。2．“拖动层”动作在页面内插入层后，单击该动作名称，弹出“拖动层”对话框，如图5-3-3所示。（1）选择“基本”标签后的“拖动层”对话框如图5-3-3所示。该对话框内各选项的作用如下。“层”下拉列表框：选择要拖动的层的名字。

“移动”下拉列表框：选择“不限制”，层可以在页面内任意移动。选择“限制”后，在其右边会增加4个文本框，用来输入上、下、左和右的数字，形成层移动的限制区域。

“放下目标”栏：在“左”和“上”文本框内输入数据（相对于浏览器的左上角），以确定拖曳层移动的目标位置。单击“取得目前位置”按钮，可以将选定层的当前位置数值自动填入上述两个文本框内。“靠齐距离”文本框：输入一个数据，当层移动到的位置与目标位置小于该数据时，层会自动定位到目标位置。否则层将移回原位置。可见，该文本框内的数值越大，越容易将层拖曳到目标位置。（2