加入收藏 | 网站地图 | | RSS | WAP
你好,游客 登录 注册 搜索

Fireworks实例教程:动态元件制作及应用

[日期:2010-10-09] 作者: 来源: [字体: ]
Fireworks实例教程主要学习动态元件的创建方法,主要介绍动态元件的概念、创建及JSF代码的运用等。

  首先讲一下什么是动态元件,在Fireworks中,我们可以创建“图形”、“按钮”、和“动画”三种元件,但往往我们只是直接从文档库里面直接把元件拖出来用,我们把这种元件成为静态元件。

  举个例子:我绘画了一颗“OK“按钮并转换为按钮类的元件,当我要再做一个“Cancel”按钮时,我就要把刚才那个“OK”按钮从文档库拖进画布,打散,然后把文本“OK”改为“Cancel”,再转成元件。像这样子的操作也许我们压根就没必要将它们转成元件,因为如果我们要做很多按钮,那文档库就会有很多这样子的元件。

  而动态元件是什么概念呢?就是我只需要从库里面把这按钮拖出来,然后就可以在“元件定义”面板里面改变这个按钮上的文字、长和宽、以及鼠标移入、按下等属性,但这个元件在库里面只存在一个,这就是我所说的动态元件。如果你对此还不太理解,那你可以点击“Window”菜单下的“Common Library”开启公用库,里面就放着一些这种类型的元件。

了解动态元件用来做什么以后,我们就可以开始制作了。

一、创建一个基本的动态元件

1.首先我们绘制一颗按钮的四种状态:“正常状态”、“鼠标移入状态”、“鼠标按下状态” 和 “禁用状态”

Fireworks教程:动态元件的基本制作及高级运用_中国教程网

2.然后我们把这些按钮背景图的坐标设为统一,让它们重叠在一起,再将它们全部选中,按F8键转为一个图形类元件,进入这个元件的编辑状态,加入按钮文本,并给每张状态图进行命名(如下图)

Fireworks教程:动态元件的基本制作及高级运用_中国教程网

3.第2步操作要注意几点:

- 开启“九宫智能缩放”,将拉伸区域设定在文本框外部;

- 文本框的宽度要等于按钮背景图宽度减去缩放区域宽度,并设置文本居中显示;

- 按钮背景图最好平面化为位图,避免在缩放时出现路径开拆(但不平面化也可以保持图形缩放时的质量不会损失);

- 将不需要显示的状态图进行隐藏(去掉图层前面的眼睛图标);

Fireworks教程:动态元件的基本制作及高级运用_中国教程网

4.在文档库中选中刚才创建的元件,点击右上角的菜单按钮,选择“保存到公用库”,在弹出的对话框中选择保存,默认的路径是:

X:\Documents and Settings\UserName\Application Data\Adobe\Fireworks CS3\Common Library\Custom Symbols

Fireworks教程:动态元件的基本制作及高级运用_中国教程网

5.在“命令”菜单中点击“创建元件脚本”;

Fireworks教程:动态元件的基本制作及高级运用_中国教程网

6.在“创建元件脚本”对话框中选择打开刚才保存的PNG文件,并按照下图设置动态元件的属性,最后点击保存:

Fireworks教程:动态元件的基本制作及高级运用_中国教程网

7.现在随便新建一个文档,在公用库的自定义目录中将自制的动态元件拖进画布,再在“Window”菜单下点击“Symbol Properties” (元件属性)

简单设置一下就可以在场景上创建多个不同状态、不同标签文字的按钮了。

Fireworks教程:动态元件的基本制作及高级运用_中国教程网

关键词:动态  元件 

收藏 推荐 打印 | 录入:blue1000 | 阅读:
本文评论   查看全部评论 (4)
表情: 姓名: 字数
点评:
       
评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事/刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款
第 4 楼
* 匿名 发表于 2016/12/25 15:37:37
http://www.blue1000.com/bkhtml/c13/2010-03/67254.htm 幼儿园中班上学期工作计划 http://www.135995.com/show/3741.html 幼儿园小班上学期工作计划 http://www.135995.com/show/3740.html
第 3 楼
* 匿名 发表于 2016/12/25 13:22:14
http://www.blue1000.com/bkhtml/c17/2013-03/71119.htm 竞选生活部部长的发言稿 http://www.135995.com/show/21078.html 竞选纪检部部长的发言稿 http://www.135995.com/show/21073.html
第 2 楼
* 匿名 发表于 2016/12/24 15:26:09
http://www.blue1000.com/bkhtml/c13/2010-03/67254.htm 创意幽默证婚词精选 http://www.135995.com/show/18994.html 幽默而不失庄重的证婚词 http://www.135995.com/show/18993.html
第 1 楼
* 匿名 发表于 2016/12/24 13:18:00
http://www.blue1000.com/bkhtml/c17/2013-03/71119.htm 震撼心灵的作文 http://www.135995.com/details/zs1923.html 森林运动会作文 http://www.135995.com/details/zs1925.html