やっぱギークでナイト！

前回の練習2で作成したウィンドウは、
ウィンドウクロームをNONEに設定していたためドラッグして動かすことが出来ず、
画面に張り付いたままになっていました。
今回はこのウィンドウをドラッグ出来るようにしようと思います。


練習3．新しいウィンドウをドラッグしてみよう。
( ステージ上に配置されたボタンをクリックして新規のウィンドウを作成、画像を表示させ、
さらにドラッグ出来るようにする。）

以下を作りました。
OPENボタンで新規ウィンドウを作成、CLOSEボタンでウィンドウが閉じます。
ウィンドウにはでんすけMovieClipが表示され、描画部分をドラッグしてウィンドウを動かせます。

前回の練習で作ったソースに
1) ウィンドウを動かす
2) でんすけには指カーソル
を追加しました。



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

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

1. ウィンドウを動かす startMove()

まずは、ウィンドウを動かす条件を設定し、イベントリスナーに登録します。

densuke_mc.addEventListener(MouseEvent.MOUSE_DOWN, windowMove);

イベントを受けて実行する処理内容は下のように記述しました。
NativeWindowクラスのstartMove()というメソッドを使います。

function windowMove(e:MouseEvent):void {
    newWindow.startMove();
}

2. でんすけには指カーソル buttonMode

でんすけの描画範囲内では指カーソルにすることにしました。

densuke_mc.buttonMode = true;

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

ダウンロードも出来ます。
http://geek.oyspe.com/air/show_img_to_new_window_and_move/test4.fla

import flash.display.StageScaleMode;
import flash.display.StageAlign;

bt1.addEventListener(MouseEvent.CLICK,openNewWindow);
bt2.addEventListener(MouseEvent.CLICK, closeNewWindow);

var newWindow:NativeWindow;
var densuke_mc:Densuke;

function openNewWindow(e:MouseEvent):void {
    var wOption:NativeWindowInitOptions = new NativeWindowInitOptions();
    //normal, lightweight, utility ：タスクバー表示、表示なし、ツールパレット
    wOption.type = NativeWindowType.NORMAL;
    //none, standard, custom ：ウィンドウクロームなし、OS特有のクローム
    wOption.systemChrome=NativeWindowSystemChrome.NONE;
    //背景を透過させる
    wOption.transparent = true;
    newWindow = new NativeWindow(wOption);
    newWindow.width = 500;
    newWindow.height = 388;
    newWindow.title = "hogehoge";
    newWindow.visible=true;
    //リサイズしないようにする、XYの0,0が左上にある
    newWindow.stage.scaleMode = StageScaleMode.NO_SCALE;
    newWindow.stage.align = StageAlign.TOP_LEFT;

    densuke_mc = new Densuke();
    newWindow.stage.addChild(densuke_mc);
   
    // でんすけの描画範囲内では指カーソルにする。
    densuke_mc.buttonMode = true;
   
    //でんすけの描画範囲内でドラッグするとそのままnewWindowをドラッグで移動させる
    densuke_mc.addEventListener(MouseEvent.MOUSE_DOWN, windowMove);
   
}

function closeNewWindow(e:MouseEvent):void {
    newWindow.close();
}

function windowMove(e:MouseEvent):void {
    newWindow.startMove();
}

Adobe AIR Beta3がリリースされたようですが、
まだランタイムのみで日本語エクステンションはまだのようなので
引き続きBeta2でやっていこうと思います。

それでは、今回も引き続きairアプリの勉強です。
前回の練習1では、新規のウィンドウを作成したり閉じたりしましたが
ウィンドウの中には何も表示されていませんでした。
ですので今回は作成したウィンドウの中に描画をしようと思います。

練習２．新しいウィンドウに画像を描画してみよう。
( ステージ上に配置されたボタンをクリックして新規のウィンドウを作成させ、中に画像を表示させる。）

以下を作りました。
OPENボタンをクリックすると新規ウィンドウが作成され、
CLOSEボタンをクリックするとウィンドウが閉じます。
新規ウィンドウにはでんすけのMovieClip、Spriteで作成した円が描かれています。

前回の練習で作ったソース（新規のウィンドウを作成・閉じる）に
1) 画像の描画：円とでんすけ
2) ウィンドウ内の描画サイズをリサイズしないようにする
3) XY軸の調整
を追加しました。




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

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

1. 新規のウィンドウに画像の描画

まずは表示させるための画像を用意します。
(円とでんすけのMovieClip）

■Sprite型の円

var circle:Sprite = new Sprite();
circle.graphics.beginFill (0xFFCC00);
circle.graphics.drawCircle (140, 200, 50);

■MovieClipのでんすけ

var densuke_mc:Densuke = new Densuke();

■ウィンドウへ追加
それぞれ新規のウィンドウ ( NativeWindow型のnewWindow ) のstageに直接追加しました。

newWindow.stage.addChild (circle);
newWindow.stage.addChild(densuke_mc);

2. 新規のウィンドウをリサイズした際に描画内容をリサイズしないようにする

ウィンドウをリサイズした際の領域内の設定内容については、
Stage.scaleModeプロパティの値に対してStageScaleModeクラスのパブリック定数を使います。
StageScaleModeクラスのパブリック定数には以下のようなものがあります。

    exactFit：指定領域内に、元の縦横比を維持しないで表示されます。
    noBorder：指定領域いっぱいに全体がゆがまずに表示されます。
    noScale：アプリケーションのサイズが固定されます。
    shoAll：指定領域内に全体が、元の縦横比を維持したままゆがまずに表示されます。

今回は、noScaleを使いますので、下記のように記します。

newWindow.stage.scaleMode = StageScaleMode.NO_SCALE;

※今回の練習の場合は、元々ウィンドウクロームをNONEに設定しているので、
実行時にウィンドウをリサイズしようにも不可能ですが。

また、StageScaleModeクラスを使用する際にはクラスのインポートが必要なので
冒頭で忘れずにインポートしておきます。

import flash.display.StageScaleMode;

3. 新規のウィンドウのXY(0,0)の設定

Stage.alignプロパティの値に対して、StageAlignクラスのパブリック定数を使い設定します。

今回はウィンドウの左上にXY(0,0)をもってくるために、以下のように記述しました。

newWindow.stage.align = StageAlign.TOP_LEFT;

また、StageAlignクラスを使いますので、クラスをインポートしておかなければなりません。

import flash.display.StageAlign;

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

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

ダウンロードも可能です。
http://geek.oyspe.com/air/show_img_to_new_window/test3.fla

import flash.display.StageScaleMode;
import flash.display.StageAlign;

bt1.addEventListener(MouseEvent.CLICK,openNewWindow);
bt2.addEventListener(MouseEvent.CLICK, closeNewWindow);

var newWindow:NativeWindow;
var circle:Sprite;
var densuke_mc:Densuke;

function openNewWindow(e:MouseEvent):void {
    var wOption:NativeWindowInitOptions = new NativeWindowInitOptions();
    //normal, lightweight, utility ：タスクバー表示、表示なし、ツールパレット
    wOption.type = NativeWindowType.NORMAL;
    //none, standard, custom ：ウィンドウクロームなし、OS特有のクローム
    wOption.systemChrome=NativeWindowSystemChrome.NONE;
    //背景を透過させる
     wOption.transparent = true;
    newWindow = new NativeWindow(wOption);
    newWindow.width = 500;
    newWindow.height = 388;
    newWindow.title = "hogehoge";
    newWindow.visible=true;
    //リサイズしないようにする、XYの0,0が左上にある
    newWindow.stage.scaleMode = StageScaleMode.NO_SCALE;
    newWindow.stage.align = StageAlign.TOP_LEFT;

    circle = new Sprite();
    circle.graphics.beginFill (0xFFCC00);
    circle.graphics.drawCircle (140, 200, 50);
    newWindow.stage.addChild (circle);
   
    densuke_mc = new Densuke();
    newWindow.stage.addChild(densuke_mc);
   
}

function closeNewWindow(e:MouseEvent):void {
    newWindow.close();
}

まだまだPapervision3Dを自由には使いきれていない状態ではありますが、
早くも次の項目へ進めることになり
次はAirアプリケーションの開発について学んでみることになりました。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Adobe Air とは：
アプリケーションの開発及び実行環境のことで、
既存のウェブアプリケーションの開発スキル
(HTML, Javascript, Adobe Flash, Adobe Flex, Ajax)
を使用しながらクロスプラットフォームなアプリケーションを作ることができる。
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

フルFlashなデスクトップアプリケーションをFlashだけで作れてしまうので、
あなたもやってみなさい（by先生）とのこと。
Flex BuilderではなくCS3で作成します。

■ まず、Adobe AIR の実行環境をインストールします。
Adobe AIR Beta 2 Installer は以下からダウンロード出来ます。
Adobe Labs Downloads page http://labs.adobe.com/downloads/air.html

■ 次に、CS3用のエクステンション（日本語版）をインストールし開発環境を整えます。
Adobe AIR update Beta 2 for Flash CS3 Professional は以下からダウンロード出来ます。
Adobe Labs/ AIR:Flash CS3 Professional Update
http://labs.adobe.com/wiki/index.php/AIR:Flash_CS3_Professional_Update#Japanese


上記ふたつをインストールした後にFlashを起動すると、
Air用の新規作成メニューが追加されてることが確認出来ます。
新規作成メニューからAdobe Airを選択すれば、FlashでのAirアプリケーション開発が可能です。




それでは早速実作業へ。


練習1.  新しいウィンドウを作ってみよう。
( ステージ上に配置されたボタンをクリックして新規のウィンドウを作成させる。）

そして作ったのが以下です。
OPENボタンをクリックすると新規ウィンドウが作成され、
CLOSEボタンをクリックすると作成したウィンドウが閉じます。



練習をすすめる上でのメモとソースは下記に記しました。

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

1. アプリケーション及びインストーラーの設定方法

アプリケーションの書き出しに必要な設定項目がいくつかあるので、
開発を進める前に準備してしまいます。



[コマンド]メニューから[AIR - Application and Installer Settings]をクリック。
以下のようなウィンドウが開くので、ファイル名、バージョン情報、コピーライト等々
アプリケーションの設定ファイル（app.xml）を生成します。



デジタル署名（上図赤枠参照）をしないとコンパイル時にエラーが起きてしまうので注意です。
また、ファイルの保存場所を変更したら、Destination Folderの書き換えも忘れずに。

諸設定の終了後、[コマンド]メニューから[AIR - Create AIR File]でコンパイル出来ます。
注：ディレクトリ構造内に日本語があるとエラーが出てしまいますのでご注意ください。


2. 新規ウィンドウの作成はNativeWindow()

新規ウィンドウを作成する時には次のように記述します。

var wOption:NativeWindowInitOptions = new NativeWindowInitOptions();
var newWindow:NativeWindow = new NativeWindow(wOption);

これは、
NativeWindowInitOptions型のオブジェクトwOptionに対して新規ウィンドウの設定を持たせ
さらにそのオブジェクトwOptionを
NativeWindow型のオブジェクトnewWindowをnewする際の引数とするためです。

また、NativeWindowInitOptions型のオブジェクトですが、
下記のように設定内容を持たせることが出来ます。

[1] wOption.type = NativeWindowType.NORMAL;

normalの他には、lightweight、utilityといったのプロパティがあります。
normal：タスクバー表示
lightweight：表示なし
utility：ツールパレット

[2] wOption.systemChrome=NativeWindowSystemChrome.STANDARD;

standardの他には、none、customといったプロパティがあります。
none：ウィンドウクロームなし
standard：OS特有のクローム
custom：カスタム


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

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

// 新規ウィンドウを作成するボタン、作成したウィンドウを閉じるボタン
bt1.addEventListener(MouseEvent.CLICK,openNewWindow);
bt2.addEventListener(MouseEvent.CLICK, closeNewWindow);

var newWindow:NativeWindow;

// 新規ウィンドウの作成
// NativeWindowInitOptions型のオブジェクトに対して新規ウィンドウの設定を持たせて// NativeWindow型のオブジェクト(newWindow)をnewする際の引数とする。

function openNewWindow(e:MouseEvent):void {
    var wOption:NativeWindowInitOptions = new NativeWindowInitOptions();

    //タスクバー表示
    wOption.type = NativeWindowType.NORMAL;

    //OS特有のクローム
    wOption.systemChrome=NativeWindowSystemChrome.STANDARD;

    newWindow = new NativeWindow(wOption);
    newWindow.width = 200;
    newWindow.height = 100;
    newWindow.title = "hogehoge";
    newWindow.visible=true;

}

// 新規ウィンドウを閉じる
function closeNewWindow(e:MouseEvent):void {
    newWindow.close();
}