SWCを利用したFlash制作の分業ワークフロー：FlashとFlash Builder連携開発
作成日
28 September 2011
ページ ツール |
必要条件
ユーザーレベル
中級
必要な製品
- Flash Builder 4.5 Premium (体験版ダウンロード)
- Flash Professional CS5.5 (体験版ダウンロード)
サンプルファイル
Flash Professional CS5.5では、［パブリッシュ設定］ダイアログが改善され、SWC単体でのパブリッシュができるようになりました。本記事では、Flash Professionalでタイムラインアニメーションやグラフィック素材を作成するデザイナーと、Flash BuilderでActionScriptをコーディングするデベロッパーが、よりスムーズに共同作業を行うためのSWCの使い方について解説します。
SWCとは
SWC（スウィック）とは、コンパイル済みのリソースを再利用しやすいようにまとめたファイル形式です。例えば、Flash Professionalで作成したシンボルやビットマップ、ActionScriptなどは、単体のSWCファイルとしてパブリッシュすることができます。複数のリソースを1つにまとめることができるため、ActionScriptライブラリの配布形態としても利用されています。
SWCを使うメリット
SWCを使うメリットは、大きく分けて2つあります。
1. デザインとコードの分離
デザイナーは必要な素材を作成してSWCに書き出し、デベロッパーはそのSWCを利用してコードを書くことで、それぞれの作業領域を明確にすることができます。複数人で取り組む際はもちろん、1人で作業を完結させる場合でも、デザインとコーディングそれぞれの工程においてより適したアプリケーションを使い分けることができるため、作業効率の向上を見込めます。
2. コンパイル時間の短縮
Flash Professionalでは、パブリッシュの度にタイムラインやライブラリに含まれる内容をコンパイルするため、シンボル数が多くなればなるほど時間がかかるようになります。そこで頻繁に変更しない素材はSWCにまとめておくことで、修正ごとに発生するコンパイル時間を短縮することができます。
新しくなった［パブリッシュ設定］ダイアログ
Flash Professinal CS5.5では［パブリッシュ設定］ダイアログが改善され、パブリッシュ形式を一覧しながら、各形式の設定を変更できます。また、CS5まではSWCを書き出す際に必ずSWFと一緒にパブリッシュされていましたが、CS5.5ではSWCだけでパブリッシュできるようになっています。
それでは、Flash ProfessionalとFlash Builderを用いた開発環境においてどのようにSWCを利用するのか、そのフローに沿って解説していきましょう。
Flash ProfessionalでSWCを書き出す
まずは、Flash Builderでコーディングするための素材をFlash Professionalで作成し、SWCとして書き出すところまでを解説します。
通常のFlash制作と同様に、ライブラリ内にシンボルを作成します。サンプルでは、3ページだけのシンプルなWebサイトを想定して素材を作成しています。
全てのシンボルを作成し終えたら、SWCを介してActionScriptから利用できるようにリンケージを設定します。ライブラリでActionScriptから扱いたいシンボルのプロパティを開きます。［シンボルプロパティ］ダイアログが開くので、［ActionScript リンケージ］で、［ActionScript 用に書き出し］と［1 フレーム目に書き出し］にチェックを入れます。複数のシンボルに対してまとめて設定を行うこともできます。
※大量にシンボルがあってパッケージを切り分けたい場合や、ビットマップをリンケージする場合には、筆者が作成した「自動でリンケージを設定するFlashコマンド」を使うと便利です。
リンケージ設定が完了したら、［ファイル］→［パブリッシュ設定］を開きます。画面左側で［SWC］のみにチェックを入れてパブリッシュすると、FLAファイルと同じディレクトリにSWCファイルが書き出されます（ここではassets.swc）。
Flash BuilderでSWCを利用する
ここからは、Flash Builderを使ってFlash Professionalから書き出したSWCを利用し、コーディングをするまでの流れを解説します。まずはプロジェクトを作成するため、［ファイル］→［新規］→［ActionScript プロジェクト］を選択します。なお、他の種類のプロジェクトでもSWCを利用することは可能です。
［新規 ActionScript プロジェクト］ダイアログが開くので、プロジェクト名を入力し、［次へ］ボタンをクリックします。
ビルドパスの画面ではそのままで［終了］ボタンをクリックします。プロジェクトが作成されると、パッケージエクスプローラーにフォルダー一覧が表示されます。
続いて、SWCを配置するフォルダーを作成するため、プロジェクト名で右クリックし、コンテキストメニューから［新規］→［フォルダー］を選択します。
［新規フォルダー］ダイアログが開くので、［フォルダー名］に「libs」と入力し、［終了］ボタンをクリックします。フォルダー名は便宜的なものなので何でも構いませんが、SWCが入っていることがわかりやすい名前にしましょう。
フォルダーが作成されたら、Flash Professionalから書き出したSWCをそのフォルダーの中にコピーします。
今度は、コピーしたSWCをFlash Builderから利用できるようにするため、ライブラリパスを通します。［プロジェクト］→［プロパティ］を選択し、［プロジェクトプロパティ］ダイアログを開きます。画面左側から［ActionScript ビルドパス］を選択し、［ライブラリパス］タブで［SWCフォルダーの追加］ボタンをクリックします。
［フォルダーの追加］ダイアログが開くので、先ほど作成したフォルダー名である［libs］を入力します。
これでライブラリパスが通り、SWCを利用できるようになりました。ライブラリパスでSWCへのパスを通すと、パッケージエクスプローラーに「Referenced Libraries」という項目が追加されます。ここには、ライブラリパスに追加したSWCなどのライブラリが表示され、ツリー構造を辿っていくことでSWCに含まれているクラス名を一覧できます。なお、ライブラリパスを通したフォルダーに新たにSWCを追加すると、すぐにそのSWCのコード補完も有効になります。
あとは、Flash Builderでコーディングを進めていきます。Flash Professionalで作成した素材が全てコンパイル済みのSWCになっているため、Flash Builderでは非常に高速なコンパイルが可能になるはずです。
サンプルでは、Flash Professionalで作成したボタンをクリックすると、それぞれのページに表示が切り替わるように実装しています。合わせてご覧ください。
デザインに変更が発生したら？
SWCを書き出した後で、デザインに対して変更が発生することもあるでしょう。そのときは、Flash Professionalで修正したSWCを書き出してから、Flash Builderのライブラリパスが通っているフォルダーに上書きコピーするだけで変更が反映されます。
おわりに
SWCを利用したActionScriptのコーディングでは、リンケージしたシンボルの構造やクラス名に依存することになるため、作業を始める前に素材の洗い出しと命名ルールの策定をしておくとスムーズに進められます。場合によっては、デザイナーの最終成果物はPSDやAIまでとして、FLAに最適化する工程をデベロッパーやそのアシスタントが担当する方がよいかもしれません。
今回紹介した手法は、デザインとコーディングの工程をSWCで橋渡しすることによって、スマートなFlash制作ワークフローを実現するものです。この他にも、プロジェクトの規模やスタッフのスキルなどによって様々な手法が考えられますので、本記事を一例としてご参考にしていただければ幸いです。
