「CS5」に新に加わった「Adobe Flash Catalyst CS5」とは、どのようなツールなのだろうか。 Flash Catalystの機能を、数回に分けて紹介していきたい。

「Adobe CS5」体験版はこちらから

「Adobe Flash Catalyst CS5」(以下、Flash Catalyst)は、SWFやAIRの出力を可能にする新しい製品だ。

Flash Catalystは新しいコンセプトの製品だ	Flash Catalystのオーサリング画面

Flash Catalyst最大の特徴は、「Photoshop」や「Illustrator」でレイアウトしたデータを、Flashのボタンや画面遷移のトランジションをスクリプトを書かずに追加した上で、アプリケーションにできるという点だ。アプリケーションの形式としては、ブラウザー内HTML上で動作するSWFとデスクトップ・AIR環境で動作する「Adobe AIR」がある。たとえば、ボタンクリックで次から次へとシーンが切り替わるようなコンテンツであれば、PhotoshopやIllustrator、あるいはレイヤー構造を保持するFXG形式(Fireworksなどが対応)のデータを用意して、スクリプトを一切書かずに完成させることが、Flash Catalystなら可能だ。

このツールによって、インタラクティブデザイナーが直接動くものを作成して、クライアントにプレゼンしたり、プログラマーに動作イメージを伝達できるばかりでなく、実際にシンプルなWebページやAIRアプリなどを作って公開することも可能になる。ちなみに、以下のサンプルは、実際にスクリプトを書かずにFlash Catalystで作成したものだ。

動くサンプルは、筆者のブログ「Flash Catalystでマイクロサイトを作成する - Hello World 」で確認できる

マイクロサイトアプリケーションとデータ中心型アプリケーション

Flash Catalystで作成できるアプリケーションは大きくわけて2種類ある。ひとつは、マイクロサイト。もうひとつはデータ中心型である。前者のマイクロサイトであれば、Flash Catalystだけで完結することができる。後者のデータ中心型の場合は、インタラクティブデザインはFlash Catalystで行うが、DBなどのデータリソースに接続する部分は、スクリプトコーディングが必要になり、「Flash Builder」を使用することとなる。

今回は、Flash Catalystだけで完結するマイクロサイトを作成しながら、その機能を紹介していこう。素材ファイルや完成したファイルは、こちらにある。

「Photoshop」データの準備

マイクロサイトは、実際にあるiPhone用「Snap or Nothing写真集」アプリの紹介コンテンツとする。10ページの写真サンプルを見るための、ページめくりボタン、そして、アプリのページへジャンプするボタンを備えたFlashコンテンツだ。まずは、素材データを用意する。素材は、写真データがPhotoshop、ナビゲーション用のボタンのデータをIllustratorで作成した。

さて、レイヤー構造が次のようなPhotoshopを用意した。これは「Snap or Nothing写真集」のデータを、表紙、コンテンツという構成で並べた物だ。それが、図のようなイメージになる。

Photoshopファイルはレイヤーを使って、ひとつのファイルにする。

ナビゲーション用のボタン類を作成したIllustratorファイルは、後から[ファイル]メニューの[読み込み]で読み込む

次にFlash Catalystに取り込む。このとき、PhotoshopかIllustratorかを指定してインポートする。今回は、画面の主なイメージをPhotoshop、ナビゲーション用のボタン素材をIllustratorで作成しているので、Illustrator素材はパーツとして後から読み込むことにする。

スタートアップスクリーン右側の『Adobe Photoshop ファイル(PSD)から...』をクリックして、新規プロジェクトを作成する

Photoshopファイルを読み込むときのダイアログ

Illustratorファイルを読み込むときのダイアログ

レイヤー構造をページ/ステートに変換する

読み込むと、Photoshopデータが1ステート(ページ)だけ表示される。PhotoshopのレイヤーがFlash Catalystの「ページ/ステート」として表示されるので、左上にある「ステートを複製」ボタンでレイヤー分のステートを作成し、すべてのステートで異なる内容が表示されるようにする。ステート毎に異なる内容にするには、レイヤーの表示・非表示を利用する。

画面の数だけ「ステートを複製」し、レイヤーを表示・非表示で複数の異なるステートを作っていく

次回もひき続きFlash Catalyst CS5の機能をレビューしていく予定だ。