feb19.jp blog - life is creative!

FlashBuilder と FlashProfessional による SWC ワークフロー

Flash / ActionScript tags:

FlashBuilder と FlashProfessional による SWC ワークフロー

.swc というファイルをご存知でしょうか。swc ファイルは Adobe Flash Compiled Component File、「コンパイル済み Flash コンポーネント」で、このファイルを flash や flex でのパブリッシュ/ビルド時リンクしておくことで、コンポーネント内の UI やロジックを呼び出して使用することができます。

Flash CS5.5 でグラフィック/アニメーション素材が含まれた SWC を作成し、Flash Builder 4.5 でそれを呼び出す ActionScript を書き、ビルドするワークフローが最近めちゃめちゃお気に入りです。


世路庵の沖さんが Adobe Developer Center に寄稿された記事でワークフロー自体は説明されています。

SWCを利用したFlash制作の分業ワークフロー:FlashとFlash Builder連携開発 | デベロッパーセンター
http://www.adobe.com/jp/devnet/flash/articles/flashpro_and_flashbuilder.html

一旦この方式をお試しいただくのが手っ取り早いと思います。


このワークフローのメリット

1. 素材の fla の構造は考慮する必要が無い

一つのプロジェクトで SWF が一つで済むのであればあまりメリットはないのですが、ページ遷移時に必要分だけ呼び出すため、「複数の SWF を作ることになるウェブサイト」の場合は、 Flash CS5.5 で最終的な SWF をパブリッシュする場合、プリローダー用、トップページ用、コンテンツページ用というように SWF を分けるために fla ファイルをも分けておかなければなりません。

SWC であれば、Flash Builder でのビルドの際、呼び出しする MovieClip クラスだけをリンクするので、fla ファイルを一つにすることができます。

動的にページを読み込んで表示する Flash は分割すればするほど「この素材はどの SWF にあったっけ?」となりがちで、特に複数人数での開発時に発生しやすいですが、アセットファイルを一つの fla にまとめることでこの煩雑さを解消することが出来ます。


2. fla がめっちゃ整理できる

上のほぼ続きですが、MovieClip クラスを ActionScript で呼び出すため、メインタイムラインをそのまま使うわけではないので、タイムラインやレイヤーを使って、各ページを整理することもできます。

タイムラインのフレームごとに ActionScript にリンケージした各ページの MovieClip を配置しておいて、注釈をその外とかに書き込んでみたり、誰が見ても分かりやすい fla を作ることができます。


3. Flash CS5.5 が落ちなくなる

このワークフローを取り入れてから突然 Flash が落ちることがほぼ皆無になりました。

この節は、僕の推測なのですが、なぜ Flash CS5.5 は落ちるのか?
パブリッシュしてプレビューしたとき、「自分が作った ActionScript がメモリーリークしている」せいで、パブリッシュ、プレビューを繰り返しているうちに Flash CS5.5 が落ちるんだと思うんです。

Flash Builder でプログラム書くようになって、プレビューするとデフォルトではブラウザ内で展開されます。または別のソフトである Flash Player Debugger が立ち上がってプレビューができます。

それらがヤバい!ってなってきたときは ブラウザあるいは Flash Player Debugger が落ちます。
Flash CS5.5 はプレビュー確認がしやすいようにか Flash CS5.5 内にテスト用 Flash Player が内包されています。
その Flash Player が暴走して Flash CS5.5 を道連れにしている気がします。

このワークフローを取り入れてから、Flash CS5.5 ではプレビュー確認をせずアセットパブリッシュだけするようになってきました。
そのためか落ちなくなっているのではないかと、あくまで推測ですが、体感、そんな気がします。


4. ビルドが高速

Flash CS5.5 ではライブラリに含まれれるさまざまなアセットをパブリッシュする毎回毎回コンパイル(リンク?)しているのであろうことから、ロジックを少し変えた、とか、ActionScript で制御するアニメーションの値を少し変えただけでも全アセットをパブリッシュして(くれやがって)しまいます。

全アセットが既にコンパイルされているので、それ以外の部分のみコンパイルでビルドとなるので、Flash Builder で「自動ビルド」を ON にしているのであれば、少しパラメータを変更して Ctrl+S で保存し、「ビルド」ボタンを押さずとも、ブラウザの画面を F5 / Ctrl+R でリフレッシュすれば即確認ができます。

以上メリットですが、逆にデメリットももちろんあります。


1. SWC 内に ActionScript が存在していて、そこでバグがあった場合、SWC 使用者からのバグの特定が難しい

SWC は SWF と同様に、ActionScript を組み込んでおくことが出来ます。
しかし、そこでコンパイル済みとなるので、SWC の中で ActionScript エラーがあった場合は、行単位での特定ができなくなります。

なので、グラフィックアセットの SWC を作るときには ActionScript はあまり組み込まない方が良さそうです。

MovieClip または Sprite などのビルトインクラスを継承する形だけにしておいて、どうしても使う場合は SWC 用 ActionScript 群と、 Flash Builder で制御するとき(SWC を使う側)の ActionScript を別にして使うと、テストも書きやすそうです。

そして SWC 内の ActionScript では ASDoc の記述と厳格な型宣言を強くオススメします。


2. タイムライン上のサウンドが再生されない

Flex SDK とかのバグ(というか仕様?)なんじゃないかと思うのですが MovieClip タイムライン上にサウンドを配置しても、サウンドが再生されません。

音とグラフィックが同期したようなアニメーションを作る場合、タイムラインにサウンドを配置してストリーミングで再生するのが一般的かと思いますが、それができないので getTimer で時間を確認しながらグラフィックと同期する手法でうまいことやるしか無さそうです。

人によってはこれ結構致命的だとおもうけど・・・。

あと色々・・・

・命名規則ルールを打ち合わせして、うまいことやれば、アセットのインテグレーションとプログラミングの作業を分割することが出来そうな気がします。
・リンケージがデフォルトパッケージになってしまうので、パッケージ指定をリンケージ設定の時にもやっておくとちょっと気持ちよくなります。
・それにしても Flash CS5.5 と Flash Builder 両方買わないと、ってのは割高感がどうしても・・・。というのであれば、Flash Builder でなくとも Flash Develop とかでも同様のワークフローはできそうな気がします。


---

ちなみにイメージ絵は印象派の時代の画家ベルトモリゾの作品です。



2012年01月14日11:02

Webデザインブログ

「FlashBuilder と FlashProfessional による SWC ワークフロー」の関連エントリー

コメント (21)

沖:

取り上げていただいてありがとうございます!
パッケージ指定ですが、私は↓で公開しているJSFLでやっています。
http://f-site.org/articles/2010/12/01140000.html

好みもあると思いますが、フォルダ分け=パッケージ分けな感覚で操作できるので気に入っています。

feb19:

こちらこそありがとうございます。
僕もパッケージ指定を JSFL コマンドでやっています。
デフォルトパッケージのままのリンケージを検索して
任意のパッケージ名を付与するだけのコマンドです。

フォルダ分けもしてくれるのでその JSFL は凄く役に立ちそうですね!
情報ありがとうございます!

Hello, Thank you for this great posting! I must bookmark feb19.jp blog - FlashBuilder と FlashProfessional による SWC ワークフロー. Many thanks.

gLexJV Hello! How do you feel about young composers?!....

t1N0QY Yet, much is unclear. Could you describe in more details!....

sbWRnz However, the author created a cool thing..!!

kBpHTw See it for the first time!!....

KVhEng Yet, much is unclear. Could you describe in more details!....

lmTWat Uh, well, explain me a please, I am not quite in the subject, how can it be?!....

4NFsFX Can be also this issue because the truth can be achieved only in a dispute :DD

GFaLyy The material is on the five plus. But there is a minus! My internet speed 56kb/sek. The page was loading for about 40 seconds!....

rxeTWp The topic is pretty complicated for a beginner!....

uQ1AZF Develop the topic further! It is interesting to know more details..!!

z9pXQg Post brought me to think, went to mull over!!....

zguoY0 Well, actually, a lot of what you write is not quite true !... well, okay, it does not matter:DD

LySNfI Develop the topic further! It is interesting to know more details..!!

98RSWt I do`t see a feedback or the other coordinates from the blog administration!....

SLVBqo Thanks:) Cool topic, write more often! You manage with it perfctly:DD

W3KI6v Yeah, it is clear now !... From the very beginning I did not understand where was the connection with the title !!....

c3ggZN Internet is written with the capital letter in a sentence, by the way. And hundredths are written not with a point but with a comma. This is according to the standard. And actually everything is very good..!!

gbUBWb Thanks, useful material I added your blog to my bookmarks!....

コメントを投稿

トラックバック

このエントリーのトラックバックURL:
http://feb19.jp/mt/mt-tb.cgi/232

Navigation

古:WiFi Cat
新:iOS 5 の Twitter Framework で Twitter 投稿する
トップページ

Recently Entries
NSArray や NSUserDefaults など iOS Foundation Framework のクラスをざっくり解説
なんとなく iOS Cocoa Touch の Foundation...
Flash の SWZ ファイルって何ぞや
textlayout.swz とか。何も考えずに使わないといけないか...
iOS 5 の Twitter Framework で Twitter 投稿する
iOS 5 から Twitter が OS 標準になりましたが、その...
FlashBuilder と FlashProfessional による SWC ワークフロー
.swc というファイルをご存知でしょうか。swc ファイルは Ad...
WiFi Cat
あけましておめでとうございます。それはそうと季節がら猫が暖房器具代わ...
FlashPlayer 11 対応コンテンツを FlashBuilder 4.5 で作る
いやー久しぶりの投稿。ネタは結構有るんですけどね。まずは Flash...
MacBook Air 11" Mid 2011 を買いました
MacBook Air 11" Mid 2011 の特盛モデル買いま...
Mac OS X Lion に Android SDK を入れる
このへんはインストール作業がややこしいのでメモ。...
Flash Player 11 Molehill の cubicCurveTo() で CSS3 の transition-timing-function: cubic-bezier() を設定するツールを作りました
タイトルが謎の呪文になりつつあります。Flash Player 11...
VIM (Vi) をターミナルで操作 / Mac OS X
vi で操作したりする機会がたまにあるので備忘録。...