第三节：动态翻转图

　动态翻转图和简单翻转图的表现方法大不相同，简单翻转图是在图片的原位置上变换图片，而动态翻转图则可以在其它位置显示出不同的图片，如下所示，当鼠标移到“电脑教育”上，就会显示出我们预设的图片，另外，如果单击“电脑教育”还可以链接到指定的URL。说到这里，大家一定已经猜到这是切割图片（Slice）的衍生功能了。

　　首先新建一个180x80的文件，然后建立如图1的三个文本并将它们全部选中，选取菜单指令“Insert\Slice”，弹出“Fireworks”信息框(如图2)，由于我们需要建立三个分割区块，因此，我们单击“Multiple”按钮，这样我们就建立了三个分割区块（如图1）。

图1 分割区块

图2 Fireworks信息框

　　对应三个切割区域，我们需要编辑三个调换图片，首先我们先来编辑“电脑教育”所需要的调换图片。

　　开启“Frames”面板，新建并选中Frame2，然后使用“文字工具”和“矩形工具”绘制出如图的图片群，选取菜单指令“Modify\Group”将它们群组起来，并适当地调整一下位置，最后执行菜单指令“Insert\Slice”即可。 （如图3）

图3 所要调换的图片

　　如何才能让切割区域和调换图片产生关联呢？这就需要借助“Behaviors”面板的力量了。

　　首先切换至Frame1，选取“电脑教育”，然后单击“Behaviors”面板的添加动作按钮，在弹出的菜单中选择“Swap Image”，弹出“Swap Image”对话框，其中我们需要进行以下操作： （如图4）

图4 Swap Image对话框

　　1. 首先我们需要确定调换图片的来源，在“Show the swapped image from”栏中，我们钩选“Frame No.”，并指定Frame2帧；

　　2. 选取需要的调换图片；

　　3. 钩选“Restore image onMouseOut”选项，这样当鼠标离开“电脑教育”后就会自动关闭调换图片；

　　４. 单击“ok”按钮，在“Behaviors”面板中显示出了Fireworks 3预设的调换图片的打开方式------“onMouseOver”。 （如图5）

图5 Benhaviors浮动面板

　　至此，“电脑教育”的动态翻转图已经设置完毕，我们按下F12来欣赏一下（插入dongfan1.html）。

　　另外，Fireworks 3还为我们提供了其它三种动作变换的方式：onMouseOut、onClick和onLoad，下面我们就来认识一下它们：

　　onMouseOut

　　onMouseOut是指当鼠标先移入感应区内，再移出感应区时才会显示调换图片，不过使用此功能时，我们必须在“Swap Image”对话框中取消钩选“Restore image onMouseOut”选项，否则调换图片将无法显示出来。 (如图6)

图6 Swap Image对话框中的选项

　　话又说回来，一旦我们取消钩选“Restore image onMouseOut”选项，我们就会发现不管鼠标移到何处，调换图片将一直显示着，别担心，Fireworks 3还为我们提供了“Swap Image Restore”，它也将提供四种方式来关闭调换图片。 （如图7）

图7 behaviors浮动面板中的菜单

　　onClick

　　onClick是指当我们感应区内单击鼠标时，调换图片才会显示出来；如果在“Swap Image”对话框中钩选“Restore image onMouseOut”选项，则当鼠标离开感应区后，会自动关闭调换图片。 （如图8）

图8 onClick事件

　　onLoad

　　onLoad是指当图片下载后就会立即显示调换图片，如果我们想要关闭调换图片，只要将鼠标移入再移出感应区即可（条件：必须在“Swap Image”对话框中钩选“Restore image onMouseOut”选项）。

　　前面我们提到了“Swap Image Restore”，它可以将显示中的调换图片运用onMouseOver 、onMouseOut、onClick和onLoad的方式予以关闭；不过当我们在使用这个功能时，一定要在“Swap Image”对话框中取消钩选“Restore image onMouseOut”选项，否则，一旦鼠标离开感应区后，调换图片也会自动关闭的。

　　下面我们就为“电脑教育”添加一个关闭动作：

　　选中“电脑教育”，双击onMouseOver，弹出“Swap Image”对话框，然后我们取消钩选“Restore image onMouseOut”选项，单击“ok”按钮；单击“Behaviors”面板的添加动作按钮，在弹出的菜单中选择“Swap Image Restore”，这时在“Behaviors”面板中出现了Fireworks 3 预设的关闭方式“onMouseOut”，我们单击它右边的下拉按钮，并选择“onClick”，ok，按下F12 ，在浏览器窗口中我们将鼠标移到“电脑教育”上，这时有关教育的产品就呈现在我们的眼前；将鼠标移出“电脑教育”，产品介绍并不消失，但当我们单击“电脑教育”时，产品介绍就会消失。

　　在“Behaviors”面板中还提供了一个显示Message（信息）的功能，这个Message会显示在浏览器下方的状态栏中，如图9所示。

图8 设置状态栏中的文字

　　单击“Behaviors”面板中添加动作按钮，然后从菜单中选择“Set Text of Status Bar”指令，（如图8）弹出“Set Text of Status Bar”对话框，接着在Message框内输入要在状态栏中显示的文字，例如：Gold Human，单击“ok”按钮即可。（如图9）

图8 Set Text of Status Bar对话框

　　新建立的状态栏信息其作用方式为onMouseOver，也就是当鼠标移到感应区后，就会将指定的文字显示在浏览器的状态栏上。

　　如果我们想重新编辑信息文字，只要双击“Set Text of Status Bar”，这样就会显示“Set Text of Status Bar”对话框让我们编辑信息文字；另外，状态栏信息文字的出现方式也可以加以改变，其设定方式和Swap Image一样。首先选取“Set Text of Status Bar”，然后单击下拉按钮，从下拉菜单中选取onMouseOver 、onMouseOut、onClick和onLoad指令即可。