2008年11月17日

先日、Make: Tokyo Meeting 02 に行って(出展)きました。

101_1116

先週末に行われたMake: Tokyo Meeting 02Alpaca Garageという謎の団体で出展してきました。
出展したのは『折り紙で作る立体ゾートロープ』と『電子ランチョンマット』

『折り紙で作る立体ゾートロープ』


回転する12体の蛙(折り紙)に対して一定間隔で光をたくと、
立体版パラパラ漫画のような遊びが出来るという装置です。
(※ ちゃんとした説明は上記Alpaca Garageのサイトに記載有りです。)
私は中でぴょこぴょこしている蛙(折り紙)の作成・配置 というお手伝いさせてもらいました。

『電子ランチョンマット』
101_1149

昔小さい頃にあった「良く出来ましたシール」のランチョンマット版。
食べ終わったら、「ありがとう」や「ごちそうさま」と描かれた蝶々のマスコットを
ランチョンマットのスナップにパチっとすると、お花の刺繍が光ります。

子供が「ごちそう様が出来た!」とかちゃんとご飯を食べ終われたことや
美味しかったよというお母さんへの感謝の気持ちを伝えるためのランチョンマットのつもりです。
食べることのモチベーションに少しでもつながれば、という願いをこめて。
今でこそご飯は趣味のひとつですが、私自身小さい頃は食に対して興味皆無だったので・・・

仕組みとしては、導電糸×表面実装LED×スナップ(スイッチとしての役目)です。
マイコンで光り方も変化出来たら良かったのですが・・・時間切れでした。
LEDのところは、先生にメタルビーズとLEDを半田付けしてもらいました。

あと、これはおまけで作ったミニクッション【photo taken by shingog】

3012375921_05e6743463.jpg

積層コンデンサー柄のアルパカなのですが、
予想外に色んな人に興味もってもらえて嬉しかったです。

春に行われたMTM01の時は、売り子の手伝い名目で参加するも、
殆ど売り子としての機能を果たさず(手伝いはあまり必要じゃなかった&すぐ売り切れたため)
100%お客さんとして楽しんだのですが
今回は出展側ということで,当日の見せ方等、反省点も一杯、諸々勉強になりました。

他の展示もクオリティの高いものが多く、
連日の徹夜も忘れられるくらい(車内で爆睡したけど)楽しめました。




101_1114101_1121 101_1128101_1124 101_1129101_1133 101_1136101_1144 101_1146101_1132 101_1153101_1154 101_1156101_1157 101_1162 101_1168101_1169 101_1141101_1131

電子ランチョンマットには頭脳がなかったので
今後の向上のため、メカロボさんの所でLilyPad Arduino を購入。
フンパツして諭吉先生に別れを告げました。

101_1143 101_1293

LilyPadシリーズはセンサーも色々出ていて、形自体も可愛らしいし
お裁縫で配線できるという点がなんとも魅力的。
Arduinoの方も先生について真面目に身に付けたいものです。

2008年6月24日

memo 011 chumby my first widget "Hello World"

chumby01.jpg


FlashLite3.0に対応していたり、(実際にはFlash8以前であれば動作可)
加速度センサーを内蔵していたり、と勉強にはもってこいということで
先日、chumbyを購入しました。手乗りサイズのかわいい子です。


練習1. chumbyにHelloWorldしましょう

Chumby Japan の『オリジナルウィジェット作成 その1』を参考にして
私もHelloWorldしました。

ステージサイズは320x240で上のアニメーションを作成し、
タイムラインに以下を記述し、FL3.0で書き出します。
fscommand ("quit");

次に、profile.xmlというファイルを作成します。
このprofile.xmlと本アニメーションswfを
USB内に置いてchumbyに挿すと、swfファイルがチャンネルに読み込まれます。


下写真がその図。
profile.xml内の記述を調整して、サムネイル画像を登録することも出来ます。
(下写真ではやっておりませんが。)

chumbywidget01.jpg

ちゃんと動いたー!
まだまだ小さな初めの一歩。もっと遊びたい。


chumbywidget02.jpg

2008年5月19日

(先週、) ごはんとFlash にお邪魔してきました。

「鎌倉でFlash好きな人とご飯を食べにあつまりませんか?」 gohantoflash2.gif
 という素敵な会が催されると道家さんから聞きつけ、
 最近全く勉強できていないのですが、(時間って作るものなんですよね、反省) 
 花嫁修業としてFlash・ASの道を選んでしまった身としては行かないわけには行かない
 ということで、Flashに関して自分はまだまだペーペーなので恐縮しつつも
 先週、ごはんとFlash@ボウルズカフェへ行って参りました。

gohantoflash.jpg


美味しいご飯に舌鼓しながら、隣に立ってらっしゃる方とお話したり
(もっと臆せずガンガン話しにいける人になりたい)
普段参考にさせて頂いてるサイトの方々を実際に目の前にし、ただただ尊敬の眼差し。

既に多くの方がレポートをアップされているので詳細は省略するとして
本企画をプロデュースされたKAYAC の道家さん瀬尾さんtrick7 の寺井さん
FICC の福岡さんをはじめ、KAYAC、ボウルズの皆様、
素敵なひと時を楽しませて頂き、ありがとうございました。
デザート協賛:メディアテクノロジーラボ、パンプディング絶品でした!

2008年1月23日

露出狂友の会へお邪魔してくるの巻き


ひょんなことからお声掛けして頂き、露出狂友の会なる催しへ伺って参りました。

詳しくは、ゆーすけべー日記:露出狂友の会にゲスト参加してきた を参照ください。

cake003.jpg

私が激人見知りするという事前情報をゲッツした道家さんが気を利かせてくれて
 早めに集まってお茶しましょうと提案して頂いたのでお言葉に甘えてティータイム!
優しいお心遣い本当に感謝です!

連れて行っていただいたのは、アップルパイの美味しいカフェ。
 注文が入ってから焼くので、出来立てのほっかほかが出てきます。
その上でバニラアイスが程よく溶けております。美味ーーー(目がはーと)

アートメーターにお邪魔させて頂いたり、こんな職場いいなあとかしながら、
明大前へのじゅうじゅうぼうぼうという焼肉屋さんへ。

皆さんの凄プレゼンを聞きながら食べるホルモンは格別でした。

yusukebe01.jpg

(上)「エロサイトにおけるコンテンツマッチ型広告APIの自作」をプレゼンする和田さん

自分、本当もっともっと勉強しないと、と改めて実感。
やりたい事と出来る事のギャップを少しでも埋められるようになりたいものです。

そして皆さん、この度は素敵な会へお誘い頂き有難う御座いました!
またいつかお会いできたら嬉しいです。

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




2008年1月 9日

cake 002 BEVIAMOCI SU ダークチェリーのタルト


cake002.jpg

今回のご褒美ケーキは、
世田谷は 環七沿いにあるイタリアンレストランの BEVIAMOCI SU(ベビアーモチ スー)
で頂いたダークチェリーのタルトです。

「ダークチェリーのタルト」と聞いて想像していたものとは
ちょっと風体が異なるものが出てきましたが(チョコレートブラウニーっぽい外見)
苦甘いチョコレートとダークチェリーの酸味が程よく、うまうまデザートに満悦!

BEVIAMOCI SU(ベビアーモチ スー)
東京都世田谷区代田3-25-3
03-3414-9515
http://r.gnavi.co.jp/a912502/


大きな地図で見る

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



2007年12月17日

memo 008 Adobe AIR Beta2、新規ウィンドウを動かす


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


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

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

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

adobeair09.jpg

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

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

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



2007年12月16日

memo 007 Adobe AIR Beta2、新規ウィンドウの中に画像を表示させるには


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

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

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

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

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

adobeair07.jpg


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

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

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





2007年12月13日

memo 006 Adobe AIR Beta2でデスクトップアプリケーションを作ってみる


まだまだ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アプリケーション開発が可能です。


adobeair01.jpg

それでは早速実作業へ。


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

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

adobeair05.jpg

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

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

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

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

adobeair03.jpg

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

adobeair02.jpg

デジタル署名(上図赤枠参照)をしないとコンパイル時にエラーが起きてしまうので注意です。
また、ファイルの保存場所を変更したら、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();
}