必要条件

この記事に必要な予備知識

・Flash Professional CS6 ※執筆時点のバージョンは12.0.2.529です。

ユーザーレベル

すべて

開発現場ではデザイナーとプログラマーが協力して制作することが多いでしょう。協働の仕方は、自分のやりやすい方法を見つけるのがベストだと思います。ただ、初めのうちは「もっと効率的な方法があるかも?」と悩むもの。そんなときは他人のやり方をまねしてみるのも一つの手です。本記事では、筆者が普段行っている「SWCを中間ファイルに使用する開発フロー」を紹介します。

素材をひとまとめにしたSWCは便利な反面、コンテンツ起動時にすべての素材が展開されます。そのため、Webコンテンツの開発にSWCを用いると読み込みに時間がかかるなどの問題が起きます。一方、AIRアプリの場合は、そういう懸念がないので比較的シンプルに連携できます。SWCについては「SWCを利用したFlash制作の分業ワークフロー:FlashとFlash Builder連携開発」に詳細に書かれているので、本記事ではファイルの作り方について紹介します。悩めるFlash開発者のための一つの指針となれば嬉しいです。

なお、プログラミング作業に使用するツールは、前述の記事でFlash Builderを用いているので、本記事ではフリーウェアのFlashDevelopを用います。

【AIR開発時のデザイナーとプログラマー連携フロー】

  1. プログラマーがシーン遷移程度のモックアップを作成する
  2. デザイナーがデザインを作り込む
  3. プログラマーがSWCを使いながら作り込む

※ステップ2とステップ3は同時進行で行えます。

サンプルの確認

Mac OS/Windowsの両プラットフォームで動く画像チャットのようなものを作成するという設定で解説していきます(実際、以下のサンプルは筆者が手掛けている案件で作成したもので、学校の教室で「グラフを描く」という目的で使用するアプリです)。このアプリの主な画面は次の3つで、上側にあるボタンで画面を切り替えます。

ステップ1:プログラマーがシーン遷移程度のモックアップを作成する

まずは、プログラマーがFlash Professionalを使って簡単なモックアップを作ります。モックアップの基本は、「ボタンを押して画面が切り替わる。その画面の機能が見てわかる」ことだと思います。この段階では、

  • ボタンの数と大体の大きさがわかる程度のもの
  • ボタン以外の部分の表示領域と画面数を示すMovieClip

までを作成すれば十分だと思います。もし、一緒に作業するデザイナーの経験が浅い場合、ボタンやMovieClipのサイズはできるだけ最終形に近いものを用意した方が意識の共有ができるでしょう。それなりに経験を積んでいるデザイナーなら、ゆるめに決めておいて自由な配分で作成してもらう方がよいと思います。

1-1 新規作成でファイルを新規に作成する

Flash Professional CS6を起動したら、新規作成で「ActionScript 3.0」を選択して、ファイルを新規に作成します。

1-2 MovieClipにクラス名を付ける

サンプルでは、ボタン周りをまとめたMovieClip「mcNav」と、シーンごとのアニメーション素材をまとめたMovieClip「mcMain」を作成してあります。この2つのMovieClipをスクリプトからコントロールできるようにクラス名を付けます。

[ライブラリ]パネルの「mcMain」の右側にある[リンケージ]欄をダブルクリックして、「MainUI」と入力します。同様にして「mcNav」には「NavUI」とクラス名を付けます。

※サンプルでは、ルートに2つのMovieClip(mcMainとmcNav)を配置していますが、これはスクリプトから呼ぶ際には不要です。ただ、置いてあることで、デザイナーがMovieClipを探しやすくなり、作業もしやすいので配置しておいた方がよいでしょう。

1-3 mcNavの中身を確認する

サンプルでは、3つのボタンでシーン(画面)を切り替えて表示します。mcNavの中にはこの3つのボタンを置いています。このとき、ボタンのインスタンス名はきちんと付けておきます。

1-4 mcMainの中身を確認する

普通、コンテンツはシーンに分かれており、シーンごとのMovieClipを作ります。また、ラベル用のレイヤーを用意してシーン管理用のラベル名を付けます。そして、すべてのシーンのMovieClipを個別のレイヤーに、かつ1フレーム目から配置します。

シーンの表示/非表示の切り替えはスクリプトで制御します。これにより、デザイナーはレイヤーの表示を切り替えつつ作業すればよく、スクリプトでコントロールする際もNUllエラーに遭遇しにくくなります。

1-5 スクリプトでコントロールするときのポイント

後述のステップ3でプログラマーが作成するMain.asには、シーンのMovieClip(mcS01~mcS03)を非表示にするfunctionを用意します。このfunctionは次の2つのタイミングで呼ばれ、各シーンの表示前にすべてを非表示にしています。

  • 最初に表示されるとき。
  • 各シーンに切り替わるとき。

そのあと各ラベルに飛ぶと、下記のフレームスクリプトによってそれぞれのシーンの素材が表示されるという仕組みです。

<1フレーム目> stop(); <5フレーム目 ラベル名「s01」> stop(); mcS01.visible = true; mcS01.gotoAndPlay(2); <10フレーム目 ラベル名「s02」> stop(); mcS02.visible = true; mcS02.gotoAndPlay(2); <15フレーム目 ラベル名「s03」> stop(); mcS03.visible = true; mcS03.gotoAndPlay(2);

フレームスクリプトが多くなると、どこに何を書いたかわらなくなりがちなので、できるだけ自分ルールを決めておきます。私のルールは下記の3点です。

  • 最低限の内容のみにとどめる。
  • 外部ASファイルに書くよりは短く終わるもの。
  • 後々書き直す必要がないもの。

ここまでの作業をしたものが、サンプルファイルのlibフォルダ > graph.flaです

1-6 モックアップを作成する際のポイント

ステップ1(モックアップ作成)は、頭の中にあるものを具現化するための最初の段階です。今後の作業フローを頭に浮かべながら、できるだけ行きつ戻りつが発生しないように想像力を働かせましょう。モックアップに求められるのは、完成イメージをスタッフ間で共有できることです。そのために、ボタンや、遷移する画面内の機能に必要なオブジェクトはできるだけ用意しておく方がよいでしょう。

  • 完成イメージに必須となる機能ボタンや表示される画面をMovieClipで作成する。
  • ボタン類や画面類を納めたコンテナとなるMovieClipシンボルにはクラス名、ステージに配置したインスタンスにはインスタンス名を付ける。
  • フレームスクリプトの設定と、Main.asにはボタンクリックでの画面切り替え程度のベースとなる動きを入れる。

ステップ2:デザイナーがデザインを作り込む

パブリッシュ時にSWCファイルを書き出すように設定しておけば、デザイナーは基本ルールを守る限り好きにデザイン修正してもらって構いません。途中途中でSWCファイルをプログラマーに渡すことで、プログラマーとデザイナーは完全に並行して作業できます。ここでは、SWCファイルの書き出し設定と、私がデザイナーに伝えている基本ルールを説明します。

2-1 SWCファイルの書き出し設定

パブリッシュ時に、SWCファイルも書き出すように設定します。[プロパティ]パネルの[デフォルト]の右にある[編集...]から[パブリッシュ設定]ダイアログボックスを開き、設定画面の[Flash]タブの[SWC書き出し]にチェックを入れます。

2-2 デザイナーに伝えている基本ルール

私(プログラマー)はいくつかの簡単なルールを決めて、あとはデザイナーの好きに作ってもらっています。

ルール 説明
インスタンス名/ラベル名は変更しない ステップ1で作成したファイルのインスタンス名/ラベル名は変更しない。追加はOK。
シンボルの中心点は、できるだけX座標0、Y座標0で シンボルの中心点はオブジェクトの中央に来ることがありますが、これはできるだけX座標0、Y座標0にしてもらっています。アニメーション的に中央の方が扱いやすいときは例外とします。
シンボル名/インスタンス名には接頭辞を付ける MovieClipは接頭辞に「mc」、ボタンシンボルは接頭辞に「btn」など、当人ルールでいいので接頭辞を付けるように、またシンボル名とインスタンス名は別になるようにお願いしています。
アニメーション素材は、できるだけグラフィックシンボルで MovieClipでもいいのですが、グラフィックシンボルの方がアニメーションを確認しやすいのと、スクリプトからのコントロールになったときに誤動作を起こしにくいためです。

ステップ3:プログラマーがSWCを使いながら作り込む

SWCを使用するには、FlashDevelopでプロジェクトを作成し、作成したSWCをライブラリに登録して使用します。ライブラリに登録しておけば、SWCの中のクラスとクラス内のインスタンス名を付けてあるオブジェクトはすべてスクリプトからハンドリングできます。ここでは、FlashDevelopのプロジェクトを作成し、SWCをライブラリに登録する方法を説明します。

 

※Flash Builderで同様の作業を行う際には、「SWCを利用したFlash制作の分業ワークフロー:FlashとFlash Builder連携開発」を参考にしてください。

3-1 新規プロジェクトを作成する

FlashDevelopの[プロジェクト]メニューから[新規プロジェクト]を選択し、表示されるダイアログボックスにて(1)[AIR AS3 Projector]を選択、(2)プロジェクト名を入力、(3)場所を設定、(4)[プロジェクトフォルダーを作成する]にチェックを入れ、(5)[OK]ボタンを押します。[場所]に設定した階層にプロジェクトフォルダーが作成されます。

3-2 作成したSWCをプロジェクトに登録する

プロジェクトフォルダーの中の[lib]フォルダーにSWCファイルをコピーし、ライブラリとして登録しましょう。[プロジェクト]タブのファイルツリーで、SWCファイルを右クリックして表示されるメニューから[ライブラリに追加]を選択します。

3-3 スクリプトを書く時のポイント

あとは好きにスクリプトを書けばよいのですが、お決まりの部分だけ少し説明しましょう。詳しくは、サンプルファイルをご覧ください。

(1)宣言するクラス名は間違えないようにしましょう。

public var mainUI:MainUI; public var navUI:NavUI;

(2)init()内では、使用するクラスをnew()してaddChild()でstageにインスタンスを追加します。

mainUI = new MainUI(); navUI = new NavUI(); addChild(mainUI); addChild(navUI);

(3)スクリプト内で使用するボタンなどのインスタンスは改めて代入しておくとコードがすっきりします。

※そのままでもクラスのインスタンスからの指定でスクリプトから操作することは可能です。

 
btnThumb = navUI.Btn_thum; btnLay = navUI.Btn_lay; btnWrite = navUI.Btn_write;

デザイナーとプログラマーの作業の同時進行について

ステップ2とステップ3は同時進行することが多いです。このときは、「Flashファイルに関する修正はデザイナーが行い、ASファイルにかかわる修正はプログラマーが行う」ことを徹底します。

デザイン修正が発生したとき

デザイナーがFlash ProfessionalでパブリッシュしたSWCファイルをプログラマーのローカル環境でも上書きします。ついでにFLAファイルも受け取っておくと安心です。

インスタンス名を追加・変更したいとき

デザイナーに追加修正したいインスタンス名を連絡して名前を変えてもらいます。また、便宜的にプログラマーは手元にあるFLAファイルでも名前を変更しておき、作業を進めておきます。後日、デザイナーから最終データが来た際にはこの手元のFLAファイルを上書きしますが、デザイナーがインスタンス名を正しく設定していれば問題なく動くはずです。