PHP,MySQL,Flexな日々＋イラストとか

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

Flash Catalyst | 11:11 |

昨日の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

ツイートする