デザイナーを自由にするツール、Adobe Flash Catalyst
Other
09/03, 2009
ウェブ業界でFlasherと呼ばれるクリエイター達が、巧みにActionScriptで複雑なプログラムを操る姿は、もはや職人や芸術家の領域だ。そして、Flashをやろうと思って最初につまずく箇所と言えば、やはりActionScriptだろう。特に、ActionScript3.0になってからは、たとえボタンを作って画面を切り替えるだけでも、何行ものコードを書かなければいけなくなった。プログラミングが苦手な私たちは、一体どこから手をつけたら良いのだろうか?その答えがFlash Catalystになりそうだ。
Flash Catalystは、Adobeが今年の6月からパブリックベータ版を公開した、現在開発中のソフトである。デザイナーにはとっつきにくいプログラミングを一切することなく、複雑なFlashコンテンツを作り上げることができるデザインツールだ。
今回は、moonlinxのトップページのFlashを例に、Flash Catalystの特長について触れてみたい。β版は下記のサイトからダウンロードできるので(無料の会員登録が必要)、ぜひともCatalystに触れながら読んで頂きたい。
http://labs.adobe.com/technologies/flashcatalyst/
moonlinxのトップページのFlashを使って、Flash Catalystの特長について学んでいこう。
Photoshop、Illustratorなどからデータを読み込む
Flash Catalystでは、全てを一から作っていくこともできるが、Photoshop、Illustratorなどのお馴染みのツールで作ったファイルを、レイヤー構造や見た目を壊さずにそのまま読み込むことができる。難しいことを考えず、慣れたデザインツールで作り込んでいけるということだ。
レイヤー構造はそのままで。左がFlash Catalyst、右がPhotoshop。
ステートとトランジション
Flash Catalystでは、キーフレームやトゥイーンの代わりに、ステートとトランジションという概念が導入されている。紙芝居のように画面の状態(ステート)を何個も作っていき、画面と画面の間をトランジションで補間することで、滑らかな動きを作っていける。
ステートを定義して、動きの表現を追加してゆく。
コンポーネントとインタラクション
ステートを複数作ったとしよう。別のステートに移動するにはボタンが必要だ。その場合は、ボタンにしたい画像を選択して「アートワークをコンポーネントに変換」を選べばボタンになる。ここまではFlashでも同じようなものだ。
ボタンにしたい画像を選択し、左上の「アートワークをコンポーネントに変換」を選ぶ。
Flashでは、ここから先はActionScriptを書かなくてはいけなかった。ボタンにインスタンス名を付け、addEventListener関数でMouseClickを選び、イベントハンドラを生成して gotoAndPlayで指定フレームへ。…と、これでは辟易してしまう。しかし、Flash Catalystでは、マウスをクリックした時やマウスがボタンに重なった時など、条件をマウスで選び、ステートをどこからどこへ飛ばすかをリストから選ぶだけで画面を切り替えることができる。
個々のオブジェクトにも複数のステートを定義することができる。
あとはタイムラインで、いつ、何を、どう動かすかを細かく調整していけばいい。タイムラインにはプレビューボタンがあり、細かい動きを再生しながら確認することができる。
アクションの開始と終了は「秒」を使って指定。指定可能な最小単位は 0.05秒。
またWindowsではCtrl+Enter、MacOSではCommand+Enterで、全体のプレビューをすることもできる。プレビューはFlashのように独自のプレーヤーではなく、デフォルトのブラウザでプレビューすることになる。
バックグラウンドでの処理
デザインしている時は全く気にする必要がないが、内部ではMXMLと ActionScriptという二つのプログラミング言語でデザインしたものがリアルタイムでコーディングされている。Flash Catalystが簡易アニメーションソフトではなく、新たなデザインツールとしての可能性を秘めているのはこの点にある。
現在同時に開発が進められているFlashBuilder4(以前はFlexBuilderという名前だった)というプログラミングソフトが、Flash Catalystと連係して複雑なプログラミングやネットワークとの通信など、高度なアプリケーションまで制作が可能になっているからである。
ソースをチェックすると、MXMLとActionScriptの二言語でコーディングされていると分かる。
まとめ
今回、moonlinxのトップページをFlash Catalystで再構築しながらその特長を追っていったが、Photoshopのデータから30分ほどで動きやインタラクションを作り上げることができた。β版ということもあり、まだまだ機能不足な面やバグらしきものはあるが、それでもこの簡単さは驚きだ。
製品のリリースはまだ未定だが、製品化までにどう洗練されていくのか、今後も目が離せない。
Adobe Flash Catalyst
コードを書かずにインタラクティブなFlashコンテンツが制作できるデザインツール。今年6月にベータ版がAdobe Labsにて公開された。ダウンロード先(英語)は、以下。
http://labs.adobe.com/technologies/flashcatalyst/













[前の記事]空家の再利用、「越後妻有アートトリエンナーレ2009」の試み
[次の記事]フランス人デザイナー、ダミアン・ポレインの温もりあるグラフィック





























