ワークフローにおけるMXMLとイメージの書き出し

Fireworks CS3でMXMLとイメージの書き出しオプションが導入されたことにより、Fireworksは、事前に作成したFireworksデザインおよびレイアウトをFlexに移行するさらに有力な役割を果たせるようになりました。この機能の導入前は、Fireworksで作業しているデザイナーがFlexデベロッパーにレイアウトを提示し、その後FlexデベロッパーがFlexでそのレイアウトを再作成する必要がありました（図１を参照）。

図１．従来のFireworksからFlexへのワークフロー

今回のリリースでは、ユーザの代わりにMXMLの書き出しによってFireworksからMXMLへの変換が行われます（図２を参照）。

図２．MXMLの書き出しを使用したFireworksからFlexへのワークフロー

これにより、FlexデベロッパーはFlexでレイアウトを再作成する必要がなくなり、Flexでの開発により集中できるようになります。

新しいリッチシンボル

FireworksからFlexへの移行が可能になった理由の１つとして、Fireworksの共有ライブラリに格納されている新しいFlexリッチシンボルが挙げられます。このシンボルはFlexで使用できるコンポーネントのサブセットで、これを使用すると、デザイナーはFlexで使用できるアセットと同じものを操作できます。すべてのFlexコンポーネントを使用できるわけではありませんが、最もよく使用されるコンポーネントの大半が利用可能です。図３に、Fireworksデザイナーが使用できるFlexリッチシンボルの一部を示します。

図３．Flexコンポーネントリッチシンボルの一部

MXMLに変換しない場合でも、このようなシンボルを使用して、Flexで表示するデザインの模擬デザインを作成することができます。

MXMLの書き出しに関する制限事項

MXMLとイメージの書き出しオプションを使用する前に、その機能と制限事項を把握しておく必要があります。

MXMLとイメージの書き出しでは、スキンは作成されません。MXMLとイメージの書き出しを使用したドキュメントの書き出しでは、Fireworksでコンポーネントを変更した場合でも、Flexでコンポーネントのスキンは作成されません。MXMLの書き出しでは、Flexで使用するためのMXMLドキュメントのみ生成されます。また、このようなドキュメントには、MXMLタグに変換できないFireworksのオブジェクトのリンクされたイメージが含まれる場合もあります。このようなイメージは、<mx:Image>タグを使用してMXMLドキュメントに追加されます。

MXMLとイメージの書き出しでは、スライスは使用されません。MXMLの書き出しは、Flexで使用するためのタグベースのドキュメントであるMXMLドキュメントを生成することを目的としているので、スライスがHTMLの書き出しの場合のようにイメージまたはテーブルセルの作成に役立つことはありません。MXMLとイメージの書き出しオプションでイメージを作成する場合は、ドキュメントの最適化設定を使用して、書き出すイメージの形式および圧縮率が決定されます。

MXMLのプロパティはリッチシンボルのプロパティに制限されます。MXMLとイメージの書き出し機能でFireworksドキュメントをMXMLに変換する場合、MXMLタグのプロパティは、そのタグに関連するFlexリッチシンボルに関連付けられているプロパティに基づいて識別されます。FireworksでサポートされるFlexコンポーネントのサブセットのプロパティ数は制限されているので、Fireworksから設定するプロパティの一部を設定できない可能性があります。

スタイルは埋め込まれます。スタイルとして認識されるプロパティは作成されるMXMLタグと分離されますが、同じMXMLドキュメントの<mx:Style>タグ内に保持されます。Fireworksにおいてスタイルを外部CSSファイルで強制的に定義する方法はありません。

フレームはサポートされません。MXML出力のためにデザインおよびレイアウトを作成する場合、フレームは使用しないでください。１つのドキュメント内に複数のデザインを配置する場合は、ページを使用してください。

MXMLとイメージの書き出しの目的は、Flexを念頭に置いて（Flexリッチシンボルを使用して）デザインしたFireworksレイアウトをFlex内で使用できるレイアウトに変換することであるということに注意してください。これにはグラフィックスキンは含まれませんが、簡単な位置設定、いくつかのスタイリング、およびMXMLタグに直接変換できないオブジェクトのみのイメージを含めることに関する処理は含まれます。

FireworksでのFlexドキュメントの作成

FireworksでFlexデザインまたはレイアウトを作成する場合は、主に共有ライブラリパネルのFlexコンポーネントを使用して作業する必要があります（図４を参照）。

図４．共有ライブラリのFlexコンポーネント

これらのリッチシンボルは、期待どおりの結果が得られるようにするために、MXMLの書き出し専用として機能します。ドキュメントをMXMLとして書き出す際、これらの各シンボルがそれぞれのMXMLタグに変換されます。Flexコンポーネントとして認識されないドキュメント内のオブジェクトは、代わりにビットマップとして書き出され、<mx:Image>タグを使用してMXMLにリンクされます。

Cursor、ScrollBar、TabおよびToolTipシンボルは特殊なシンボルです。これらの特定のシンボルは、FireworksからMXMLへの直接変換がないので、MXML出力時に無視されます。例えばScrollBarは、Flexコンテナインスタンスのコンテンツをスクロールできるときにそのインスタンスに自動的に表示されます。Fireworksでは、これらのシンボルは単に、デザインの一部が機能する方法を示す装飾またはインジケータとして使用されます。

共有ライブラリのコンポーネントを使用する場合、常にまず必要となるコンポーネントをキャンバスにドラッグすることをお勧めします。次に、このコンポーネントのインスタンスを増やすために、共有ライブラリから作成された元のコンポーネントを複製するか、ドキュメントライブラリからインスタンスを取得します。ドキュメント内に既に存在するシンボルを共有ライブラリから取得しようとすると、ライブラリの競合を解決ダイアログボックスが表示されます。

FireworksドキュメントのMXMLへの書き出し

この例では、この記事と共に提供されているパッケージに含まれるサンプルファイルlogin.pngを使用します。

1. ソースファイルから、サンプルパッケージのFireworksフォルダ（[サンプルファイル]¥Fireworks¥）に格納されているlogin.pngを開きます。

   これは２ページのPNGドキュメントで、最初のページは図５のようになります。

   

   図５．login.pngの１ページ目

   Flexでは、これは２番目のメインページに進むためのログイン画面になります（図６を参照）。

   

   図６．login.pngの２ページ目

   インタラクティビティをFlexで実装する必要があることに注意してください。Fireworksで考慮されるのは、レイアウトと（ある程度）デザインだけです（これはいくつかのスタイリングを意味し、スキンは含まれません。MXMLとイメージの書き出しオプションでは、スキンはサポートされません）。

   Fireworksのこれらの各ページは、Flexで使用される個別のMXMLファイルを表します。キャンバス上の各Flexリッチシンボルは、MXMLの対応するコンポーネントに変換されます。それ以外はすべてイメージになります。複数のHTMLの書き出しと同様に、複数ページのMXMLとイメージの書き出しで作成されたMXMLファイルは、書き出されるページの名前を引き継ぎます。デフォルトでは、Fireworksのページ名にはスペースが含まれるので（「Page 1」や「Page 2」など）、書き出し前に、ページ名をFlexとより互換性がある名前に変更する必要があります。login.pngではこの変更が既に行われており、ドキュメントは書き出し可能な状態になっています。

2. プロジェクトがない場合はFlex Builder 2でプロジェクトを作成し、この書き出しをテストします。プロジェクトファイルが保存されている場所を把握しておいてください。Flex Builder 2の場合、この場所は次のとおりです。

   Windows： C:\Documents and Settings\[user]\My Documents\Flex Builder 2\[project name]

   Macintosh： Mac HD/Users/[user]/Documents/Flex Builder 2/[project name]

3. login.pngを開いた状態でファイル／書き出しを選択し、書き出しダイアログボックスを開きます。
4. 書き出しポップアップメニューから「MXMLとイメージ」を選択します。
5. 「サブフォルダにイメージを置く」チェックボックスをオンにし、書き出しフォルダのimages¥のデフォルトの書き出し先をそのまま使用します。
6. 「現在のページのみ」がオフになっていることを確認し、Fireworksの各ページが独自のMXMLファイルに書き出されるようにします。
7. ファイルブラウザで、Flex Builderプロジェクトに移動します。

8. 書き出しの「ファイル名」に、任意の名前を入力します（図７を参照）。これは複数ページの書き出しなので、書き出しダイアログボックスで使用される名前は無視され、ページに指定された名前が優先されます。対応するMXMLファイルの名前の指定に使用されるのは、このページ名です。

   

   図７．書き出しダイアログボックス

9. 「保存」をクリックして書き出しを完了します。
   ２つのファイルlogin.mxmlおよびmain.mxmlがFlexプロジェクトディレクトリに生成され、Flex Builderで開けるようになります。対応するFireworksのページによく似たページがデザインビューに表示されますが、スクロールバーなどの書き出されていないコンポーネントがある点が異なります。例えばこの場合、２ページ目にカーソル、ツールヒントおよびスクロールバーがありますが、これらはmain.mxmlページに書き出されていません（図８を参照）。

   

   図８．Flex Builderのmain.mxml

これらのファイルに関連付けられているイメージは、イメージフォルダに書き出されています。また、MXMLページ全体の２つのイメージも、他のイメージファイルで作成されています。これらのイメージはMXMLページにとって重要ではないので削除できますが、MXMLファイルの表示のプレビューとして使用することもできます。

従来では、ワークフローのこの時点で、デザイナーがデベロッパーにコンテンツを渡していました。MXMLとイメージの書き出しオプションを活用すると、必要なレイアウト作業が大幅に少なくなるので、デベロッパーはほとんどすぐに関数コードに取り組むことができるようになります。

ページ 2 / 5

前のページ

次のページ