KnockKnockです。
ここ数カ月忙しさにかまけて更新してませんでしたが、ようやく落ち着きましたんで、ぼちぼち記事を載せていきます。

さて、これまでPhotoShopから各画像の書き出しと、クラスの作成、Flashオーサリングといった自動化の流れを考えてきましたが、今回の自動化は最近、シーン遷移のライブラリとして普及してきているProgressionを利用した自動化です。大まかな流れは変わりませんが、クラス生成時に「Progression用のクラスを書き出してしまおう」ということです。これまでは自動化後はシーン遷移等のASのコーディングを行わなければなりませんでしたが、Progression用のクラスとして書き出してしまうことで、簡単なコンテンツでしたら一切のコーディングを必要としなくなります。こうして大幅に省略した時間をクリエイティブに利用することができます。

さっそく方法をご紹介と言いたいのですが、まずはProgressionの概念に関して最低限、シーンとキャストに関して知っておく必要があります。シーンとはその名のとおりシーン遷移のシーンです。ただし表示の実態はありません。キャストとは関連付けられたシーンで表示させたいシンボルの設定のことを言います。つまりシーンを変更すると、そのシーンに関連付けられたキャストの表示がそれぞれ制御されることになります。これから紹介する自動化の最初のステップにPhotoShopのレイヤーを整理する作業がありますが、シーンとキャストの関係を考えながら整理していく必要があります。

knockknock091013.lzh

基本部分オーサリング自動化_Progression用.jsxbin　：　PhotoShopJS
基本部分オーサリング自動化_Progression用.mxp　：　Flash拡張ファイル（ダブルクリックで拡張可能）
※今回の自動化実行環境はCS4以降となります。

では、その自動化方法の説明です。動作確認状況はCS3、CS4のPhotoShopとFlashです。

1. PhotoShopレイヤーの整理
2. PhotoShop自動化用JavaScript実行
3. Flash自動化用JSFL実行
4. その他設定
5. パプリッシュ

---

ステップ1：PhotoShopレイヤーの整理

デザイン済みのPSDファイルを、自動化用に整理します。

1) インデックスシーンとして最上位にレイヤーセットを作成

まずシーンをPhotoShopのレイヤーセットで定義していきます。シーンとして必ず必要なものとしてインデックスシーンとなります。ローディング後、一番はじめに表示されるシーンです。このインデックスシーンとして最上位の階層にレイヤーセットを作成します。レイヤー名は何でも構いませんが接頭に必ず「SC_」をつけてください。

2) 下層シーンとしてインデックスシーンレイヤーセット以下にレイヤーセットを作成

インデックスレイヤーセットの直下に第二階層となる下層シーンレイヤーセットを作成します。さらに下層がある場合、各下層シーンレイヤーセットの直下に同じようにレイヤーセットを作成し、レイヤーセットの入れ子構造を作ります。

注意点は以下の通りです。

• シーン用レイヤーセットのレイヤー名には接頭に必ず「SC_」をつけてください。
• シーンIDがレイヤーセットの名前で登録されますので、シーン用レイヤーセットの名前は一意のものにしてください。

これでシーンの定義は完了です。

3) 各シーンに紐づくキャストとしてそのシーンレイヤーセット直下にレイヤーセットを作成

次にシーンの登場人物ともいえるキャストを定義します。各シーンレイヤーセットの直下にシーン名と同一名でそのシーンに紐づくキャストとして、レイヤーセットを作成します。シーン遷移の際、行き先がそのシーンの場合だった時に表示されるキャストです。つまりProgression用に書き出されるクラスでは_onInitでAddChildされるキャストです。各シーンに紐ずくキャストは複数作成することができます。同一シーンレイヤーセット内で一意の名前を付けてください。シーン遷移の際、行き先がそのシーンもしくは、子シーン以下の場合に表示されるキャストです。

ここでの注意点としては以下の通りです。

• シーンレイヤーセット直下には必ず同一名のキャストレイヤーセットをひとつ作成してください。
• キャストレイヤーセットには必ず接頭に「MC_」をつけてください。

キャストが定義されました。

4) シーン遷移のためのキャストボタンとしてレイヤーセットを作成

シーン遷移のためのキャストボタンを定義します。各シーンレイヤーセットの直下または、キャストレイヤーセットに飛び先シーン名と同一名でキャストボタンとして、レイヤーセットを作成します。キャストボタンレイヤーセット名がそのキャストボタンのIDとなります。レイヤー名にそれぞれ「over」「out」を設定するとロールオーバー、ロールアウトのアニメーションが設定されます。

ここでの注意点としては以下の通りです。

• キャストボタンレイヤーセットには必ず接頭に「BT_」をつけてください。

5) キャストに静的配置するMovieClipとしてレイヤーを作成

キャスト、キャストボタンの表示要素を定義します。キャストレイヤーセットまたは、キャストレイヤーボタン直下に静的配置するMovieClipレイヤーを作成してください。またキャストにキャストを入れ子にすることもできます。その際はキャストレイヤーセット直下にキャストレイヤーセットを作成してください。

ここでの注意点は以下の通りです。

• 親のキャストと同一名は避けてください。
• MovieClipレイヤーはシーンの直下ではなく必ずキャストレイヤーセットの直下に配置してください。

最後に1レイヤーセットが1シーンおよび1シーン、1レイヤーが1MovieClipとなりますので、それ以外のレイヤー（ガイドやマスクなども含む）は削除、および統合してください。

例）
SC_index
--MC_index
----image
--MC_navigation
----BT_content0
------over
------out
----BT_content1
------over
------out
--SC_content0
----MC_content0
--------image
----MC_item
--------image
--SC_content1
----MC_content1
--------image
----MC_item
--------image
--MC_bg
----image

これで自動化のためのPhotoShopレイヤー整理は完了です。

戻る

---

ステップ2：PhotoShop自動化用JavaScript実行

ステップ1で整理したPhotoShopを開いた状態で、PhotoShopバッチ処理用に作成したJavaScriptを実行しします。バッチ処理でPNGデータ、クラスファイル、レイアウト情報テキストを書き出します。PhotoShopメニューのファイル＞スクリプト＞参照で「基本部分オーサリング自動化_Progression用.jsx」を選択、実行してください。ちなみに「C:\Program Files\Adobe\Adobe Photoshop CS4\Presets\Scripts」にjsxファイルを置いておくとスクリプトメニューに登録され、直接実行することもできます。「オーサリング自動化 Progression用」ダイアログが開きます。

1. PNGファイルを書き出す　：　materialsディレクトリが作成され、PSDレイヤーごとにPNGファイルを書き出します。
2. layout.txtを書き出す　：　materialsディレクトリ内にレイアウト情報を出力したlayout.txtファイルが書き出されます。
3. ActionScriptファイルを書き出す　：　classesディレクトリが作成され、Progression用のクラスファイルが書き出されます。
4. プロジェクト名　：　classesディレクトリ内にプロジェクトでパッケージを作成します。半角英数のみ使用可能です。
5. 著者　：　書き出されたクラスに@author情報を記述します。

PSDと同一階層にPSDと同一名のディレクトリを作成し、その中にmaterialsディレクトリ（PNGファイルとレイアウト情報テキストファイル）とclassesディレクトリ（クラスファイル）を作成します。

戻る

---

ステップ3：Flash自動化用JSFL実行

PhotoShopで書き出したデータをもとにFlashの自動化用JSFLでオーサリングを自動化します。
まずは以下のファイルをC:\Documents and Settings\ユーザー名\Local Settings\Application Data\Adobe\Flash CS4\ja\Configuration\Commandsに配置します。

• 基本部分オーサリング自動化_Progression用.jsfl
• 基本部分オーサリング自動化_Progression用.xml

Flashを起動して元となるflaファイルを新規作成し、保存します。
Flashメニューのコマンド＞基本部分オーサリング自動化_Progression用を選択、実行します。
「基本部分オーサリング自動化」ダイアログが開きます。

1. layout.as　：　PhotoShopで書き出したレイアウト情報テキストファイルをコピー&ペーストします。
2. プロジェクト名　：　PhotoShop自動化時にダイアログで入力したプロジェクト名と同一のものを入力します。
3. リンケージ　：　MovieClipにクラスファイルのリンゲージが追加されます。追加するを選んでください。
   追加しない
   追加する
4. ActionScriptレイヤー　：　各MovieClipの一番上のレイヤーにActionScriptレイヤーが作成されます。
   追加しない
   追加する
5. ActionScriptレイヤー名　：　ActionScriptレイヤー＞追加するを選んだ時のレイヤー名

「OK」ボタンで「layout.textを選択してください」ダイアログが開きますので、layout.textを選択してください。書き出したファイルとの位置関係を把握させるために選択が必要となります。

選択後、自動化処理が開始されます。アイテム数によってはしばらく処理に時間がかかりますが、処理が完了するまでお待ちください。

戻る

---

ステップ4：その他設定

自動化処理完了後、ステージサイズを調整し、ドキュメントクラスを設定します。ドキュメントクラスはPhotoShopから書き出したclasses/proj/プロジェクト名/display/インデックスシーン名/インデックスシーン名.asを指定してください。記入例としては「proj.プロジェクト名.display.インデックスシーン名.インデックスシーン名」になります。次に「パブリッシュ設定」ダイアログを開いてを行います。「リソースパス」をPhotoShopより自動で書き出されたclassesに設定します。ここで重要なのですが「ステージのインスタンスを自動宣言」のチェックを外してください。基本的に静的配置されたオブジェクトはクラス上に自動ですべて宣言されます。

戻る

---

ステップ5：パプリッシュ

設定が完了したらパブリッシュですが、パブリッシュ前に、Progressionライブラリをclasses以下に配置してください。今回自動で書き出したクラスはProgressionを使用していますので、Progressionライブラリがないとエラーを起こしてしまいます。パブリッシュしてシーン遷移が問題なく行われていれば完了です。

戻る

---

以上がProgressionを使用したPhotoShop書き出しと Flashオーサリングの自動化の流れです。Progressionのコンポーネントベースで開発をすればもちろんスクリプトを記述する必要はありませんが、クラスベースで開発した場合そうはいきません。しかし実際はProgressionはクラスベースの開発に利用されるケースがほとんどです。

今回はProgressionのクラスベースの開発を自動化しました。もちろんこれでサイトが完成するというわけではありません。トランジションや各アニメーションの調整をする必要はありますが、それまでの工数を大幅に削減することができるのです。

是非ご利用いただければと思います。