• 创建元件

  • 放置元件的实例

  • 编辑元件及其所有实例

  • 编辑特定的元件实例

  • 创建和使用组件元件

  • 导入和导出元件

  • 创建嵌套元件

  • 9 切片缩放嵌套元件

在 Fireworks 中可重用的图形元素称为元件。Fireworks 提供 3 种类型的元件:图形、动画和按钮。在编辑原始元件对象时,所复制的实例会自动进行更改,以反映经过编辑的元件(除非您断开二者之间的链接)。

元件对于创建按钮以及为对象在多个状态之间制作动画也很有帮助。

有关元件的详细信息,请参阅设备中心的 了解样式和元件。

有关如何在 Fireworks 中使用样式和元件的视频教程,请参阅 www.adobe.com/go/lrvid4033_fw_cn。


创建元件

可以从任何对象、文本块或组中创建元件,然后将它存储在“资源”面板的“公用库”选项卡中。在该选项卡中,可以编辑元件并将它放在文档中。

从所选对象创建元件

  1. 选择对象,然后选择“修改”>“元件”>“转换为元件”。

  2. 在“名称”框中键入元件的名称。

  3. 选择元件类型。

  4. 若要缩放元件而不扭曲其几何形状,请选择“启用 9 切片缩放辅助线”。(请参阅 9 切片缩放。)

  5. 若要存储元件,使其可以在多个文档中使用,请选中“保存到公用库”选项。

  6. 单击“确定”保存元件。

    所选对象即变为该元件的实例,并且“属性”检查器将显示元件选项。

从头开始创建元件

  1. 执行下列操作之一:

    • 选择“编辑”>“插入”>“新建元件”。

    • 从“文档库”面板的“选项”菜单中选择“新建元件”。

  2. 选择元件类型。

  3. 若要使用 9 切片缩放辅助线缩放元件,请选中“启用 9 切片缩放辅助线”选项,然后单击“确定”。

  4. 使用“工具”面板中的工具创建元件。

放置元件的实例

将元件从“文档库”面板拖到当前文档中。

画布上一个元件的实例

编辑元件及其所有实例

当您编辑元件时,其所有的相关实例都将自动更新以反映最新的修改。但是,某些属性将保持独立。有关详细信息,请参阅编辑特定的元件实例。

将默认组合在一起的元件和图形分开时。取消编组图形(按钮、滚动栏或其他)以对其进行修改。您可以稍后重新组合图形并将其转化为元件。如果在转换前没有组合图形,元件中的个别图形将会处于可编辑状态。

编辑元件

  1. 若要进入元件编辑模式,请执行下列操作之一:

    • 在画布上,双击元件实例。

    • 选择某个实例,然后选择“修改”>“元件”>“编辑元件”。

    • 在“文档库”面板中,双击元件图标。

    • (仅限动画元件)单击“动画”对话框中的“编辑”按钮。

  2. 根据需要更改元件。

    注:  如果没有为所选元件启用 9 切片缩放,则可以在其上下文本身中编辑该元件。可以选择“修改”>“元件”>“就地编辑”。

    使用 9 切片缩放辅助线避免在调整元件大小时发生扭曲。(请参阅 9 切片缩放。)

从元件编辑切换到页面编辑

当您编辑元件时,文档面板会进入元件编辑模式。此模式会使画布上的其它对象变暗,从而允许您在整页的上下文中快速修改元件。(使用 9 切片缩放的元件例外,这种情况下元件单独显示。)

若要从元件编辑切换到页面编辑,请执行下列任一操作:

  • 在画布中,双击空白区域。

  • 在文档面板顶部的托盘中,单击页面图标或向后箭头。(如果已嵌套元件,还可以利用托盘访问包含的元件。)

重命名元件

  1. 在“文档库”面板中,双击元件名称。

  2. 在“转换为元件”对话框中,更改元件名称,然后单击“确定”。

重制元件

  1. 在“文档库”面板中选择元件。

  2. 从“文档库”面板的“选项”菜单中选择“重制”。

  3. 更改副本的名称和类型(如果需要),然后单击“确定”。

更改元件类型

  1. 在“库”中双击元件名称。

  2. 选择一个不同的“类型”选项。

在“文本库”面板中选择所有未使用的元件

从“文档库”面板的“选项”菜单中选择“选择未用项目”。

删除元件及其所有实例

在“文档库”面板中,将元件拖到垃圾桶图标上。

交换元件

  1. 在画布上,右键单击某个元件,然后选择“交换元件”。

  2. 在“交换元件”对话框中,从“文档库”中选择另一个元件,然后单击“确定”。

编辑特定的元件实例

当您双击某个实例对其进行编辑时,实际上是在编辑元件本身。若要只编辑当前实例,必须断开该实例与元件之间的链接。但这将永久中断两者间的关系。以后对该元件所做的任何编辑都不会反映在以前的实例中。

使用按钮元件的几个功能,可以在为每个实例指定唯一的按钮文本和 URL 时保持元件-实例关系。

若要调整组件元件的 JavaScript 行为,请编辑“元件属性”面板中的值。若要向该面板中添加可自定义的属性,必须编辑与该元件相关联的 JavaScript 文件。

注:  无法使用 JavaScript 为组件设置高度和宽度属性。

断开元件链接

  1. 选择实例。

  2. 选择“修改”>“元件”>“分离”。

    所选实例随即变为一个组。“文档库”面板中的元件与该组不再有任何关联。与元件分离后,以前的按钮实例即失去其按钮元件特性,而以前的动画实例则失去其动画元件特性。

在不断开元件链接的情况下编辑实例

  1. 选择实例。

  2. 在“属性”检查器中修改实例属性。

    可以在不影响元件和其它实例的情况下修改下列实例属性:

    • 混合模式

    • 不透明度

    • 滤镜

    • 宽度和高度

    • xy 坐标

创建和使用组件元件

组件元件是指可以使用 JavaScript (JSF) 文件对其进行智能缩放和指派特定属性的图形元件。它们也称为“丰富元件”。用“属性”面板修改实例会影响元件和所有其它实例。但是,修改“元件属性”面板(“窗口”>“元件属性”)中的参数将只影响所选实例。

Fireworks 包括一个由预先设计的组件元件组成的库;您可以自定义这些元件,使其与特定网站或用户界面的外观一致。

向文档中添加组件元件

  1. 从“窗口”菜单中选择“公用库”。

  2. 若要使用某个元件,请将该元件从“公用库”面板拖放到 Fireworks 画布。

调整组件元件的属性

  1. 在画布上,选择该元件。

  2. 在“元件属性”面板(“窗口”>“元件属性)中,调整各种参数(如状态、标签和颜色)。

    若要创建基于 HTML 网页和软件原型的交互式按钮,请参阅交互切片。

创建组件元件

  1. 使用要自定义的属性来创建对象。

    此元件可以将项目符号颜色和项目符号编号作为可自定义选项。

  2. 创建对象时,可在“层”面板中键入名称,以自定义要使其成为可编辑的功能的名称。请确保为文本层使用名称“Label”并保持首字母 L 大写。此名称将在 JavaScript 文件中使用。

    注:  为了避免 JavaScript 错误,请不要在功能名称中包括任何空格。例如,使用“number_label”而不使用“number label”。

  3. 选择该对象,然后选择“修改”>“元件”>“转换为元件”。

  4. 在“名称”框中键入元件的名称。

  5. 选择“图形”作为元件类型,选择“保存到公用库”,然后单击“确定”。

  6. 在提示符下,将新元件保存到默认的 Custom Symbols 文件夹,或者在与该默认文件夹相同的级别创建另一个文件夹。

    注:  组件元件必须保存在“公用库”内的文件夹中。

    保存后,元件将从画布删除,并显示在“公用库”中。

  7. 从“命令”菜单中选择“创建元件脚本”。

  8. 单击该面板右上角的浏览按钮并浏览到元件 PNG 文件。默认位置如下所示:

    • 在 Microsoft? Windows? XP 中:<用户设置>Application DataAdobeFireworks CS5Common LibraryCustom Symbols

    • 在 Windows Vista? 中:Users<用户名>AppDataRoamingAdobeFireworks CS5Common LibraryCustom Symbols

    • 在 Mac? OS:<用户名>/Application Support/Adobe/Fireworks CS5/Common Library/Custom Symbols

  9. 单击加号按钮添加元素名称。

  10. 在“元素名称”框中,从菜单中选择要自定义的元素的名称。

  11. 在“属性”框中,选择您要自定义的属性的名称。例如,若要自定义标签中的文本,请选择 textChars。

    注:  有关这些属性选项的详细信息,请参阅“扩展 Fireworks”。

  12. 在“属性名称”字段中,键入可自定义属性的名称,例如“Label”或“Number”。此属性名称将出现在“元件属性”面板中。

  13. 在“值”字段中,键入在首次将元件实例放在文档中时所用属性的默认值。

  14. 根据需要添加其它元素。

  15. 单击“保存”保存所选的选项并创建 JavaScript 文件。

  16. 从“公用库”面板的“选项”菜单中选择“重新加载”以重新加载新元件。

    在创建 JavaScript 文件之后,可以通过将元件拖到画布上来创建实例,然后在“元件属性”面板中更改其属性。

    注:   如果您删除或重命名由该脚本引用的对象,“元件属性”面板中将报告错误。

将现有元件另存为组件元件

  1. 在“文档库”面板中选择一个元件。

  2. 从“文档库”面板的“选项”菜单中选择“保存到公用库”。

  3. 创建 JavaScript 文件以控制元件属性。

使用 JavaScript 创建可编辑的元件参数

在保存组件元件时,Fireworks 会将 PNG 文件保存到下面的默认文件夹中:

  • (Windows XP) <用户设置>Application DataAdobeFireworks CS5Common LibraryCustom Symbols

  • (Windows Vista) Users<用户名>AppDataRoamingAdobeFireworks CS5Common LibraryCustom Symbols

  • (Mac OS) <用户名>/Application Support/Adobe/Fireworks CS5/Common Library/Custom Symbols

若要创建组件元件,必须创建 JavaScript 文件,使用 .JSF 扩展名将其保存在与该元件相同的位置,并使用与该元件相同的名称。例如,mybutton.graphic.png 应包含名称为 mybutton.jsf 的 JavaScript 文件。

使用“创建元件脚本”面板,非编程人员可以分配某些简单的元件属性以及自动创建 JavaScript 文件。若要打开此面板,请从“命令”菜单中选择“创建元件脚本”。

创建 JavaScript 文件

若要向元件中添加可编辑的参数,必须定义 JavaScript 文件中的两个函数:

  • 函数 setDefaultValues() ? 定义可以编辑的参数以及这些参数的默认值。

  • 函数 applyCurrentValues() ? 将通过“元件属性”面板输入的值应用于图形元件。

    以下是用于创建自定义元件的示例 .JSF 文件:

    function setDefaultValues() 
    { 
        var currValues = new Array(); 
    //to build symbol properties 
        currValues.push({name:"Selected", value:"true", type:"Boolean"}); 
        Widget.elem.customData["currentValues"] = currValues; 
    } 
    function applyCurrentValues() 
    { 
        var currValues = Widget.elem.customData["currentValues"]; 
    // Get symbol object name 
        var Check = Widget.GetObjectByName("Check"); 
        Check.visible = currValues[0].value; 
    } 
    switch (Widget.opCode) 
    { 
        case 1: setDefaultValues(); break; 
        case 2: applyCurrentValues(); break; 
        default: break; 
    } 
    This sample JavaScript shows a component symbol that can change colors: 
    function setDefaultValues() 
    { 
        var currValues = new Array(); 
    //Name is the Parameter name that will be displayed in the Symbol Properties Panel 
    //Value is the default Value that is displayed when Component symbol loads first time. In this 
    case, Blue will be the default color when the Component symbol is used. 
    //Color is the Type of Parameter that is displayed. Color will invoke the Color Popup box 
    in the Symbol Properties Panel. 
        currValues.push({name:"BG Color", value:"#003366", type:"Color"}); 
        Widget.elem.customData["currentValues"] = currValues; 
    } 
    function applyCurrentValues() 
    { 
        var currValues = Widget.elem.customData["currentValues"]; 
    //color_bg is the Layer name in the PNG that will change colors 
        var color_bg = Widget.GetObjectByName("color_bg"); 
        color_bg.pathAttributes.fillColor = currValues[0].value; 
    } 
    switch (Widget.opCode) 
    { 
        case 1: setDefaultValues(); break; 
        case 2: applyCurrentValues(); break; 
        default: break; 
    }

    若要更好地了解如何使用 .JSF 文件来自定义元件属性,请浏览软件中包括的示例组件。

返回页首

导入和导出元件

“文档库”面板存储您在当前文档中创建或导入的元件。“文档库”面板特定于当前的文档;若要将一个库中的元件用在另一个文档中,请导入、导出、复制或拖动它们。

从 Fireworks 元件库导入一个或多个现成的元件

可以导入现成的动画元件、图形元件、按钮元件、导航栏和多元件主题。

  1. 打开 Fireworks 文档。

  2. 在“公用库”面板中选择一个文件夹。

    还可以从先前导出的库 PNG 文件(位于硬盘驱动器、CD 或网络上)中导入元件。

将元件从其它文件导入到当前文档中

  1. 从“文档库”面板的“选项”菜单中选择“导入元件”。

  2. 导航到包含该文件的 PNG 文件夹,选择该文件,然后单击“打开”。

  3. 选择要导入的元件,然后单击“导入”。

    导入的元件随即出现在“文档库”面板中。

通过拖放操作或复制和粘贴操作导入元件

执行下列操作之一:

  • 将元件实例从包含该元件的文档拖到目标文档中。

  • 在包含该元件的文档中复制一个元件实例,然后将其粘贴到目标文档中。

    该元件被导入到目标文档的“文档库”面板中,同时保留与原始文档中元件的关系。

导出元件

  1. 从“文档库”面板的“选项”菜单中选择“导出元件”。

  2. 选择要导出的元件,然后单击“导出”。

  3. 导航到文件夹,为该元件文件键入一个名称,然后单击“保存”。

    Fireworks 将这些元件保存在单个 PNG 文件中。

在多个文档中更新已导出的元件和实例

导入的元件会保持与其原始元件文档的链接。可以编辑原始元件文档,然后更新目标文档以反映所做的编辑。

  1. 在原始文档中,双击某个实例,或选择某个实例,然后选择“修改”>“元件”>“编辑元件”。

  2. 修改元件。

  3. 保存该文件。

  4. 在导入了该元件的文档中,从“文档库”面板中选择该元件。

  5. 从“文档库”面板的“选项”菜单中选择“更新”。

    注:  若要更新所有已导入的元件,请在“文档库”面板中选择所有元件,然后选择“更新”。

创建嵌套元件

在元件内创建的元件称为嵌套元件。

  1. 使用矢量工具在页面上创建对象。例如,使用矢量工具创建矩形。

  2. 右键单击该矩形并选择“转换为元件”。

  3. 在“转换为元件”对话框中,执行下列操作:

    1. 输入元件的名称。例如,称其为元件 A。

    2. 如果您打算对该元件应用 9 切片缩放,则选择“启用 9 切片缩放辅助线”。

  4. 双击该元件中心的“+”图标。

  5. 重复步骤 1 至 4 以创建另一个元件,即元件 B。由于元件 B 是在元件 A 中创建的,因此元件 B 是元件 A 的嵌套元件。

    注:  可以创建多个嵌套元件。

9 切片缩放嵌套元件

可以在一个元件中创建多个元件。这样的元件称为嵌套元件,可以单独对其进行缩放。

尝试对某个元件进行 9 切片缩放之前确保以下内容。

  • 创建元件时选择“启用 9 切片缩放辅助线”。

  • 确保处于要缩放的元件的“编辑”模式中。双击内部元件中的“+”图标可移至其编辑模式。

    转换基于 9 切片缩放设置的嵌套元件时,可以单独缩放嵌套元件。例如,考虑三级嵌套的元件 ― 元件 A 位于元件 B 中,而元件 B 位于元件 C 中。您可以根据其各自的 9 切片辅助线缩放元件 A(最内部)和元件 B(中间)。确保处于内部元件的“编辑”模式以使用 9 切片缩放。在就地编辑模式中,只能通过“库”面板查看用于嵌套元件的 9 切片缩放。双击画布上的某个元件不会显示 9 切片缩放辅助线。

为现有元件启用 9 切片缩放

  1. 移到创建元件的视图。

  2. 在“文档库”面板中选择“元件”并单击“元件属性”。

    注:  如果未显示“文档库”面板,则选择“窗口”>“文档库”以显示该面板。

  3. 在“转换为元件”对话框中,选择“启用 9 切片缩放辅助线”。


,