ゼットコードログ

コード的な何かを書いていきます。

OpenFL アプリの画面をPhotoshopとFlash Professionalで作る

Flashで作ったswfファイルを画面として取り込んで、表示することができます。

これだけだとAdobe AIRと変わらないですが、OpenFLはswfをインプットにしてコンパイルの段階で 各プラットフォーム用のプログラムを生成しているみたいです。これにより、AIRと比較した場合により高速に動作するし、ランタイムも必要ないのでプログラムのファイルサイズが小さくてすみます。

各パーツはSpriteやMovieClipとして取得してイベントや設定の変更を適宜実行することができます。

ということを試すためにサンプルでクイズアプリを作ってみました。デザインはご愛嬌。機能もペラペラです。

f:id:z-ohnami:20140523011504p:plain

工程はこんな感じで進めることができます。

  1. PhotoShopで画面をデザインし、PSDファイルを作る
  2. PSDファイルをFlash Professionalで取り込んで、各パーツをシンボル化し、リンケージとインスタンス名を設定
  3. Flash ProfessionalでパブリッシュしたSWFファイルをOpenFLのプロジェクトに取り込む
  4. Haxeでコードを書いて開発していく

とてもよいのはPhotoshopで画面デザインができるということ。PhotoShopの成果をほぼそのままダイレクトにアプリまでもっていけます。 1をデザイナーさんにやってもらって、それ以降の工程をプログラマとかエンジニアとかがやっていけばOK。

このデザイナーさんとの協業の部分がヘタすると従来のFlashベースの開発よりもとてもシームレスにできそうな予感。

あとは製品リリースレベルの複雑なデザインがきた場合に 果たしてこの工程がそのまま使えて、OpenFLが耐えられるかどうか。これは実際にやってみないとわからないですね。

プロジェクト的には swfとlayoutというライブラリを使います。 project.xmlに次のように設定しましょう。

<haxelib name="openfl" />
<haxelib name="actuate" />
<haxelib name="swf" />
<haxelib name="layout" />

あとは自分で作ったswfファイルもライブラリとして指定しておきます。

<library path="Assets/ui.swf" />

アプリのソース内ではswfのファイル名とリンケージを指定してswfファイルにアクセスします。 今回はLayoutというリンケージをflaファイル内で指定しています。その配下のインスタンスはgetChildName関数で名前を指定すれば取得できて、そこから先はプログラミングの世界です。

Assets.loadLibrary ("ui", function (_) {

    var layout = Assets.getMovieClip ("ui:Layout");
    addChild (layout);

    layoutManager = new LayoutManager (640, 960);

    layoutManager.addItem (new LayoutItem (layout.getChildByName ("Button1"), LayoutType.STRETCH, LayoutType.STRETCH, false, false));
    layoutManager.addItem (new LayoutItem (layout.getChildByName ("Button2"), LayoutType.STRETCH, LayoutType.STRETCH, false, false));
    layoutManager.addItem (new LayoutItem (layout.getChildByName ("Button3"), LayoutType.STRETCH, LayoutType.STRETCH, false, false));

    layoutManager.resize (stage.stageWidth, stage.stageHeight);
    stage.addEventListener (Event.RESIZE, stage_onResize);

    _button1 = cast(layout.getChildByName ("Button1"),Sprite);
    _button1.addEventListener(MouseEvent.CLICK,function(event:MouseEvent):Void { checkAnswer(0); });

ソースコード全体はこちら。psdとflaファイルも付いてるよ。

z-ohnami/OpenFLQuizSample · GitHub

swfを更新した場合はlimeでビルドする際に-cleanオプションを使ったほうがいいみたい。 じゃないと、更新が反映されないことがあるようです。これでしばらくハマっていた・・・