Adobeの最新インタラクティブデザインツール、Flash Catalyst CS5は、機能を限定的かつ特化した大胆な取り組みです。このプログラムを使えば、コーディングの知識がないデザイナーでも、Flashプロジェクトのコンポーネントとして動作するインタラクティブなグラフィック要素を作成できます。ただし、これはCS5ファミリーに新たに加わったFlash Builder 4と連携してのみ可能です。
Flash Catalystの限界は、「3つのノー」によって定義されます。それは、デザイン機能なし（描画ツールは限られており、IllustratorまたはPhotoshopでオブジェクトを描画します）、コーディング機能なし（Flash Builderを使用します）、アニメーション機能なし（Flash Professionalを使用します）です。AdobeはFlash Catalystにおいて、主要なインタラクティブデザイン機能を細分化し、特定のタスクを最も効率的に遂行できるデザイナー、プログラマー、アニメーター向けに絞り込みました。
Catalystのインターフェースは、決して難解ではありません。デザイナーが作業している間、コーディングはバックグラウンドで生成され、保存されたFXGファイルに埋め込まれます。FXGファイルはXMLベースのフォーマットで、Photoshop（ ）、Illustrator、Fireworks、Flash Builder 4（旧Flex Builderから名称変更）でサポートされていますが、Flash Professional CS5ではサポートされていません。コードビューでは生成されたコードを確認できますが、編集することはできません。つまり、Catalystでボタンのロールオーバー効果を作成、表示、テストすることはできますが、ボタン自体にはWebページを開く、ビデオを起動するなど、限られたアクションしか関連付けることができません。Flash Builder 4のActionScriptエキスパートが設定するまでは、ボタン自体にはWebページを開く、ビデオを起動するといったアクションしか関連付けられません。
Flash Catalystは、使い慣れたレイヤーパネル、ルール、グリッド、ガイド、整列機能、そしてデザイナーがページに追加できるコンポーネントライブラリを提供します。ツールバーは簡素で、選択、描画、ナビゲーション、ズームのためのツールが最小限に抑えられています。テキスト編集と書式設定のオプションも同様に簡素です。デザイナーはIllustratorとPhotoshopでアートワークとテキストを作成・編集し、編集作業が完了すると、アートワークはFXGファイルとして保存されるというコンセプトです。
Catalystの限られたパネル群は、移動、非表示、サイズ変更ができないのが最初は少し戸惑いました。もしこのインターフェースがデザイナーにとって使いやすくするものであるならば、他のCS5アプリケーションにあるようなパネルメニューや、パネルの移動、サイズ変更、折りたたみといった機能も備えていれば良かったかもしれません。Adobeによると、この固定されたパネル群は「バージョン1.0」の機能であり、将来のバージョンではより充実した機能を持つパネルやコントロールが搭載される可能性があるとのことです。とはいえ、Catalystを使い込むほどに、こうしたコントロールは余計に邪魔になるかもしれないと感じました。Catalystの目的はオブジェクトにインタラクションを与えることであり、編集や作成ではないからです。
アクションでグラフィック要素に命を吹き込む
Flash Catalystで新しいプロジェクトを起動すると、オープニングダイアログにIllustratorまたはPhotoshopのデザインファイルから新しいプロジェクトを開くオプションが表示されます。奇妙なことに、1つのファイルで複数のデザインアートボードを開くことはできますが、Catalystプロジェクトまたはファイルは一度に1つしか開けません。
IllustratorのエフェクトとPhotoshopのフィルターのサポートは広範囲にわたり、Flash Player 10でサポートされていない機能によってのみ制限されます。Flashプロジェクトは（主に）スケーラブルなベクターアートワークに基づいています。ビットマップ/ラスターアートワーク（写真のデジタル表現に最適）とは異なり、スケーラブルなベクターは、ビューアやアプリケーションでズームインしても解像度や品質が損なわれることはありません。また、スケーラブルなベクターは、画面上でサイズが変わってもファイルサイズが大きくなることはありません。IllustratorとFlash（Catalystを含む）はどちらもベクターベースであり、CatalystがIllustratorオブジェクトをアニメーション化およびアクティブ化する機能は、Illustrator CS5における大きな変更点です。
Illustrator と Photoshop のアートワークをきめ細かく同期させたサポートと組み合わせることで、Catalyst の真髄は、アートワークをインタラクティブなコンポーネントに変換できることです。例えば、Illustrator や Photoshop でフォーム入力フィールドを描画し、そのフォームフィールドでデータを受け付ける処理を Catalyst で実行できます（実際のデータ処理には、プロジェクトを Flash Builder のコーダーに渡す必要があります）。ラジオボタン、テキスト入力、チェックボックスなど、他のフォーム入力フィールドでも同様の操作が可能です。また、Catalyst を使用して、Illustrator や Photoshop のアートワークをスライダーやスクロールバーに変換することもできます。さらに、Flash Professional で作成した没入型コンテンツやインタラクティブビデオを Flash Catalyst プロジェクトに追加することで、より魅力的なユーザーエクスペリエンスを実現できます。
Flashアプリケーション用のカスタムスクロールバーをデザインするのは、IllustratorやPhotoshopから水平または垂直のバーと、サム、上矢印、下矢印として使用するアートワークをコピー＆ペーストするだけです。シンプルなポップアップメニューで、選択したグラフィック要素にスクロールバーパーツを割り当てることができます。このコンセプトは魅力的ですが、最大の欠点は、利用可能なアクションが非常に限られていることです。具体的には以下のとおりです。
- ビデオの再生、一時停止、停止
- URLへ移動
- SWF ファイルを再生、一時停止、停止したり、特定のフレームに移動したりできます
- コンポーネントの状態を変更する
- 不透明度を変更またはフェードする
- 効果音を追加する
- オブジェクトの移動、サイズ変更、回転
- 3D空間でオブジェクトを回転する
Catalystは多数のフォーム要素も生成しますが、アクセシブルなフォームを設計しようとしたときに、不足している点が見つかりました。また、フォームフィールドセットにはポップアップボックスも含まれていません。
同様に、ビデオプレーヤーのコントロールでは、グラフィック要素を開始、停止、一時停止ボタンに変換する機能が制限されています。ミュートボタンや音量コントロールを割り当てるオプションもありません。
ワイヤーフレームとプロトタイピング
Catalystには、ワイヤーフレーム（インタラクティブなページの外観をスケッチするツール）用のシンボルセットが含まれています。ここでも、ツールセットは基本的な機能に限定されていると感じました。フォームフィールドやスクロールバーの挿入、フォーマットされたテキストの追加、図形の描画などが可能です。一方で、このワイヤーフレームのシンボルとアクションセットは、Catalystのアクションセット（上記のリスト）と一致しているため、デザイナーはコーディング作業に完全に対応したインタラクティブなページのプロトタイプを作成できます。
Flash プロジェクトのワイヤーフレーム レイアウトを Illustrator から Catalyst にコピーすると、そのレイアウトの一部の要素をアクティブ化できます。つまり、それらの要素にアクションを適用できます。
アニメーション
Catalystにはタイムラインもあります。いえ、あのタイムラインとは違います。Flash Professionalでアニメーションを作成する際に使われるフレームとレイヤーのグリッドとは違います。Catalystのタイムラインは、Photoshop CS5のアニメーションパネルと見た目も機能も非常に似ています。Catalystではオブジェクトをアニメーション化することはできませんが、フェードイン・フェードアウト、サウンドエフェクト、移動、サイズ変更、回転、3D回転などのエフェクトを適用（およびスケジュール設定）できます。
Flash Catalystで4つの状態を持つボタンをデザインするのは直感的です。IllustratorまたはPhotoshopからコピーしたボタンアートワークをダブルクリックし、Catalystの「アートワークをコンポーネントに変換」ポップアップからボタンを割り当てるだけです。
Catalystのグラフィックフィルターセットを使ってボタンのアップ、オーバー、ダウン、無効状態を変更するか、Illustratorから4つの別々の画像を使用するかを選択できます。Catalyst内でボタンの状態を調整する場合は、ぼかし、ドロップシャドウ、インナーシャドウ、ベベル、インナーグローなどの効果を選択できます。
プロジェクトをFlash Builderに引き渡す
一般的に、Flash Catalystを使ってスタンドアロンのプロジェクトを作成する人はいません。Flash Catalystは、コーディング担当者がアニメーション化したり、ライブデータと連携させたりできるインタラクティブなオブジェクトを組み立てるためのツールです。フォームはCatalystでデザインされ、Builderでサーバーに接続されます。Catalystで作業するデザイナーは、（ダミーの）テストデータ（デザインタイムデータと呼ばれる）を使用して、グラフィック要素がデータとどのように連携するかを視覚化できますが、Flash BuilderでActionScriptコーディングを行う担当者は、ライブデータを使ってプロジェクトをアクティベートする必要があります。
CatalystプロジェクトがFlash Builderでしか開けない理由は、Catalystのコード生成プロセスによって編集可能なモジュールが作成されるためです。CS5までは、このモジュールはFlexと呼ばれていました。Flash Builder（旧称Flex Builder）はこのコードを処理できますが、Flash Professionalでは処理できません。
Macworldの購入アドバイス
Flash Catalyst CS5は、明確に定義され、制約された境界内で、ビジュアルデザイナーをFlashインタラクティブプロジェクトの構築プロセスにさらに深く統合し、Flashの3つの主要機能であるインタラクティブ性、アニメーション、コーディングを分離するための抜本的な一歩です。CatalystはFlash開発に大きな影響を与える可能性を秘めた興味深いイノベーションですが、まだ開発中の1.0製品としてリリースされました。安定してはいますが、機能は非常に限られています。CS5のWeb、デザイン、またはプロダクションのプレミアムコレクションが利用可能な環境であれば、おそらく使用されるでしょうが、現時点では、Flash開発者と連携する独立系デザイナーには購入をお勧めしません。
Flash Professional は難解だが扱いやすいと感じているデザイナーは、Catalyst の限られたアクションセットに満足できないかもしれません。しかし、Flash を初めて使用したデザイナーにとっては、Catalyst はプロセスへの魅力的な入り口となるでしょう。一方、Flash Builder のプログラマーは、デザイナーが直接生成した Flex コードを、その意図を推測することなく一括で統合できることを高く評価するでしょう。
[デビッド・カーリンズは、近日発売予定の書籍『Adobe Creative Suite 5 Web Premium How-Tos: Essential Techniques』（Peachpit、2010年）の著者です。彼はサンフランシスコ州立大学マルチメディア研究プログラム（オンライン）とニューヨーク州ブルックリンの3rd Wardでグラフィックデザインとインタラクティブデザインを教えています。彼の無料チュートリアルとビデオはdavidkarlins.comでご覧いただけます 。 ]
