海賊王をめざす男 マツです。こんにちは。
Flash Catalyst って一体なんなのでしょうか？
私も最初のころは、余計なものはあまりインストールしたくないなぁ
と腰が重かったのですが、いざ使ってみるとこれはなんと！
いろんな便利な機能があって、個人制作からチーム制作まで
幅広く使える代物なんです！
こんな方におすすめ
Flash ってやったことないけど、自分の作ったデザイン（ai ファイル、psd ファイル）を
コードをかかずに Flash コンテンツにしてみたい
とおもっている方！
チームで制作してるのですが、Flash コンテンツをつくるうえで最適なレイヤー構造がよくわからないよ
とおもっている方！
ai ファイル、psd ファイルから Flash 素材を書き出すのが面倒だよ
とおもっている方！
Flex4 になって、スキンクラスをつくるのが面倒だよ
とおもっている方！
とにかくモックを 3 分でつくりたい！
とおもっている方！
あなたの知らない世界 Flash Catalyst をおしえちゃいます！
psd ファイルの確認
Flash Catalyst に psd ファイルを読み込む前に psd ファイルを Photoshop で開いてそのレイヤー構造をみてみましょう。
ヘッダー
header
ナビゲーション
navigation
背景
background
コンテンツ
australiaPage（オーストラリア ページ）
コンテンツ
tongaPage（トンガ ページ）
Flash Catalyst に psd ファイルを読み込む
Flash Catalyst を起動します。
[Adobe Photoshop ファイル(PSD)から]を選択します。
[Photoshop 読み込みオプション]で、[OK]ボタンをクリックします。
スマートオブジェクトなどを使用している場合は、[画像変換オプション]で一括でラスタライズして読み込むことも可能です。
Flash Catalyst に psd ファイルが読み込まれました。
psd のレイヤー構造がそのままに。
ステートをつくる
コンテンツページ（ステート）をつくりましょう。
[ステートを複製]をクリックします。
すると Page2 が複製されます。レイヤー構造もそのまま複製されます。
ステートの Page1 を選択して、レイヤーの australiaPage を 非表示→表示 にします。
ステートの Page2 を選択して、レイヤーの tongaPage を 非表示→表示 にします。
これで、Flash コンテンツのページとなるステートは完了です。
ボタンをつくる
編集エリアでぼたんにしたいところを選択します。
[レイヤー]から選択しても OK です。
コンポーネントに変換することが可能になります。
[コンポーネントを選択]から、[ボタン]を選択します。
ボタン コンポーネントができました。
レイヤー名を australiaButton を変えます。
ちなみにレイヤー名はどれも半角英数字にしておくといいです。
australiaButton コンポーネントをダブルクリックで編集することもできます。
ボタンコンポーネントのステートは、Up, over, Down, Disabled の４つになっています。
レイヤー構造は、コンポーネント前のレイヤー構造がそのままになっています。
Up ステートの australiaBack レイヤーの不透明度を 0 にします。
同じように tongaButton を作成します。
Page2 ステートで、australiaButton, tongaButton レイヤーを選択して、右クリックで[ステートで共有]をみると
デフォルトでは[すべてステート]状態になっているのがわかります。
ステートごとに変えたいのであれば、ここを[現在のステートのみ]に変えることで可能です。
クリックイベントをつける
ボタンをクリックしたら、指定したステートを表示するようにしましょう。
australiaButton を選択し、[インタラクション]_[インタラクションを追加]をクリックします。
[クリック時]
[ステートのトランジションを実行]
[ステートを選択]_[Page1]
同じように tongaButton のクリックイベントを追加します。
フェードアウト／イン
Page1 から Page2 ステートへの遷移をタイムラインを使って直感的にフェードアウト／インさせることができます。
ボタンコンポーネントの Up, over, Down, Disabled のステート遷移も可能です。
パキッとデザインが変わるのではなく、気持ち良い表現で変えることができます。
フェード他アクションは、移動、サイズ変更、回転、3D 回転、サウンドエフェクト、ビデオコントロール、SWF コントロールなどがそろっています。
さてさて、以上で終わりです。ビルド（Ctrl + Enter）して Flash コンテンツを確認してみましょう。
できましたねー。この作業だったら 3 分もあればできてしまいます。
コードをかかずに Flash コンテンツができてしまいました。
Flash Catalyst から Photoshop で編集する
Flash Catalyst で作業中 Photoshop や Illustrator で編集することも可能です。
編集したいオブジェクトを右クリックして、[Adobe Photoshop CS5 で編集]を選択します。
Photoshop で Flash Catalyst のコンテンツを編集するには FXG 拡張機能をインストールすることで可能になります。
Photoshop で画像を大きくリサイズ編集し、保存後 ファイルを閉じます。
Flash Catalyst に戻ると Photoshop で編集したものが適応されています。
これとは別に psd を更新した場合、更新したレイヤーだけを Flash Catalyst へインポートすることも可能です。
コードでプロジェクトをみる
[デザイン]ビューから[コード]ビューにすることで、Flash Catalyst の fxp ファイルの中身がコードとなって確認できます。
ここで注目してほしいのは、[プロジェクトナビゲーター]です。
[プロジェクトナビゲーター]をみると assets には psd から切り出された素材があります。
そうなんです。この Flash Catalyst は、レイヤーを素材に書き出してくれるのです。
これまで、psd から切り出して png に保存という流れを自動でやってくれます。なんて便利。
レイヤー名が素材ファイル名になるのでレイヤー名は重要です。例として一部の素材は日本語にしておきました。
Flash Catalyst の fxp ファイルは、Flash Builder にインポートして、プロジェクトとして使うことが可能です。
今回作成したボタンコンポーネントはスキンクラスとして作成されています。Button1.mxml, Button2.mxml
spark になってからスキンのデザインが Flash Builder だとめんどいという印象でしたが、Flash Catalyst があれば解決しますね。
まとめ
デザインする方こそ Flash Catalyst は使ってほしいのです。
自分でつくったデザインを動かしてみましょう。きっとたくさんの気づきがあると思います。
私もはじめて Flash で自分のつくったものが動いたときとても感動しました。
そして、それまでの でたらめなレイヤー構造を改めるようになりました。
チームでやるとき気をつけること
・レイヤー構造のレギュレーションをつくる。
・レイヤー名が後にファイル名になるので命名規則をつくる。
・Flash Catalyst は、View をつくるものと考える。
・etc
デザインするひとは、一歩踏み込むチャンスです。
デベロッパーのひとがどのようにデザインを動かしているのか Flash Catalyst を使うことで知ることができます。
Flash コンテンツに限らず、iPhone アプリ、Android アプリなどのスマートフォンアプリをつくるときにも
その考え方はきっと役に立つはずです。
デベロッパーのひとは、デザイナーのレイヤー構造を知りましょう。
どのようなレイヤー構造だと助かるのかを伝えましょう。
Flash Catalyst はお互いをサポートしあうとても良いツールだと思います。
