Flash Catalyst:PhotoshopデザインがそのままFlexアプリのViewへと変わる!

Adobe MAX 2007でコンセプトデモされた「Thermo」(コードネーム)が、2008年11月米国サンフランシスコで開催されたAdobe MAX 2008で、ついにMAX 2008 Preview版(ベータ未満のバージョン)として初披露されました。正式名称は「Flash Catalyst」。次世代のFlex開発ワークフローを大きく変えると期待されているこのツールをAdobe MAX Japan 2009に先駆けて、少しだけご紹介しましょう。

一般的なFlex開発ワークフロー

Flexアプリケーションを開発する際の一般的なワークフローを見てみましょう。まず、デザイナがPhotoshopやIllstratorなどの描画ツールで画面をデザインします。次に、FlexのMXMLの知識がある担当者がデザイナの作成した画面デザインを見ながら、PanelやCanvas、TextInput、ButtonなどのFlexコンポーネントをFlex Builderで配置して、Viewを作成していきます。画面デザインファイルは、必要に応じてFlexコンポーネントのスキンとして切り出され再利用されます。

この時よく議論になるのは、デザイナがMXMLを覚えてViewを担当すべきか、それともMXMLを既に知っているFlexデベロッパが担当した方がよいのか、ということです。どちらも一長一短があるので結論付けるのは難しいのですが、後者のFlexデベロッパが担当している状況が多いようです。

Flash Catalystのスプラッシュ・スクリーン

Flex開発における2つの課題

この一般的なデザイナとデベロッパのワークフローには2つの課題があります。

課題1:画面デザインの再利用性の低さ

デザイナが作成した画像ファイルは、前述の通りFlexコンポーネントのスキンとして一部再利用することが可能です。しかし、全ての再利用には至らず、次のフローに持ち越されない画像も多数あります。

課題2:インタラクション設定の適切な担当

Flexアプリケーションにインタラクションを設定するには、MXMLとActionScriptの知識が必要になります。従って、インタラクション・デザイナではなく、Flexデベロッパが作業することになります。デザイナが求める繊細なインタラクションの再現やデザイナ本人による微調整が難しく、手戻りの原因になることがあります。

Flash Catalystによる作業

Flash Catalystは、この2つの課題を解決できる、デザイナのためのツールです。Photoshopの画像ファイルを読み込んで、FlexのViewに変換する様子を簡単に見てみましょう。

画像ファイルの読み込み

Flash Catalystは、Photoshop、Illustrator、Fireworksから書き出された画像ファイルを直接読み込むことができます。

Flash Catalystのスタートアップ・スクリーン
図2 Flash Catalystのスタートアップ・スクリーン

Photoshop画像を読み込んだスクリーンショット
図3 Photoshop画像の読み込み

Photoshopの画像を読み込むと、レイヤー情報が保持されていることが分かります。

PhotoshopとFlash Catalystのレイヤー
図4 PhotoshopとFlash Catalystのレイヤー

読み込んだ画像ファイルの各画像オブジェクト、つまりアートワークを簡単な操作でFlexコンポーネントに変換することができます。方法は、対象となる画像オブジェクトを選択して、プロパティパネルの「Convert Artwork to Component」ボタンから変換したいコンポーネントを選択するだけです。
例えば、画像のサムネイルをクリックさせてボタンのような動きを付けたい場合は、Buttonコンポーネントを設定します。

アートワークをコンポーネントに変換
図5 アートワークをコンポーネントに変換

すると、Flash CatalystはアートワークをButtonコンポーネントに変換してくれます。これにより、画像のサムネイルは、マウスアップ、マウスオーバー、マウスダウンといったButtonのインタラクションを持つ事になります。

Buttonコンポーネントに変換されたサムネイル
図6 Buttonコンポーネントに変換されたサムネイル

ラウンドトリップ可能なワークフロー

この変換のメカニズムを簡単に説明すると、MXMLのサブセットであり、Creative Suite 4から新たにサポートされたXMLベースの画像フォーマットである「FXG」を「Gumbo」(次世代Flexのコードネーム)の新しいMXMLに変換していることになります。「Gumbo」では、コンポーネントの見た目とロジックが分離可能になるため、このような変換が行えるのです。更に、「Gumbo」のコンポーネントに変換された後でも、見た目の部分(FXG)の編集が可能となっています。尚、現在のMAX Preview版ではIllustrator CS4での編集がサポートされています。

Flash Catalystは、MXMLやActionScriptの知識がなくても静的なアートワークからFlexアプリケーションのView部分を作成できる画期的なツールです。詳しくは、2009年1月のAdobe MAX Japan 2009のセッションでご紹介します。Adobe LabsFlash Catalystのページ、Adobe Flash Catalyst Teamのページもチェックしてみて下さい。

それではAdobe MAX Japan 2009で!