開発者/デザイナの仲を取り持て! Adobe次世代ツールCatalyst + Gumboを試す - Designer's work編

今回はデザイナが行う作業のレポート

本シリーズは、Adobe MAX 2008で入手したFlash CatalystとFlex Builder 4 (Gumbo)のプレビュー版を用いて、デザイナと開発者が実際にコラボレーション作業を行ってみた記録である。このレポートの内容を、読者の方々にも試していただけるようになるのはもう少し先の話になるだろうが、次世代のRIA開発に携わることになるであろうデザイナ、開発者ともに必見の内容だと自負している。

前回は、実際にコラボレーション作業を行ってみた結果わかったことも含め、Flash Catalystの基礎知識をお伝えした。

今回からはいよいよ、実際の作業レポートだ。作成するアプリケーションは、以下のようなUIを持つFlexアプリとした。

つまりはフォトギャラリーである。「NEXT」「PREVIOUS」を押す事により写真を次々に表示することが出来る。

このアプリケーションを作る作業の大まかな流れは以下のようになる。

デザイナがアプリケーションのイメージをPhotoShop CS4、Illustrator CS4で作成する
デザイナが、Flash Catalystを用いてそのイメージをRIAに変換し、エフェクトやインタラクションを追加する
開発者がFlex Builder 4を用いて、アプリケーションに振舞いを追加する。この際、Catalyst上でも微調整を行った

今回のレポートでは作業1と作業2、つまりデザイナが行う作業について詳しくお伝えしていく。開発者が行う作業については、次回詳しく解説する

まずはデザイン

まずは、デザイナ役(今回は矢野りん氏にお願いした)が、PhotoShopとIllustratorを用いてアプリケーションのデザインを行った。

これらのツールは、CS4からFXG形式(詳細は前回の記事を参照)での書き出しをサポートしている。すなわち、Catalystとの連携を前提として設計されたものなのである。

最初にPhotoShop CS4を使ってアプリケーションの外枠をデザインし、それをFXG形式で書き出してみた。

「NEXT」「PREVIOUS」といったボタンは、Illustrator CS4を使って作成。同じくFXG形式で書き出す。

FXGで保存する際のオプションダイアログ

書き出す前にプレビューを表示することも可能

FXG形式で書き出しを行うと、FXGファイル(XMLファイル)と多数のイメージファイル(「《FXGファイル名》.assets」というフォルダに保存される)が生成される。その結果を示したのが以下の画像だ。

生成されたFXGファイルをテキストエディタで開くと、確かにXMLファイルであることが確認できる。

<?xml version="1.0" encoding="utf-8" ?>
<Graphic version="1.0" viewHeight="416" viewWidth="352" d:locked="false" xmlns="http://ns.adobe.com/fxg/2008" xmlns:d="http://ns.adobe.com/fxg/2008/dt">
  <BitmapGraphic width="352" height="416" source="@Embed('max.assets/images/background.png')" repeat="false" d:userLabel="background"/>
  <BitmapGraphic x="26" y="75" width="300" height="201" source="@Embed('max.assets/images/photo3.png')" repeat="false" d:userLabel="photo3"/>
  <BitmapGraphic x="26" y="75" width="300" height="201" source="@Embed('max.assets/images/photo2.png')" repeat="false" d:userLabel="photo2"/>
  <BitmapGraphic x="26" y="75" width="300" height="201" source="@Embed('max.assets/images/photo1.png')" repeat="false" d:userLabel="photo1"/>
  <BitmapGraphic x="26" y="75" width="300" height="201" source="@Embed('max.assets/images/inner_line.png')" repeat="false" d:userLabel="inner_line"/>
  <TextGraphic fontFamily="Kozuka Gothic Pro" fontSize="20" color="#ffffff" whiteSpaceCollapse="preserve" x="29" y="33" d:userLabel="Adobe_MAX_2008_Photo_Gallery">
    <content><p><span>Adobe MAX 2008 Photo Gallery</span></p></content>
  </TextGraphic>
</Graphic>