移动端仍可深度探索的领域有哪些?点击看业内代表性技术方案及案例>> 了解详情
写点什么

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

  • 2011-11-08
  • 本文字数:11997 字

    阅读完需:约 1 分钟

目录

需求

预备知识

建议拥有使用 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)。

图 4. 在 Fireworks 中选择 Over While Down 按钮状态。

  1. 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)。

图 5. 在 Fireworks 中的属性检查器中设置矢量蒙板选项。

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

图 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

2011-11-08 03:53821

评论

发布
暂无评论
  • SQL Server 报表服务以及使用重叠数据

    在本文中,Grzegorz Gogolowicz和Trent Swanson解决了从SQL Server Reporting Services中导出报表的一个问题:数据来源是扫描图像或其他支持的格式,希望能输出固定布局或像素级完美的报表。

  • Flash Builder 4.5 中的编码工作效率增强

    Flash Builder 4.5 以 Flash Builder 4 发行版为构建基础,为代码编辑环境引入了各种改进功能,它们有助于在编写 Flex 和 ActionScript 代码时提高工作效率。

  • 40| 实战(四):如何实现 3D 地球可视化(上)?

    3D地球可视化是可视化应用里常见的一种形式,视觉上更炫酷,常用来实现全球地理信息相关的可视化应用,例如全球黑客攻防等等。

    2020-10-09

  • WXSS 特性之样式

    2018-03-30

  • 使用 Infragistics 放射状菜单组件,构建触摸导航功能

    Infragistics近期发布了UltraRadialMenu控件,帮助开发者使用彩色、数值和列表形式创建分档位的菜单。

  • 渲染流程(上):HTML、CSS 和 JavaScript,是如何变成页面的?

    渲染阶段很重要,了解其相关流程能让你“看透”页面是如何工作的,也可以解决一系列页面相关的问题。

    2019-08-15

  • 布局和展现相关的建议──给用户体验设计者

    Shane Morris是前微软UX的布道者,现任独立的UX架构师,在2010年澳大利亚TechEd大会上,他做了一个主题为“Pimp My App”的演讲,描述了在创建UX之前应该知道的5件事,构建好的布局的4个步骤和6个如何让产品更好看的建议。

  • Catalyst 逻辑计划:你的 SQL 语句是怎么被优化的?(上)

    今天,我带你探讨Catalyst优化器逻辑优化阶段的工作原理。

    2021-04-30

  • Adobe®推出新一代 Acrobat®XI

    2012年10月11号——Adobe®系统公司(纳斯达克股票代码:ADBE)今天在中国推出Adobe Acrobat® XI软件,这一强大的新解决方案能够应对当今复杂的文档挑战。PDF软件的行业标准现在将包括完全自如地编辑PDF和转换为微软PowerPoint;还有针对平板电脑和移动设备设计的新性能和功能,比如在平板电脑和智能手机上的触屏友好功能,用户可以添加评论,填写、保存和签署表格。

  • 使用 Flash Builder 中的分析工具改善 Flash Professional 项目的性能

    在本文中,您将探索如何在Flash Professional中设置Flash项目,以便您可以在Flash Builder中使用它们。这涉及到使用Flash Professional的项目面板并为在Flash Builder中调试而配置FLA文件。您还将学习如何在Flash Builder中打开一个Flash项目并在Flash Builder工作区中运行一个分析会话。

  • Flex 移动 skin – 第 2 部分:处理不同的像素密度

    在这个讨论创建 Flex 移动 skin 的系列的 第 1 部分 中,我讨论了 Flex 团队在 Mobile 主题中所做的性能优化的原理,提供了一个以性能为主要关注点的简单 Button skin 示例。移动 skin 领域的下一个主要主题是,针对当今可用的各种移动屏幕调整应用程序的外观和感觉。

  • 使用 Flex 4.5 SDK 和 Flash Builder 4.5 构建 Web 和移动参考应用程序

    在本文中,我将介绍如何构建同时适合传统Web和移动部署的应用程序。我们将探讨我们所构建的3个参考应用程序,其中每个应用程序既可在浏览器中作为传统的Web应用程序运行,又可以在移动设备上运行。这3个应用程序是Shopping Cart、Expense Tracker和Sales Dashboard应用程序。我们将介绍在为移动和平板设备以及Web构建Flex应用程序时的具体考虑因素。此外,我们还将介绍我的团队如何搭建应用程序,以在Web和设备项目之间共享代码。最后,我们将探讨在为所有形式的环境构建应用程序时应该考虑的性能因素。

  • 面向 Flex 3 开发人员的 Flex 4.5 和 Flash Builder 4.5 简介

    如果您亲自尝试过 Flex 3 SDK 风格的编码,那么了解 Flex SDK 以及开发环境中存在变化的一切方面可能有些困难。在这篇文章中,我将填补这一空缺,简要介绍 SDK 和 Flash Builder 中的新增内容。本文中还包含一个代码示例,同时也提供了各主题其他参考资料的链接。如果您是一名 Flex 3 开发人员,这篇文章将帮助您理解 Flex 3 与 Flex 4.5 之间存在着怎样的差别,以及在使用 Flex 4.5 SDK 开发移动应用程序时需要学习哪些知识。

  • 优化移动 AIR 应用程序的性能

    您是否想知道为什么具有较少可用CPU周期的控制台游戏(比如早期的Sony PlayStation的版本(PS1 ~33 MHz,PS2 ~300 MHz))的运行性能比具有600 MHz到超过1 GHz的桌面或移动设备上的一些Flash游戏更高?单独基于CPU周期来评估平台不是公平的对比,因为在不同平台上实现游戏时,硬件和软件都存在重大差异。要在任何计算机或设备上获得最优性能,一定要最大化硬件功能,以及实现软件开发最佳实践。在本文中,我将介绍有助于改善移动AIR应用程序性能的开发实践。

  • Flex 4 的十大变化

    本周Adobe发布了Flex 4(Gumbo)的首个官方beta版。该版本包含了众多的变化。本文从较高层次审视了这个流行RIA框架的最新版,讨论了其所发生的主要变化。

  • 46 丨数据集成:如何对各种数据库进行集成和转换?

    数据集成是数据分析之前非常重要的工作,它将不同来源、不同规范以及不同质量的数据进行统一收集和整理。

    2019-09-25

  • Flash Media Server 4.5 入门 – 第 5 部分:使用 OSMF 播放器进行流式传输

    本文是我们关于使用Adobe Flash Media Server 4.5的入门级教程系列中的第五部分。在此教程中,您将学习如何使用Flash Media Server 4.5(可通过开源媒体框架(OSMF)获得)通过Strobe Media Playback播放器流式传输视频。

  • Photoshop CS6 测试版可通过 Adobe 实验室下载

    北京 - 2012 年3 月 23 日 - Adobe 系统公司(纳斯达克股票代码:ADBE)今日宣布,最新一代数码影像行业标准 Adobe® Photoshop® CS6 的测试版已可通过 Adobe Labs 免费下载。用户可以下载测试版抢先体验并为产品团队提供反馈意见。Photoshop CS6测试版包含了众多突破性的创新特性、功能和惊人的性能提升,同时兼容 Mac OS 和 Microsoft® Windows® 平台。正式版本预计在 2012 年上半年发布。

  • Flash Professional 动作迁移指南

    如果在 Adobe Flash Professional中制作过任何动画,那么您一定在主要时间轴上创建过动作补间。这种经典模型被视为许多学生学习的基本Flash技能。从Flash CS4 Professional开始,动作补间的工作方式发生了变化。将您的技能转换为动作补间的最新工作方式需要一些工夫,但如果您理解动作补间在以前的Flash版本中的动作补间(有时称为经典补间)与Flash CS4及更新版本中的补间的基本区别,这种转变就不会太难。

  • 26|快速提取图片中的色块,模仿一张大师的照片

    当你进行工作汇报使用各种图表时,除了要考虑精确的数据、正确的结论外,合理的配色方案也是精确表达数据的重要部分。

    2021-04-10

发现更多内容

[Day22]-[链表]相交链表

方勇(gopher)

链表 LeetCode 算法和数据结构

Pandas+Numpy+Sklearn随机取数

Peter

Python pandas

“亿”点点技术情怀

不脱发的程序猿

程序员 程序人生 技术情怀

[Day23]-[数据结构]手写LRU

方勇(gopher)

LeetCode LRU 数据结构算法

Plato Farm-以柏拉图为目标的农场元宇宙游戏

西柚子

读《Software Engineering at Google》(13)

术子米德

架构师成长笔记

k8s client-go源码分析 informer源码分析(1)-概要分析

良凯尔

Kubernetes 容器 云原生 Client-go

初探 Lambda Powertools TypeScript

亚马逊云科技 (Amazon Web Services)

typescript Serverless Lambda AWS

机器学习算法:关联规则分析

Peter

Python 机器学习 算法

redis优化系列(二)Redis主从原理、主从常用配置

乌龟哥哥

4月月更

在docker上编译openjdk8

程序员欣宸

Java JVM 4月月更

甲辰篇 創世紀《「內元宇宙」聯載》

因田木

元宇宙 貴人網 電子書

我是如何用 Amazon Serverless 创建一个门铃的

亚马逊云科技 (Amazon Web Services)

Serverless Lambda AWS showdev

将新增和编辑的数据同步更新到列表

岛上码农

flutter ios开发 安卓开发 4月月更 跨平台开发

未来可期,PlatoFarm的生态通证登录Bitmart等全球四大平台

BlockChain先知

Flutter 一文搞定图片选择和图片上传

岛上码农

flutter ios开发 安卓开发 4月月更 跨平台开发

Robot OS系统架构设计

轻口味

android 架构 Robot 4月月更

读《Software Engineering at Google》(11)

术子米德

架构师成长笔记

读《Software Engineering at Google》(14)

术子米德

架构师成长笔记

一个快速追踪密切接触者的开源脚本方案

冯骐

Python 数据分析 流调 密接 新冠疫情

LabVIEW实现应用程序停止或退出

不脱发的程序猿

LabVIEW

LabVIEW控制电脑关机、休眠、注销和重启

不脱发的程序猿

LabVIEW LabVIEW控制电脑

解锁OpenHarmony技术日!年度盛会,即将揭幕!

OpenHarmony

大会 OpenHarmony

采用百度飞桨EasyDL完成指定目标识别

DS小龙哥

4月月更

世界读书日:我想推荐这几本书

宇宙之一粟

书籍推荐 书单 4月月更

Linux内核应该怎么学习?给大家推荐五本书籍

Linux爱好者

Linux Linux内核 驱动开发 嵌入式开发

GDB调试程序的核心技术-ptrace系统调用与使用示例

Linux爱好者

内存管理 Linux内核 进程管理 嵌入式开发 设备驱动

Pandas索引的操作

Peter

Python pandas

读《Software Engineering at Google》(12)

术子米德

架构师成长笔记

解决方案架构师的小锦囊 - 架构图的 5 种类型

亚马逊云科技 (Amazon Web Services)

技术 职业 亚马逊云科技

创建Fireworks图形并导出为FXG文件供Flash Catalyst使用_语言 & 开发_David Hogue_InfoQ精选文章