こんにちはKnockKnockです。
今日は以前の自動化ツールにより汎用的に、
より簡単にをモットーに改良を加えましたので寄稿します。

このツールはPhotosopCSになって標準で搭載されるようになった機能で、
JavaScriptでPhotoShopのコマンドを実行することが出来るAPIを利用して、
PhotoShopからFlashへPNG形式でデザインデータをインポートする作業をサポートします。

流れとしては
1) 書き出し用にPSDを整形
2) 「Flashコンテンツ初期構築自動化.jsxbin」を使用してPNGファイルとJSFLファイルを自動出力
3) 「layout.jsfl」ファイルをFlashにドラッグアンドドロップしてFLAファイルを自動作成
4) ActionScript3.0の詳細設定「ステージのインスタンスを自動宣言」のチェックをはずす
あとは、サイトを構築していくプログラムを記述するだけです。
（そこは残念ながら自動化しません、Progression等を利用していただければと思います。）

 前回との違いは
・クラスの接頭に「MC_」がつかなくなりました。
・PhotoShopから自動化用JSFLファイルを出力します。
・PSD整形に不都合がある場合にエラーメッセージを表示します。
という事で、前回発表しました内容より一段と簡単になったと思います。

まずはファイルを以下よりダウンロードしてください。
knockknock20110418.zip
・Flashコンテンツ初期構築自動化.jsxbin（PhotoShop自動化JSファイル）
・テストサイト.psd（書き出し用整形済みPSDサンプルファイル）
・テストサイト（自動化実行後のサンプルファイル）
ちなみに対象環境は、CS5以降が必要となります。

では、早速利用方法の説明をさせていただきます。

--------------------------------------------------

1) 書き出し用にPSDを整形

まずは自動化のためにPSDファイルを整形する必要があります。

整形のルールとしては
・PhotoShopのグループをFlashのMovieClipの入れ子と想定します。
・１つのグループに入っているものは、同じシンボルのインスタンスとります。
・ASを書き出す場合はPhotoShopのグループ構成がパッケージとなり、各レイヤー名、グループ名でクラスファイルが作成されます。
・レイヤー名の接頭を「*」にしますと、カスタムクラスは作成されずに、MovieClipのみ配置されます。
・レイヤー名の接頭を「-」にしますと、カスタムクラスは作成されずに、GraphicSymbolのみ配置されます。

以下注意点となります。重要なところですのでご注意ください。

・第1階層は１つのグループだけとしてください。
・レイヤー名、グループ名の先頭は「半角英」の小文字としてください。
・レイヤー名、グループ名に使用できるのは「半角英数_」のみ
（*-はオプション設定のため別扱いとなります）
・レイヤー名、グループ名の先頭は「半角英」のみ
（*-はオプション設定のため別扱いとなります）
・同一グループの同一階層には、異なるレイヤー名、グループ名を設定してください。
（*-はオプション設定のため別扱いとなります）
・１つのレイヤー、グループごとにインスタンスが作成されますので、不要なレイヤーは削除、調整レイヤーは統合してください。

--------------------------------------------------

2) 「Flashコンテンツ初期構築自動化.jsxbin」を使用してPNGファイルとJSFLファイルを自動出力

書き出し用の整形が完了しましたら、「Flashコンテンツ初期構築自動化.jsxbin」を実行します。
「ファイル」＞「スクリプト」＞「参照」にて指定してください。

「Flashコンテンツ初期構築自動化2.0」ダイアログが開きます。

・画像ファイル(PNG)を書き出す
グループごとにディレクトリを作成、レイヤーごとにレイヤー名に従ってPNGファイルを書き出します。

・クラスファイル(ActionScript3.0)を書き出す
グループごとにパッケージを作成、グループ、レイヤーごとにクラスファイルを作成します。
（「非表示」のチェックボックスでは各カスタムクラスのコンストラクタにthis.visible=falseを挿入します。
自動化以後の構築作業をしやすくするために）

・コマンド（JSFL）を書き出す
PSDから書き出されたPNG及びクラスファイルをFLAファイルにインポートするための自動化ファイルです。

以下注意点となります。重要なところですのでご注意ください。
・PNGファイルのみを書き出す場合は「画像ファイル(PNG)を書き出す」のみチェックを入れてください。
・PNGファイルのみを書き出してFLAファイルにインポートする際は「画像ファイル(PNG)を書き出す」と「コマンド（JSFL）を書き出す」のみチェックを入れてください。

「OK」ボタンにて実行してください。
バッチ処理と同様にグループ、レイヤー数により時間がかかる場合があります。
PSDファイルと同一ディレクトリに同一名称にてディレクトリが作成され、中に以下のファイルが出力されます。
・materials（「画像ファイル(PNG)を書き出す」にチェックを入れた場合に作成されるPNGファイル）
・classes（「クラスファイル(ActionScript3.0)を書き出す」にチェックを入れた場合に作成されるActionScriptファイル）
・layout.jsfl（「コマンド（JSFL）を書き出す」にチェックを入れた場合に作成されるJSFLファイル）

--------------------------------------------------

3) 「layout.jsfl」ファイルをFlashにドラッグアンドドロップしてFLAファイルを自動作成

PSDよりファイルが書き出されましたら、
FlashCS5を開いて「layout.jsfl」をドラッグアンドドロップしてください。

「名前を付けて保存」ダイアログが表示されますので、適当な場所に適当な名前で保存してください。
（※XFL形式には対応していません。XFLを利用する場合はいったんFLA形式で作成してから、XFL形式に保存しなおしてください。）

読み込み処理が実行されます。
バッチ処理と同様にグループ、レイヤー数により時間がかかる場合があります。

読み込み完了後のライブラリです。

--------------------------------------------------

4) ActionScript3.0の詳細設定「ステージのインスタンスを自動宣言」のチェックをはずす

ActionSctiptファイルを書き出した場合は、
最後に「ステージのインスタンスを自動宣言」のチェックをはずしてください。
書き出したクラスファイルには、インスタンスが宣言されていますので、自動宣言にチェックが入った状態ですと
パブリッシュエラーとなります。

 

無事パブリッシュが成功すると、画面には何も表示されない状態となります。
これは各クラスのコンストラクタにvisible=falseを挿入しているためですので、
この一行を削除したうえで、構築してください。

--------------------------------------------------

自動化の流れは以上です。

今回version2.0として発表しましたが、実際に利用しながら改修していきますので、
不具合等はご了承ください。

今後のバージョンではドキュメントクラスとパッケージの作成、
各、注意事項の排除にむけた改修を行っていきたいと思います。