• ホーム
• 購読申込
• ヘルプ
• アーカイブ

アドビの新しい画像ファイルフォーマット「FXG」

6月にFlash CatalystとFlash Builderのパブリックベータ版がリリースされた後、「FXG」という新しい画像ファイルフォーマットについてよく見かけるようになったのではないでしょうか。そのFXGが何なのか、みなさんご存じですか？　FXGは、Flash Catalyst、Flash Builder、Flex 4、Flash Professional、Creative Suiteユーザーにとって重要な存在です。その理由は何でしょうか？　本記事では、FXGについて詳しく解説していきます。まずは、MXML Graphicsについて解説し、MXML GraphicsからどのようにFXGに繋がるのか、そして新しいFlashプラットフォームでのデザイン・開発の枠組みにおいてどのようにFXGやMXML Graphicsを活用することができるのかを説明します。

MXML Graphicsとは？　FXGとは？

MXML GraphicsとFXGは、XMLベースの宣言型レイアウト言語を含むファイルフォーマットで、複雑なベクター画像やビットマップ画像でもXML形式で記述することができます。もっと分かりやすく言えば、シェイプや線、グラデーション、レイヤー、ブラー、ドロップシャドウといったアートワークを、読みやすいテキストベースのフォーマットで記述することが可能なのです。

Flashプラットフォームで作業するデザイナーとデベロッパーが直面する大きな課題の1つとして、「Flashアプリケーションの見た目をデザイナーが意図した通りに仕上げるプロセス」が挙げられるでしょう。そのプロセスを容易にするには、まず、「どうやってFlashの描画側面を、ActionScriptではなく、XMLベース言語に移行するか」という問題を解決する必要がありました。

この問題を分かりやすくするために、簡単な例を挙げて説明していきます。例えば、図1にあるように、横200×縦50ピクセル、黒から白への線状グラデーション付きの矩形を描きたいとします。これをFlashやFlexでの 従来の描画方法で記述するとなると、ActionScriptコードは以下のようになります。

var g:Graphics = this.graphics;
var fill:LinearGradient = new LinearGradient();
var g1:GradientEntry = new GradientEntry(0xFFFFFF, 0, 1);
var g2:GradientEntry = new GradientEntry(0x000000, 1, 1);
fill.entries = [g1,g2];
fill.rotation = 90;
fill.begin(g, new Rectangle(0,0,200,50));
g.drawRect(0,0,200,50);
fill.end(g);

図1　横200×縦50ピクセル、黒から白への線状グラデーション付きの矩形

とても整然としていて分かりやすい……とは言い難いですよね。ActionScriptに不慣れなデベロッパーにとっては理解するのが難しいでしょうし、Flash Catalystのようなツールであっても、このコードを「画面上に矩形を描画する」と読み取るのはほとんど不可能です。そこで、FXGへの第一歩として、Flex 4ではMXML Graphicsのシンタックスが導入されました。MXML Graphicsでは、Flash Playerの描画APIを一連のMXMLタグとして利用することが可能です。図1の矩形をMXML Graphicsで描画するとすると、以下のような記述になります。

<Group>
 <Rect x="0" y="0" width="200" height="50">
  <fill>
   <LinearGradient x="0" y="0" rotation="90">
    <entries>
     <GradientEntry color="#FFFFFF" ratio="0" alpha="1" />
     <GradientEntry color="#000000" ratio="1" alpha="1" />
    </entries>
   </LinearGradient>
  </fill>
 </Rect>
</Group>

先ほどのActionScriptコードに比べて、シンタックスは非常に分かりやすくなり、親子ヒエラルキーが明確なのでツールでも容易に構文解析することができます。そして、描画コードを、FlexコンポーネントコードやActionScriptコードの奥深い所に記述しなくてもいいのです。

MXML Graphicsでは、四角形・円形・塗り・線といった基本的な描画APIだけでなく、ブラーやグローといったフィルタ効果のAPIも利用することができます。ビットマップのアセットをGroupの子ノードとして持ち、そのロケーションやスケール、Z軸深度などを定義することが可能です。Flexを使えば、id属性と紐付けて、MXML Graphicsのコンテンツにトランジッションやエフェクトを適用し、任意のMXMLタグとして扱うことができます。MXML Graphicsは、MXML言語をベースにしながらも、このように非常に強力で魅力的な要素が追加されているわけです。

では、MXML GraphicsとFXGはどのような関係があるのでしょうか？　FXGがしていることは、MXML Graphicsのシンタックスをヘッダタグで囲み、「グラフィックの内容を記述したテキスト」を単独の外部ファイルとして利用できるようにしているだけです。例えば、図1と同じグラフィックをFireworks CS4で作成してFXG形式で書き出したとしましょう（メニューのコマンドから「FXGに書き出し」を選択）。生成されたFXGファイルは以下のようになります。

<?xml version="1.0" encoding="UTF-8"?>
<Graphic version="1.0" xmlns="http://ns.adobe.com/fxg/2008" xmlns:fw="http://ns.adobe.com/fxg/2008/fireworks" viewHeight= "50" viewWidth= "200">
 <Library>
 </Library>

 <Group id="ページ_1" fw:type="page">
  <Group id="ステート_1" fw:type="state">
   <Group id="レイヤー_1" fw:type="layer">
    <Rect x="0" y="0" width="200" height="50" blendMode="normal">
     <fill>
      <LinearGradient x = "166" y = "61" scaleX = "47" rotation = "90">
       <GradientEntry color="#ffffff" ratio="0" alpha="1"/>
       <GradientEntry color="#000000" ratio="1" alpha="1"/>
      </LinearGradient>
     </fill>
    </Rect>
   </Group>
  </Group>
 </Group>
</Graphic>

真ん中部分を見ると、先ほどのMXML Graphicsのコードと全く同じで、そこにラッパーGroupタグとヘッダタグが追加されています。ここで注目して欲しいのは、ルートのGraphicタグには、Fireworksへのリンクを張った「fw」という名前空間があるという点です。これが、FXGとMXML Graphicsを区別する大事なポイントです。FXGのソースを生成したツールのタギングを可能にしたことで、「コンテンツ・トランスポート」のような面白い機能を作成することができるのです。

トランスポート・レイヤーとしてFXGを使用する

MXML GraphicsとFXGについて解説しましたが、それでは、どうやってFXGをFlexアプリケーション以外で利用すればいいのでしょうか？　Flash Catalystベータ版で取り上げられていた特徴の中に素晴らしいワークフロー例がありました。Flash CatalystからIllustrator CS4へコンテンツを渡し、それからまたFlash Catalystへ戻すというラウンドトリップ機能があります。この機能を実現する上で、FXGが両アプリ間のトランスポート・プロトコルとして利用されているのです。

Flash Catalystでは、選択されたコンテンツ（MXML GraphicsかFXG、どちらかの形式のもの）を（必要ならばFXGに変換してから）Illustratorに送ります。その際、Flash CatalystはFXGコンテンツにレイヤーやステートなどの定義をマークアップしておき、その内容がIllustratorのレイヤーパネルに表示されます。

Illustrator側でレイヤーを追加したり、コンテンツを変更したり、オブジェクトを動かしたりなどの作業をしたら、それをFlash Catalystに戻します。その際、Illustrator側で加えた変更内容は自動でFXG形式に変換されるので、後はFlash Catalyst側で受け取ったFXGをプロジェクトで利用するだけでいいのです。このような使い方ができるというのは、非常に強力で、本当に素晴らしいことです！

このFXGを使ったワークフローに必要な作業はすべて舞台裏で行われているので、ユーザは何も気にすることはありません。IllustratorからFlash Catalystにコンテンツを戻す際に、FXG書き出しダイアログを見るくらいです。なお、このダイアログではFXGの書き出し設定を変更できますが、99.9%の場合、デフォルトの設定のままでOKです。ただ、アドビとしては、ユーザにできる限りの選択肢を用意しておきたいということでしょう。

アセットとしても利用できる

FXGの使い途は、先ほどのような作業道具としてだけではありません。直接Flash内のエクスポートファイルタイプとして使うことも可能です。Ryan Stewartが素晴らしいビデオ「using FXG directly inside a Flex 4 application」を公開しています。彼は、FXGファイルを他のアセットファイルと同じように扱っています。FXGの可能性を知る上でも、ぜひこのビデオを見てください。

現在、FXGをサポートしているのは、Photoshop CS4、Illustrator CS4、Fireworks CS4、Flash Catalyst、Flash Builder、Flex 4だけです。できたばかりのフォーマットですが、近い将来、より多くのツールでより深くサポートされるよう期待しています。実際、FXG仕様は1.0から1.1にアップデートしたばかりです。Flex 4、Flash Builder、Flash Catalystの正式リリースが近づくにつれて、もっとFXGについて耳にするようになるでしょう。FXGは、FlashプラットフォームやCreative Suiteツールにとって素晴らしい仲間であり、アプリケーションのデザイン・開発を行う上でのチーム作業のあり方を変えてくれる可能性を持っています。

FXGやFlex 4について詳しい情報を知りたい方は、「Flash Camp demo videos」や「Flex 4 Component re-architecture videos on Adobe Labs」をおすすめします。

‹ 戻る