收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 13823|回复: 8

[软件操作] FW另类入门级教程:创建动态元件(一)

[复制链接]
发表于 2010-7-28 16:16:37 | 显示全部楼层 |阅读模式
 
首先讲一下什么是动态元件,在Fireworks中,我们可以创建“图形”、“按钮”、和“动画”三种元件,但往往我们只是直接从文档库里面直接把元件拖出来用,我们把这种元件成为静态元件。

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

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

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

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

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

3.        第2步操作要注意几点:
   - 开启“九宫智能缩放”,将拉伸区域设定在文本框外部;
   - 文本框的宽度要等于按钮背景图宽度减去缩放区域宽度,并设置文本居中显示;
   - 按钮背景图最好平面化为位图,避免在缩放时出现路径开拆
   (但不平面化也可以保持图形缩放时的质量不会损失);
   - 将不需要显示的状态图进行隐藏(去掉图层前面的眼睛图标);
pic3.jpg

4.        在文档库中选中刚才创建的元件,点击右上角的菜单按钮,选择“保存到公用库”,在弹出的对话框中选择保存,默认的路径是:
   X:\Documents and Settings\UserName\Application Data\Adobe\Fireworks CS3\Common Library\Custom Symbols
pic4.jpg

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

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


7.        现在随便新建一个文档,在公用库的自定义目录中将自制的动态元件拖进画布,再在“Window”菜单下点击“Symbol Properties” (元件属性),
   简单设置一下就可以在场景上创建多个不同状态、不同标签文字的按钮了。
pic7.jpg




 

[[i] 本帖最后由 WaveF 于 2010-7-30 10:04 编辑 ]

评分

参与人数 1威望 +1 收起 理由
froglt + 1 精品文章

查看全部评分

发表于 2010-7-28 22:55:51 | 显示全部楼层
楼主不能用汉化版吗  如果用汉化版 那太感谢你了
回复 支持 反对

使用道具 举报

 楼主| 发表于 2010-7-29 09:53:54 | 显示全部楼层
原帖由 [i]cz88 于 2010-7-28 22:55 发表
楼主不能用汉化版吗  如果用汉化版 那太感谢你了



不好意思,我们公司用的是繁体系统,用简体中文版的话恐怕你我更看不懂(一大堆的乱码),
其实个别名词我都有在英文后面用中文讲一遍的,而且还配有截图,你就当熟悉一下界面找一下嘛
回复 支持 反对

使用道具 举报

发表于 2010-7-30 08:56:11 | 显示全部楼层
思路不错,但是我想说的是,我直接做一个按钮元件,在Fireworks中是可以直接更改文字的,改大小可以使用变形工具,唯一改不了的就是每个状态的颜色和滤镜,而且你的按钮是渐变色的,用你的方法能改吗?如果无法改变的话这种方法的用处在哪里?
回复 支持 反对

使用道具 举报

 楼主| 发表于 2010-7-30 09:58:11 | 显示全部楼层
原帖由 [i]froglt 于 2010-7-30 08:56 发表
思路不错,但是我想说的是,我直接做一个按钮元件,在Fireworks中是可以直接更改文字的,改大小可以使用变形工具,唯一改不了的就是每个状态的颜色和滤镜,而且你的按钮是渐变色的,用你的方法能改吗?如果无法改变的 ...


这应该是属于更高级的控制,因为在按钮元件中你只能改表按钮上的文本,
而这种动态元件除了可以改文本,还可以:

- 单独设置文本大小;
- 单独设置文本的对齐方式;
- 单独设置文本的粗斜体及下划线样式;
- 单独设置文本颜色;
- 单独设置画笔直径;
- 单独设置画笔颜色;
- 单独设置指定图形的填充色;
- 单独设置指定对象的透明度;
- 单独设置指定对象是否可见;

除了以上这些以外还有一些需要参考官方文档才知道的属性,这就是它的优点。
PS:JSF是能够控制图形滤镜的,随便给某个图形加上滤镜后,在历史面板中点一下复制按钮,再在记事本粘贴即可见到代码

官方的例子




 
回复 支持 反对

使用道具 举报

发表于 2010-7-30 10:21:09 | 显示全部楼层
不错,挖掘被很多人忽略的功能
回复 支持 反对

使用道具 举报

发表于 2010-7-30 16:20:53 | 显示全部楼层
原帖由 [i]WaveF 于 2010-7-30 09:58 发表


这应该是属于更高级的控制,因为在按钮元件中你只能改表按钮上的文本,
而这种动态元件除了可以改文本,还可以:

- 单独设置文本大小;
- 单独设置文本的对齐方式;
- 单独设置文本的粗斜体及下划线样式; ...



又多了解了Fireworks的功能,确实不错,强烈支持
回复 支持 反对

使用道具 举报

发表于 2015-8-19 11:20:03 | 显示全部楼层
哇,好实用喔,多谢了
回复 支持 反对

使用道具 举报

发表于 2015-11-3 10:13:10 | 显示全部楼层
过来看看,好久没来了
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-10-1 16:59 , Processed in 0.124683 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表