※執筆時点のバージョンは12.0.2.529です。ユーザーレベルすべて開発現場ではデザイナーとプログラマーが協力して制作することが多いでしょう。協働の仕方は、自分のやりやすい方法を見つけるのがベストだと思います。初めのうちは「もっと効率的な方法があるかも?」と悩むもの。そんなときは他人のやり方をまねしてみるのも一つの手です。本記事では、筆者が普段行っている「SWCを中間ファイルに使用する開発フロー」を紹介します。素材をひとまとめにしたSWCは便利な反面、コンテンツ起動時にすべての素材が展開されます。そのため、Webコンテンツの開発にSWCを用いると読み込みに時間がかかるなどの問題が起きます。AIRアプリの場合は、そういう懸念がないので比較的シンプルに連携できます。Builder連携開発」に詳細に書かれているので、本記事ではファイルの作り方について紹介します。悩めるFlash開発者のための一つの指針となれば嬉しいです。Builderを用いているので、本記事ではフリーウェアのFlashDevelopを用います。【AIR開発時のデザイナーとプログラマー連携フロー】プログラマーがシーン遷移程度のモックアップを作成するデザイナーがデザインを作り込むプログラマーがSWCを使いながら作り込む※ステップ2とステップ3は同時進行で行えます。OS/Windowsの両プラットフォームで動く画像チャットのようなものを作成するという設定で解説していきます(実際、以下のサンプルは筆者が手掛けている案件で作成したもので、学校の教室で「グラフを描く」という目的で使用するアプリです)。このアプリの主な画面は次の3つで、上側にあるボタンで画面を切り替えます。Professionalを使って簡単なモックアップを作ります。モックアップの基本は、「ボタンを押して画面が切り替わる。その画面の機能が見てわかる」ことだと思います。この段階では、ボタンの数と大体の大きさがわかる程度のものボタン以外の部分の表示領域と画面数を示すMovieClipまでを作成すれば十分だと思います。一緒に作業するデザイナーの経験が浅い場合、ボタンやMovieClipのサイズはできるだけ最終形に近いものを用意した方が意識の共有ができるでしょう。それなりに経験を積んでいるデザイナーなら、ゆるめに決めておいて自由な配分で作成してもらう方がよいと思います。3.0」を選択して、ファイルを新規に作成します。MovieClipにクラス名を付けるサンプルでは、ボタン周りをまとめたMovieClip「mcNav」と、シーンごとのアニメーション素材をまとめたMovieClip「mcMain」を作成してあります。この2つのMovieClipをスクリプトからコントロールできるようにクラス名を付けます。[ライブラリ]パネルの「mcMain」の右側にある[リンケージ]欄をダブルクリックして、「MainUI」と入力します。同様にして「mcNav」には「NavUI」とクラス名を付けます。※サンプルでは、ルートに2つのMovieClip(mcMainとmcNav)を配置していますが、これはスクリプトから呼ぶ際には不要です。置いてあることで、デザイナーがMovieClipを探しやすくなり、作業もしやすいので配置しておいた方がよいでしょう。mcNavの中身を確認するサンプルでは、3つのボタンでシーン(画面)を切り替えて表示します。mcNavの中にはこの3つのボタンを置いています。このとき、ボタンのインスタンス名はきちんと付けておきます。mcMainの中身を確認する普通、コンテンツはシーンに分かれており、シーンごとのMovieClipを作ります。ラベル用のレイヤーを用意してシーン管理用のラベル名を付けます。すべてのシーンのMovieClipを個別のレイヤーに、かつ1フレーム目から配置します。シーンの表示/非表示の切り替えはスクリプトで制御します。これにより、デザイナーはレイヤーの表示を切り替えつつ作業すればよく、スクリプトでコントロールする際もNUllエラーに遭遇しにくくなります。スクリプトでコントロールするときのポイント後述のステップ3でプログラマーが作成するMain.asには、シーンのMovieClip(mcS01~mcS03)を非表示にするfunctionを用意します。このfunctionは次の2つのタイミングで呼ばれ、各シーンの表示前にすべてを非表示にしています。最初に表示されるとき。各シーンに切り替わるとき。そのあと各ラベルに飛ぶと、下記のフレームスクリプトによってそれぞれのシーンの素材が表示されるという仕組みです。mcS03.gotoAndPlay(2);フレームスクリプトが多くなると、どこに何を書いたかわらなくなりがちなので、できるだけ自分ルールを決めておきます。私のルールは下記の3点です。最低限の内容のみにとどめる。外部ASファイルに書くよりは短く終わるもの。後々書き直す必要がないもの。モックアップを作成する際のポイントステップ1(モックアップ作成)は、頭の中にあるものを具現化するための最初の段階です。今後の作業フローを頭に浮かべながら、できるだけ行きつ戻りつが発生しないように想像力を働かせましょう。モックアップに求められるのは、完成イメージをスタッフ間で共有できることです。そのために、ボタンや、遷移する画面内の機能に必要なオブジェクトはできるだけ用意しておく方がよいでしょう。完成イメージに必須となる機能ボタンや表示される画面をMovieClipで作成する。ボタン類や画面類を納めたコンテナとなるMovieClipシンボルにはクラス名、ステージに配置したインスタンスにはインスタンス名を付ける。フレームスクリプトの設定と、Main.asにはボタンクリックでの画面切り替え程度のベースとなる動きを入れる。ステップ2:デザイナーがデザインを作り込むパブリッシュ時にSWCファイルを書き出すように設定しておけば、デザイナーは基本ルールを守る限り好きにデザイン修正してもらって構いません。途中途中でSWCファイルをプログラマーに渡すことで、プログラマーとデザイナーは完全に並行して作業できます。ここでは、SWCファイルの書き出し設定と、私がデザイナーに伝えている基本ルールを説明します。SWCファイルの書き出し設定パブリッシュ時に、SWCファイルも書き出すように設定します。[プロパティ]パネルの[デフォルト]の右にある[編集...]から[パブリッシュ設定]ダイアログボックスを開き、設定画面の[Flash]タブの[SWC書き出し]にチェックを入れます。デザイナーに伝えている基本ルール私(プログラマー)はいくつかの簡単なルールを決めて、あとはデザイナーの好きに作ってもらっています。ステップ1で作成したファイルのインスタンス名/ラベル名は変更しない。シンボルの中心点はオブジェクトの中央に来ることがありますが、これはできるだけX座標0、Y座標0にしてもらっています。アニメーション的に中央の方が扱いやすいときは例外とします。MovieClipは接頭辞に「mc」、ボタンシンボルは接頭辞に「btn」など、当人ルールでいいので接頭辞を付けるように、またシンボル名とインスタンス名は別になるようにお願いしています。MovieClipでもいいのですが、グラフィックシンボルの方がアニメーションを確認しやすいのと、スクリプトからのコントロールになったときに誤動作を起こしにくいためです。ステップ3:プログラマーがSWCを使いながら作り込むSWCを使用するには、FlashDevelopでプロジェクトを作成し、作成したSWCをライブラリに登録して使用します。ライブラリに登録しておけば、SWCの中のクラスとクラス内のインスタンス名を付けてあるオブジェクトはすべてスクリプトからハンドリングできます。ここでは、FlashDevelopのプロジェクトを作成し、SWCをライブラリに登録する方法を説明します。Builder連携開発」を参考にしてください。Projector]を選択、(2)プロジェクト名を入力、(3)場所を設定、(4)[プロジェクトフォルダーを作成する]にチェックを入れ、(5)[OK]ボタンを押します。[場所]に設定した階層にプロジェクトフォルダーが作成されます。作成したSWCをプロジェクトに登録するプロジェクトフォルダーの中の[lib]フォルダーにSWCファイルをコピーし、ライブラリとして登録しましょう。[プロジェクト]タブのファイルツリーで、SWCファイルを右クリックして表示されるメニューから[ライブラリに追加]を選択します。スクリプトを書く時のポイントあとは好きにスクリプトを書けばよいのですが、お決まりの部分だけ少し説明しましょう。詳しくは、サンプルファイルをご覧ください。(1)宣言するクラス名は間違えないようにしましょう。navUI:NavUI;(2)init()内では、使用するクラスをnew()してaddChild()でstageにインスタンスを追加します。addChild(navUI);(3)スクリプト内で使用するボタンなどのインスタンスは改めて代入しておくとコードがすっきりします。※そのままでもクラスのインスタンスからの指定でスクリプトから操作することは可能です。navUI.Btn_write;デザイナーとプログラマーの作業の同時進行についてステップ2とステップ3は同時進行することが多いです。このときは、「Flashファイルに関する修正はデザイナーが行い、ASファイルにかかわる修正はプログラマーが行う」ことを徹底します。ProfessionalでパブリッシュしたSWCファイルをプログラマーのローカル環境でも上書きします。ついでにFLAファイルも受け取っておくと安心です。インスタンス名を追加・変更したいときデザイナーに追加修正したいインスタンス名を連絡して名前を変えてもらいます。便宜的にプログラマーは手元にあるFLAファイルでも名前を変更しておき、作業を進めておきます。後日、デザイナーから最終データが来た際にはこの手元のFLAファイルを上書きしますが、デザイナーがインスタンス名を正しく設定していれば問題なく動くはずです。地域を選択してください地域を選択すると、アドビサイトで使用する言語と内容が変わります。