实验4 行为与时间轴的实验.docx

实验4 行为与时间轴的实验.docx

《实验4 行为与时间轴的实验.docx》由会员分享，可在线阅读，更多相关《实验4 行为与时间轴的实验.docx（22页珍藏版）》请在冰豆网上搜索。

实验4行为与时间轴的实验

实验4行为与时间轴的实验

1、实验的目的与要求

（1）掌握各种动作和事件的使用方法。

（2）掌握创建和编辑时间轴动画的方法。

（3）掌握用多条时间轴管理多个动画的方法。

（4）熟悉行为和时间轴的综合应用的方法。

2、实验的操作内容

1）行为的应用

（1）创建符合下列要求的网页文件exe4-1.html，设置网页背景图像为bg0006.jpg，并设置其他必需的网页属性后，将网页保存在本地站点Mysite中。

①在网页合适的位置插入一个层，层中插入img文件夹中的图像文件bird.jpg。

为该层添加行为，在响应事件onMouseMove时触发【拖动层】动作。

按F12键浏览网页，用鼠标拖动图像观察效果。

②为该层添加行为，在响应事件onClick（单击）时触发【播放声音】动作，播放wav音乐Applause.wav。

③给网页文件exe4-1.html添加行为，在响应事件onLoad时触发【设置状态条文本】动作，此时在状态栏中显示“欢迎访问本网站”的信息。

再给网页文件添加行为，在响应事件onLoad是触发【弹出信息】动作。

此行为的功能是在装载网页时，系统弹出的窗口中显示“可用鼠标拖动图像！

”的信息。

（2）创建符合下列要求的网页文件exe4-2.html，设置网页背景图像bg0052.gif，并设置其他必要的网页属性后，将网页保存在本地站点Mysite中。

①网页中绘制800×600像素的布局表格，在布局表格中绘制4个104×90像素的布局单元格。

在4个布局单元格中插入鼠标经过图像，插入的原始图像文件为img文件夹中camps1.jpg、camps2.jpg、camps3.jpg、camps4.jpg,鼠标经过图像文件为该文件夹中camp1.jpg、camp2.jpg、camp3.jpg、camp4.jpg，如图4-1所示。

图4-1网页exe4-2.html示意图一图4-2网页exe4-2.html示意图二

③预览网页后，保存网页。

（3）创建网页文件exe4-3.html，设置网页背景图像bg0010.gif，并设置其他必需的网页属性后，将网页保存在本地站点Mysite中。

①在网页合适的位置插入一个1行2列的两个按钮，两个按钮分别使用img文件夹中的图像play.jpg（播放）和stop.jpg（停止）按钮。

在网页中插入swf文件夹中的Flash文件plane.swf，如图4-3所示。

图4-3带控制按钮的Flash网页示意图

②为按钮添加行为，使网页具有单击图像play.jpg按钮时，播放Flash动画。

单击图像stop.jpg按钮时，停止Flash动画播放。

③预览网页，试单击按钮，控制Flash动画播放后保存网页。

（4）创建网页文件exe4-4.html，设置网页背景图像bg0017.jpg，并设置其他必需的网页属性后，将网页保存在本地站点Mysite中。

①在网页中绘制4个层Layer1、Layer2、Layer3、Layer4，在它们其中分别插入img文件夹中campus16.jpg图像用Fireworks分割后的4个部分图像，如图4-4所示。

图4-4拼图游戏示意图

②为每个层添加拖动层行为，制作一个简单的拼图游戏。

③预览网页，拖动几个小图像，完成拼图后保存网页。

（5）创建网页文件exe4-5.html，设置网页背景图像bg0017.jpg，并设置其他必需的网页属性后，将网页保存在本地站点Mysite中。

①利用行为技术制作折叠下拉菜单，单击主菜单某按钮时，展开它的下拉菜单，双击某按钮时，折叠下拉菜单，如图4-5所示。

图4-4折叠下拉菜单示意图

②单击下拉菜单的某按钮时，完成超级链接，被链接的网页自定。

③预览网页后，将网页文件以exe4-5.html为名保存在Mysite中。

（6）打开网页文件exe2-6.html，按下列要求添加行为。

①给网页左侧第1个鼠标经过图像添加行为，双击该图像，停止页面底部的Flash文件fgl.swf播放，单击该图像，开始播放页面底部的Flash文件fgl.swf。

②给网页左侧第2个鼠标经过图像添加超链接，单击此图像时链接网页文件roll.Html

③给网页左侧第3个鼠标经过图像添加超链接，单击此图像时链接到文件literature.html的锚点“wl”上。

4给网页左侧第4个鼠标经过的图像添加行为：

当鼠标放在该图像时，开始播放网页中间的Flash文件fg3.swf;当鼠标从该图像上移开，停止播放网页中间的Flash文件fg3.swf。

5浏览网页后，将网页文件以exe4-6.html为名保存在Mysite中。

（7）打开网页文件exe3-3.html,按以下要求添加行为。

①对有框架网页right.html稍作修改。

在插入frame.gif的位置，删除图像文件pl.jpg。

然后，分别剧中插入大小为269*202像素的两个层Layer1、Layer2，并将两个大小一致的层叠放在一起。

在两个层中分别插入photo文件夹内的图像文件pl.jpg和p8.jpg。

②给网页左框架中第1个鼠标经过图像添加行为。

当鼠标指向该图像时显示层Layer1,此时可以看到图像文件pl.jpg；当鼠标从该图像上移开时，隐藏层Layer1。

单机网页左侧第1个鼠标经过的图像，在主框架中显示被链接的网站相册文件indexl.html。

③给网页左框架中第2个鼠标经过图像添加行为。

当鼠标指向该图像时显示层Layer2,此时可以看到图像文件p8.jpg；当鼠标从该图像上移开时，隐藏层Layer2。

单机网页左侧第2个鼠标经过的图像，在新的浏览窗口中显示被链接的网页。

被链接的对象为literature.html文件中的锚点w1。

④给网页左框架中第3个鼠标经过图像添加行为.双击该图像，停止播放底部框架页面的Flash文件camp.swf,单击该图像，开始播放底部框架页面的Flash文件camp.swf。

⑤给网页左框架中第4个鼠标经过图像添加超链接。

单击该图像，启动有假发送程序，E-mail地址为读者本人的邮箱地址。

⑥网页被浏览时，在浏览器的状态栏中显示文字“欢迎浏览本网页！

”。

⑦预览网页后，将网页文件以exe4-7.html为名保存在Mysite中。

2）时间轴动画的制作

（1）创建网页文件exe4-8.html，设置网页背景图像bg0006.jpg,并设置其他必须的网页属性后，将网页保存在本地网点Mysite中。

1在网页合适的位置绘制4个层，在其中分别插入img文件夹中的图像文件campl.jpg、camp2.jpg、camp3.jpg、camp4.jpg，并将这4个层叠在一起。

2用时间抽控制层的显示次序，每过半秒钟显示一幅层中的图像。

一个循环一次显示这4幅图像，循环5次后停止。

3保存文件后，预览页面观察效果。

（2）创建网页文件exe4-9.html,设置网页背景图像bg0006.jpg,并设置其他必须的网页属性后，将网页保存在本地站点Mysite中。

1在网页合适的位置插入一个层，层中插入img文件夹中的图像文件email.gif。

创建时间抽动画，动画运动轨迹为一条水平直线，并设置每秒播放20帧，自动循环播放，动画条长度为50帧，预览页面观察效果。

2住题①时间抽动画条的第10、20、30、40、50帧插入关键帧，然后用鼠标拖动该层，改变关键帧的动画轨迹，即动画轨迹由原来直线轨迹变为波浪线轨迹，预览页面效果。

3在题②时间轴动画条的第10到20帧和第30到40帧隐藏层。

在第5帧插入关键帧，并为该帧添加行为，在响应时间onFrame5（即动画运行到第5帧时）触发播放声音的动作，播放wav声音Appluase.wav，预览页面观察效果。

4在网页的合适位置插入一个层，层中插入鼠标经过的图像，原始图像和鼠标经过图像分别为文件夹img中的Play.jpg和Stop.jpg。

网页具有下列功能。

•当鼠标单击Play按钮时，此按钮翻转成stop按钮，此时时间轴动画开始沿轨迹运动。

•当鼠标单击stop按钮时，stop按钮转换成play按钮，时间轴动画停止运动。

5预览网页后，以exe4-9.html为名将文件保存在文件夹Mysite中。

（3）打开网页文件exe4-9.html，按下列要求修改网页，并将修改后的网页以exe4-10.html为名保存在本地站点Mysite中。

1在网页的右边合适位置插入一个层，层中插入img文件夹中图像文件bird.gif。

2在网页中再增加一条时间轴动画条，控制新插入图像的运动轨迹，如图4-6所示，预览网页后，以exe4-10.html为名保存文件。

（4）创建符合下列要求的网页文件exe4-11.html，设置网页背景图像bg0006.jpg，并设置其他必需的网页属性后，将网页保存在本地站点Mysite中。

1绘制800*600像素的布局表格，并在合适的位置绘制520*220像素的布局单元格。

在布局单元格中，插入img文件夹中的圆角矩形框的图像文件bg.gif，如图4-7所示。

2创建层Layer1和Layer2，设置layer2为Layer1的子层，将Layer1覆盖在圆角矩形框的图像文件中，并将book.doc中文字复制到Layer2.

3利用层和时间轴技术制作滚动文字网页，滚动文字在圆角矩形的框内由下到上徐徐滚动。

4预览网页后，以exe4-11.html为名保存文件。

3、实验的参考步骤

1）行为的应用

（1）按题目要求创建网页文件exe4-1.html，操作步骤如下。

1将本章素材文件夹中的素材复制到文件夹Mysite中，并将其设为本地站点。

2新建一个页面，选择【修改】|【页面属性】命令，在【页面属性】对话框中设置背景图像为bg0006.jpg，将【左边距】、【右边距】、【上边距】、【下边距】分别设置为0，其他参数默认，然后单击【确定】按钮确认，并将网页以exe4-1.html为名保存在Mysite文件夹中。

3在网页合适的位置插入一个层，层中插入img文件夹中的如下文件bird.jpg，调整层的大小。

4选择【窗口】|【行为】命令，打开【行为】面板，在层选种状态下，单击【添加行为】按钮，在【动作】菜单中选择【拖动层】命令，在【事件】菜单中选择onMouseMove命令（可先选择【显示事件】|【IE6.0】将事件全部显示出来），使得在浏览该页面时，能随意拖动插入图片bird.jpg的层。

5单击【添加行为】按钮，选择【播放声音】动作，在弹出的【播放声音】对话框中输入文件夹music中的声音文件Appluase.wav并单击【确定】按钮确认，在【事件】菜单中选择onClick命令。

6单击【添加行为】按钮，在【动作】菜单中选择【设置文本】|【设置状态栏文本】命令，在弹出的【设置状态栏文本】对话框中输入文字“欢迎访问本网站”，并单击【确定】按钮确认，在【事件】菜单中选择onLoad命令（不选中网页中对象时添加文本行为）。

7单击【添加行为】按钮，在【动作】菜单中选择【弹出信息】命令，在【弹出信息】对话框中输入“可用鼠标拖动图像！

”。

并单击【确定】按钮确认，在【事件】菜单中选择onLoad命令（不选中网页中对象时添加本行为）。

8保存当前网页后，按F12键浏览该页面。

（2）按题目要求创建网页文件exe4-2.html，操作步骤如下。

1创建网页文件exe4-2.html，选择【修改】|【页面属性】命令，设置网页背景图像为bg0052.gif。

2单击【插入】栏的【布局】选项中的【布局模式】按钮，将网页编辑方式切换成【布局试图】模式。

单击【布局模式】按钮，在网页中绘制800*600像素的布局表格。

再单击【布局单元格】按钮，绘制4个104*90像素的布局单元格，图4-1所示。

3选择【插入】|【图像对象】|【鼠标经过图像】命令，在图4-1所示的4个布局单元格中插入img文件夹中的原始图像文件camps1.jpg、camps2.jpg、camps3.jpg、camps4.jpg和鼠标经过图像文件camp1.jpg、camp2.jpg、camp3.jpg、camp4.jpg。

4分别选中4个鼠标经过图像，在【属性】面板的【替代】文本框中，输入【鼠标经过图像】的替代文字“东风楼”、“小白楼”、“交谊楼”、“办公楼”。

5在网页正中间的单元格插入层Layer1、Layer2、Layer3、Layer4，并在4个层中分别插入img文件夹中的文件m1.jpg、m2.jpg、m3.jpg、m4.jpg。

将4个层叠放在布局单元格正中间的位置，如图4-1所示。

按F12键打开【层】面板，设置4个层为不可见（单击“可视标记——睁眼”改为“不可视标记——闭眼”）。

6选择【窗口】|【行为】命令，打开【行为】面板，选中图像camps3.jpg（右边的鼠标经过图像），单击按钮，选择【显示-隐藏层】命令，隐藏带有说明文字的4个层，如图4-8所示。

在【事件】菜单中选择onMouseOut命令，表示当鼠标从鼠标经过图像上移开时，正中间的单元格中的4个层都隐藏起来，其中的说明文字图像都不显示。

图4-8

7再给该图添加行为，在【动作】菜单中选择【显示-隐藏层】命令，显示带有该图说明文字的层Layer3，隐藏其他3个层。

在【事件】菜单中选择onMouseOver命令，如图4-9所示。

8按F12键浏览网页，用鼠标指向右边的鼠标经过图像camps3.jpg，出现如图4-2

图4-9

所示的页面，然后再移开鼠标，观察变化的结果，并保存网页文件。

用同样的方法，设置其他3个层的属性，操作略。

9保存当前网页后，按F12键浏览该页面。

（3）按题目要求创建网页文件exe4-3.html，操作步骤如下。

①创建网页文件exe4-3.html，设置网页背景图像为bg0010.gif，并设置其他必须的网页属性后吗，将网页保存在本页站点Mysite中。

②选择【插入】【表格】命了，在网页合适的位置插入1行3列的表格，表格的每个单元位100×30像素。

单击【插入】栏的【常用】选项中的像素【图像】按钮，在表格中分别插入ing文件夹中的图像play.jpg（停止）按钮。

3在网页适合的位置插入一个550×400像素的层（插入层是为了便于调整flash位置），单击【插入】栏中的【常用】选项中的【Flash】按钮，在层中插入swf文件夹中的flash文件plane.swf。

4选中flash文件，在【属性】面板中设置flash文件的名字位plane，并将【循环】和【自动播放】两个复选框设置成不选中状态。

5选中按钮图像play.jpg，在【行为】面板中单击+按钮，为选中的按钮图像添加行为。

在【动作】菜单中选择【控制Shockwave或Flash】命令，在弹出的【控制Shockwave或Flash】对话框中设置【操作】的单选按钮为【播放】，如图4-10所示。

在【事件】菜单栏中选择onClick命令。

这个行为表示单用鼠标单击“play”按钮时，开始播放名为plan的Flash动画。

图4-10

用同样的方法可以设置“stop”按钮的【停止】功能。

6预览网页后，以exe4-3.html为名将文件保存在文件夹Mysite中。

（4）按题目要求创建网页文件exe4-4.html,操作步骤如下。

①创建网页文件exe4-4.html,设置网页背景图像bg0017.jpg，并设置其他必需的网页属性后，将网页保存在本地站点site中。

②在网页中插入4个层Layer1、Layer2、Layer3、Layer4中，分别插入campus16.jpg图像分割后的4个部分，该图像可在Fireworks用切片的方法分割或直接用ing文件夹中分割好的图像。

③选择【窗口】|【行为】命令，打开【行为】面板，在层末选中状态下，单击+按钮，为层添加行为，在【动作】菜单中选择【拖动层】命令。

在【拖动层】对话框中设置图4-11所示的参数，对话框中参数意义如下。

●在【层】下拉列表中选择要设置行为的层，先选择层Play1。

●在【移动】下拉表框中指定层拖得的类型，【不限制】选项是设置该层可以自由拖动；【限制】选项是设置该层要受到一定的约束。

在本例中希望能用鼠标自由拖动层，故选择【不限制】选项。

●【放下目标】文本框用于设置当前层放置的终点坐标，若有不明确当前层的坐标位置，可单击【取得目前位置】按钮，直接得到当前层的坐标位置数值。

●在【靠齐距离】文本框中输入的是层位置与终点的坐标距离的自动匹配值。

用鼠标移动层时，该层与终点坐标的距离小于指定的数值，层会自动调整到终点的坐标位置。

本例，这个距离被设置为80个像素。

●单击【确定】按钮确认【拖动层】动作的设置，并选择事件onMouseMove。

这个行为表示在响应事件onMouseMove（鼠标移动）时触发【拖动层】的动作。

图4-11

④用同样的方法设置层Layer2、Layer3、Layer4，便可以完成拼图游戏的制作，如图4-5所示。

将文件以exe4-4.html为名保存在Mysite文件夹中。

（5）按题目要求创建网页文件exe4-5.html，操作步骤如下。

制作说明：

主菜单共有5个按钮，每个按钮都有自己的下拉式菜单，单击某个按钮，展开这个按钮的下拉式菜单；双击这个按钮，该按钮的下拉式菜单就折叠起来。

创建6个层，第1个层插入5个按钮（即主菜单），其他5个层分别插入5个按钮被单击后展开的下拉式菜单及主菜单的按钮。

6个层叠放在一起，初始状态这显示插入主菜单按钮的层，其他层设置为不可见。

当主菜单中某个按钮被单击后，只需隐藏主菜单的层，显示插入该按钮下拉式菜单的层即可；当该按钮被双击后，只需隐藏插入该按钮下拉式菜单的层，显示菜单的层即可。

1创建网页文件exe4-5.html，设置网页背景图像bg0017.jpg，并设置其他必需的网页属性后，将网页保存在本地站点Mysite中。

2以制作下拉式菜单“现代文学”为例，如图4-5所示。

创建插入主菜单按钮的层menu。

单击【插入】栏的【布局】选项中的【绘制层】按钮，在网页适合的位置插入1个层，在层的【属性】面板中设置【左】位30像素、【上】位20像素、【宽】为100像素、【高】为125像素，并在【层编号】文本框中输入层名：

menu。

3选择【插入】|【表格】命令，在层menu中插入1个5行1列的表格，表格的每个单元格为120ⅹ35像素。

单击【插入】栏中的【常用】选项中的【图像】按钮，在5个单元格中分别插入文件夹button中的a1.jpg、a2.jpg、…a5.jpg。

4创建插入“现代文学”下拉式菜单按钮的层Layer1，在【属性】面板中设置【左】为30像素、【上】为20像素、【宽】为100像素、【高】为135像素。

选择【插入】|【表格】命令，插入9行一列的表格，每个单元格为120×35像素。

9个单元格分别插入button文件中的a1.jpg、a11.jpg、a13.jpg、a14.jpg、a2.jpg、a3.jog、a4.jpg、a.jpg图像文件。

5选择中层menu中“现代文学”的按钮图像，在【行为】面板中单击+按钮。

为选中的按钮图像添加行为。

在【动作】菜单中选择【显示-隐藏层】命令，在弹出的【显示-隐藏层】对话框中设置显示层Layer，隐藏其他层。

在【事件】菜单中选择onClick命令。

这个行为表示当单击“现代文学”的按钮时，显示该按钮所对应的下拉式菜单（即层Layer的内容）。

6选中层Layer1中“现代文学”的按钮图像，在【行为】面板中单击+按钮，为选中的按钮图像添加行为。

在【动作】菜单中选择【显示-隐藏层】命令，并在弹出的【显示-隐藏层】对话框中设置层menu，隐藏其他层。

在事件菜单中选择onClick命令。

这个行为表示当双击“现代文学”的按钮时吗，显示主菜单（即层menu的内容）。

7将这个两个层叠放在一起，在层面板中设置层Layer1初始状态为不可见。

8用同样的办法为其他按钮添加行为。

9单击下拉菜单的按钮时，完成超级链接，被链接的网友自定。

10预览网友后，网友文件以exe4-5.html为名保存在Mysite中。

（6）按题目要求给网页文件exe2-6.html添加行为，操作步骤如下。

①打开网友文件exe2-6.html，选中页面底部的Flash文件fgl.swf,在【属性】面板中设置Flash文件名为fg1，并将【循环】和【自动播放】两个复选框设置成不选中状态。

1选中网页左侧第一个鼠标经过的图像，在【行为】面板中单击+按钮，为选中的图像添加行为。

在【动作】菜单中选择【控制Shockwave或Flash】命令，在弹出的【控制Shockwave或Flash】对话框中设置【动作】的单选按钮为【播放】。

在【事件】菜单中选择onClick命令。

这个行为表示当单击该图像时，开始播放页面底部的Flash文件fg1.swf。

2再给该图添加行为，在【动作】菜单中选择【控制Shockwave或Flash】命令，在弹出的【控制Shockwave或Flash】对话框中设置【动作】的单击按钮为【停止】。

在【事件】菜单中选择onClick命令。

这个行为表示当双击该图像时，停止页面底部的Flash文件fg1.swf。

3选择网页左侧第2个鼠标经过的图像，在【属性】面板中建立与网页文件roll.html的链接。

4选中网页左侧第3个鼠标经过的图像，在【属性】面板的【链接】文本框中输入html/literature.htm#w1。

5选中网页中间的Flash文件fg3.swf,在【属性】面板中设置flash文件的名字位fg3，并将【循环】和【自动播放】两个复选框设置成不选择状态。

6选中网页左侧第4个鼠标经过图像，在【行为】面板中单击+按钮，为选中的图像添加行为。

在【动作】菜单中选择【控制Shockwave或Flash】命令，在弹出的【控制Shockwave或Flash】对话框中设置【动作】的单选项按钮为【播放】。

在【事件】菜单栏中选择onMouseOver命令。

这个行为表示当鼠标指针放在该图像时，开始播放网页中间的Flash文件fg3.swf。

7选择网页左侧第4个鼠标经过图像，在【行为】面板中单击+按钮，为选择图像添加行为。

在【动作】菜单中选择【控制Shockwave或Flash】命令，在弹出的【控制Shockwave或Flash】对话框中设置【动作】的单击选项按钮为【停止】。

在【事件】菜单中选择onMouseOut命令。

这个行为表示当鼠标从该图像上移开，停止播放网页中间的Flash文件fg3.swf。

8预览网页后，将网页文件以exe4-6.html为名保存在Mysite中。

（7）按题目要求给网页文件以exe3-3.html添加行为，操作步骤如下。

①打开网页文件exe3-3.html,删除右框架网页right.html中的图像文件p1.jpg。

②在图像frame.gif的位置，居中绘制大小为269×202像素的两个层Layer1、Layer2，并将两个大小一致的层叠放在一起，在两个层中分别插入photo文件夹内的图像文件p1jpg和p8.jpg，在【层】面板中设置两个层位不可见。

③选中网页左框架第1个鼠标经过的图像，在【行为】面板中单击+按钮，为选中的图像添加行为。

在【动作】菜单中选择【显示-隐藏层】命令，显示Layer1，隐藏Layer2，在【事件】菜单中选择onMouseOver命令。

再给该添加行为，在【动作】菜单中选择【显示-隐藏层】