在Fireworks中轻松实现网页图像无关联翻转图效果

donger 
2001年 27期

　　所谓的无关联翻转图效果即是当鼠标移到某张图片上时，这张图片会变成另外一张，或是当鼠标移动到这张图片上时，网页中某个部位的图片会产生变化。在形形色色的网页中我们经常能够看到这种效果。打开HTML源码一看，满眼都是一串串的JavaScript代码，令不会编程的朋友看得头晕眼花。其实我们在Fireworks中丝毫不用懂的JavaScript代码就能制作出这种炫目的网页交互式效果，下面我们就来实际制作一下。
　　　　本例将要达到的效果是：当鼠标移到按钮图片上时图片自身进行替换，并且圆环当中的空白区域显示与之相关的图片，这个图片可以是一个从外面链接的动态的GIF动画。
　　　　首先看图1（^27040701a^），这是在Fireworks中完成一个圆环按钮效果图片，圆环被等分成四个按钮，每个按钮都分别应用了Effect（实时特效）面板中的Inner Bevel效果，使之有些立体感。有些Fireworks基础的朋友可能都知道，这种交互式的行为效果只能应用在热区或是切片上，但是热区仅仅只是图片的一部分，不能作为单个图片被切分，因此很难达到自身进行图片翻转效果。设置切片区域最方便的就是应用矩形切片工具，但显然不符合我们下面这张图的要求，因为下面所需要的切片具有圆弧效果，那么该如何制作呢？这显然又包含了一个技巧在里面，OK，咱们开始动手。
　　　　1.打开Frames面板，点击面板右上角的三角按钮，在弹出菜单中选择Duplicate Frame命令。此刻会显示出Duplicate Frame对话窗口（图2）（^27040701b^），设置Number值为1。Insert new frames（插入新帧）选项选择为After current frame（当前帧之后）。此时帧面板中会出现frame2，内容和frame1一模一样。
　　　　2.选择一个按钮对象，在Effect面板中双击Inner Bevel特效，在弹出的窗口中，改变最下面的Button Preset选项内容为Highlighted（直接从下拉列表中选择即可）。把其余三个按钮对象按照相同的方法进行操作。完成后用鼠标点击Frames面板中的frame1帧。
　　　　3.使用快捷方式“Ctrl+A”全选这些按钮图片给它们添加热区对象，其方法有以下几种：
　　　　1）鼠标右键，在弹出菜单中选择Insert Hotspot
　　　　2）使用菜单命令Insert\Hotspot
　　　　3）使用快捷方式“Ctrl+Shift+U”
　　　　此时会弹出一个Fireworks的警告窗口（图3）（^27040701c^），提醒你此时多个对象被选择，是选择插入多个热区对象还是单个热区对象？我们选择插入多个（Mutiple）热区对象。
　　　　现在我们可以看到按钮图片被一层淡蓝颜色的半透明层遮了起来，该步骤是必需的，因为它可以方便地形成相同形状的切片对象。
　　　　4.此时热区对象处于被选择状态。接下来给它们添加切片对象，有以下几种方法：
　　　　1）按鼠标右键，在弹出菜单中选择Insert Slice
　　　　2）使用菜单命令Insert\Slice
　　　　3）使用快捷方式“Alt+Shift+U”
　　　　同样会弹出Fireworks警告窗口，我们仍旧选择Multiple，插入多个切片对象。
　　　　此时Fireworks文档窗口中的对象变成了如图4所示的状况。（^27040701d^4）别看这些切片对象看起来乱糟糟的，一点都不像刚才热区对象那样整齐，可是从Layers层面板中的Weblayer层中我们仍旧可以找到圆弧形状的切片（注：其实最后输出成HTML文件时不可能会有完整的圆弧形状的图片，因为最终Fireworks会根据实际情况把图片一块块进行切分。不管当中的切图过程有多复杂，这些都用不着我们去考虑，Fireworks已经为我们准备好了一切）。
　　　　5.点击上面的圆弧形状切片对象，此时会出现一个白色的井字形的小圆圈，当鼠标移到白色圆圈上时，鼠标指针会变成手的形状，点击白色圆圈并向外拖动一点点距离，此时会弹出一个Swap Image对话窗口（图5）（^27040701e^），一个蓝色的标志线会出现在两个切片之间，同时在目标区域左上方出现一个矩形方框指示标志，在弹出的Swap Image对话框中选择将要切换到的目标帧。由于当前要替换的图片在Frame 2上，因为默认的选择就是Frame2，点击OK按钮完成按钮自身图像翻转的操作。
　　　　6.用同样的方法完成其余3个按钮的翻转图操作。
　　　　7.在Frames帧面板中选择Frame1帧，此时你会发现在四周都是绿色的切片对象中间有一个白色的空白处。使用矩形工具吸附辅助线画一个矩形，该矩形的填充颜色与按钮正常状态时的颜色一样，没有描边颜色。
　　　　8.点击工具面板底部的显示隐藏切片按钮，隐藏切片对象的显示（图6）（^27040701f^）。
　　　　9.使用工具面板中的文字工具在刚才创建的矩形对象上单击，在文字编辑器中选择文字字体为汉鼎繁行书，字体大小为80像素，颜色为白色。在文字输入窗口上输入中文“上”字（图7）（^27040701g^）。
　　　　10.点击Frames面板右上角的三角按钮，在弹出菜单中选择Duplicate Frame命令。此刻会显示出Duplicate Frame对话窗口（图8）（^27040701h^），设置Number值为4。Insert new frames（插入新帧）选项选择为At the end（插入到最后）。
　　　　11.分别选择第4、5、6帧，把文字对象分别改成“下”、“左”、“右”（^27040701i^9）。
　　　　12.在Frames面板中选择frame1，选择矩形对象和文字对象进行删除操作。接着选择frame3，选择矩形对象按鼠标右键，在弹出菜单中选择Insert Slice。
　　　　13.选择上面的一块按钮切片对象，拖动中心白色圆点到目标切片对象上（矩形对象切片），在弹出的Swap Image对话框中选择Swap Image Frome为Frame 3（直接从下拉列表中选择）。使用同样的方法，分别把其余三个按钮切片对象对应到Frame4、5、6上去。现在我们来点击一下目标切片就会发现有四条蓝色的连接线分别从上下左右四个按钮图片中引出（^27040701j^10），分别代表发生在这四个按钮图片上的翻转效果。
　　　　14.利用拖曳方式生成无关联翻转图效果能够使我们快速地达到目的，这是Fireworks4新增加的一项功能。不过我们仍旧可以利用传统的添加行为方式实现无关联翻转图效果，而且还可以有更多的控制方法。在弹出的Swap Image窗口里，我们点击下面的More Option可以在Swap Image对话窗口中进行更详细的设置（^27040701k^11）。
　　　　除了可以用其它帧中的对象作为无关联翻转图的目标图外，Fireworks还可以用外部的GIF图片（可以是静态的也可以是动态的）、JPEG图片或PNG图片作为目标源图。利用这个功能，我们可以很方便地将动画GIF图片导入到已有的翻转图效果中，实现更加丰富的效果。我们只须在上面的对话窗口中把Show the swapped inage form的选项选择为Image File，点击右边的文件夹按钮选择一个外部的图片文件即可。需要注意的是外部文件的大小必须和目标切片的大小相一致。
　　　　15.讲到这儿，我们这个教程也该进入尾声了，使用菜单命令File\Export进行文件的输出。具体参数如^27040701l^12。
　　　　好了，在浏览器中打开被导出的HTML页面，欣赏一下由Fireworks这个优秀的网页图像设计软件制作的网页交互式无关联翻转图效果吧。 
 