本节学习重点:把握使用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);
" onClick="MM_nbGroup('down','navbar1','button_r1_c1',
'images/button_r1_c1_f3.gif',1);" >
<img name="button_r1_c1" src="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的按钮制作中的技巧还有很多,我们会不断的接触到的!
Word教程网 | Excel教程网 | Dreamweaver教程网 | Fireworks教程网 | PPT教程网 | FLASH教程网 | PS教程网 |
HTML教程网 | DIV CSS教程网 | FLASH AS教程网 | ACCESS教程网 | SQL SERVER教程网 | C语言教程网 | JAVASCRIPT教程网 |
ASP教程网 | ASP.NET教程网 | CorelDraw教程网 |