Adobe FXG圖檔格式簡介

Adobe FXG圖檔格式簡介
文∕趙英傑

Flash可以匯入Photoshop的PSD原始檔，也能匯入Illustrator的AI原始檔，但這些軟體之間缺乏一個可來回編輯的共通圖檔格式，FXG因應而生。

FXG是Adobe提出的平面向量圖檔格式，主要是作為在Adobe的影像繪圖等軟體之間交換高畫質影像的通用格式。FXG的全名是Flash XML Graphics，從字面上可得知此格式是基於XML的純文字檔，因此我們可以用任何文字編輯軟體來修改它。

目前支援FXG圖像格式的軟體包括Flash, Photoshop, Illustrator, Fireworks與Flash Builder (Flex)。註：要在Photoshop CS5中啟用匯出FXG圖像功能，請先到Adobe Labs網站下載Adobe Flash Catalyst CS5.5 FXG Roundtrip Extension for Adobe Photoshop CS5，並且在匯出FXG之前，先執行「檔案→指令碼→簡化FXG的圖層（File→Scripts→Simplify layers fro FXG）」指令。

因為FXG是一種「平面向量圖檔」，所以它無法忠實地保留Flash的所有元素，舉例如下：

• 不包含動畫、視訊、聲音等多媒體元素；動畫將只呈現單一影格畫面。
• 無法匯出文字欄位裡的嵌入字體
• 無法保留3D旋轉效果，例如，在TLF文字上設定3D旋轉之後匯出成FXG格式，影像檔將只保留TLF文字欄位。
• 使用骨塊工具調整過的圖像，將能保留修改後的外觀，但是骨塊和反向運動等資訊將不被保存。
• 可匯出按鈕元件，但只保留「一般」狀態的影像。
• 可匯出圖像和影片片段等元件，但只保留第一個影格畫面。
• 可保留元件的「顏色效果」和「濾鏡」
• 無法匯出組件，原先顯示組件的地方會變成空白。
• 影像裡面若包含點陣圖，該點陣圖將被另外存放在以“FXG檔名.assets”格式命名的資料夾之中。

對於ACA和ACE認證考試，以上的背景資訊已經足夠；底下是FXG的補充說明。

在Flash Builder 4.x（Flex）中使用FXG指令繪圖

為了觀察FXG檔，請開啟新的Flash文件後，在舞台上畫一個橙色矩形，然後選擇「檔案→匯出→匯出影像」指令，匯出成.fxg格式。

接著使用記事本或其他文字編輯軟體開啟，即可看到類似底下構成橘色矩形的主要程式片段：

<Group d:type="layer" d:userLabel="圖層 1">
  <Path x="0" y="0" data="M140 20 140 120 20 120 20 20 140 20">
    <fill>
      <SolidColor color="#FF9900"/>
    </fill>
  </Path>
</Group>

構成FXG圖像的指令，其實是MXML語言的子集，MXML則是Adobe Flex框架當中，用於建立應用程式外觀與介面的標籤語言。因此，FXG的指令可以被融入Flex 4的MXML文件。只要將上面的程式片段貼入Flex的MXML原始檔，標籤前面加上Flex 4的Spark組件命名空間“s”：

<s:Group>
  <s:Path x="0" y="0" data="M140 20 140 120 20 120 20 20 140 20">
    <s:fill>
      <s:SolidColor color="#FF9900"/>
    </s:fill>
  </s:Path>
</s:Group>

即可在Flex中繪製出橙色矩形：

程式中的Group標籤用於定義群組，Path則是定義繪圖的路徑。路徑的資料是由一連串x, y數據構成，“M140 20”當中的M，代表“Move cursor”（移動游標），也就是設定路徑的初始位置。因此，上面的資料代表從(140, 20) 到 (140, 120), (20, 120),…依序連線構成一個矩形區域。

Path標籤裡面的Fill（填色）與SolidColor（實色）標籤代表在此封閉路徑區域內填入橙色（#FF9900）。

除了Path（路徑）標籤，MXML也支援Line（直線）、Rect（矩形）和Ellipse（橢圓形）等繪製基礎形狀的指令，例如，底下的程式片段將在MXML中繪製寬、高各100、5像素的黑色外框線（stroke）、填入黃色的圓形：

<s:Group>
    <s:Ellipse width="100" height="100">
      <s:stroke>
        <s:SolidColorStroke color="#000000" weight="5"/>
      </s:stroke>
      <s:fill>
        <s:SolidColor color="#FFFF00"/>
      </s:fill>
   </s:Ellipse>
</s:Group>

此程式片段在Flash Builder 4.5軟體中實際呈現的外觀如下：

在Flex中嵌入FXG圖檔

在Flex中使用FXG圖像最簡單方便的工作流程，當然是從繪圖軟體匯出FXG圖檔，然後直接嵌入該圖檔。

若要直接在Flex中引用.fxg檔，只需要使用BitmapImage元素並指定.fxg的路徑，例如，底下的敘述代表在畫面上嵌入assets資料夾裡的image.fxg圖檔。

<s:BitmapImage source="@Embed('assets/image.fxg')"/>