やっぱギークでナイト！

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();
}