Fireworks动态元件的基本制作及高级运用教程

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

　　举个例子：我绘画了一颗“OK“按钮并转换为按钮类的元件，当我要再做一个“Cancel”按钮时，我就要把 方才那个“OK”按钮从文档库拖进画布，打散， 而后把文本“OK”改为“Cancel”，再转成元件 。像这样子的操作 兴许我们压根就没必要将它们转成元件，由于假如我们要做众多按钮，那文档库就会有众多这样子的元件 。

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

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

一、 缔造一个 根本的动态元件

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

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

3.第2步操作要 留神几点：

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

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

- 按钮背景图最好平面化为位图，幸免在缩放时浮现路径开拆(但不平面化也 可以 维持图形缩放时的 品质不会损失)；

- 将不需求显示的状态图进行 潜藏(去掉图层前面的眼睛图标)；

4.在文档库 当选中 方才 缔造的元件，点击右上角的菜单按钮， 取舍“ 保留到公用库”，在弹出的对话框中 取舍 保留，默许的路径是：

X:Documents and SettingsUserNameApplication DataAdobeFireworks CS3Common LibraryCustom Symbols

5.在“命令”菜单中点击“ 缔造元件脚本”；

6.在“ 缔造元件脚本”对话框中 取舍 打开 方才 保留的PNG文件，并依照下图设置动态元件的属性，最终点击 保留：

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

方便设置一下就 可以在场景上 缔造多个不同状态、不同标签文字的按钮了 。

二、动态元件的高级 使用

前面 讲解了怎么 缔造一个 根本的 Fireworks 动态元件，那么这一次就 讲解一下怎么制作一个“高级”丝毫的动态元件 。

事先申明一下，本教程 波及JSF代码，假如对此没感兴趣的童鞋 可以 华丽的飘过，对 Fireworks 极度狂热且有 信念能读懂 方便代码的朋友请 接续 。

1.我们上次做了一个动态组件，并 保留到了

X:Documents and SettingsUserNameApplication DataAdobeFireworks CS3Common LibraryCustom Symbols

2.现在我们用阅读器 打开这个目录， 可以看到两个文件：

3.现在我们用记事本 打开“myBtn.jsf”，就 可以看到里面的JSF代码(代码略，大家自己 打开文件看)；

4.作为参考，我们 打开Fireworks内置动态元件的JSF脚本文件， 打开公用库面板中的Mac目录， 随便找一个名字独特丝毫的按钮(本例 取舍“ButtonBarLeft”)，把它的名字记下来， 而后查找这个名字就 可以 获得这个路径：X:...Adobe Fireworks CS3ConfigurationCommon LibraryMac

5.找到了内置动态元件的路径，我们就 可以 打开这些内置动态元件的脚 原来 视察了，我们 打开“Button.jsf”(这个脚本对应的文件是“Button.graphic.png”)，即可看到里面的JSF代码；

6.那么我们就 可以将内置动态元件的脚本“移植”到我们自己的按钮上去，在进行这一步前要 留神，这些移植的代码将被“命令”菜单下的“ 缔造元件脚本”程序 鉴别为“不被兼容的脚本”， 因此不得不自己用记事本编辑了.