2008年1月12日

memo 010 でんすけとお散歩 :今更ながら更新


永遠のアイドル(犬)でんすけでの勉強シリーズもひとまずここで一区切りという事で
でんすけとお散歩できるデスクトップアプリケーションを作りました。


練習4. でんすけとお散歩できるようにしてみよう。
(でんすけをデスクトップ上で動かす時にでんすけの挙動を色々設定してみる練習)

で、作ったものがこちら(下図)です。
densukesampo.jpg

前回の練習3では新規ウィンドウをドラッグして動かしましたが、
1) 最初に起動するウィンドウの表示位置の設定
2) ドラッグしている時、ドラッグを止めた時のでんすけの動き
を追加しました。

でんすけとお散歩のアプリケーション ( Installer Package ) は、以下からDL出来ます。
http://geek.oyspe.com/air/densukesampo/DensukeSampo.air
アニメーションのクオリティは素人なのであれですが、よければお散歩してみてください。
(※) でんすけの胴体部分にドラッグの判定をつけました。
(※) でんすけの足元にある灰色のボタンをクリックすると終了します。


今回のメモとソースは下記のとおりです。

* * * * * * * * * * * * * * * * * * * * * * * * * * *

1. Capabilities クラス

アプリケーション起動時に表示されるウィンドウをユーザーが実際に使っている画面の中央に表示させるためには、ユーザー環境に関する情報を取ってこなければなりません。
そういった際に使用するのがCapabilitiesクラスです。

ヘルプより引用
Capabilitiesクラスを使用すると、開発者はSWFファイルの実行環境に関する情報を取得できます。Capabilities クラスのさまざまなプロパティにより、ユーザーのシステムにおける画面解像度、
アクセシビリティソフトウェアに対するサポートの有無、ユーザーのオペレーティングシステムの言語、
および、現在インストールされている Flash Player のバージョンを知ることができます。

Capabilitiesクラスのプロパティ例:
 Capabilities.screenResolutionX  :画面の水平解像度の整数
 Capabilities.screenResolutionY  :画面の垂直解像度の整数

今回は、起動時のウィンドウを画面中央に表示させるたいので
解像度を調べて中央にするようx座標、y座標を計算させて、代入しています。
this.stage.nativeWindow.x=Capabilities.screenResolutionX /2-100;
this.stage.nativeWindow.y=Capabilities.screenResolutionY /2 -50;


* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

以下、今回のソースです。

ダウンロードも可能です。
http://geek.oyspe.com/air/densukesampo/DensukeSampo.fla
http://geek.oyspe.com/air/densukesampo/DensukeSampo.as
http://geek.oyspe.com/air/densukesampo/Doggie.as

DensukeSampo.fla:でんすけのMovieClipが含まれています。
DensukeSampo.as:新規ウィンドウの作成、でんすけMovieClipの表示を記述しています。
Doggie.as:でんすけの動きの制御に関して記述しています。

DensukeSampo.asの中身

package {
   
    // インポート宣言
    // ステージの設定関係

    import flash.display.Sprite;
    import flash.display.Stage;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.MouseEvent;
    import flash.events.*;

    import flash.display.NativeWindow;
    import flash.display.NativeWindowType;
    import flash.display.NativeWindowInitOptions;
    import flash.display.NativeWindowSystemChrome;
    import flash.system.Capabilities;

    public class DensukeSampo extends Sprite {
       
        // Doggieクラスにはでんすけの動きの制御に関して記述しています。
        // 実際のでんすけのMovieClipはDensukeSampo.flaのライブラリ内にあります。
        private var wanwan:Doggie;
        private var newWin:NativeWindow;

        // 起動時に表示されるウィンドウの設定、GOボタンをリスナー登録する
        public function DensukeSampo() {
            this.stage.nativeWindow.x=Capabilities.screenResolutionX /2-100;
            this.stage.nativeWindow.y=Capabilities.screenResolutionY /2 -50;
            bt.addEventListener(MouseEvent.CLICK,createWindow);
        }
       
        // GOボタンをクリックすると新規ウィンドウ(でんすけのみの描画)を開く
        private function createWindow(e:MouseEvent):void {
            var options:NativeWindowInitOptions=new NativeWindowInitOptions;
            options.systemChrome=NativeWindowSystemChrome.NONE;
            options.type=NativeWindowType.LIGHTWEIGHT;
            options.transparent=true;
            newWin=new NativeWindow(options);
            newWin.width=240;
            newWin.height=210;
            newWin.title="でんすけ";
            newWin.visible=true;
            newWin.stage.scaleMode=StageScaleMode.NO_SCALE;
            newWin.stage.align = StageAlign.TOP_LEFT;
            wanwan=new Doggie();
            newWin.stage.addChild(wanwan);
            newWin.stage.nativeWindow.x=Capabilities.screenResolutionX /2-100;
            newWin.stage.nativeWindow.y=Capabilities.screenResolutionY /2 -50;
            newWin.stage.nativeWindow.alwaysInFront=true;
            // でんすけの新規ウィンドウを開くと同時に、起動時のウィンドウは閉じることにしました。
            stage.nativeWindow.close();
        }
    }
}

Doggie.asの中身

package {
   
    // インポート宣言
    import flash.display.MovieClip;
    import flash.events.*;
    import flash.events.MouseEvent;
   
    // でんすけの動き
    public class Doggie extends MovieClip {
        public function Doggie():void {
            this.stop();
            menu.buttonMode=true;
            bark_btn.buttonMode=true;
            // でんすけの足元のボタンをクリックでウィンドウを閉じる
            menu.addEventListener(MouseEvent.CLICK,doExit);
            // でんすけをドラッグする
            bg.addEventListener(MouseEvent.MOUSE_DOWN,moveWindow);
            // でんすけのドラッグを止める
            bg.addEventListener(MouseEvent.MOUSE_UP,stopWindow);
            // 顔をクリックするともぐもぐする
            bark_btn.addEventListener(MouseEvent.CLICK,doBark);
        }
       
        // でんすけの具体的な動き:でんすけMovieClipのフレーム指定で動きを設定
        private function moveWindow(e:MouseEvent):void {
            this.stage.nativeWindow.startMove();
            this.doWaking();
        }
        private function stopWindow(e:MouseEvent):void {
            this.doShippo();
        }
        private function doBark(e:MouseEvent):void {
            this.gotoAndStop(3);
        }
        private function doShippo() {
            this.gotoAndStop(1);
        }
        private function doWaking() {
            this.gotoAndStop(2);
        }
        private function doExit(e:Event) {
            this.stage.nativeWindow.close();
        }
    }
}




2007年12月30日

memo 009 Adobe AIR Beta3にアップデート


           alpaca01.gif

サボっていましたが、ついにAdobe AIR Beta3にアップデートしました。
忘れないようにメモ・・・

まずはAIRランタイムの準備:
Adobe AIR Beta2をアンインストールし、Beta3をインストールします。
Adobe AIR Beta 3 Installer
http://labs.adobe.com/downloads/air.html

次に、開発環境ですが
Adobe AIR update beta 3 for Flash CS3 Professionalをインストールする前に
Adobe Flash Player Update for Flash CS3 Professional (9.0.2)で
CS3をアップデートする必要があるらしいので、それもインストールします。
Adobe Flash Player Update for Flash CS3 Professional (9.0.2)
http://www.adobe.com/support/flash/downloads.html

さらに、Beta3アップデータでは削除できないBeta1およびBeta2のファイル
があるらしいのでそちらも削除しておきます。削除項目は下記の通り(Windows用)

* \Program Files\Adobe\Adobe Flash CS3\
AIKフォルダを削除する

* \Program Files\Adobe\Adobe Flash CS3\en\First Run\Commands\
下記ファイルがあれば削除する:
    - AIR - Application and Package Settings.jsfl
    - AIR - Package AIR File.jsfl

* \Document and Settings\<username>\Local Settings\Application Data\Adobe\Flash CS3\<lang>\Configuration\Commands\
下記ファイルがあれば削除する:
    - AIR - Application and Package Settings.jsfl
    - AIR - Package AIR File.jsfl
※ 隠しファイル/隠しフォルダが表示されていない場合はフォルダオプションで設定する。

では、Adobe AIR update beta 3 for Flash CS3 Professionalのインストール
Adobe AIR update beta 3 for Flash CS3 Professional[日本語版]
http://labs.adobe.com/wiki/index.php/AIR:Flash_CS3_Professional_Update#Japanese
※上記ダウンロードページにはBeta 1 CleanUp Scriptも有り

Adobe LabsにもHowto記述はあるのですが、下記のページでは日本語で分かりやすく説明されていたためアップデートの際にはそちらを参考させて頂きました。
参考にしたページ:
Adobe AIRで作るデスクトップアプリケーショ-第14回 Adobe AIRベータ3公開
http://gihyo.jp/dev/serial/01/adobe-apollo/0014