您当前的位置: 首页 > 网页设计 > Fireworks教程 > Fireworks4滚盖图技巧高级篇

Fireworks4滚盖图技巧高级篇

作者:guanchaofeng 来源:不详 发布时间: 2009-03-30 20:17 点击:
本节学习重点:掌握使用Fireworks4制作高级滚盖图的技巧。掌握Firewroks4与Dreamweaver4结合使用的方法。 1、打开fw,新建文件。大小为200*60像素,背景色采用透明(Transparent)。分辨率保持默认大

Fireworks4滚盖图技巧高级篇

  本节学习重点:掌握使用Fireworks4制作高级滚盖图的技巧。掌握Firewroks4与Dreamweaver4结合使用的方法。
  
  1、打开fw,新建文件。大小为200*60像素,背景色采用透明(Transparent)。分辨率保持默认大小。
  
  2、制作按钮并输出相应Html文件。请看具体步骤:
  
  2、1 选取工具箱的矩形绘制工具,在编辑区绘制一个矩形,矩形的Stroke(描边)选项设为None(不要有描边);Fill(填充)选项中填充类型选择Linear(线性填充),填充颜色的调配顺序为“#000066--#FFFFFF--#8787CF”,其余的选项保持默认,(当然,你可以选择相应的材质进行填充)填充效果请看图01所示:

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

Fireworks4滚盖图技巧高级篇
  
  图 02
  
  2、3 选中该矩形,打开Info(信息)面板,将矩形的高度设为和画布的高度相同:60像素,宽度可以根据需要,自行设定。如图03:

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

Fireworks4滚盖图技巧高级篇
  
  2、5 好了,按钮的主体已经做好了,现在我们就要把它转化为按钮型的Symbol。使用快捷键“Ctrl+A”选中所有的矩形对象,接着将这几个矩形对象组合到一起(快捷键是“Ctrl+G”),然后执行菜单命令Insert--〉Convert to Symbole(快捷键是功能键F8),在随后弹出的对话框中,将Symbol的Type(类型)选为“Button(按钮)”,可以给这个Symbol起个名称,也可以保持其默认名称“Symbol1”。
  
  2、6 将组合对象转化为Symbol後,双击该Symbol便可以进入其编辑区。对于按钮的各个状态的方式、意义这里我们不做多讲,请参考其他的文章。你可以按照自己的需要对按钮的各个状态进行各种美化工作。不过现在请你先看完后面的步骤后,回头再来美化。呵呵。这里我们添加了文字“动态按钮”。如图05:

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

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

Fireworks4滚盖图技巧高级篇
  
  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所示:

Fireworks4滚盖图技巧高级篇
  
  08 button.gif

Fireworks4滚盖图技巧高级篇
  
  button_f2.gif

Fireworks4滚盖图技巧高级篇
  
  button_f3.gif
  
  4、懂得了上面的道理,那么,制作一个动态按钮的目的很快就要实现了……如果您现在不需要我再多讲就可以将动画按钮制作出来的话,那我要恭喜您;如果需要我再废话几句的话,那我就不客气了:)。
  
  5、回到Fireworks4的编辑区,制作按钮的Over状态的动画,当然你在制作动画的时候,一定要考虑和Up状态的按钮要保持一致,最好不要让人看出破绽。动画制作完毕,将其保存输出,输出时注意将输出格式变为Animated Gif,不然就什么效果也没有了,而且要将该动画图片输出到保存按钮图片的文件夹下,并将动画图片的名称改为button_f2.gif,输出,随后应该出现是否替换的警示框,选择替换即可。
  
  下面的按钮动画便是我们已经将Over状态的图片进行替换后的效果。

Fireworks4滚盖图技巧高级篇   

分享到:
本文"Fireworks4滚盖图技巧高级篇"由远航站长收集整理而来,仅供大家学习与参考使用。更多网站制作教程尽在远航站长站。
顶一下
(0)
0%
踩一下
(0)
0%
[点击 次] [返回上一页] [打印]
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
关于本站 - 联系我们 - 网站声明 - 友情连接- 网站地图 - 站点地图 - 返回顶部
Copyright © 2007-2013 www.yhzhan.com(远航站长). All Rights Reserved .
远航站长:为中小站长提供最佳的学习与交流平台,提供网页制作与网站编程等各类网站制作教程.
官方QQ:445490277 网站群:26680406 网站备案号:豫ICP备07500620号-4