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

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

1、实验的目的与要求

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

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

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

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

2、实验的操作内容

1）行为的应用

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

①在网页合适的位置插入一个层，层中插入img文件夹中的图像文件bird.jpg。为该层添加行为，在响应事件onMouseMove时触发【拖动层】动作。按F12键浏览网页，用鼠标拖动图像观察效果。

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

③给网页文件exe4-1.html添加行为，在响应事件onLoad时触发【设置状态条文本】动作，此时在状态栏中显示“欢迎访问本网站”的信息。再给网页文件添加行为，在响应事件onLoad是触发【弹出信息】动作。此行为的功能是在装载网页时，系统弹出的窗口中显示“可用鼠标拖动图像！”的信息。

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

①网页中绘制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，并设置其他必需的网页属性后，将网页保存在本地站点My site中。

①在网页合适的位置插入一个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，并设置其他必需的网页属性后，将网页保存在本地站点My site中。

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

图4-4 拼图游戏示意图

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

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

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

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

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

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

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

（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为名保存在My site中。

（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地址为读者本人的邮箱地址。