Flash制作に欠かせない3つのツール・道家編

Oct 13, 2009

※このエントリーのJSXおよびJSFLは個人的に使うレベルで作りこまれていません。何か製作中のファイルに不具合が起こっても責任を負いかねますのであらかじめご了承ください！

その1・PSDファイルのレイヤーをすべてPNGで書き出すJSX

PhotoshopのデザインデータをFlashに効率よくインポートするために、レイヤーやレイヤーグループをすべてPNGに書き出す自作JSXを使います。完全にFlash用なのでPNGの余白カット&1px確保までします。

PNGファイルはPSDと同名のディレクトリに保存されます。グループ名_レイヤー名.pngのようになるのでレイヤー名をきちんとするといい感じに書き出せます。デザイナーと命名規則を共有すれば素材の更新も効率よくできるかもしれません。

ただし、即席かつ強引に行っているので書き出し自体はとても遅いです。100以上レイヤーを書き出すのはマシン環境によっては厳しいかもしれませんので、自己責任でお試しください。

またレイヤー効果とかアピアランスの具合によっては正確に色やエフェクトが表現できないこと(ブレンドモードとか)があるので、ラスタライズやスマートオブジェクトにして見た目が崩れないようなつくりになっていることが前提です。(PSDインポーターよりマシという程度です)

ちなみにPhotoshopCS4には同等の機能が標準で用意されているそうです(未確認)。CS3はレイヤーをファイルに書き出す機能はあるけどPNGに対応してないみたいです。

なおclippingLayerとかsavePNGとか一部のコードはどなたかのWebサイトで配布されていたものをコピペ＆改変したのですが失念してしまいました…。いちおう自分でも内容を理解したうえで組み込んではいますが、何か不都合のある方がいらっしゃったらお手数ですがご連絡ください。

さきほどのPNGをインポートするときにライブラリの中がカオスになりますので、ライブラリ内でファイル名からグループ構造を復元するJSFLを適応しておきます。アンダーバーとピリオド(ただし拡張子除く)をセパレータにしてるので注意してください。

最後に画面や部品ごとにレイアウト画面をJPEGで書き出しておいたものをガイドに、実際にステージに配置していきます。そのときに配置座標が小数点になってにじまないようにする必要があります。

いちいち情報パネルのところを修正するのが大変なので、ざっくりマウスで配置してから座標を整数に丸める(四捨五入)JSFLを使うと効率がいいです。(同様のJSFL自体は誰もが一度は書いたネタだと思いますが)

これでPSDを分解してインポートして配置まで一連のフローがかなり効率化できました。この方法が向いている案件とそうじゃないものがあるので適宜導入してみてください。

これは前も書きましたが、「インスタンスの自動宣言」をOFFにしている場合にステージ上のインスタンスを抜き出すのが面倒なので、明示的にインスタンス名がついているものをすべてリストアップして宣言文を生成するJSFLを使います。

これをクラスファイルにコピペするだけOKです。変更があったらまた丸ごとコピペしなおすだけです。