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

1、 【案例案例1515】“显示器展示显示器展示”网页网页5.1 【案例案例1616】为为“WordWord操作演示操作演示”网页增加控制按网页增加控制按钮钮5.2【案例案例1717】“产品促销之游戏页产品促销之游戏页”网页网页5.35.1.1 学习目标学习目标 “显示器展示显示器展示”网页的显示效果如图网页的显示效果如图5-1-1所示。利用时间轴功能，可以在网页所示。利用时间轴功能，可以在网页中插入一个动画，增加网页的动态效果。中插入一个动画，增加网页的动态效果。图图5-1-1 “显示器展示显示器展示”网页的显示效果网页的显示效果 它通过在不同的时间改变层的位置、它通过在不同的时间改变层的位置、

2、大小、可见性和叠放顺序等来创建动画。大小、可见性和叠放顺序等来创建动画。时间轴的层功能只在时间轴的层功能只在IE 4.0及更高版本的浏及更高版本的浏览器中有效。览器中有效。5.1.2 操作过程操作过程1“时间轴时间轴”面板面板 单击单击“窗口窗口”“时间轴时间轴”菜单命令，菜单命令，或按或按Alt+F9键，即可弹出键，即可弹出“时间轴时间轴”面板，面板，如图如图5-1-3所示。该面板中的各个工具及各所示。该面板中的各个工具及各项目的作用如下。项目的作用如下。图图5-1-3 “时间轴时间轴”面板面板（1）“时间轴时间轴”面板的工具栏面板的工具栏 “时间轴时间轴”下拉列表框：其内列出了当下拉列表框

3、：其内列出了当前页面内所有时间轴动画的名字，选中其前页面内所有时间轴动画的名字，选中其中一个选项后，相应的动画就会在中一个选项后，相应的动画就会在“时间时间轴轴”面板中显示出来。面板中显示出来。 “归位归位”按钮按钮 ：将动画图像移到起始：将动画图像移到起始位置，同时回放头也移动到该位置处。位置，同时回放头也移动到该位置处。 “回放回放”按钮按钮 ：单击它，可以使动：单击它，可以使动画回退一个帧。单击按住该按钮不放，可画回退一个帧。单击按住该按钮不放，可以向相反方向播放动画。以向相反方向播放动画。“当前帧号码当前帧号码”（也是回放头当前位置）（也是回放头当前位置）文本框：用来输入和显示文本框：

4、用来输入和显示“回放头回放头”所处所处的时间轴位置号，即当前帧号码。的时间轴位置号，即当前帧号码。“播放播放”按钮按钮 ：单击它，可使动画前：单击它，可使动画前进一个帧。按住该按钮不放，可以向正常进一个帧。按住该按钮不放，可以向正常方向播放动画。方向播放动画。“速率速率”文本框：用来输入每秒钟播放的文本框：用来输入每秒钟播放的帧数。帧数。 “自动播放自动播放”复选框：选中它后，则在复选框：选中它后，则在网上下载动画后会自动播放。不选中它时，网上下载动画后会自动播放。不选中它时，需要在使用行为事件时才可以播放。需要在使用行为事件时才可以播放。 “循环循环”复选框：选中它后，则循环播复选框：选中它

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

6、应的动画画面会出现在网间单位处时，相应的动画画面会出现在网页窗口内。页窗口内。动画条：表示一个动画所占的帧数，上动画条：表示一个动画所占的帧数，上面标有该动画所在层的名字。它的起始处面标有该动画所在层的名字。它的起始处和终止处各有一个小圆，表示首帧和终止和终止处各有一个小圆，表示首帧和终止帧。如果设置了关键帧，则关键帧也会有帧。如果设置了关键帧，则关键帧也会有一个小圆。一个小圆。动画通道：它由许多图层组成，表示可动画通道：它由许多图层组成，表示可以在一个页面内加入多个时间轴动画，但以在一个页面内加入多个时间轴动画，但最多只可以加最多只可以加32个。它的左边标有图层的个。它的左边标有图层的编号，

7、图层编号大的动画在图层编号小的编号，图层编号大的动画在图层编号小的动画之上。动画之上。（1）动画的更名）动画的更名可以直接在可以直接在“时间轴时间轴”面板的列表框内面板的列表框内更改动画的名字。更改动画的名字。单击时间轴菜单中的单击时间轴菜单中的“重命名时间轴重命名时间轴”菜单命令，弹出菜单命令，弹出“重命名时间轴重命名时间轴”对话框，对话框，如图如图5-1-4所示。在该对话框内的所示。在该对话框内的“时间轴时间轴名称名称”文本框内输入新的名字，再单击文本框内输入新的名字，再单击“确定确定”按钮即可。按钮即可。图图5-1-4 “重命名时间轴重命名时间轴”对话框对话框（2）动画的删除）动画的删除

8、删除动画条：选中要删除的动画条，再删除动画条：选中要删除的动画条，再单击单击“编辑编辑”“剪切剪切”菜单命令。菜单命令。删除动画的移动路径：选中要删除的动删除动画的移动路径：选中要删除的动画条，再按画条，再按Delete按键。按键。删除所有动画条：单击时间轴菜单中的删除所有动画条：单击时间轴菜单中的“删除时间轴删除时间轴”菜单命令。菜单命令。（3）动画的复制）动画的复制单击选中要复制的动画条。再单击时间单击选中要复制的动画条。再单击时间轴菜单中的轴菜单中的“复制复制”菜单命令。菜单命令。调整回放头的位置。再单击时间轴菜单调整回放头的位置。再单击时间轴菜单中的中的“粘贴粘贴”菜单命令，即可在选中

9、的动菜单命令，即可在选中的动画条的右边复制一个动画条。而且可以复画条的右边复制一个动画条。而且可以复制到其他页面的制到其他页面的“时间轴时间轴”面板中。面板中。（4）动画的移动）动画的移动单击选中要移动的动画条。再单击时间单击选中要移动的动画条。再单击时间轴菜单中的轴菜单中的“剪切剪切”菜单命令。菜单命令。调整回放头的位置，再单击时间轴菜单调整回放头的位置，再单击时间轴菜单中的中的“粘贴粘贴”菜单命令，即可将动画条移菜单命令，即可将动画条移到回放头所处的位置处。利用此方法，还到回放头所处的位置处。利用此方法，还可以移动到其他页面的可以移动到其他页面的“时间轴时间轴”面板中。面板中。可以用鼠标拖

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

11、画的开始、停止及重新播放。动画的开始、停止及重新播放。图图5-2-1 添加控制按钮后的添加控制按钮后的“Word操作演示操作演示”网页网页 行为是动作（行为是动作（Actions）和事件）和事件（Events）的组合。动作就是计算机系统）的组合。动作就是计算机系统做的一个动作，例如，弹出一个提示框、做的一个动作，例如，弹出一个提示框、执行一段程序或一个函数、播放声音或影执行一段程序或一个函数、播放声音或影片、启动或停止片、启动或停止“时间轴时间轴”面板中的动画面板中的动画等。等。 动作通常是由预先编写好的动作通常是由预先编写好的JavaScript程序脚本实现的，程序脚本实现的，Dreamwe

12、aver 8自带了自带了一些动作的一些动作的JavaScript程序脚本，可供用程序脚本，可供用户直接调用。用户也可以自己用户直接调用。用户也可以自己用JavaScript语言编写语言编写JavaScript程序脚本，程序脚本，创建新的行为。创建新的行为。 事件是指引发动作产生的事情，例如，事件是指引发动作产生的事情，例如，鼠标移到某对象上、鼠标单击某对象、鼠标移到某对象上、鼠标单击某对象、“时间轴时间轴”面板中的回放头播放到某一帧面板中的回放头播放到某一帧等。要创建一个行为，就是要指定一个动等。要创建一个行为，就是要指定一个动作，再确定触发该动作的事件。有时，某作，再确定触发该动作的事件。有

13、时，某几个动作可以被相同的事件触发，则需要几个动作可以被相同的事件触发，则需要指定动作发生的顺序。指定动作发生的顺序。 Dreamweaver 8采用采用“行为行为”面板面板（也叫做行为控制器）来完成行为中的动（也叫做行为控制器）来完成行为中的动作和事件的设置，从而实现动态交互效果。作和事件的设置，从而实现动态交互效果。5.2.2 操作过程操作过程1“行为行为”面板面板 单击单击“窗口窗口”“行为行为”菜单命令或菜单命令或按按Shift+F3键，即可弹出键，即可弹出“行为行为”面板，面板，如图如图5-2-2所示。所示。“行为行为”面板的使用方法面板的使用方法与与“行为行为”面板中的各按钮与列表

14、框等的面板中的各按钮与列表框等的作用如下。作用如下。（1）“添加行为添加行为”按钮按钮 ：单击此：单击此按钮，将弹出按钮，将弹出“动作动作”快捷菜单，通快捷菜单，通过选择菜单的相应项目，进行插入动过选择菜单的相应项目，进行插入动作的操作。作的操作。（2）“删除行为删除行为”按钮按钮 ：单击：单击此按钮将删除选中的行为。此按钮将删除选中的行为。（3）“向上移动向上移动”按钮按钮 ：单击：单击此按钮，将选中的行为在此按钮，将选中的行为在“行为行为”面面板中向顶部移动。板中向顶部移动。（4）“向下移动向下移动”按钮按钮 ：单击此：单击此按钮，将选中的行为在按钮，将选中的行为在“行为行为”面板面板中向

15、底部移动。中向底部移动。（5）“显示所有事件显示所有事件”按钮按钮 ：单：单击此按钮后，在击此按钮后，在“行为行为”面板中将显面板中将显示出此对象所能使用的所有事件，如示出此对象所能使用的所有事件，如图图5-2-4所示。所示。图图5-2-4 “显示所有事件显示所有事件”的的“行为行为”面板面板（6）“显示设置事件显示设置事件”按钮按钮 ：单：单击此按钮后，在击此按钮后，在“行为行为”面板中只显面板中只显示已经使用的事件，如图示已经使用的事件，如图5-2-2所示。所示。（1）如果要更改系统默认的事件，）如果要更改系统默认的事件，可以单击可以单击“事件事件”栏中默认的事件名栏中默认的事件名称右边的

16、称右边的 按钮，弹出事件名称菜按钮，弹出事件名称菜单。菜单中列出了该对象可以使用的单。菜单中列出了该对象可以使用的所有事件。所有事件。（2）各个事件所能作用的对象与它）各个事件所能作用的对象与它的作用如表的作用如表5-2-1所示。所示。序号序号事事 件件 名名 称称事件可以作用的事件可以作用的对象对象事件的作用事件的作用1 1onAbortonAbort图像、页面等图像、页面等中断对象载入操作时中断对象载入操作时2 2onAfterUpdateonAfterUpdate图像、页面等图像、页面等对象更新之后对象更新之后3 3onBeforeUpdatonBeforeUpdate e图像、页面等图

17、像、页面等对象更新之前对象更新之前4 4onFocusonFocus按钮、链接和文按钮、链接和文本框等本框等当前对象得到输入焦点时当前对象得到输入焦点时5 5onBluronBlur按钮、链接和文按钮、链接和文本框等本框等焦点从当前对象移开时焦点从当前对象移开时6 6onClickonClick所有对象所有对象单击对象时单击对象时表表5-2-1事件名称菜单中各个事件所能作用的对象与它的作用事件名称菜单中各个事件所能作用的对象与它的作用序号序号事事 件件 名名 称称事件可以作用的对事件可以作用的对象象事件的作用事件的作用7 7onDblClickonDblClick所有对象所有对象双击对象时双击

18、对象时8 8onErroronError图像、页面等图像、页面等载入图像等中间产生错误时载入图像等中间产生错误时9 9onHelponHelp图像等图像等调用帮助时调用帮助时1010onLoadonLoad图像、页面等图像、页面等载入对象时载入对象时1111onMouseDownonMouseDown链接图像和文字等链接图像和文字等在热字或图像处按下鼠标左键时在热字或图像处按下鼠标左键时1212onMouseUponMouseUp链接图像和文字等链接图像和文字等在热字或图像处鼠标左键弹起时在热字或图像处鼠标左键弹起时1313onMouseOveronMouseOver链接图像和文字等链接图像和

19、文字等鼠标指针移入热字或图像区域时鼠标指针移入热字或图像区域时1414onMouseOutonMouseOut链接图像和文字等链接图像和文字等鼠标指针移出热字或图像区域时鼠标指针移出热字或图像区域时1515onMouseMoveonMouseMove链接图像和文字等链接图像和文字等鼠标指针在热字或图像上移动时鼠标指针在热字或图像上移动时onReadyStateChonReadyStateChangeange续表续表 1717onKeyDownonKeyDown链接图像和文字等链接图像和文字等当焦点在对象上，按键处于按下当焦点在对象上，按键处于按下状态时状态时1818onKeyPressonKe

20、yPress链接图像和文字等链接图像和文字等当焦点在对象上，按键按下时当焦点在对象上，按键按下时1919onKeyUponKeyUp链接图像和文字等链接图像和文字等当焦点在对象上，按键抬起时当焦点在对象上，按键抬起时2020onSubmitonSubmit表单等表单等表单提交时表单提交时2121onResetonReset表单等表单等表单重置时表单重置时2222onSelectonSelect文字段落、选择框等文字段落、选择框等选定文字段落或选择框内某项时选定文字段落或选择框内某项时2323onUnloadonUnload主页面等主页面等当离开此页时当离开此页时2424onResizeonRe

21、size主窗口、帧窗口等主窗口、帧窗口等当浏览器内的窗口大小改变时当浏览器内的窗口大小改变时2525onScrollonScroll主窗口、帧窗口、多主窗口、帧窗口、多行输入文本框等行输入文本框等当拖曳浏览器窗口的滚动条时当拖曳浏览器窗口的滚动条时2626onRowEnteronRowEnterShockwaveShockwave等等动画载入时动画载入时2727onRowExitonRowExitShockwaveShockwave等等动画卸载时动画卸载时续表续表 （3）如果出现带括号的事件，则该）如果出现带括号的事件，则该事件是链接对象的，使用它们时，系事件是链接对象的，使用它们时，系统会自

22、动在行为控制器下拉列表框内统会自动在行为控制器下拉列表框内显示的事件名称前面增加一个显示的事件名称前面增加一个“#”号，号，表示空链接。表示空链接。（4）其他操作。）其他操作。 选中行为控制器列表框内的某一个行选中行为控制器列表框内的某一个行为项（即动作和事件）时，再单击为项（即动作和事件）时，再单击 按按钮，即可删除选中的行为项。钮，即可删除选中的行为项。 选中行为项后，单击选中行为项后，单击 按钮，可以使按钮，可以使选中的行为执行次序提前；单击选中行为选中的行为执行次序提前；单击选中行为项后，单击项后，单击 按钮，可以使选中的行为执按钮，可以使选中的行为执行次序下降。行次序下降。 在页面内

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

24、的：使指定的Flash或或Shockwave回回到第一帧并开始播放。到第一帧并开始播放。 “前往帧前往帧”：选择该选项后，在后面的：选择该选项后，在后面的“前往帧前往帧”文本框中输入一个数值，即可文本框中输入一个数值，即可将网页中的将网页中的Flash或或Shockwave转到指定的转到指定的帧。帧。单击单击“确定确定”按钮后，即可在网页中插按钮后，即可在网页中插入入“控制控制Shockwave或或Flash”行为。行为。5.3.1 学习目标学习目标 商家在促销产品时，为了吸引消费者商家在促销产品时，为了吸引消费者的注意，经常会设置一些小游戏。网上促的注意，经常会设置一些小游戏。网上促销也一样

25、，销也一样，“产品促销之游戏页产品促销之游戏页”就是模就是模拟商家的促销行为，制作一个带有游戏的拟商家的促销行为，制作一个带有游戏的产品宣传网页。该网页的显示效果如图产品宣传网页。该网页的显示效果如图5-3-1所示。所示。图图5-3-1 “产品促销之游戏页产品促销之游戏页”网页的显示效果网页的显示效果 拼图游戏是利用层和行为制作的一个拼图游戏是利用层和行为制作的一个非常有意思的网页实例。利用非常有意思的网页实例。利用“行为行为”中中的的“拖曳层拖曳层”动作，可以使层脱离位置的动作，可以使层脱离位置的限制，随意在网页中进行移动，而靠齐文限制，随意在网页中进行移动，而靠齐文本框设置可以使层在接近单

26、元格的时候自本框设置可以使层在接近单元格的时候自动对齐，使游戏时的操作更简单。动对齐，使游戏时的操作更简单。 在网页中添加音乐后，可以增加游戏在网页中添加音乐后，可以增加游戏的可玩性，提高浏览者对该网页的欢迎程的可玩性，提高浏览者对该网页的欢迎程度。度。5.3.2 操作过程操作过程1显示显示-隐藏层隐藏层 创建层后，单击选择该动作名称，弹创建层后，单击选择该动作名称，弹出出“显示显示-隐藏层隐藏层”对话框，如图对话框，如图5-3-2所示。所示。 如果要设置层为显示状态，单击选中如果要设置层为显示状态，单击选中“命名的层命名的层”列表框内层的名称，再单击列表框内层的名称，再单击“显示显示”按钮，

27、此时按钮，此时“命名的层命名的层”列表框列表框内选中的层名称右边会出现内选中的层名称右边会出现“（显示）（显示）”文字。文字。 如果要设置层为不显示状态，则单击如果要设置层为不显示状态，则单击“隐藏隐藏”按钮。单击按钮。单击“默认值默认值”按钮后，按钮后，可将层的显示与否设置为默认状态。可将层的显示与否设置为默认状态。2“拖动层拖动层”动作动作 在页面内插入层后，单击该动作名称，在页面内插入层后，单击该动作名称，弹出弹出“拖动层拖动层”对话框，如图对话框，如图5-3-3所示。所示。（1）选择）选择“基本基本”标签后的标签后的“拖动拖动层层”对话框如图对话框如图5-3-3所示。该对话框所示。该对

28、话框内各选项的作用如下。内各选项的作用如下。“层层”下拉列表框：选择要拖动的层的名下拉列表框：选择要拖动的层的名字。字。 “移动移动”下拉列表框：选择下拉列表框：选择“不限制不限制”，层可以在页面内任意移动。选择层可以在页面内任意移动。选择“限制限制”后，在其右边会增加后，在其右边会增加4个文本框，用来输入个文本框，用来输入上、下、左和右的数字，形成层移动的限上、下、左和右的数字，形成层移动的限制区域。制区域。 “放下目标放下目标”栏：在栏：在“左左”和和“上上”文本文本框内输入数据（相对于浏览器的左上角），框内输入数据（相对于浏览器的左上角），以确定拖曳层移动的目标位置。单击以确定拖曳层移动的目标位置。单击“取取得目前位置得目前位置”按钮，可以将选定层的当前按钮，可以将选定层的当前位置数值自动填入上述两个文本框内。位置数值自动填入上述两个文本框内。“靠齐距离靠齐距离”文本框：输入一个数据，当文本框：输入一个数据，当层移动到的位置与目标位置小于该数据时，层移动到的位置与目标位置小于该数据时，层会自动定位到目标位置。否则层将移回层会自动定位到目标位置。否则层将移回原位置。可见，该文本框内的数值越大，原位置。可见，该文本框内的数值越大，越容易将层拖曳到目标位置。越容易将层拖曳到目标