第10章　事件和动作

图像交换
　　事件是浏览生成的消息，指示访问者执行了某种操作，动作是由预先编写的脚本执行特定的任务。当然脚本语言是较为复杂的东西，我们从最简单的作起。
　　首先在页面中导入一幅图片，选中图片，从窗口菜单中调出“行为”面板，也可用“Shift+F3”打开行为面板。如下图所示：
　　
　　其中的“+”号就是添加事件的意思，点击“+”号就弹出下级菜单，从中选择“交换图像”，就弹出交换图像对话框，如下图：
　　
　　在“设定原始档为”右边的空白框中输入你要换的图片目录和名字就可以了。
　　如果你记不清图片名字或怕输入错误，也可点击“浏览”按钮，在弹出的文件选择框中选择你要换的图片。譬如原来导入的图片是“img”目录中的“img2.jpg”，选择交换图片时选择了“img”目录中的“img3.jpg”(如图中所示)，保存网页后，你可以看到网页中原来显示的图片是img2，当你把鼠标放在图片上时就变成了img3 ，鼠标离开后又变成img2 。
　　 　
　　
　　前面我们说过，事件和动作要由预先编写的脚本执行特定的任务，从上一个例子中，大家可能说怎么没有“编写”程序就完成了事件和动作，这是由DW自动生成了程序，现在把上次制作的网页打开代码视图（或者在浏览器中打开看源代码），就可以看到在“head”标签内自动生成了四个函数，这四个函数分别是：
　　function MM_preloadImages() (//预加载图像)
　　function MM_swapImgRestore() (//交换与恢复)
　　function MM_findObj(n, d) (//查找对象)
　　function MM_swapImage() (//交换图像)
　　当然这四个函数内还有很复杂的内容，这些内容要讲起来就要用到太深的编程知识，我们不去管他了，下面我们看图像标签(img)的变化。
　　首先看到在图像标签前被加载了类似超级链接的“a href=.........”代码，当然这里“链接”不是跳转网页，而是链接函数指令的。因为DW自动生成代码只能是一些基本事件，我们要先懂得这些基本语句的意思，才能再设计稍复杂一些的动作。下面分析这代码意义：
　　href="java script:;" //先声明调用java脚本
　　onMouseOver="MM_swapImage('Image1','','img/img3.jpg',1)" //鼠标经过时调用交换图像函数
　　onMouseOut="MM_swapImgRestore()"//鼠标离开后调用恢复交换图像函数
　　其中“Mouse”是鼠标，“Over”表示经过，也就是鼠标指针放到图像上面，“Out”是离开。
　　除以上鼠标两种两种方式外，还有以下几种方式可供选择：
　　“onClick”鼠标单击触发事件；
　　“onDblClick”鼠标双击触发事件；
　　“onMouseDown”鼠标左键按下时触发事件;
　　“onMouseUp”鼠标左键按下再抬起时触发事件。
　　要用这些就得人为地输入了。试打开上次的源文件，把代码改成如下面样：
　　<a href="java script:;" onMouseDown="MM_swapImage('Image1','','img/img3.jpg',1)" onDblClick="MM_swapImgRestore()">
　　这样鼠标放到图片上就不变换了，要按下鼠标键时才换成另一图像，双击鼠标才恢复原来和图像。
　　

鼠标拖曳 　　
　　鼠标拖拽只能拖动“层”运动，所以要实现拖动事件动作应先建立“层”，被拖对象要放在层中。 如本例中，先建立层“Layer1”，然后在该层导入一幅图片。为了还能显示出图片下面的文字，本例中将图片设置为半透明状态（用前面讲过的css样式表中Alpha(Opacity=60)）。 选中图片，打开“行为”面板，拉开“+”号下级菜单，从中选择“拖动层”命令，。弹出对话框如下：
　　
　　图中“移动”选项里面自动出现“不限制”，如果要让图片可以在整个屏幕上运动，就不必改变这个设置，点击“确定”按钮，就完成了。保存文件后，在浏览器打开，就可用鼠标拖着图片满屏幕运动，松开鼠标图片就停在被拖位置。
　　
　　如果要限制图片运动范围，点击“不限制”右边小三角，拉开菜单后选择“限制”,出现如下图所示限制位置输入框，分别在上、下、左、右四个框中输入限制范围。
　　
　　从实验看，设置运动范围并不能完全控制层运动，可能是因为对函数识别的滞后性，拖拉的速度快时有时能拖到定义范围以外，层被拖到范围以外后，就不能再回到原来定义的范围了，一般这个限制范围功能不太常用。
　　定义放下位置：
　　
　　如图中“放下目标”框中，可分别输入左、上边界距离像素数，“靠近距离”里输入像素数，当鼠标放下时，图片与目标位置的距离小于靠近距离时，图片会自动停留在目标位置。 如下页面中“放下目标”为左300、上200，为了看着明显，我在该位置画了个淡绿色方框，“靠近距离”里输入100，如果鼠标把图片拖到距离绿方框100像素以内，松开鼠标后图片会自动与绿框重叠。
　　
　　拖动对话框中有高级选项标签，点击“高级”后对话框如下图：
　　
　　下面把其中“拖曳时将层移至最前，然后”这一选项的功能说一下。 如果建立两个以上的层，以前说过层有“z轴”设置，就是说“z轴”值大的可以庶盖“z轴”值小的层，那么如果有两个以上可拖动的层，鼠标拖下层的图片被上层的遮盖后就看不到了。如果选择了“将层移到最前”一项，就不再管原来的层Z轴值大小，只要是鼠标拖动哪一层，该层就在最上层。
　　“然后”右面框中还有两项选择，一是“恢复z轴”就是停止拖后还按原来z轴值显示，一是“留在最上方”，就是被拖动层放下后还在最上层。下例中就是两个可拖动的层都选择了“拖曳时将层移至最前，然后留在最上方”，你试将图片拖到一起就可看到，你拖动哪能个图片，哪个图片就在最上层。
　　

弹出信息框 　　
　　弹出信息框在网站也是很常见的。不过一般常见的是自动弹出，能否成为交互方式，当鼠标指向某处或者点出某处触发弹出窗口，下面就是指向触发的例子。
　　
　　如上例中，选中图片，打开行为面板。点击“+”号添加事件，在弹出下级菜单中选择“弹出信息”，在出现的对话框中输入你所需要的文字即可。这样浏览者鼠标移动到图片上时就会弹出一个小窗口，显示你所输入的文字。
　　有人说，怎么只有选择图片可以添加事件，我想让鼠标指向某段文字时触发事件，可是选中一段文字后，添加事件菜单中都是“暗”色不能用啊。那么我们打开源代码看看，在图片的代码标签<img……>前面竟然被添加了个<a href="java script:; ……>，以前大家知道，加“a”是超级链接标记，图片上竟然加了超级链接，可是链接地址是什么呢，"java script:;"只是一种语言脚本，并不是地址呀，我们把这叫做“虚拟链接”。就是实际跳不到任何地方的链接。
　　由些我们想到，给文字加上“虚拟链接”试试。选中一段文字，在下面“属性”面板中的“链接”框中也仿照输入个java script:;然后选中文字，再打开行为面板，点击“+”号添加事件，哈哈，果然菜单都变成亮的了，这样也可以为文字添加事件了。

跳转菜单 　
　　在网页链接中，有很多页面为了外观的美观或为了节约页面空间，把链接标志作成隐藏状态，用鼠标点击标记时就会弹出菜单。这个对于把多个链接集中在一个表单中的方法，也可在DW中直接实现。
　　选择“插入——表单对象——跳转菜单”命令，弹出对话框如下图所示：
　　
　　在“文本”项框中显示“unnamed1”(未命名的)字样，可以重新输入菜单名字。注意第一次建立的是菜单名字，不是链接地址，所以在下一行“链接”框中保持空白。
　　然后点击“＋”号输入要跳转的网页名字，再在下一行“链接”框中输入网页地址。输入一个地址后，再点击“＋”号输入下一个地址。输入完点击“确定”按钮即可。如我输入完成后如下图：
　　
　　以后如果要对原来编辑的跳转菜单修改，在视图中先选中菜单名字，打开“行为”面板，如下图：
　　 可看到里面有跳转菜单事件，双击该项即可重新打开菜单，可按“＋”号添加，按“-”号删除某一项，也可改变某一项链接地址等。　　
　　 　　

Flash动画播放控制 　
　　在制作Flash动画时都可以制作控制按钮，以便让浏览者可以方便地播放、暂停或播放动画中的某一部分。可是如果制作动画时没有按钮或者动画不是自己制作而是调用别的动画放到自己的网页中，怎么能控制播放呢，在DW中还可以用网页中的按钮控制Flash动画的播放。
　　网页中的按钮可以是用Flash制作的按钮，也可以是普通图片甚至可以用文字。但如果用文字作按钮的话，和前面讲的一样，要先给文字加上个“空链接”才能设置事件动作。
　　本例中使用一个歌曲动画“小城故事”，我们先将动画导入，选中该动画在属性面板中给动画输入名字“xc”，当然你可以用任意字母作名字，但不要用汉字。
　　如果用Flash按钮或图片作为按钮，直接选中图片，打开“事件”面板就行了，下面我们叙述用文字作按钮有方法。首先在适当位置打好字，然后选中要设置动作的字（下以“暂停”为例），在文字处于被选中状态下，打开“属性”面板，在“链接”栏中输入
　　“java script:;”。然后打开“事件”面板，点击“+”号，从中选择“控制Shockwave或Flash”项，弹出对话框如下图所示：
　　
　　在“影片”框中自动出现了“影片"xc"”，因为现在只有这一个Flash动画，如果页中有多个，可以拉开该选择框，从中选择你要控制的动画名字。注意是你在属性面板中输入的名字，不是文件本身的名字。
　　下面有四个选项“播放、停止、倒带、前往帧”。“停止”就是暂停，“播放”就是从暂停处继续播放，“倒带”就是倒回到影片开始的第一帧，“前往帧”右边有个框可以输入数字，如果选择该项，就可跳转到相应帧。现在我们对“暂停”按钮设置动作，看以看到上图中选择了“停止”项。
　　其他各项设置方法相同，就不再叙述。
　　设置好后，我们打开代码视图，可以看到“暂停”按钮上有如下代码：
　　<a href="java script:;" onMouseOver="MM_controlShockwave('xc','','StopPlay')">
　　从以前的叙述中知道“onMouseOver”是鼠标指向事件，如果需要，你也可以改成其他代码。如下例中，动画右边的“一、二、三……”将动作由“onMouseOver”改成了“onMouseDown”，需要按下鼠标左键时才起作用。其中每个字对应于歌词中每一句的起始帧数，点击后即跳转到相应帧数并停止，然后鼠标再移动到“继续”上就从该位置开始播放。在动画下面鼠标指向“暂停”和“继续”上即可起作用。