BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

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

| 作者 David Hogue 关注 0 他的粉丝 发布于 2011年11月9日. 估计阅读时间: 44 分钟 | ArchSummit北京2018 共同探讨机器学习、信息安全、微服务治理的关键点

目录

需求

预备知识

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

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT