用 Fireworks 2 制作翻滚效果

　 　 尽管你根本不用考虑 JavaScript 程序代码的编写，你还是应该对后台发生的事件有一点了解，掌握翻滚效果是如何运作的：当鼠标经过 Web 页面中某一个图形时，它会自动被另外一副预定的图形替换。所以，虽然制作软件有所不同，方法也有区别，但是基本的原理是一致的。不管在哪个软件中制作翻滚效果，有三样东西不可缺少：原始图形、替换图形、控制图形切换的 JavaScript 动作。

　 　 1. 在画布上画一个圆。 从 File 菜单选择 New ，定义画布尺寸（ Canvas Size ）为 370 象素（ Pixels ）宽， 200 象素高，选择数值为 #ffcc00 的黄色作为画布的颜色。使用椭圆（ ellipse ）工具，在画布上拖出一个圆形，注意在拖动的同时按下 Shift 键。马上给这个圆上色，单击工具箱下部的 Fill Color Well （填充颜色井），从弹出的色盘中选择数值为 #0066cc 的蓝颜色作为填充色。
再来定义圆的轮廓线。打开 Stroke （笔划）面板，在面板顶部的 Stroke Category （笔划种类）菜单中选择 Basic ，使用 Soft Line （软线）作为笔划的形式，选择数值为 #003399 的深蓝色作为圆的轮廓颜色，定义笔划宽度为 2 个像素。点击面板底部的 Apply （应用）按钮。

没找到 Stroke 面板？ 别着急，你可以从 Window>Stroke 直接打开它。另外，如果你想在修改参数的同时立刻看到应用的效果，可以勾选面板左下角的“ Auto-apply Changes （自动应用修改）”选框。

　 　 2. 添加图形和文字。 Fireworks 本身带有许多图形处理功能，既可以绘制无极缩放的矢量图，也能够处理扫描的位图。你还可以从其他的应用程序中导入图形或图像，诸如 Photoshop 、 Freehand 、 Illustrator 等。
要导入已经设计好的图形，你可以直接把图形从创建它的应用程序窗口，拖放到 Fireworks 的画布窗口中。在此，我们从 Illustrator 中拖入一个设计好的路径图，然后在 Fireworks 的画布窗口中调整图形的大小，使它刚好被蓝色的圆包围。最后输入图标下的文字。
导入图形文件 有三种方式，其中最好的方法是拷贝和粘贴，如果创建图形的程序和 Fireworks 都同时打开了的话，你可以从其它程序拷贝图形，然后粘贴到 Fireworks 中来。最简单的导入方法则是前面介绍的拖放，这种方法唯一麻烦的事情是，你可能不得不先调整两个程序主窗口的大小，以便你能够同时看到它们。另外，你也可以从 File 菜单中选择 Import 命令，直接从硬盘中导入图形， Fireworks 支持大多数流行的图形文件格式。

　 　 重复步骤一和步骤二，绘制另外两个导航图标。

　 　 3. 复制 Frame 。 这个步骤将会创建一个新的帧，这一帧中的图片只有当鼠标的经过其上方时，才会显示出来。
打开 Frame 面板，按面板右上角的 按钮，从弹出菜单中选择 Duplicate Frame （复制帧）命令。注意在弹出的对话窗口中选择 After current frame 选项，以使复制的帧自动排列在原始帧下面，成为 Frame2 。
用选取工具选择第一个圆，按住 Shift 键，再选择下方的文字。马上从“填充颜色井”中选取一种接近桔红（ #ff6600 ）的颜色进行填充。
再用同样的方法去改变另外两个导航图标的颜色。

注意： 做上述操作时，应该确保新创建的帧 Frame2 处于被选定状态，才不会引起不必要的混乱。

你还可以尝试着利用 Fireworks 中内置的丰富样式（ Style ），来增进变化的效果。不过，在这个范例中，仅仅是改变一下图标的颜色就足以让人感到满意了。

　 　 4. 切割图片。 从工具箱中选择“ Slice Tool ”（切片）工具，用它在讨论组的图标上拖出一个矩形，注意应该让矩形全部覆盖掉整个图标。同样的方法，在另外两个图标上切出两个矩形切片来。所谓的“切片（ Slice ）”，就是如右图所示的覆盖在图形的上方，半透明的绿色方块。你还可以用 Point 工具对切割区域的大小和位置进行调整。

还要修改被切片覆盖下的图形怎么办？ 切片实际上位于一个特殊的叫做 Web Layer 的层上，要对它所覆盖的图形进行修改，点击 Layer 面板中 Web Layer 层左边第一栏中的 （显示／隐藏）图标，把切片暂时隐藏起来就行了。

　 　 5. 定义翻滚。 选定最左边的一个切片，从菜单选择 Window>Behaviors 命令，打开 Behaviors （行为）面板。

Behaviors 面板让 web 页面中的某些元素能够对特定的用户事件做出反应。所谓的“用户事件”通常可以理解为鼠标位于图形上方、鼠标离开，或者鼠标的点击等等事件。

按面板左上角的“ + ”按钮，从弹出的菜单中选择 Swap Image （替换图像）。立刻会出现 Swap Image 对话窗口，不做任何修改，按 ok 按钮。这样，讨论组图标上的切片就被定义了一个行为，这个行为将会响应 OnMouseOver （鼠标经过）事件，做出 Swap Image （替换图片）的动作。

点击“ + ”按钮没有反应，怎么回事？ 因为这里的 Behavior （行为）总是指派给特定的 Web 对象，如 Hotspots （热区）或者 Slice （切片）。所以，你必须先用 Point 工具选定一个切片，然后再给它定义 Behavior 。

　 　 6. 预览和导出文件。 在做其它事情之前，最好先把文件保存起来。用 File>Save 命令，把文件保存成 PNG 格式，这是 Fireworks 的专属格式，保存这样一个原始版本，还能方便你以后再次对页面进行修改。

如果需要预览一下制作出来的效果，可以从菜单选择 File>Preview in Browser ，再从下一级的菜单中选择一种浏览器，按下鼠标，你便可以在浏览器中检验一下刚才设计的翻滚效果了。

如果一切都很满意，就可以开始导出文件了。选择 File>Export …导出文件命令，在导出预览（ Export Preview ）窗口里，你可以进行一些设置，通常你需要在保证最好的图形质量及最小的文件大小之间做出抉择。最后按 Next 按钮，将导出的 HTML 文件和图形文件保存起来。

　 　 7. 更复杂的翻滚效果。 你可能觉得刚刚做出来的翻滚效果和文章最开头看到的图一中的形式不一样。在图一中，页面中的元素对于一个鼠标事件，有多个响应动作，当鼠标经过时，不仅导航图标的颜色变化了，而且下方会跟着出现相应的说明文字。
现在我们就来看看这种复杂的翻滚效果是如何制造出来的。

▲首先，在 Frame 面板中选定 Frame2 ， 在其后复制这一帧，成为 Frame3 ，同样的方法复制得到 Frame4 、 Frame5 。

▲选定 Frame3 ，在画布上输入第一个图标的说明文字，然后按快捷键“ Ctrl+C ”复制。接着，选定 Frame4 ，按快捷键“ Ctrl+V ”把刚才的文字粘贴过来。双击文字，把它修改成第二个图标的说明文字。再用同样的方法在 Frame5 中输入第三个图标的说明文字。

▲用切片工具（ Slice Tool ）在文字上方切出一个新的区域来。
注意： 它的大小必须覆盖 3 、 4 、 5 帧上的所有文字。

▲在画布上选取第一个图标上的绿色半透明的切片，打开 Behaviors 面板。你能看到，面板中已经有一个 Behaviors 存在了，这是我们在前面步骤中添加的。现在，我们再来添加一个 Behaviors ，按“ + ”按钮，选择“ Swap Image ”命令。

▲在弹出的 Swap Image 对话窗口中，左侧的“ Swap Image in Slice: ”会列出所有可供选择的切片，选取最下面的一个。另外，你也可以从旁边的图示窗口中选择，它给出了你所做的切片的大概位置。
在 Source of Swap （替换源）中选择 Frame No. 3 。然后并且勾选下方的 Restore Image onMouseOut 。按 OK 按钮。
这时，你就给“讨论组”图标定义了两个动作。第二个动作的意义是，当鼠标经过图片上方时，在其另外一个位置进行图片替换动作。
同样的方法，为另外两个导航图标定义第二个动作。所不同的是，它们的 Source of Swap 分别对应 Frame4 、对应 Frame5 。

▲最后，再次导出新的网页。