通常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アプリを作成してみてはどうでしょう。

The post FlashCS3によるAIRアプリ作成(Windowのカスタマイズ) first appeared on FreeStyleVision.

今回は開発・実行環境の構築です。

1. 実行・開発環境の準備
   【実行環境】
   Adobe Airをダウンロードし、インストールして下さい。
   （http://get.adobe.com/air/）
   【開発環境】
   FlashCS3を起動し、「ヘルプ」－「アップデート」を選択します。
   Air用のアップデートプログラムがあるので、インストールして下さい。AirのアップデートプログラムをFlashCS3に適用すると、FlashCS3起動時のスタートアップスクリーンの「新規作成」箇所に「Flashファイル（Adobe AIR）」が追加されます。
   
   
2. FlashCS3にてAirアプリ作成(Hello World)FlashCS3を起動し、スタートアップスクリーンより
   「Flashファイル（Adobe AIR）」を選択します。以降は通常のFlash作成と余り変わりありません。
   今回は、単純に「Hello World」を表示するAirアプリを作成してみようと思います。 ステージ上にラベルを配置し、「Hello World」とします。
   文字サイズ、文字色は適当に変更して下さい。
   ※サンプルでは、ステージサイズも変更しています。
   
   動作確認の為、「制御」－「ムービープレビュー」を選択します。
   
   Airアプリがプレビュー表示されたかと思います。
   これだけです。このようにFlashの技術を用いてデスクトップアプリが作成できるようになります。
3. Airアプリの配布ファイル作成および実行先ほど作成した「Hello World」を配布できる形にしたいと思います。
   ※ファイルを保存していない場合、まず保存しておいて下さい。「コマンド」－「AIR-アプリケーションとインストーラの設定」を選択します。
   アプリケーションに関する設定画面が表示されるので、必要箇所の入力を行います。
   
   定完了後、「OK」を選択します。その後、「コマンド」－「AIR-AIRファイルを作成」を選択します。
   「電子署名」の画面が表示されると思います。
   AIRアプリの作成には、電子署名が必要になる為作成を行います。
   新規に電子署名を作成する為、「作成」ボタンを選択します。
   

   「自己署名の電子署名を作成」画面が表示される為、必要箇所の入力を行います。設定完了後、「OK」を選択します。電子署名作成完了後、先ほどの「電子署名」画面に戻ると思います。証明書欄に先ほどの作成した電子書名が選択されていることを確認します。パスワード欄に電子署名のパスワードを入力し、「OK」を選択します。下図の画面が表示されれば、配布用AIRファイルの作成が完了です。
   

   配布用AIRファイルをダブルクリックしてみて下さい。
   
   AIRのインストーラが起動するので、画面の指示に従ってインストールを進めてください。インストール完了後、先ほど作成した「Hello World」のアプリケーションが起動すると思います。

以上がFlashCS3を用いてのAIRアプリケーション作成の流れになります。
次回は、WindowをFlashならではに変更する方法を紹介しようと思います。

The post FlashCS3によるAIRアプリ作成(開発・実行環境の構築) first appeared on FreeStyleVision.