Dreamweaver 8和Flash 8案例教程第5章 时间轴和行为.ppt

《Dreamweaver 8和Flash 8案例教程第5章 时间轴和行为.ppt》由会员分享，可在线阅读，更多相关《Dreamweaver 8和Flash 8案例教程第5章 时间轴和行为.ppt（55页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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

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

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

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

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

6、的磁头一样。用鼠标拖曳它在时间标尺上移动，当它移到某一时曳它在时间标尺上移动，当它移到某一时间单位处时，相应的动画画面会出现在网间单位处时，相应的动画画面会出现在网页窗口内。页窗口内。动画条：表示一个动画所占的帧数，上动画条：表示一个动画所占的帧数，上面标有该动画所在层的名字。它的起始处面标有该动画所在层的名字。它的起始处和终止处各有一个小圆，表示首帧和终止和终止处各有一个小圆，表示首帧和终止帧。如果设置了关键帧，则关键帧也会有帧。如果设置了关键帧，则关键帧也会有一个小圆。一个小圆。动画通道：它由许多图层组成，表示可动画通道：它由许多图层组成，表示可以在一个页面内加入多个时间轴动画，但以在一个

7、页面内加入多个时间轴动画，但最多只可以加最多只可以加32个。它的左边标有图层的个。它的左边标有图层的编号，图层编号大的动画在图层编号小的编号，图层编号大的动画在图层编号小的动画之上。动画之上。（1）动画的更名）动画的更名可以直接在可以直接在“时间轴时间轴”面板的列表框内面板的列表框内更改动画的名字。更改动画的名字。单击时间轴菜单中的单击时间轴菜单中的“重命名时间轴重命名时间轴”菜单命令，弹出菜单命令，弹出“重命名时间轴重命名时间轴”对话框，对话框，如图如图5-1-4所示。在该对话框内的所示。在该对话框内的“时间轴时间轴名称名称”文本框内输入新的名字，再单击文本框内输入新的名字，再单击“确定确定

8、”按钮即可。按钮即可。2时间轴的相关操作时间轴的相关操作图图5-1-4 “重命名时间轴重命名时间轴”对话框对话框（2）动画的删除）动画的删除删除动画条：选中要删除的动画条，再删除动画条：选中要删除的动画条，再单击单击“编辑编辑”“剪切剪切”菜单命令。菜单命令。删除动画的移动路径：选中要删除的动删除动画的移动路径：选中要删除的动画条，再按画条，再按Delete按键。按键。删除所有动画条：单击时间轴菜单中的删除所有动画条：单击时间轴菜单中的“删除时间轴删除时间轴”菜单命令。菜单命令。（3）动画的复制）动画的复制单击选中要复制的动画条。再单击时间单击选中要复制的动画条。再单击时间轴菜单中的轴菜单中的

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

10、置处。利用此方法，还到回放头所处的位置处。利用此方法，还可以移动到其他页面的可以移动到其他页面的“时间轴时间轴”面板中。面板中。可以用鼠标拖曳一个动画条在整个动画可以用鼠标拖曳一个动画条在整个动画通道内移动。按住通道内移动。按住Shift键，单击要移动的键，单击要移动的动画条，可以选中多个动画条，鼠标拖曳动画条，可以选中多个动画条，鼠标拖曳一个动画条即可同时移动多个动画条。一个动画条即可同时移动多个动画条。5.2.1学习目标学习目标为为“Word操作演示操作演示”网页增加控制按网页增加控制按钮后，该网页的显示效果如图钮后，该网页的显示效果如图5-2-1所示。所示。在该网页的底部，添加了在该网页

11、的底部，添加了3个控制按钮，单个控制按钮，单击其中的任意一个按钮，即可实现网页中击其中的任意一个按钮，即可实现网页中控制控制Flash动画的开始、停止及重新播放。动画的开始、停止及重新播放。5.2 5.2 【案例案例1616】为为“WordWord操作演操作演示示”网页增加控制按钮网页增加控制按钮图图5-2-1 添加控制按钮后的添加控制按钮后的“Word操作演示操作演示”网页网页行为是动作（行为是动作（Actions）和事件）和事件（Events）的组合。动作就是计算机系统）的组合。动作就是计算机系统做的一个动作，例如，弹出一个提示框、做的一个动作，例如，弹出一个提示框、执行一段程序或一个函数

12、、播放声音或影执行一段程序或一个函数、播放声音或影片、启动或停止片、启动或停止“时间轴时间轴”面板中的动画面板中的动画等。等。动作通常是由预先编写好的动作通常是由预先编写好的JavaScript程序脚本实现的，程序脚本实现的，Dreamweaver8自带了自带了一些动作的一些动作的JavaScript程序脚本，可供用户程序脚本，可供用户直接调用。用户也可以自己用直接调用。用户也可以自己用JavaScript语语言编写言编写JavaScript程序脚本，创建新的行为。程序脚本，创建新的行为。事件是指引发动作产生的事情，例如，事件是指引发动作产生的事情，例如，鼠标移到某对象上、鼠标单击某对象、鼠标

13、移到某对象上、鼠标单击某对象、“时间轴时间轴”面板中的回放头播放到某一帧等。面板中的回放头播放到某一帧等。要创建一个行为，就是要指定一个动作，要创建一个行为，就是要指定一个动作，再确定触发该动作的事件。有时，某几个再确定触发该动作的事件。有时，某几个动作可以被相同的事件触发，则需要指定动作可以被相同的事件触发，则需要指定动作发生的顺序。动作发生的顺序。Dreamweaver8采用采用“行为行为”面板面板（也叫做行为控制器）来完成行为中的动（也叫做行为控制器）来完成行为中的动作和事件的设置，从而实现动态交互效果。作和事件的设置，从而实现动态交互效果。5.2.2操作过程操作过程1“行为行为”面板面

14、板单击单击“窗口窗口”“行为行为”菜单命令或菜单命令或按按Shift+F3键，即可弹出键，即可弹出“行为行为”面板，面板，如图如图5-2-2所示。所示。“行为行为”面板的使用方法面板的使用方法与与“行为行为”面板中的各按钮与列表框等的面板中的各按钮与列表框等的作用如下。作用如下。5.2.3相关知识相关知识（1）“添加行为添加行为”按钮按钮：单击此：单击此按钮，将弹出按钮，将弹出“动作动作”快捷菜单，通快捷菜单，通过选择菜单的相应项目，进行插入动过选择菜单的相应项目，进行插入动作的操作。作的操作。（2）“删除行为删除行为”按钮按钮：单击此：单击此按钮将删除选中的行为。按钮将删除选中的行为。（3）

15、“向上移动向上移动”按钮按钮：单击此：单击此按钮，将选中的行为在按钮，将选中的行为在“行为行为”面板面板中向顶部移动。中向顶部移动。（4）“向下移动向下移动”按钮按钮：单击此：单击此按钮，将选中的行为在按钮，将选中的行为在“行为行为”面板面板中向底部移动。中向底部移动。（5）“显示所有事件显示所有事件”按钮按钮：单：单击此按钮后，在击此按钮后，在“行为行为”面板中将显面板中将显示出此对象所能使用的所有事件，如示出此对象所能使用的所有事件，如图图5-2-4所示。所示。图图5-2-4 “显示所有事件显示所有事件”的的“行为行为”面板面板（6）“显示设置事件显示设置事件”按钮按钮：单：单击此按钮后，

16、在击此按钮后，在“行为行为”面板中只显面板中只显示已经使用的事件，如图示已经使用的事件，如图5-2-2所示。所示。（1）如果要更改系统默认的事件，）如果要更改系统默认的事件，可以单击可以单击“事件事件”栏中默认的事件名栏中默认的事件名称右边的称右边的按钮，弹出事件名称菜按钮，弹出事件名称菜单。菜单中列出了该对象可以使用的单。菜单中列出了该对象可以使用的所有事件。所有事件。（2）各个事件所能作用的对象与它）各个事件所能作用的对象与它的作用如表的作用如表5-2-1所示。所示。2选择事件选择事件序号序号事事 件件 名名 称称事件可以作用的事件可以作用的对对象象事件的作用事件的作用1 1onAbort

17、onAbort图图像、像、页页面等面等中断中断对对象象载载入操作入操作时时2 2onAfterUpdateonAfterUpdate图图像、像、页页面等面等对对象更新之后象更新之后3 3onBeforeUpdateonBeforeUpdate 图图像、像、页页面等面等对对象更新之前象更新之前4 4onFocusonFocus按按钮钮、链链接和文接和文本框等本框等当前当前对对象得到象得到输输入焦点入焦点时时5 5onBluronBlur按按钮钮、链链接和文接和文本框等本框等焦点从当前焦点从当前对对象移开象移开时时6 6onClickonClick所有所有对对象象单击对单击对象象时时表表5-2-1

18、事件名称菜单中各个事件所能作用的对象与它的作用事件名称菜单中各个事件所能作用的对象与它的作用序号序号事事 件件 名名 称称事件可以作用的事件可以作用的对对象象事件的作用事件的作用7 7onDblClickonDblClick所有所有对对象象双双击对击对象象时时8 8onErroronError图图像、像、页页面等面等载载入入图图像等中像等中间产间产生生错误时错误时9 9onHelponHelp图图像等像等调调用帮助用帮助时时1010onLoadonLoad图图像、像、页页面等面等载载入入对对象象时时1111onMouseDownonMouseDown链链接接图图像和文字等像和文字等在在热热字或

19、字或图图像像处处按下鼠按下鼠标标左左键时键时1212onMouseUponMouseUp链链接接图图像和文字等像和文字等在在热热字或字或图图像像处处鼠鼠标标左左键弹键弹起起时时1313onMouseOveronMouseOver链链接接图图像和文字等像和文字等鼠鼠标标指指针针移入移入热热字或字或图图像区域像区域时时1414onMouseOutonMouseOut链链接接图图像和文字等像和文字等鼠鼠标标指指针针移出移出热热字或字或图图像区域像区域时时1515onMouseMoveonMouseMove链链接接图图像和文字等像和文字等鼠鼠标标指指针针在在热热字或字或图图像上移像上移动时动时1616

20、onReadyStateChaonReadyStateChangenge图图像等像等对对象状象状态态改改变时变时续表续表 1717onKeyDownonKeyDown链链接接图图像和文字等像和文字等当焦点在当焦点在对对象上，按象上，按键处键处于按下于按下状状态时态时1818onKeyPressonKeyPress链链接接图图像和文字等像和文字等当焦点在当焦点在对对象上，按象上，按键键按下按下时时1919onKeyUponKeyUp链链接接图图像和文字等像和文字等当焦点在当焦点在对对象上，按象上，按键键抬起抬起时时2020onSubmitonSubmit表表单单等等表表单单提交提交时时2121o

21、nResetonReset表表单单等等表表单单重置重置时时2222onSelectonSelect文字段落、文字段落、选择选择框等框等选选定文字段落或定文字段落或选择选择框内某框内某项时项时2323onUnloadonUnload主主页页面等面等当离开此当离开此页时页时2424onResizeonResize主窗口、主窗口、帧帧窗口等窗口等当当浏览浏览器内的窗口大小改器内的窗口大小改变时变时2525onScrollonScroll主窗口、主窗口、帧帧窗口、多窗口、多行行输输入文本框等入文本框等当拖曳当拖曳浏览浏览器窗口的器窗口的滚动滚动条条时时2626onRowEnteronRowEnterS

22、hockwaveShockwave等等动动画画载载入入时时2727onRowExitonRowExitShockwaveShockwave等等动动画卸画卸载时载时续表续表（3）如果出现带括号的事件，则该）如果出现带括号的事件，则该事件是链接对象的，使用它们时，系事件是链接对象的，使用它们时，系统会自动在行为控制器下拉列表框内统会自动在行为控制器下拉列表框内显示的事件名称前面增加一个显示的事件名称前面增加一个“#”号，表示空链接。号，表示空链接。（4）其他操作。）其他操作。选中行为控制器列表框内的某一个行选中行为控制器列表框内的某一个行为项（即动作和事件）时，再单击为项（即动作和事件）时，再单击

23、按按钮，即可删除选中的行为项。钮，即可删除选中的行为项。选中行为项后，单击选中行为项后，单击按钮，可以使按钮，可以使选中的行为执行次序提前；单击选中行为选中的行为执行次序提前；单击选中行为项后，单击项后，单击按钮，可以使选中的行为执按钮，可以使选中的行为执行次序下降。行次序下降。在页面内插入在页面内插入Shockwave或或Flash影像影像的情况下，选择该动作名称后，会弹出的情况下，选择该动作名称后，会弹出“控制控制Shockwave或或Flash”对话框，如图对话框，如图5-2-3所示。所示。（1）“影片影片”下拉列表框：用来选下拉列表框：用来选择择Shockwave或或Flash影像的名

24、字。影像的名字。3控制控制Shockwave或或Flash（2）“操作操作”栏：该栏有栏：该栏有4个单选项，个单选项，各选项的含义如下。各选项的含义如下。“播放播放”：使指定的：使指定的Flash或或Shockwave播放。播放。“停止停止”：使指定的：使指定的Flash或或Shockwave停止。停止。“后退后退”：使指定的：使指定的Flash或或Shockwave回到第一帧并开始播放。回到第一帧并开始播放。“前往帧前往帧”：选择该选项后，在后面的：选择该选项后，在后面的“前往帧前往帧”文本框中输入一个数值，即可文本框中输入一个数值，即可将网页中的将网页中的Flash或或Shockwave转

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

26、销之游戏页页”网页网页图图5-3-1 “产品促销之游戏页产品促销之游戏页”网页的显示效果网页的显示效果拼图游戏是利用层和行为制作的一个拼图游戏是利用层和行为制作的一个非常有意思的网页实例。利用非常有意思的网页实例。利用“行为行为”中中的的“拖曳层拖曳层”动作，可以使层脱离位置的动作，可以使层脱离位置的限制，随意在网页中进行移动，而靠齐文限制，随意在网页中进行移动，而靠齐文本框设置可以使层在接近单元格的时候自本框设置可以使层在接近单元格的时候自动对齐，使游戏时的操作更简单。动对齐，使游戏时的操作更简单。在网页中添加音乐后，可以增加游戏在网页中添加音乐后，可以增加游戏的可玩性，提高浏览者对该网页的

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

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

29、在页面内任意移动。选择，层可以在页面内任意移动。选择“限制限制”后，在其右边会增加后，在其右边会增加4个文本框，用来输个文本框，用来输入上、下、左和右的数字，形成层移动的入上、下、左和右的数字，形成层移动的限制区域。限制区域。“放下目标放下目标”栏：在栏：在“左左”和和“上上”文本文本框内输入数据（相对于浏览器的左上角），框内输入数据（相对于浏览器的左上角），以确定拖曳层移动的目标位置。单击以确定拖曳层移动的目标位置。单击“取取得目前位置得目前位置”按钮，可以将选定层的当前按钮，可以将选定层的当前位置数值自动填入上述两个文本框内。位置数值自动填入上述两个文本框内。“靠齐距离靠齐距离”文本框：输

30、入一个数据，文本框：输入一个数据，当层移动到的位置与目标位置小于该数据当层移动到的位置与目标位置小于该数据时，层会自动定位到目标位置。否则层将时，层会自动定位到目标位置。否则层将移回原位置。可见，该文本框内的数值越移回原位置。可见，该文本框内的数值越大，越容易将层拖曳到目标位置。大，越容易将层拖曳到目标位置。（2）选择）选择“高级高级”标签后的标签后的“拖动拖动层层”对话框如图对话框如图5-3-5所示。该对话框所示。该对话框内各选项的作用如下。内各选项的作用如下。“拖曳控制点拖曳控制点”下拉列表框：用来选择下拉列表框：用来选择单击后拖曳的层的区域。选择单击后拖曳的层的区域。选择“整个层整个层”

31、，可以拖曳层的任何地方；选择，可以拖曳层的任何地方；选择“层内区层内区域域”后，会在其右边出现四个文本框，用后，会在其右边出现四个文本框，用来输入左、上、宽和高的数据，用以形成来输入左、上、宽和高的数据，用以形成层的限制的区域。层的限制的区域。图图5-3-5 “拖动层拖动层”（高级）对话框（高级）对话框“拖曳时拖曳时”栏：选中栏：选中“将层移至最前，将层移至最前，然后然后”复选框后，表示拖曳层在最上方显复选框后，表示拖曳层在最上方显示。拖曳层后，层的显示顺序由其右边的示。拖曳层后，层的显示顺序由其右边的列表框中的选项来决定。选择列表框中的选项来决定。选择“留在最上留在最上方方”选项后，层在顶部

32、显示；选择选项后，层在顶部显示；选择“恢复恢复Z轴轴”选项后，可恢复层的原来显示级别。选项后，可恢复层的原来显示级别。“呼叫呼叫JavaScript”文本框：输入一个文本框：输入一个JavaScript函数，决定了拖曳层时重复执行函数，决定了拖曳层时重复执行的的JavaScript函数。函数。“放下时，呼叫放下时，呼叫JavaScript”文本框：输文本框：输入一个入一个JavaScript函数，决定了拖曳层放置函数，决定了拖曳层放置到目标处后执行的到目标处后执行的JavaScript函数。函数。“只有在靠齐时只有在靠齐时”复选框：确定是否将层复选框：确定是否将层拖曳到目标位置后才执行拖曳到目标位置后才执行JavaScript函数。函数。单击该动作名称，弹出单击该动作名称，弹出“播放声音播放声音”对话框，如图对话框，如图5-3-3所示。在所示。在“播放声音播放声音”文本框内输入声音文件的名字，或者单击文本框内输入声音文件的名字，或者单击“浏览浏览”按钮后选择声音文件。再单击按钮后选择声音文件。再单击“确定确定”按钮，即可完成动作设置，在网页按钮，即可完成动作设置，在网页中插入一段音乐。中插入一段音乐。3播放声音播放声音