Flash Catalystの使い方。エフェクトが簡単に付けられるよ！

昨日のFxugの勉強会でFlash Catalystを勉強させてもらったので使ってみました。

サンプルはこちら
http://moeten.info/flex/20090625_flashCatalystTest1/deploy-to-web/Main.html
ボタンをクリックするとステート１からステート２へ変化します。
簡単に作成できます。エフェクトも簡単に設定できます。
簡単な説明

PhotoShopでデザイン

自由にPhotoShopでデザインしていけばＯＫ。
レイヤーやフォルダ構造もそのまま反映してくれます。
ただ、気をつけることとして以下の問題があります。

レイヤースタイルは反映されない
マスクは反映されない
グループ化（レイヤークリッピングかな？）は反映されない

フォントなどは普通に出力されます。でもFlash再生側でフォントがないと希望のフォントで表示されないと思う。

ファイル⇒別名で保存

fxg形式で保存

Flash Catalystで読み込み

先ほどで作成したデザインファイルをFlash Catalystで読み込みます。

Flash Catalystの起動ウィンドウからfxg読み込みを選択

大きい画像使っているからイメージの最適化を行ってねってウィンドウです。

こんな感じにうまくレイヤー構造も含まれて読み込まれます。

エフェクトをつけていく

これは簡単でステートＡからステートＢでの違いをエフェクトでつなげてくれます。

おもむろにステートを作成

ステート２を選択して、レイヤー構造から目をクリックて不可視にする。
ちなみにオブジェクトを選択して移動させてもＯＫ。ムーブエフェクトが使えるようになります。

エフェクトパネルに注目して、フェードの部分を引き延ばす。

とりあえずここで再生ボタンで再生するとフェードアニメーションされる。

swfに書き出した時、これだけだと、ページ読み込み時にステート１で止まったままでステージ２へ行くアクションがない（Ctrl+Enterで確認できます）ので作成する。
ステート１を選択して、ＨＵＤウィンドウにてアクションを追加

読み込み時にステート２へ移動アクションをプルダウンで指定（簡単！）。
完成！
あとはファイルからswfに書き出しすれば完成でっす。
最終的に書き出されたソース

<?xml version='1.0' encoding='UTF-8'?>
<s:Application xmlns:d="http://ns.adobe.com/fxg/2008/dt" xmlns:fc="http://ns.adobe.com/thermo/2009" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:lib="Main_library.*" height="984" width="1772" xmlns:mx="library://ns.adobe.com/flex/halo">
    <fx:Script>
        <![CDATA[
            protected function Button_click():void
            {
                currentState='Page2';
            }
        ]]>
    </fx:Script>
    <s:transitions>
        <s:Transition fromState="Page1" toState="Page2" autoReverse="true">
            <s:Parallel>
                <s:Parallel target="{group1}">
                    <s:Fade duration="950" startDelay="200"/>
                </s:Parallel>
                <s:Parallel target="{group2}">
                    <s:Fade duration="800" startDelay="700"/>
                </s:Parallel>
                <s:Parallel target="{image1}">
                    <s:Fade duration="750"/>
                </s:Parallel>
            </s:Parallel>
        </s:Transition>
    </s:transitions>
    <s:states>
        <s:State name="Page1"/>
        <s:State name="Page2"/>
    </s:states>
    <mx:Image source="@Embed('assets/Graphic1.swf')" maintainAspectRatio="false" fc:isFXGAsset="true" visible.Page1="false" id="image1"/>
    <s:Group d:userLabel="グループ_2" x="1280" y="4" visible.Page1="false" id="group1">
        <s:BitmapImage width="500" height="472" source="@Embed('assets/DSC_4391 のコピー/レイヤー 4.png')" d:locked="true" d:userLabel="レイヤー_4" resizeMode="scale"/>
        <s:RichText fontFamily="Fiolex Girls" fontSize="62" color="0xef42a4" whiteSpaceCollapse="preserve" x="80" y="123" d:userLabel="6/24">
            <s:content><s:p><s:span>6/24</s:span></s:p></s:content>        </s:RichText>
    </s:Group>
    <s:Group d:userLabel="グループ_3" x="-90" visible.Page1="false" id="group2">
        <s:BitmapImage y="15" width="1000" height="984" source="@Embed('assets/DSC_4391 のコピー/背景 のコピー.png')" d:locked="true" d:userLabel="背景_のコピー" resizeMode="scale"/>
        <s:BitmapImage x="45" width="1000" height="984" source="@Embed('assets/DSC_4391 のコピー/背景 のコピー 2.png')" d:userLabel="背景_のコピー_2" resizeMode="scale"/>
        <s:RichText fontFamily="Fiolex Girls" fontSize="36" color="0xe600a8" whiteSpaceCollapse="preserve" x="118" y="826" d:userLabel="Uti">
            <s:content><s:p><s:span>Uti</s:span></s:p></s:content>        </s:RichText>
        <s:BitmapImage x="545" y="480" width="322" height="290" source="@Embed('assets/DSC_4391 のコピー/レイヤー 12.png')" d:userLabel="レイヤー_12" resizeMode="scale"/>
    </s:Group>
    <s:Button label="ボタン" x="756" y="280" id="button1" skinClass="components.___1" click="Button_click()"/>
</s:Application>

Flash Catalystちょろっと使ってみた感じでは、Flashユーザーのためのプログラムツールなのかなぁって思う。もちろん、ここからFlexに渡して、デザインを気にすることなく作業もできるけど、簡単なFlashであればFlash Catalystだけでもいいのかなぁって思う。ネットワークと連携するときはもちろんFlexで！
Flexユーザーは今後、Flash Catalystユーザーのためにもステートを勉強しておいたほうがいいかも？
リンク

Flash Catalyst