创建Fireworks图形并导出为FXG文件供Flash Catalyst使用

许多设计人员使用Adobe Fireworks创建线框图、页面模型和原型。可以在Fireworks中轻松地创建设计和图形并在Flash Catalyst中使用它们。使用Fireworks，您可通过将文件导出为FXG图形格式，创建自定义组件，以及甚至更复杂的交互式原型。

在本文中，您将学习一些结合使用Fireworks和Flash Catalyst的最佳实践。您将学习：

• 如何组织Fireworks文件，以便可在Flash Catalyst中轻松找到和使用图形和对象
• 如何在Fireworks中创建设计，这些设计可导出为可编辑的对象供Flash Catalyst使用
• 两种工具同时支持哪些对象、属性和操作

通过正确创建您的Fireworks文件并理解您的设计如何转换为FXG格式，您将可以在Flash Catalyst中更快和更高效地工作。

Fireworks和Flash Catalyst都有一个创建文档的类似系统。在Fireworks中，页面通常用于创建网站或应用程序的各个页面（或屏幕）。状态用于创建界面组件（比 如滚动条和按钮）的不同状态或外观（比如up、over、down、over while down、disabled）。层和子层用于保持设计中的对象和元素井然有序。

在Flash Catalyst中，您使用Pages/States面板创建各个页面（或屏幕），以及创建界面组件（比如按钮）的不同状态。层和子层用于保持设计中的对象和元素井然有序。

页面、状态和层的处理方式在Fireworks和Flash Catalyst之间存在一些区别：

• 层可以在Fireworks中所有或选定的页面之间共享，但Flash Catalyst项目中的所有层都显示在该项目的所有页面/状态上。
• 状态是Fireworks中的页面所独有的，但一个Fireworks文件中的每个页面和状态将导入Flash Catalyst中，作为它自己独立的页面/状态。

Flash Catalyst中的页面/状态和层的命名系统反应了原始Fireworks文档的结构，如下表所述：

请记住，对于Flash Catalyst项目中的每个页面/状态，Fireworks文件中每个页面和每个状态的每层都显示在Flash Catalyst中的Layers面板中。如果您习惯于Fireworks中的按页面查看层，可能会对此感到困惑。但是，如果在Fireworks文件中对您的所有页面、状态和层进行有意义的命名，您将发现Flash Catalyst项目的结构容易理解得多，您想要的资产也更容易找到。

对于项目中的所有页面/状态，没有位于原始Fireworks文档中一个特定页面上的层，将显示在Flash Catalyst中的Layers面板中，但在与Fireworks中没有这些层的页面对应的页面/状态上，这些层的可视性已关闭。例如，一个简单的两页面Fireworks文件（每个页面只有一个状态）作为一个具有两个顶级层（"Page1 Layers" 和 "Page2 Layers"）的两页面/状态Flash Catalyst 项目导出到FXG；在Flash Catalyst中的Page/State1中，"Page2 Layers" 上的对象的可视性是关闭的，反之亦然。

Flash Catalyst中保留了Fireworks中的子层的层分层结构。当导入FXG文件时，嵌套在Fireworks文档中的层将具有相同的结构。却能够记住，当您有一个具有多个页面和/或状态的Fireworks文件时，Flash Catalyst将为每个页面/状态创建一个顶级层，所以层分层结构在Flash Catalyst中将更深一级（参见图1）。

与Fireworks中的页面和/或状态共享的层也将显示在Flash Catalyst中每个相应的页面/状态中。与Fireworks中的页面共享的层具有一个全局可视性设置，它们要么在所有页面上可见，要么在所有页面上 不可见。与Fireworks中的状态共享的层可以按状态设置可视性，一个共享层可以在部分状态上可见，而不是在共享它的所有状态上。共享层的页面和状态 可视性设置在Flash Catalyst中得到了保留。

最后，Fireworks文档中的一个页面的画布大小定义了Flash Catalyst中的项目的艺术板的大小。在Flash Catalyst CS5中，每个页面/状态具有相同的艺术板尺寸，但在Flash Catalyst CS5.5中，艺术板可能在各个页面/状态中具有独立的大小。这意味着如果原始的Fireworks文档具有不同的页面大小，可能必须调整某些艺术板。

正确地创建Fireworks文档并有意义地命名每个页面、状态和层，这将使在Flash Catalyst中查找对象和应用行为简单得多。

Fireworks是一个混合矢量和位图工具。它可将设计导出为FXG文件格式，其中包含两种图形类型以及文本对象。路径（也称为矢量）和文本对象在 Flash Catalyst中仍然可编辑。但是，Fireworks中可用的一些对象特性和属性目前在Flash Catalyst中不受支持。出于此原因，您可能发现有必要在从Fireworks导出FXG文件之前，修改、简化或者甚至扁平化您设计的一些元素。

使用路径（矢量）

路径（矢量对象）在导出为FXG文件时保持其形状（节点、片段和贝塞尔曲线）完全不变。但是，所有路径都使用以下属性导入，无论它们在Fireworks中具有何种原始路径样式：

• 描边以路径为中心
• 描边没有末端
• 描边具有圆接头
• 所有填色都是抗锯齿的（Flash Catalyst中不支持实边填色和羽化填色）。

下表总结了Fireworks中可用的路径（矢量）属性，以及它们在Flash Catalyst中的支持情况：

具有不受支持的属性的路径要么将被简化（不受支持的属性将转换为支持的属性，比如描边对齐），要么将在导出到FXG时扁平化为一个位图图形。在导出期间会忽略纹理，应用于描边和/或填色的具有纹理的对象不会在导出期间自动扁平化，您必须在导出到FXG之前将它们扁平化为位图，以保留它们的纹理外观。

如果您发现导入到Flash Catalyst中的路径看起来不一样或在导出期间丢失了属性，请检查是否设计的任何属性未得到全面支持。可能有必要在Flash Catalyst中编辑路径，以还原属性或将对象扁平化为位图，然后再从Fireworks将设计导出为FXG文件。

下表列出了需要小心处理的最常用的路径属性：

理解支持的文本属性

Fireworks文档中的文本在Flash Catalyst中仍然可编辑，只要它未在导出之前扁平化为位图或转换为路径。Fireworks中有许多文本属性。大部分常见的属性都受导出到FXG文件的过程支持，也受Flash Catalyst支持。

下表总结了Fireworks中可用的文本对象属性，以及它们在Flash Catalyst中的支持情况：

与矢量对象一样，不支持的属性会在导出到FXG文件的过程中被简化或忽略，但文本对象在导出时仅扁平化为位图图形。文本只会导出受支持的属性并保持其可编辑，而不会自动扁平化。如果您需要一个文本对象保留其外观，并且它使用了不受Flash Catalyst支持的属性，那么您应该将该文本扁平化为位图图形，然后再导出为FXG文件。

Fireworks与Flash Catalyst之间的一个重要区别在于点和区域文本对象的行为。在Fireworks中，点文本对象的水平长度将不断增长，直到您按下 Enter/Return键并强制换行；区域文本对象具有预定义的宽度，文本会在它到达该宽度时自动换行，但区域文本对象没有固定的高度。

在Flash Catalyst中，点文本对象的行为与在Fireworks中一样，但区域文本对象在Flash Catalyst中既具有固定的宽度，又具有固定的高度。如果您从Fireworks中导出一个区域文本对象，然后在Flash Catalyst中更改该对象中的文本量，多余的文本可能溢出到固定宽度区域的下边界限以下的视图。如果发生此情况，您可以在Flash Catalyst更改区域文本对象的高度，或者将该文本对象更改为Fit Height类型（参见图2）。Flash Catalyst中的固定高度文本对象的行为类似于Fireworks中的区域文本对象。

导出位图

位图可能是最容易从Fireworks导出到FXG文件的独享。页面优化设置与何时导出到FXG文件格式没有关联，因为矢量和文本仍然可编辑，而且所有位图都导出为32位PNG文件（24位色深加上用于实现透明度支持的8位alpha通道）。

Fireworks忽略了通常可能用于为HTML或CSS导出识别前景或背景图像的任何切片。（实际上，在导出FXG文件时，Fireworks会胡列所有Web层的切片和热点。）在Fireworks中，不能用切片去标明任何在切片之下需要被作为位图导出对象。如果你需要将某个设计元素导出为位图，请将其平面化后再导出为FXG文件格式。

理解分组对象

在导出到FXG文件时，您在Fireworks中创建的分组对象会保持分组形势，分组名称将在Flash Catalyst中的Layers面板中显示。一个关键区别是，Flash Catalyst允许您使用一种类似打开子层的行为，从Layers面板 "看到分组的内部构成" 。（单击分组名称左侧的小箭头可以打开分组，查看分组中的对象列表）。在Fireworks中，您必须取消一组对象的分组，才能看到一个分组内的对象（参见图3）。

使用符号

当使用Fireworks时，您可以创建两种类型的符号：组件符号和标准符号。组件符号（以前称为富符号）可在Common Library中找到，具有可编辑的属性。标准符号（图形、动画和按钮符号）可在一个文档中轻松创建，然后使用Document Library中的导出和导入符号功能或通过将符号保存到Document Library来用于其他文档中。

所有符号在本质上都是可在整个文档中反复使用的矢量、文本和/或位图元素的分组。组件符号可按实例设置属性，而标准符号对于所有实例具有相同的属性（支持您编辑一个标准符号来更新所有其他实例）。

所有符号在本质上都是可在整个文档中反复使用的矢量、文本和/或位图元素的分组。组件符号可按实例设置属性，而标准符号对于所有实例具有相同的属性（支持您编辑一个标准符号来更新所有其他实例）。"分解图形" 功能，可以将图形分解为各个设计元素。此功能很重要，因为具有多种状态的符号（比如按钮）会导出为优化的矢量图形——在使用 "分解图形" 功能之前，您不会看到按钮的所有状态。

如果使用Fireworks创建具有多种状态的按钮符号，您必须完成两个重要步骤，确保您在Flash Catalyst中导出了正确的内容，以便能够组装按钮：

1. Fireworks中的按钮符号有4个状态：Up、 Over、Down和Over While Down。在Flash Catalyst中也有4个按钮状态，但第四个状态为Disabled（而不是Over While Down）。当在Fireworks中创建按钮状态时，请记住将Disabled状态图形放在第四个（Over While Down）按钮状态中（参见图4）。

2. Fireworks在按钮的每个状态中导出按钮标签文本对象的一个独立实例，而不是导出一个由按钮的所有页面/状态共享的文本对象。如果您希望每个按钮状态上的文本标签有一种独特的外观，将需要在Flash Catalyst中编辑每个按钮状态上的标签。不幸的是，如果在Flash Catalyst中创建按钮组件时分配从Fireworks导出的文本对象作为按钮标签，该文本标签的原始外观和样式会丢失并必须重新创建。您可能发现从 Fireworks导出没有文本标签的按钮，然后从Flash Catalyst内将标签添加到按钮中，这样更容易。

要根据从Fireworks导出的按钮符号，在Flash Catalyst中创建一个多状态按钮，可以执行以下步骤：

1. 在Fireworks为该按钮符号设计必要的按钮状态。如果愿意，可以选择省略或者甚至删除按钮上的文本标签，在您将文件导入到Flash Catalyst中时再添加它。
2. 将按钮符号导出为FXG文件格式。
3. 使用Flash Catalyst打开FXG文件。
4. 找到按钮图形并选择它。
5. 将该图形转换为按钮组件。
6. 进入按钮的原地编辑模式（双击组件，或者选择按钮并从HUD中选择编辑一个状态）。
7. 选择按钮图形，从HUD中选择Optimize Artwork > Break Apart Graphic。请注意，在Fireworks中为按钮状态指定的4个层显示在Layers面板中。
8. 它可能是嵌套的，但是如果您下钻到这些层，将会在每个子层的最低级找到按钮每个状态的图形；请注意，对于除 "Up" 层以外的所有层，每个状态的图形的可视性是关闭的。
9. 手动调整每个子层上的按钮图形的可视性，以与相应状态匹配（比如对于Over按钮页面/状态，在Flash Catalyst中关闭up层的可视性，而打开over层的可视性）。
10. 如果您导出没有文本标签的按钮，在Flash Catalyst中按钮的Up状态中创建一个文本对象，将它指定为组件的按钮标签。如果您从Fireworks导出文本标签，可以在Flash Catalyst中选择按钮的Up状态中的文本对象，将它指定为组件的按钮标签，再重新创建文本标签的外观，然后在Flash Catalyst中删除其他按钮状态上从Fireworks导出的多余的文本对象。

如果您从Common Library导出组件符号，在导出到FXG文件时，所有文本标签会恢复到它们针对该符号的默认值。例如，如果默认文本为 "Button" （黑色、Arial、12磅），并在Symbol Properties面板中将按钮标签更改为 "Send Now" （红色、Tahoma、14磅），然后将文档导出为FXG格式，那么当您在Flash Catalyst中打开FXG文件时，该按钮将具有默认的文本标签 "Button" （黑色、Arial、12磅），而不是您指定的红色 "Send Now" 标签。在导出到FXG文件时，所有组件符号和标准按钮符号中的文本对象将恢复为它们的符号默认设置，因为符号会导出为它们的基本或默认外观。如果您希望保留修改的符号外观，将符号分开，分组组件，并为分组分配一个有意义的名称，然后再导出到FXG文件。

Fireworks还使您能够创建图形和动画符号。图形符号导出为优化的矢量图形；如果您需要访问一个图形符号中的所有内容，可以使用分解图像功能。动画符号也导出为优化的矢量图形，但因为动画符号在Fireworks中具有多个状态，在Flash Catalyst中打开文件时将有多个页面/状态。只有Flash Catalyst中的第一个页面/状态将具有来自动化符号的图形。不幸的是，Flash Catalyst中剩余的页面/状态可能是空白的或空的，因为动画的所有状态都包含在优化的矢量图形内，而不是单独放在不同的页面/状态上。

如果您在Fireworks中旋转一个符号，它将导出为一个分组中的一个优化的矢量图形，旋转将被保留。如果您在Fireworks中缩放一个符号（将一个符号的实例调整到比原始符号更小或更大），它也将导出为一个分组中的一个优化的矢量图形，但缩放更改不会保留。如果在Flash Catalyst中取消缩放的符号的分组，它可能会意外地更改大小，但是然后您可以在Flash Catalyst内正确缩放它。看起来缩放系数没有恰当地保留为FXG文件中的一个转换属性，所以最好在Fireworks中保持符号未缩放，在 Flash Catalyst中打开FXG文件之后再调整它们的大小。

其他转换属性（比如倾斜和扭曲）不受FXG格式支持，Fireworks中一些倾斜或扭曲的符号将按默认的符号大小和形状导入到Flash Catalyst中。如果您需要对象倾斜或扭曲地显示，可以将符号扁平化为位图，然后再将它导出到FXG文件。

导出组合形状

组合形状（和组合路径）在导出时会转换为路径（节点、片段和贝塞尔曲线）。组合形状会自动组合到组合路径中，所有组合路径都以它们支持的填色和描边属性（参见上面的列表，查看支持的路径属性）来导出。

编辑自动形状

自动形状在Fireworks中具有特殊的可编辑属性，这使创建复杂的形状和对象成为了可能。自动形状转换为路径并使用支持的填色和描边属性来导出。自动形状的特殊可编辑属性在Flash Catalyst中不会保留。请在将设计从Fireworks导出到FXG文件之前，始终验证自动形状是否拥有您想要的形状和路径属性。

创建蒙板以用于Flash Catalyst中

Flash Catalyst支持使用alpha和剪切蒙板，即使蒙板无法从Flash Catalyst内修改。您可以在Fireworks中创建将成功导出到FXG文件的蒙板。支持的蒙板类型会在Flash Catalyst中正确渲染。

在Fireworks中，您可以将蒙板同时应用到位图和矢量对象。要获得蒙板位图的最佳结果，建议扁平化蒙板位图，然后再将资产导出到FXG文件。尽管Fireworks将把相同类型的蒙板位图导出到FXG文件，但结果并不始终都是准确的，尤其是在向位图应用了滤镜和特效时。如果导出一个蒙板位图并注意到滤镜和特效翻倍了（例如，投影到黑度变为了两倍），或者蒙板没有正确渲染（因为不透明度不正确），可以返回到 Fireworks并扁平化蒙板位图，然后再次将它导出为FXG文件。

当您在Fireworks中间蒙板应用于路径时，FXG导出支持两种类型的蒙板：

1. 您可以使用另一个路径（矢量）对象遮蔽一个路径。所有矢量蒙板都使用一个实边导出，而不显示任何填色和描边。如果矢量蒙板是使用Show fill and stroke或Grayscale appearance选项创建的，那么导出将恢复为实边，而不显示描边或填色（参见图5）。

2. 您可以将一个位图设置为alpha通道来遮蔽路径。导出的FXG文件将使用基于位图蒙板的alpha透明度来渲染。如果位图蒙板设置为为grayscale，那么导出的路径将使用位图的形状遮蔽，但他将不包含alpha透明度效果（参见图6）。

当在Flash Catalyst中打开具有蒙板的FXG文件时，具有蒙板的对象位于一个分组中。您可以在Flash Catalyst中使用Direct Select工具来选择遮蔽的路径对象，调整它相对于蒙板的位置——如果您需要通过蒙板调整路径对象的可见部分。然后可以使用Select工具移动整个遮蔽的对象分组。

理解Flash Catalyst中对混合模式的支持

下表总结了Fireworks中的混合模式，以及它们与Flash Catalyst中可用的混合模式的对应关系：

如果您在Fireworks中将一种不受Flash Catalyst支持的混合模式应用于一个对象，在导出FXG文件的过程中，该对象会扁平化并导出为位图，以便保留原始图形的外观。请注意，Fireworks中的Additive混合模式与Flash Catalyst中的Add混合模式不是对应的；尽管两种混合模式的外观非常相似，但它们在数学上不是相等的，可能产生稍微不同的结果。

确定对滤镜的支持

下表总结了Fireworks中有效的滤镜，以及它们与Flash Catalyst中支持的滤镜的对应关系：

如果您在Fireworks中将一个不受Flash Catalyst支持的有效滤镜应用于一个对象，在导出到FXG文件的过程中，该对象会扁平化并导出为位图，以保留原始图形的外观。请注意，尽管 Fireworks提供了Bevel、Glow和Inner Glow特效，但这些特效在不受Flash Catalyst中对应的滤镜支持，与它们之间也没有对应关系。

应用过渡

在Fireworks中，您常常将一个界面元素的不同状态绘制为Fireworks文档中不同状态、层或者甚至页面上的独立对象。我们很容易理解，我们在一个位置看到的对象只是来自另一个位置的一个界面元素的一个不同状态。但是，Flash Catalyst不会在两个独立的对象之间建立连接，它将所有对象是为分开且独立的实例。

例如，如果您设计一个可折叠的模块，它在Fireworks中的一个页面、状态或层中打开，而在另一个页面、状态或层中关闭，Flash Catalyst会将这两个版本解释为分开的对象。如果您希望在Flash Catalyst添加交互性，以显示这个可折叠的模块将如何打开和关闭，那么您无法告诉Flash Catalyst这两个对象实际上是相同对象的两个状态，以及这些状态应该从一个过渡到另一个，以及反向过渡。

如果您需要在Flash Catalyst中创建应用了过渡的对象，您应该在Fireworks中创建该对象的最复杂版本，以确保在导入FXG文件时，您将拥有设计的所有组件。在 Flash Catalyst中打开FXG文件之后，您将需要在另一个页面/状态上修改该对象，然后再在时间轴上应用过渡。您仅需要在Fireworks中绘制将在 Flash Catalyst中拥有过渡的对象的实例，因为Flash Catalyst在理解不同页面/状态上的一个对象的格式或状态属于相同对象时，它只能理解如何应用过渡。

为自定义组件创建图形

当在Fireworks中创建自定义组件时，您可在Flash Catalyst中组装自定义组件时使用一些提示和技巧来简化不同部件的查找。首先，熟悉Flash Catalyst中的组件的标准部件名称，然后在Fireworks中使用与这些部件对应的名称命名对象和分组。在创建组件以及分配行为和过渡时，此策略可大大简化部件的识别。

Flash Catalyst将优化的图形、位图和组件存储在Assets面板中。Fireworks中的位图和符号将分别成为FXG文件中的位图和优化的图形。您可以在Flash Catalyst中的Assets面板中访问这些对象。请记住，在Flash Catalyst中，组件是从图形资产创建的，所以从Fireworks导出的任何对象都不会显示为Assets面板中的一个组件。如果您希望 Fireworks文档中的一个对象或分组显示为Assets面板中一个优化的图形，可以首先将它转换为一个图形符号，然后再将它导出到FXG文件。

导出层和状态

当不使用Fireworks中的按钮符号时，将层（而不是状态）用于按钮的不同状态。按钮符号以优化的矢量图形形式导出到FXG文件中，将所有状态都捆绑到优化的分组中，因为一个按钮符号的状态在Fireworks中是嵌入到该符号中的。但是，当在按钮符号外部使用状态时，Fireworks中的每个状态将导出为Flash Catalyst中一个独立的页面/状态。结果，您将获得多余的页面/状态，在创建自定义按钮组件之后常常需要删除它们。

使用分组来组织资产集

使用分组来帮助跟踪自定义组件的不同部分。Fireworks中的分组将以分组的形式导出到FXG文件中。您可以在Layers面板中打开一个分组，以在Flash Catalyst中检查它的内容。

例如，Flash Catalyst中的一个自定义滚动栏组件包含一个轨道、缩略图、up按钮和down按钮。在Fireworks中，这些部分中的每一个都使用多个图形对象来绘制。选择组成缩略图的所有图形，将它们分组，然后将该分组命名为“thumb”。对自定义组件的每一部分重复此分组过程。所有部分都拥有自己的分组之后，选择滚动栏组件的所有分组并再对其分组，将这个最后的顶级分组命名为“scrollbar”。当在Flash Catalyst中打开导出的FXG文件时，将可以轻松地找到并选择scrollbar分组，将它转换为一个自定义组件，然后在组装过程中每个部分分组分配给各个组件部分。

当将您的Fireworks设计导出为FXG格式时，Export对话框提供了3个选项。选择导出为FXG和图像的选项之后，从以下选项中选择一个来导出文件（参见图7）：

• Current page
• All pages
• Selected objects on the current page.

使用Pages菜单仅导出您的Flash Catalyst项目需要的页面或对象。如果您已从Fireworks导出一个完整的文档，并只需修改一个或一些对象，您可以从Fireworks单独导出这些对象，并重新将它们导入到Flash Catalyst中，而不是重新导入整个项目。

如果您选择仅导出当前页面中的选定对象的导出选项，然后在Flash Catalyst中打开FXG文件，您将看到一个名为Selection的分组，其中包含来自Fireworks文件的选定对象。如果您希望独立地操作导出的对象，可以取消对这组对象的分组。也可以选择保留并重命名分组。如果您保留分组，可以使用Direct Selection工具来选择分组中的各个对象。

准备位图

如果您在设计中使用了大量位图对象，并且您希望能够在更新它们时独立地导出它们（而不是将整个Fireworks文件导出为FXG文件），可以将位图的副本放在它们自己的页面上，每层一个位图，然后使用Export Layers as Files选项将对象导出为位图（比如PNG32）。将导出的、优化的位图复制到包含Flash Catalyst项目的图像的文件夹中。确保您为图像使用了相同的文件名，覆盖或替换了图像的以前版本。当在Flash Catalyst中打开该项目时，新位图将可供使用。

如果您需要快速获得在Fireworks中创建的位图并在Flash Catalyst中使用它，可以绕过Export as FXG过程，仅适用复制（从Fireworks）和粘贴（到Flash Catalyst项目中）。将位图粘贴到Flash Catalyst还会在Asset面板中增加该图像的一个副本。这可以确保即使您从艺术板删除了粘贴的副本，位图文件的一个版本仍然可作为一个资产供您以后重用。

希望本文清楚解释了一些与从Fireworks导出FXG文件相关的概念，以及如何在Fireworks与 Flash Catalyst之间共享图形元素。了解具体操作过程的最佳方式是，创建一些测试和示例项目，查看在 Flash Catalyst中打开FXG文件时在Fireworks中导出的图像如何显示。

要进一步研究，请访问以下在线资源：

• Flash Catalyst开发人员中心
• Flash Catalyst帮助和支持
• 导出页面和对象为FXG文件
• Fireworks CS5到Flash Catalyst CS5保真度检查清单
• Fireworks中的FXG 2.0支持 – 值得期待的功能
• FXG图形格式简介
• FlashCats：Flash Catalyst提示和技巧
• Fireworks CS5：FXG文件到Catalyst的转变