Catalystで、デザインをRIAに変換

ではいよいよFlash Catalystを用いて、デザイン結果をRIAに変換して行こう。流れを示すと次のようになる。

  1. Catalyst上でプロジェクトを新規作成する
  2. FXGファイルを読み込む
  3. 繰り返し複数のイメージを読み込み、UIを統合
  4. デザインをUIコンポーネントに変換して、インタラクションやエフェクトを追加

Catalyst上でプロジェクトを新規作成する

まずは今回作成するアプリケーションのために、プロジェクトを新規作成する。 「File→New Project」を選択すると以下のようなダイアログが表示され、新規プロジェクトの情報入力が求められる。見てお分かりの通り、プレビュー版ではデスクトップアプリ(AIR)には対応しておらず、Webアプリケーション(つまりFlash/Flex)しか作成することはできない。

プロジェクトを作成すると、Catalystのメイン画面といよいよご対面だ。

上に示したのは、デザイナが主に使用するデザインビュー。コードビューに切り替えると、MXMLファイルのソースが表示される。

FXGファイルを読み込む

では、先ほど作成したFXGファイルを読み込んでみよう。「File→Import Artwork」を選択すると、以下のようなファイル選択ダイアログが表示される。インポートできるのはFXGファイルに限らず、各種画像ファイル、Illustrator(ai)やPhotoShop(psd)、Fireworks(png)のファイル形式も読み込むことが出来る。

読み込みが完了すると、メインキャンバスにすぐさま表示される。