こんにちはKnockKnockです。
実は長女が生まれるんですが、最近では嫁の里帰りを指折り数えてます。
めっきり春めいてきましたがいかがお過ごしですか？

で、今回ですが、前からやりたかったんですがなかなか手をつけられずにいた自動化ツール、
「基本部分オーサリングの自動化」です。
Webのお仕事ではPhotoShopでデザインデータ作られることが多いかと思います。
PhotoShopからPNGデータを書き出して、flaに読み込んでといった作業でありますが、
これらは下準備のようなものですが結構時間がかかります。
本当はロジックや演出を考える時間が欲しいのに・・・。

PhotoShopはJavaScriptでコマンドを実行することが出来ますが、
同じようにFlashもJavaScriptでコマンドを実行することが出来ます。知ってのとおりJSFLです。
今回はPhotoShopJSとJSFLを利用して基本的な部分のオーサリングを自動化してしまおうと。

まずは以下のファイルをダウンロードしてください。

knockknock090414.lzh

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

使用方法

１）　PhotoShopのデザインデータを整理します。

デザインデータはサンプルとしてこんな感じ。
大切なのはPSDのレイヤー情報の整理です。以下のように整理します。

このレイヤー情報がflaに反映されますので、ここでflaのMovieClipの階層を意識して整理します。

PhotoShopからはレイヤーグループ名、とレイヤー名を元に、
クラスファイルとPNGファイルが作成されます。

レイヤーグループはflaではグループ以下のオブジェクトを内包するMovieClipになります。
クラスファイルではパッケージが作成され、パッケージ直下にメインとなるクラスが作成されます。

レイヤーは接頭にオプション文字を置くことで、生成され方が変わります。
オプション文字は以下の通りです。
・「*」　：　MovieClip
・「-」　：　GraphicSymble
・「MC_」　：　MovieClipを継承したクラスをリンケージしたMovieClip
※オプションを何も記述しない場合は「MC_」と同じになります。

以下の注意点があります。
・同じレイヤーグループ内に同一名称の名前のものは置かないでください。
（※オプション文字を含まず）
・レイヤーグループとレイヤーのオプション「-」以外は名前に半角英数以外は使用しないでください。
また頭文字に数字は使えません。

２）　PhotoShopJSの実行

メニューの「ファイル > スクリプト > 参照」でダウンロードした「基本部分オーサリング自動化.jsxbin」を実行してください。
以下のダイアログが開きます。

 

・　PNGファイルを書き出す　：　レイヤー名を元にpngを作成します。
・　layout.textを書き出す　：　flaファイルにレイアウトするためのテキストデータ。
（※これがないとJSFLは実行できません。）
・　ActionScriptファイルを書き出す　：　レイヤーグループ名とレイヤ名を元にasファイルを書き出します。
・　プロジェクト名（半角英）　：　クラスパッケージを作成する際やライブラリを整理する際に使用します。（※必須項目）
・　著者　：　クラス内部にauthorを記述します。
・　デフォルトで非表示　：　クラス内部コンストラクタに「visible = false」を記述します。
（※ロジックがない状態でいっぺんにクラスファイルと表示オブジェクトが展開されるので、とりあえず非表示にしておかないと編集が困難になります。）

PSDファイルと同階層に同じ名前でファイル一式が作成されます。

「classes」の中にクラスファイルが作成され、「materials」の中にpngファイルが作成されます。
同じ様な階層構造でしまわれるので、後の更新作業もやりやすくなります。

今回作成されるクラスファイルは、レイヤーグループとオプションに「MC_」をつけたレイヤー。
クラスの頭に「MC_」がつくのはMovieClipとクラスが1対1になっている場合につける
弊社での決まり事にならったものです。弊社仕様ですいません。

自動で書き出されたクラスのサンプルです。静的配置したものに関してはpublicで宣言され、
クラスに紐づくものはクラスファイルがimportされます。

３）　layout.txtをコピーする

今度は書き出した情報をJSFLで利用するためにPhotoShopから書き出された
layout.txtをコピーします。layout.txtは「materials」ディレクトリにあります。

テキストエディタで開いて「ctrl + a」、「ctrl + c」ですべてのテキストをメモリ上にコピーします。

４）　flaファイルの初期設定をする

自動配置するためのflaを新規で作成します。
ステージサイズを調整して、パブリッシュ設定をして保存します。
どこに保存してもかまいませんが、先ほど書き出したファイル一式が近い方が、
後々便利かと思います。

「リソースパス」をPhotoShopより自動で書き出されたclassesに設定します。
ここで重要なのですが「ステージのインスタンスを自動宣言」のチェックを外してください。
基本的に静的配置されたオブジェクトはクラス上に自動ですべて宣言されます。

５）　JSFLを実行

実行の前に「基本部分オーサリング自動化.mxp」をダブルクリックで、
拡張機能をインストールしておいてください。
ファイルメニューの「コマンド > 基本部分オーサリング自動化」で自動化を実行します。

「基本部分オーサリング自動化」ダイアログが開きます。
・　layout.as　：　先ほどコピーしたlayout.asの内容をペーストします。
・　プロジェクト名　：　PhotoShopの自動処理時に設定したプロジェクト名と同じものを入力してください。
・　リンゲージ　：　書き出されたクラスファイルへリンゲージを設定します。
・　ActionScriptレイヤー　：　MovieClipの一番上のレイヤーにActionScript用の空のレイヤーを作成します。
・　ActionScriptレイヤー名　：　レイヤー名を指定します。

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

６）　パブリッシュ

アイテム数によってはしばらく処理に時間がかかりますが、処理が完了するまでまってください。
500アイテム程度までは試したことがあります。

完了しました。こんな感じです。

あとはパブリッシュして完了ですが、PhotoShop自動化処理時に「デフォルトで非表示」にチェックを入れていると、
すべてのクラスのコンストラクタに「this.visible = false」が挿入されるので何も表示されません。

あとはロジックを埋め込みながら関連するクラスの「this.visible = false」を削除しながら作業することとなります。
もしくはFlash自動化処理時に「リンゲージ：追加しない」を選ぶことでリンゲージを後で自分で設定することもできます。

以上が主な流れになります。

このように機械的な流れをなるべく自動化することにより、あまった時間を演出やロジックにあてることができますが、
今回の利点はそれだけではなく、同じツールで自動化することで、頭で考えなくとも、
自動で同じルールにのっとって構築することができることです。
仕事となれば複数人数で作業することが多いかと思います。
もしくは、何かしらの理由で引き継ぐ必要があったり、休みのときに緊急作業の依頼が来たり・・。
構築が個人に依存するようだと、やはり個人に負担がかかるのは目に見えてきます。

それを回避するために必要なのはルール決めだと考え、弊社では色々と模索していますが、
このツールがその役に立ればと思っています。

まあ、堅い話は抜きにして、まだ作成したばっかなのでデバッグもろくにしていません。
今後バージョンアップを重ねていく予定です。

次回も何かしらご紹介していきますのでお待ちください。