Flash Catalyst ベータ 1 公開

他のデザインツールとの関係

Catalyst はグラフィックデザインツールではないので （これ以上増やしてもしょうがないですしね）、Illustrator, Photoshop, Fireworks などで制作したデザインを読み込む → インタラクションを追加 → SWF にパブリッシュ、というのが想定されている基本的なワークフローです。Illustrator, Photoshop とはラウンドトリップが可能になっていて、Catalyst でインタラクションを追加した後でも静的なデザイン要素を元のツールの環境内で修正をすることができます。

Fireworks で作成したデザインは FXG 形式で読み込みます。FXG は CS4 からサポートされている XML をベースとしたオープンなグラフィックデータ交換フォーマットです。（FXG 1.0 Specification） Catalyst のベースとなっている Flex 4 フレームワークでは FXG によるグラフィックデザインの記述を扱えるようになっています。

なお、Catalyst にも最低限のデザインツールは提供される予定です。が、ビジュアルプロトタイプの制作にはあまり向かないかも...です。（あくまでインタラクションデザインツールということで）

インタラクションの設定

さて、Flash と違って Catalyst はタイムラインの無い状態から始まります。代わりに、まずアプリケーションの "ステート" （Flash のキーフレームに相当） を定義してから、"トランジション" （キーフレーム間のモーショントゥイーンに相当） や "アクションシーケンス"（Flash のモーションプリセットみたいなもの？） を設定して動きの表現を追加していきます。Catalyst のタイムラインはこの "トランジション", "アクションシーケンス" を設定する際に登場します。

Catalyst のタイムラインにはフレームという概念はありません。アクションの開始と終了は "秒" を使って指定します （ベータ 1 時点での最小単位は 0.05 秒）。 Catalyst における基本的なインタラクションの編集方法は、"ステート" 内に配置されたオブジェクトを選択 → オブジェクトに追加するインタラクションの種類を指定 → （トランジションの開始ステートと終了ステートの組合せ毎） インタラクション発生時のアクションの種類、開始と終了のタイミングを指定、です。

ここで、タイムラインに設定できるアクションは、事前に定義されているもののみです。Flash のように自由に動きを作ることはできません。これは、スクリプトを書かない （書けない） Catalyst の限界と言えるでしょう。選べるアクションの種類が充実してくればそれほど問題ではなくなりそうではありますが。

それから、アプリケーション内の個々のオブジェクトにも複数の "ステート" を定義することができます。これは MovieClip のタイムラインにキーフレームを設定したり、Flash のボタンに "アップ", "オーバー", "ダウン" 等を作成するのとおんなじ作業です。同じオブジェクトのステート間にはトランジションを作成できます。

Flash Builder との連携

上で書いたように、（少なくとも現バージョンの） Catalyst にはコード編集機能がありません。そうすると、簡単なプロモーションサイトとかは Catalyst だけで制作できるかもしれませんが、サーバと連携するため等コードを記述する必要が出てくると Catalyst だけではお手上げになってしまいます。このような時は （つまり大抵は） Flash Builder と組み合わせて使うことになります。

Flash Builder 4 は Catalyst のファイル （FXP） をそのままインポートして編集できます。これは、どちらのツールも Flex 4 フレームワークをサポートするためです。一方、一旦 Flash Builder で編集したプロジェクトを Catalyst で読み込むことはできません。（少なくとも今のところ）

まとめ

Flash Catalyst は、

• コードを書かずにインタラクティブな Flash コンテンツが作れる
• UI のインタラクションの実装までデザイナーだけで実装可能

という 2 点が新しいところかと思います。インタラクションデザインに興味のあるデザイナーの方は是非試してみてください。