«
»

FlashCS3によるAIRアプリ作成(Windowのカスタマイズ)

2008 年 10 月 3 日 by fujii

前回から、かなり間があいてしまいましたm(__)m
今回は、AIRアプリケーションのWindowをカスタマイズしてみたいと思います。
前回作成した「HellowWorld」アプリを元にカスタマイズを進めたいと思います。

通常AIRアプリはOSに合わせてWindowが表示されます。

Windows XP

Windows Vista

Mac OS

これでも問題はないのですが、せっかくのAIRアプリなのでこのWindow部分もオリジナルにしたいと思います。

  1. 「タイトルバー」、「閉じるボタン」、「最大化ボタン」、「最小化ボタン」の画像を用意し、ライブラリーに登録します。
    （※「タイトルバー」は「ムービークリップ」として、残りのボタン類は「ボタン」とします。）
    用意した「タイトルバー」、「閉じるボタン」などをステージ上に配置します。

    ※インスタンス名は下記の様に設定しました。
    ・「タイトルバー」・・・「titlebar_mc」
    ・「閉じるボタン」・・・「close_btn」
    ・「最大化ボタン」・・・「maximize_btn」
    ・「最小化ボタン」・・・「minimize_btn」
  2. 次に、「タイトルバー」「各ボタン」の動作させるスクリプトを作成します。
    スクリプトは下記の内容を実装します。
    ・「タイトルバー」ドラッグ時、「Window」の移動
    ・「閉じるボタン」押下時、AIRアプリの終了
    ・「最大化ボタン」押下時、「Window」の最大化
    ・「最小化ボタン」押下時、「Window」の最小化
  3. 「ファイル」－「新規」を選択し、「ActionScript（AS）ファイル」を選択します。
    ASファイルに以下のスクリプトを記述し、flaファイルと同階層に「Main.as」のファイル名で保存します。
    (Main.as)
    [ActionScript]
    package {
     import flash.display.*;
     import flash.events.*;
     public class Main extends Sprite
     {
      public function Main() {
        titlebar_mc.addEventListener(MouseEvent.MOUSE_DOWN, moveWindow);
        close_btn.addEventListener(MouseEvent.CLICK, closeWindow);
        maximize_btn.addEventListener(MouseEvent.CLICK, maximizeWindow);
        minimize_btn.addEventListener(MouseEvent.CLICK, minimizeWindow);
      }
     /**
      * ウィンドウの移動
      */
      private function moveWindow(evt:Event) {
        stage.nativeWindow.startMove();
      }
     /**
      * ウィンドウを閉じる
      */
      private function closeWindow(evt:Event) {
        stage.nativeWindow.close();
      }
     /**
      * ウィンドウの最大化
      */
      private function maximizeWindow(evt:Event) {
        stage.nativeWindow.maximize();
      }
     /**
      * ウィンドウの最小化
      */
      private function minimizeWindow(evt:Event) {
        stage.nativeWindow.minimize();
      }
     }
    }
    [/ActionScript]       

  4. ドキュメントクラスに、先ほど作成したスクリプトを指定します。
    ドキュメントのプロパティを表示し、「ドキュメントクラス」に「Main」と記述します。

    AIRアプリが起動した際、ここで指定したクラスのインスタンスが生成されます。
  5. ただこのままでは、各OSのWindowが表示されてしまいます。
    「コマンド」－「AIR-アプリケーションとインストーラの設定」を選択し、「ウィンドウスタイル」を「カスタムクローム（不透明）」に設定します。
  6. 動作確認の為、「制御」－「ムービープレビュー」を選択します。

    このように、スクリプトも数行書くだけでオリジナルのWindowを作成することができます。

ちなみに、「ウィンドウスタイル」を「カスタムクローム（透明）」に設定し、確認してみてください。

「カスタムクローム（不透明）」を選択していた場合は、ステージ上の背景色が表示されていたと思いますが、「カスタムクローム（透明）」を選択した場合、ステージ上の背景色さえ表示されなくなります。

以上で、オリジナルのWindowの作成方法の紹介を終わります。
みなさんもこれを利用してオリジナルなAIRアプリを作成してみてはどうでしょう。

タグ: ,

TrackBack