Search

    您的位置:首页»技术教程»基础教程»正文

FW快速制作动态按钮四状态

日期:2006-07-23 07:58:52  作者:詹巍  点击:  来源:天极设计


(13)按F8在弹出的符号属性对话框中选择转换为按钮单选框并命名,如图13所示。

图13 将组合对象转换为按钮符号
(14)点击"OK",这时候发现刚才的组合已经被转换为按钮图像了,此时对象上已经添加了切片,并且左下角有个小箭头图标,表示现在已经是一个按钮符号了。
我们想制作各个状态的按钮图像那么只需要双击这个对象,就可以弹出图14所示的按钮编辑器了。选择左下角的"Import a Button"按钮我们甚至还可以导入Fireworks自带的按钮库,方便我们制作按钮,如图15所示。
   另外Fireworks的"Edit">>"Libraries"菜单下自带了Animations(动画)、Bullets(小图标)、 Buttons(按钮)和Themes(主题)四个符号库,分别如图15至18所示,使用它们我们可以方便地制作出许多精美的效果,这里读者可以自己去尝 试。

图14 按钮编辑器

图15 Animations符号库

图16 Bullets符号库

图17 Buttons符号库

图18 Themes符号库
(15)按钮的Up状态我们就选择原来的按钮状态,不做改动,接着我们选择按钮的Over状态栏,这时候发现里面是空白的,如图19所示。不要着急,点击 我们可以将Up状态的按钮图像复制到Over状态,然后适当地修改文本和填充的颜色就可以制作好按钮的Over状态了,如图20所示。

图19 按钮Over状态没有图像

图20 复制Up状态修改后的效果
(16)使用同样的方式在Down选项栏中复制Over状态的按钮图像,然后调整按钮的填充和字体颜色等,得到图21所示的按钮的Down状态图像。

图21 按钮的Down状态
(17)接着用上面的方法制作按钮的Over While Down状态图像效果,如图22所示。

图22 按钮的Over While Down状态
(18)接着选择"Active Area"选项栏,使用鼠标拖动活动区域切片的大小,使得它和按钮大小基本符合,如图23所示。

图23 设置按钮活动区域
(19)完成之后选择"Done"按钮,回到工作区,切换到4幅模式的图像预览看看按钮的效果,如图24所示,这样我们的响应按钮就制作好了。原文件下载

图24 四幅视图模式预览按钮效果