Fireworks4滚盖图技巧高级篇

本节学习重点：掌握使用fireworks4制作高级滚盖图的技巧。掌握Firewroks4与Dreamweaver4结合使用的方法。

1、打开fw，新建文件。大小为200*60像素，背景色采用透明（Transparent）。分辨率保持默认大小。

2、制作按钮并输出相应Html文件。请看具体步骤：

2、1 选取工具箱的矩形绘制工具，在编辑区绘制一个矩形，矩形的Stroke（描边）选项设为None（不要有描边）；Fill（填充）选项中填充类型选择Linear（线性填充），填充颜色的调配顺序为“#000066--#FFFFFF--#8787CF”，其余的选项保持默认，（当然，你可以选择相应的材质进行填充）填充效果请看图01所示：

图 01

2、2 默认情况下，线性填充的方向是按照填充颜色从左向右的方向进行填充，现在，我们要改变一下它的填充方向，选中该矩形，点取工具箱的油漆桶工具，然后在矩形上方由上向下拖动油漆桶，这样，矩形的填充色就会变成由上向下的填充形式。如图02所示：

图 02

2、3 选中该矩形，打开Info（信息）面板，将矩形的高度设为和画布的高度相同：60像素，宽度可以根据需要，自行设定。如图03：

图 03

2、4 采用同样的方法，在矩形的两侧各添加两个修饰性的小矩形，高度比中间的矩形稍低，填充方式和颜色同中间矩形保持一致。效果如图04所示：

2、5 好了，按钮的主体已经做好了，现在我们就要把它转化为按钮型的Symbol。使用快捷键“Ctrl+A”选中所有的矩形对象，接着将这几个矩形对象组合到一起（快捷键是“Ctrl+G”），然后执行菜单命令Insert--〉Convert to Symbole（快捷键是功能键F8），在随后弹出的对话框中，将Symbol的Type（类型）选为“Button（按钮）”，可以给这个Symbol起个名称，也可以保持其默认名称“Symbol1”。

2、6 将组合对象转化为Symbol後，双击该Symbol便可以进入其编辑区。对于按钮的各个状态的方式、意义这里我们不做多讲，请参考其他的文章。你可以按照自己的需要对按钮的各个状态进行各种美化工作。不过现在请你先看完后面的步骤后，回头再来美化。呵呵。这里我们添加了文字“动态按钮”。如图05：

图 05

2、7 好了，按钮制作完成，我们要将其输出保存了，在输出之前，执行菜单命令Modify--Trim Canvas，使得按钮恰好占满整个画布。然后打开File菜单，选择Export命令，在随后弹出的输出设置框内，将输出的文件命名为button.htm，记得将Put Images in Subfolder前面的复选框选中，这样便于我们对输出文件的图片文件的保存。现在可以点击Save（保存）按钮，但是，且慢，这里有一个和我们即将要制作的滚盖按钮的动画关系密切的要点：点选输出设定框上的“Options（选项）”按钮。如图06所示：

图 06

2、8 在随后弹出的设定框中，选择Document Specific选项卡，如图07所示。需要我们注意的是File Names（文件名称）这一部分的相关设定，它是用来设定输出图片或者按钮的相关图片的文件名称的，也就是说，一般我们输出的按钮图片的文件名称默认格式为"输出html文件名称+切片（不要忘了，只要一转化为按钮格式，就会在layer面板的web共享层上自动出现一个切片区，切片区的大小也就是按钮的active areas区域大小）的行数_列数+帧数（只有图片占据了一帧以上的帧数，否则不出现）其他的格式大家可以自行试验一下，看看图片名称的输出格式。

现在，我们保持Frieworks的各项默认设置，进行Html文件、图片、切片的输出保存。

3、打开我们用来保存输出图片的文件夹。我们刚刚制作好的按钮有三个状态 1、Up 2、Over 3、Down，也就是说这个按钮占据了三帧的位置，所以现在我们可以看到输出的图片名称为（刚刚输出的html文件为button）：Up状态图片为"button_r1_c1.gif"(或者是"button.gif")；over状态图片为"button_r1_c1_f2.gif"(或者是"button_f2.gif")；down状态图片为"button_r1_c1_f3.gif"(或者是"button_f3.gif")。好了，现在我们知道了，当我们的鼠标移动到按钮上时，就会显示出"button_r1_c1_f2.gif"(或者是"button_f2.gif")这个图片 。如图08所示：

08 button.gif

button_f2.gif

button_f3.gif

4、懂得了上面的道理，那么，制作一个动态按钮的目的很快就要实现了……如果您现在不需要我再多讲就可以将动画按钮制作出来的话，那我要恭喜您；如果需要我再废话几句的话，那我就不客气了：）。

5、回到Fireworks4的编辑区，制作按钮的Over状态的动画，当然你在制作动画的时候，一定要考虑和Up状态的按钮要保持一致，最好不要让人看出破绽。动画制作完毕，将其保存输出，输出时注意将输出格式变为Animated Gif，不然就什么效果也没有了，而且要将该动画图片输出到保存按钮图片的文件夹下，并将动画图片的名称改为button_f2.gif，输出，随后应该出现是否替换的警示框，选择替换即可。
下面的按钮动画便是我们已经将Over状态的图片进行替换后的效果。

动态按钮效果1

6、但是，我们发现在鼠标离开时，还没有出现我们预期想要的动画。如果你想出现这个效果，仅仅使用简单的图片替换法已经不能解决问题了。现在我们首先需要的是制作出鼠标离开时的动画，动画制作完毕后，将其和其他的按钮图片一样，保存到同一个文件夹下，假设保存的图片文件为out.gif，然后再加以使用。

7、用Dreamweaver4打开我们刚刚保存的button.htm，切换到源文件视图下。找到产生按钮动画的相关的javascrip代码，我们可以发现，下面的一段代码对于动画的产生有着直接的影响，
　　<td><a href="#" onMouSEOut="MM_nbGroup('out');
" onMouseOver="MM_nbGroup('over','button_r1_c1',
'images/button_r1_c1_f2.gif', 'images/button_r1_c1_f3.gif',1);
" >
<img name="button_r1_c1" src="http://www.cncms.com/images/button_r1_c1.gif"
width="186" height="60" border="0"> </a></td>
用红色标注的两个地方正是我们要找的地方，刚才我们将Over状态的图片进行替换，从而产生了上面的“动态按钮效果1”，其实变化的就是
onMouseOver="MM_nbGroup('over','button_r1_c1',
'images/button_r1_c1_f2.gif','images/button_r1_c1_f3.gif',1);" 这一段的代码。这样，我们就清楚了，下面我们只需要将onMouseOut状态的图片替换一下即可了！但是，与onMouseOut相关的代码只有"MM_nbGroup('out');"这些，仅仅依靠这些是不可能产生动画效果的，好了，我们来欺骗IE浏览器一下吧！我们将onMouseOver后面的相关代码Copy一下，然后，将原来的onMouseOut后面的有关代码删除，并将刚刚复制的对象粘贴过来，理论上，现在在鼠标离开时已经出现动画了，但是我们拷贝的是Over状态的代码，自然动画文件也是Over状态的动画文件了，没关系，将其动画文件名称改变为刚刚做好的离开动画out.gif就可以啦！现在，与onMouseOver相关的代码如下：onMouseOut="MM_nbGroup('over','button_r1_c1','images/out.gif',
'images/button_r1_c1_f3.gif',1);"提醒大家一点，为了他人理解代码方便，最好将其中的我们拷贝的'over'改成'out'。

8、好了，一切工作完成后，看看我们最终形成的动画按钮吧！（补充提示：请注意，不论是Over状态的动画，还是Out状态的动画，为了实现下面示例这种效果，在制作过程中，记得将动画的Loop循环选项设为No Looping，不循环状态！）

最终动画按钮效果图

[补充说明：]开动脑筋，想想通过这种方法，我们可以制作出多少酷酷的按钮效果来。下面是一则按钮效果的实例！

大家是不是能够经常在一些网站看到这种按钮效果，就是本来模糊的图片在鼠标移动过去后，就会慢慢变清楚（请看示例2）。实现这种效果，最简单的方法是去下载一个专门的DW的插件。但是现在我们可以说，即使我们找不到这个插件也没关系，因为我们可以用FW制作出来！具体的方法我们看下面：

第一步：制作按钮。下面的按钮制作方法和上面的按钮制作方法有一些不同。不同之处是这个按钮的"Transform（不透明度）"选项设为了"20%"(或者为0也可以，视需要设定)。
第二步：这是关键的一步， 制作动画淡入效果和淡出效果。（制作淡入淡出效果动画的方法请参考本站其他相关文章。）这个地方同样需要注意的是：动画的loop选项不要设为"Forever"而是应该设置为"No Looping"。这样做的目的是免得鼠标移动过去后，渐现的效果会重复出现，这样就与我们的要求不符了。
第三步：分别输出按钮的html文件，以及Animation Gif格式的淡入淡出动画文件。然后替换相应的图片（不多做说明了） ，修改相应的代码。

请看下面的示例：[鼠标移上去看看效果]

好了，本课到此结束，关于在FW的按钮制作中的技巧还有很多，我们会不断的接触到的！