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

阅读数:396 2011 年 11 月 8 日

话题:语言 & 开发架构

目录

需求

预备知识

建议拥有使用 Fireworks 的经验。使用 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 文档的结构,如下表所述:

Fireworks 文件(文件和状态)

Flash Catalyst 项目(页面 / 状态)

Page_name(一个仅有一个状态的页面)

Page_name

Page_name(一个有多个状态的页面)

Page_name_state1_name、Page_name_state2_name 等

Page_name(多个页面,每个仅有一个状态)

Page1_name、Page2_name、Page3_name 等

Page_name(多个页面,每个有多个状态)

Page1_name_state1_name、Page1_name_state2_name、Page2_name_state1_name、Page2_name_state2_name 等

Fireworks 文件(层)

Flash Catalyst 项目(层)

Layer_name(一个仅有一个状态的页面)

Layer_name

Layer_name(供多个页面共享,每个页面仅有一个状态)

Page_name_layer_name

Layer_name(供多个页面共享,每一个页面上有多个状态)

Page_name_state_name_layer_name

请记住,对于 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)。

图 1. 对比 Fireworks 与 Flash Catalyst 之间的页面、状态和层。

图字:

Adobe Fireworks 中的页面和层

Flash Catalyst 中相应的层

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

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

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

准备路径、文本和位图供在 Flash Catalyst 中使用

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

使用路径(矢量)

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

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

下表总结了 Fireworks 中可用的路径(矢量)属性,以及它们在 Flash Catalyst 中的支持情况:

Fireworks 路径(矢量)属性

通过 FXG 进行 Flash Catalyst 导入

内部 / 居中 / 外部对齐描边

所有描边都以路径为中心

描边类别(实线、虚线等)

所有描边在导入时都没有末端和圆接头

描边形状

仅在导入时是圆形的

描边边缘

仅抗锯齿(没有实边或羽化效果)

描边填色

仅支持实色填充

描边纹理

不支持,描边将采用实色填充

描边宽度

保留描边宽度

填色超出描边

不支持,描边将以路径为中心

填色类型

实色、直线渐变、曲线渐变;在导出时其他渐变类型将扁平化为一个位图图形

填色边缘

仅支持抗锯齿(没有实边或羽化效果)

填色纹理

不支持;对象将采用实色填充

填色模式

在导出时路径将扁平化为位图

矩形圆角

在像素度量级别上保留圆角

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

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

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

从 FXG 导入

修改

导入的所有描边具有圆角

在 Flash Catalyst 中更改末端和接头,以还原方形描边和添加斜接或斜边角

应用于描边或填色的纹理丢失

将对象扁平化为位图图形,然后将您的设计导出为 FXG 文件

渐变填色强制对象导出为位图

Flash Catalyst 仅支持直线和曲线渐变;Fireworks 中的所有其他渐变类型都不受支持,必须首先扁平化为位图,然后再导出为 FXG 文件

描边或填色没有羽化的边

Flash Catalyst 不支持羽化效果;对象必须首先扁平化为位图,然后再导出到 FXG 文件

描边没有与路径正确对齐

仅支持以路径为中心的描边;在 Fireworks 中以不同方式绘制对象来模仿想要的外观,或者在导入 FXG 文件后在 Flash Catalyst 中修改矢量对象

理解支持的文本属性

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

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

Fireworks 文本属性

通过 FXG 进行 Flash Catalyst 导入

字体集和字体样式

支持

字体大小

支持

粗体、斜体和下划线

支持

前导和字距

支持,甚至支持用于一个文本块中的文本片段

对齐(左对齐、居中、右对齐、调整)

支持,但仅对于多行文本才明显,一行文本在 Flash Catalyst 中的行为始终类似于左对齐

抗锯齿

不支持,Flash Catalyst 使用一种不同的文本渲染引擎,所以省略了抗锯齿设置

文本填色

仅支持实色填充;在导出到 FXG 期间会忽略纹理

文本描边

不支持

旋转

保留了旋转角度,但导入后计算的文本对象位置可能不正确

段略缩进

部分支持;缩进仅适用于一个包含多段的文本块中的第一段

文本方向

不支持

基线移位

不支持导出到 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 中的区域文本对象。

图 2. 在 Flash Catalyst 中设置文本对象的 Fit Height 选项。

导出位图

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

Fireworks 忽略了通常可能用于为 HTML 或 CSS 导出识别前景或背景图像的任何切片。

使用分组、符号、组合形状、自动形状和蒙板

理解分组对象

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

图 3. 在 Flash Catalyst 中查看分组的内部构成。

使用符号

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

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

当将符号导出为 FXG 文件时,Firework 会自动分解它们,将符号分离为各个设计元素,然后将这些元素导出为针对 Flash Catalyst 优化的矢量图形。在 Flash Catalyst 中,所有元素都捆绑起来形成一个图形,但是如果您使用 Flash Catalyst 中的“分解图形”功能,可以将图形分解为各个设计元素。此功能很重要,因为具有多种状态的符号(比如按钮)会导出为优化的矢量图形——在使用“分解图形”功能之前,您不会看到按钮的所有状态。

如果使用 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. 图 4. 在 Fireworks 中选择 Over While Down 按钮状态。

  3. 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. 图 5. 在 Fireworks 中的属性检查器中设置矢量蒙板选项。

  3. 您可以将一个位图设置为 alpha 通道来遮蔽路径。导出的 FXG 文件将使用基于位图蒙板的 alpha 透明度来渲染。如果位图蒙板设置为为 grayscale,那么导出的路径将使用位图的形状遮蔽,但他将不包含 alpha 透明度效果(参见图 6)。
  4. 图 6. 在 Fireworks 中设置位图蒙板选项。

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

应用混合模式和滤镜

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

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

Fireworks 混合模式

Flash Catalyst 混合模式

Normal

Normal

Average

---

Dissolve

---

Darken

Darken

Multiply

Multiply

Color Burn

Color Burn

Inverse Color Burn

---

Soft Burn

---

Linear Burn

---

Lighten

Lighten

Screen

Screen

Color Dodge

Color Dodge

Inverse Color Dodge

---

Soft Dodge

---

Linear Dodge

---

Overlay

Overlay

Soft Light

Soft Light

Fuzzy Light

---

Hard Light

Hard Light

Vivid Light

---

Linear Light

---

Pin Light

---

Hard Mix

---

Difference

Difference

Exclusion

Exclusion

Negation

---

Hue

Hue

Saturation

Saturation

Color

Color

Luminosity

Luminosity

Red

---

Green

---

Blue

---

Reflect

---

Glow

---

Freeze

---

Heat

---

Additive

---

---

Add(与 Additive 不对应)

Subtractive

---

Subtract

Subtract

Interpolation

---

Stamp

---

XOR

---

Invert

Invert

Tint

---

Erase

---

---

Copy Alpha(当隔离时)

---

Erase Alpha(当隔离时)

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

确定对滤镜的支持

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

Fireworks 有效滤镜

Flash Catalyst 滤镜

Adjust Color >(多个滤镜)

不支持

Bevel and Emboss >(多个滤镜)

不支持

Blur > Blur

Blur (radius = 1, quality = High)

Blur > Blur More

Blur (radius = 1, quality = High)

Blur > (剩余滤镜)

不支持

Noise

不支持

Other > (多个滤镜)

不支持

Shadow and Glow > Drop Shadow

Drop Shadow

Shadow and Glow > Inner Shadow

Inner Shadow

Shadow and Glow > (剩余滤镜)

不支持

Sharpen >(多个滤镜)

不支持

Photoshop Live Effects >(多个滤镜)

不支持

---

Bevel

---

Glow

---

Inner Glow

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

为 Flash Catalyst 准备 FXG 文件时的特殊考虑因素

应用过渡

在 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.

图 7. 在 Fireworks 中的 Export 对话框中选择导出设置。

使用 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 中导出的图像如何显示。

要进一步研究,请访问以下在线资源:

clip_image010

本作品依据Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License授权

查看原文:Creating and exporting Fireworks graphics as FXG files for Flash Catalyst