Adobeから販売になる、Flashシリーズの新しい仲間Flash Catalyst。
5/28の販売を前に、体験版で利用してみました。

体験版は、日本語サイトで用意されていないので、Adobeの英語版サイトからEnglishの体験版をダウンロードしてインストールしようとすると、日本語が選択できました。

一通り使ってみて、Flash Catalystを使うだろう人は2パターン。
1パターン目は、印刷系のデザインをしている方が、Illustratorで作ったデザインをフルFLASHのwebサイトにしちゃおう、というパターン。
フルフラッシュは駄目!と言う頭の堅いweb制作者もたまににいますが、目的によってはフルフラッシュでも何ら問題が無いというケースも多々あります。

2パターン目は、FLash Builder(Flex)での開発時の画面デザイン構築の時です。
Flash Builderはswf形式で書き出せるソフトなのですが、これはFlash Professionalと違い業務用のアプリケーションであったり、システムがらみの用途で広く利用されています。
こちらはシステム系メインいうこともあってか、PhotoshopやIllustratorとの親和性があまり(というかまったく)考えられていないんですね。
なので、デザインに凝ったFlexアプリケーションを作ろうとすると、一苦労だったのです。

これが、触媒であるFlash Catalystを利用することによって、Illustrator、Photoshopでのデータをそのままの形でFlash Builderに持ってくることができるようになりました。

ではでは、そんなFlash三兄弟の末っ子(勝手に末っ子と思い込んでます)のFlash Catalystくんを使ってみての感想を書いて行きます。


■データのインポート
Photoshop、Illustratorで作成したデータを、レイヤー構造そのまま読み込めます。
レイヤー毎の「通常」「乗算」などの設定、また表示非表示はCatalyst上で変更できます。

■ステート
トップページのときはこのレイヤーとこのレイヤーを表示して、この状態!といったものは「ステート」というもので設定します。
Photoshopを利用している方だったら「レイヤーカンプ」と同じようなものだと思っていただければよいと思います。
パーツパーツは、メニューのステートから、一つのオブジェクトを複数ステートで共有できます。
あるステートで位置を移動した時に他のステートでも同じ場所にしたいなら、フローティングパネルの「すべてのステートに同じプロパティを利用」を使えば簡単です。

■トランジション
ステートは、トランジション(移り変わりの効果)を設定できます。
スライドして出てくるとか、3D回転して出てくるとかですね。
トランジションはタイムラインで設定します。
左が現状のステート、右が次のステート。組み合わせていろんな動きが実現できます。
ステートは基本20まで。使い方によってそれ以上のページもできるようです。

■アクションシーケンス
ステートの変化を伴わないトランジションで利用できるようです。
タイムラインの「+アクションを追加」で動きを追加できます。

■インタラクション
ボタンなどのパーツにはインタラクションを設定できます。
ボタンを押したらPage3のステートを表示させたい、別のサイトにジャンプしたい、など、インタラクションを利用して簡単に設定できます。
ビデオだったら「ビデオ終了時次のステートにジャンプ」などの使い方ができます。

■コンポーネント
操作に使うようなパーツは「コンポーネント」化をします。
FLASHでいうシンボル化みたいなものですね。

■ボタン(コンポーネント)
コンポーネントの中で、一番利用が多いと思われるのが、ボタンです。
Flash Professionalと違って、ボタンにDisable状態も設定できます。
その代わりにヒットエリアの設定がありません。自動に四角く設定されるのでしょう。
UP、OVER、DOWN、Disableの4ステートが設定されていて、トランジションの設定ができます。
flashだったらボタンにムービークリップを入れ子にして……とやっていた所が、楽に設定できます。

■スクロールバー(コンポーネント)
例えば、Illustratorでデザインしたスクロールバーをスクロールバーとして使うには、Flash上でガリガリとスクリプトを組む必要がありました。
Catalystでは簡単。
バーと、つまみを選択して、コンポーネントボタンで「スクロールバーに変換」をクリック。
できたコンポーネントをダブルクリックしたら編集画面になるので、つまみを選択して「サム」に設定、バーの部分を選択して「トラック」に設定。
これだけでオリジナルデザインのスクロールバーが出来上がりなのです。

■データリスト(コンポーネント)
水平、垂直、タイルと、テーブルのような表組が自在に作成できます。
基本パターンにたとえば「10/5 京都」といった形のポインティングテキスト二つと、その背景になる四角くらいを設定すると、それが縦にズラッとならんだ表組を作成できます。
デザイン用データパネルでデータ入力をします。縦にどんどん増やすことも可能です。
Flexに持って行くと、ここに上手にDBからのデータを並べてあげる、等の使い方も可能だと思います。

■パブリッシュ
web配信のためのswf書き出しと、AIR書き出しが可能です。
Flash Professionalと違って、プロジェクタ形式には書き出せないので、Flash Playerの入っていない方がいる会社で社内チェックに回す際には、AIR形式で見ていただくことも考えられます。
Playerの選択肢はなかったので、Flash Player10でのパブリッシュになると思います。
テキストの埋め込み設定もあります。

■保存と連携
Flash Catalystのファイルの拡張子は「.fpx」です。
このファイルは、Flash Builderでそのまま読み込むことができます。
このようにして、Photoshop or Illustrator → FlasyCatalyst → Flash Builder の流れで、スムーズな開発が可能になります。

**********************************

長くなりましたが、参考になったでしょうか?

CS5から、FLASH系のアプリケーションはFlash Builder、Flash Professional、Flash Catalystと3点になります。
「Flashできます」というのは、この三兄弟を全部できないと、言いにくくなるのではないでしょうか?

個人的にはwebの仕事は最新の技術について行けるかどうかがとても重要(むしろ必須)だと思っていますので、同業者の方や、web業界を目指す方にも是非使ってみていただきたいです。

ブログランキング このエントリーをはてなブックマークに追加

カテゴリ:FLASH/FLEX/AIR