moonlinx

next creation and communication moonlinx magazine

HOME

  • HEADLINE
  • SELECTED EVENTS
  • SPECIAL ISSUE
  • INTERVIEW
  • VISUAL FEATURE
  • REVIEW & RECORD

HEADLINE

  • ←
  • ↑
  • →

デザイナーを自由にするツール、Adobe Flash Catalyst

Other
09/03, 2009

KEYWORD :
actionscript
as3
catalyst
flash
flashcatalyst
flex
mxml
programing
カタリスト

Adobe Flash Catalyst

ウェブ業界で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/


SPECIAL ISSUE

季刊を基本とした moonlinx の特集

もっと見る

+ART

文化の背景と未来を読み取るロングインタビュー

もっと見る

NotSame.

クリエイターによる紹介制リレーインタビュー

もっと見る

VISUAL FEATURE

文化や社会をきりとるビジュアル記事

もっと見る

REVIEW & RECORD

クリエイター達による商品レコメンド

もっと見る

EDITOR'S NOTE

編集スタッフがつづる、編集/制作裏話、日常

もっと見る