Fireworks滚盖图技巧高级篇

核心提示： 'images/button_r1_c1_f2.gif','images/button_r1_c1_f3.gif',1);" 这一段的代码，这样，Fireworks滚盖图技巧高级篇(5)，我们就清楚了，下面我们只需要将onMouseOut状态的图片

'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的按钮制作中的技巧还有很多，我们会不断的接触到的！