前回はAIRアプリケーションからWebサービスを利用する手順をご紹介しました。
実際に、ホットペッパーWebサービスが提供するAPIを利用して、飲食店の店舗情報を表示するAIRアプリケーションを作成しました。
基本的な動作はできましたが、このままでは、あまり面白みがありません。せっかくのAIRアプリケーションです。Flashだけでは難しい、AIRならではのアプリケーションを作ってみたいと思いませんか？
そこで今回は、ウィンドウの形をカスタマイズする方法をご紹介します。

また、前回はサムネイルを押して表示される店舗情報を同じウィンドウの中に表示していました。今回は、サムネイルが表示されるウィンドウとは別の新しいウィンドウを作成して、その中に店舗情報を表示するように拡張してみます。

作成フロー

AIRアプリケーションとインストーラの設定の変更
最小化ボタンと閉じるボタンの作成
背景の作成とオブジェクトの配置
ボタンの動作とウィンドウドラッグ時の動作の作成
店舗情報表示用ムービークリップの編集
サムネイルクリック時の動作の変更
プレビューによる動作の確認

【AIRアプリケーションとインストーラの設定の変更】

Flash CS3 Professionalを起動します。
スプラッシュウィンドウの[最近使用したファイルを開く]から[開く...]を選択します。

開くダイアログボックスから、第２回で作成した「Hotpepper001.fla」を選択します。

*スプラッシュウィンドウの[最近使用したファイルを開く]に「Hotpepper001.fla」が表示されていた場合は、それをクリックしてもかまいません。

[ファイル]メニューの[名前をつけて保存...]を選択して、別名で保存しなおします。ここでは、「Hotpepper03.fla」と名前を付けます。
[コマンド]メニューの[AIR - アプリケーションとインストーラの設定]から「AIR - アプリケーションとインストーラの設定」ダイアログボックスを開きます。
*ファイルの上書きを確認するダイアログボックスが表示される場合は[はい]ボタンで閉じます。
[アプリケーション設定]の[ウィンドウスタイル]から「カスタムクローム（透明）」を選択します。

この状態でプレビューを実行してみると、ウィンドウが透明になったことがわかると思います。ですが、このままではデスクトップにサムネイルの画像が張り付いてしまっているように見えてしまいます。また、タイトルバーも消えてしまいますので、ウィンドウを動かすことができませんし、なにより、アプリケーションを終了させることができません。

次のステップからは、最小化ボタンおよび閉じるボタンと、ウィンドウをドラッグできるようにする処理を作成していきます。

最小化ボタンと閉じるボタンの作成

[ファイル]メニューの[読み込み]から[ライブラリに読み込み]を選択します。
「ライブラリに読み込み」ダイアログボックスから、「button01.png」と「button02.png」を選択します。

[挿入]メニューの[新規シンボル...]から新規シンボルを作成します。
「新規シンボルの作成」ダイアログボックスに以下の値を入力します。
- 名前: mini_btn
- タイプ: ボタン

[OK]ボタンをクリックします。
「レイヤー1」レイヤーの「アップ」フレームに、手順1で読み込んだ「button01.png」を「ライブラリパネル」からドラッグして、X:0.0、Y:0.0の位置に配置します。

「オーバー」フレームをクリックして、[挿入]メニューの[タイムライン]から[キーフレーム]を選択します。
「ヒット」フレームをクリックして、[挿入]メニューの[タイムライン]から[フレーム]を選択します。
「オーバー」フレームに、手順1で読み込んだ「button02.png」をX:0.0、Y:0.0の位置に配置します。

同じ手順で、閉じるボタンも作成します。
あらかじめ、「ライブラリパネル」に「close01.png」と「close02.png」を読み込んでおきます。
新規シンボルを作成して、「新規シンボルの作成」ダイアログボックスに以下の値を入力します。
- 名前: close_btn
- タイプ: ボタン
「アップ」フレームに「button01.png」をx座標0.0、y座標0.0の位置に配置します。
「オーバー」フレームに「button02.png」をx座標0.0、y座標0.0の位置に配置します。

これで、最小化ボタンと閉じるボタンのシンボルが作成されました。
続いて、ウィンドウの背景を作成していきます。
今回は、背景にお皿と箸のイメージを作成してみます。

背景の作成とオブジェクトの配置

*あらかじめ、前回で作成した「Title」レイヤーは削除しておきます。

[挿入]メニューの[新規シンボル...]から新規シンボルを作成します。
「新規シンボルの作成」ダイアログボックスに以下の値を入力します。
- 名前: <Path>_1
- タイプ: ムービークリップ
[OK]ボタンをクリックします。
「レイヤー1」レイヤーにサムネイルの背景となる矩形を描画します
［矩形ツール]で、［線のカラー]を選択し、［塗りのカラー]を白（#FFFFFF）、幅を590.0、高さを460.0、矩形の角丸の半径を13とし、x座標8.0、y座標8.0の位置に配置します。

次にサムネイル表示領域用ムービークリップの背景の色を変更します。
「ライブラリパネル」の、「Thumb」ムービークリップをダブルクリックします。
「bg」レイヤーに配置されている黒色のシェイプを削除します。
新たに[矩形ツール]で、［線のカラー]を選択し、［塗りのカラー]を線状のグラデーション、幅を100.0、高さを100.0、矩形の角丸の半径を5とし、x座標0.0、y座標0.0の位置に配置します。

シンボルの編集モードを終了し、「シーン1」に戻ります。
「Script」レイヤーの１つ上に「dish & Chopsticks」という名前のレイヤーを作成します。
そして、作成したシンボル「<Path>_1」を「dish & Chopsticks」レイヤーのx座標7.0、y座標7.0の位置に配置します。
画面下部プロパティインスペクタの[フィルタ]タブをクリックし、[フィルタの追加]から「ドロップシャドウ」を選択します。
以下の値を入力します。
- ぼかし:水平を15、高さを15
- 強度:100%
- 画質:低
- カラー:黒（#FFFFFF）、アルファを75
- 角度:45
- 幅:10

お皿のハイライトと影の部分を表現するために、３つの描画オブジェクトを作成します。
[矩形ツール]を利用して、次の３つの台形を作成します。

上側の描画オブジェクト

サイズ配置する座標位置

長辺短辺高さ x y

578.0 467.0 58.0 21.0 18.0

左側の描画オブジェクト

サイズ配置する座標位置

長辺短辺幅 x y

448.0 333.0 58.0 18.0 21.0

上側の描画オブジェクト

サイズ配置する座標位置

長辺短辺高さ x y

578.0 467.0 58.0 21.0 414.0
次に、[矩形ツール]を利用して、箸のイメージを作成します
配置場所は、お皿の隣がよいでしょう。
次に最小化ボタンと閉じるボタンをステージに配置します。
一番上に「window_buttons」という名前のレイヤーを作成します。
「ライブラリパネル」から、「mini_btn」と「close_btn」を「window_buttons」レイヤーに配置します。

ライブラリパネル内でのシンボル名長辺短辺インスタンス名

x y

mini_btn min_btn 524.0 560.0

close_btn close_btn 3.0 3.0

サイズ	配置する座標位置
長辺	短辺	高さ	x	y
578.0	467.0	58.0	21.0	18.0

サイズ	配置する座標位置
長辺	短辺	幅	x	y
448.0	333.0	58.0	18.0	21.0

サイズ	配置する座標位置
長辺	短辺	高さ	x	y
578.0	467.0	58.0	21.0	414.0

ライブラリパネル内でのシンボル名長辺短辺	インスタンス名
x	y
mini_btn	min_btn	524.0	560.0
close_btn	close_btn	3.0	3.0

最後に、「container」レイヤーの「Cont」ムービークリップを、x座標86.0、y座標95.0の位置に移動します。

これで、背景とボタンが表示されるようになりました。

ですが、この状態ではウィンドウを移動することもできませんし、ボタンを押してもなにも反応しません。
次に、これらの動作を行うためのスクリプトを記述します。

【ボタンの動作とウィンドウドラッグ時の動作の作成】

ウィンドウをドラッグして移動できるようにするために、「シーン 1」の「Script」レイヤーに以下のActionScriptを記述します。
「Script」レイヤーのフレーム1:

        /*stage上でマウスが押下されてる間、windowMove関数を実行する。*/
stage.addEventListener(MouseEvent.MOUSE_DOWN, windowMove);
function windowMove(event:MouseEvent):void {
	stage.nativeWindow.startMove();
}
    

stage上でマウスが左クリックされている間、windowMove 関数が実行されます。windowMove 関数内では、stageを移動させる関数が実行されます。

最小化ボタンと閉じるボタンを動作させるために、同じく「シーン 1」の「Script」レイヤーに以下のActionScriptを記述します。
「Script」レイヤーのフレーム1:

        min_btn.addEventListener(MouseEvent.MOUSE_DOWN,windowMin);
function windowMin(event:MouseEvent):void{
	stage.nativeWindow.minimize();
}

close_btn.addEventListener(MouseEvent.MOUSE_DOWN, windowClose);
function windowClose(event:MouseEvent):void{
	stage.nativeWindow.close();
}

    

ボタンがクリックされると、それぞれ、ウィンドウの最小化とウィンドウを閉じる処理が実行されます。これで、ウィンドウの移動と、ボタンの動作が追加されました。

プレビューで動作を確認してみましょう。ウィンドウが移動しましたか？ボタンはちゃんと動作していますか？
動作がおかしい場合は、インスタンスの名前やActionScriptを確認してみましょう。
次に、サムネイルをクリックして表示される店舗情報を、新しいウィンドウを開いて表示するように改造してみます。まずは、前回作成しました店舗情報表示用ムービークリップを編集します。

店舗情報表示用ムービークリップの編集

店舗情報は新しいウィンドウに表示されるようになります。そのため、このウィンドウにも閉じるボタンが必要になります。
まず、閉じるボタンのシンボルを作成しましょう。
あらかじめ、「ライブラリパネル」に「close001.png」を読み込んでおきます。
[挿入]メニューの[新規シンボル...]から新規シンボルを作成します。
「新規シンボルの作成」ダイアログボックスに以下の値を入力します。
- 名前: shop_close
- タイプ: ムービークリップ
- クラス: shop_close
- 基本クラス:flash.display.MovieClip
- リンケージ: [ActionScriptに書き出し]チェックボックスにチェックする。
  [最初のフレームに書き出し]チェックボックスにチェックする。
[OK]ボタンをクリックします。
「レイヤー1」レイヤーに、「close001.png」をx座標0.0、y座標0.0の位置に配置します。

「ライブラリパネル」から、「ShopView」ムービークリップをダブルクリックします。
「bg」レイヤーの四角い黒色のシェイプを削除します。
「bg」レイヤーに、新たに背景を作成します。
サムネイルが表示されるウィンドウと同様に、お皿のイメージを作成してみましょう。
それぞれのレイヤーに配置されているコンポーネントやテキストフィールドの位置やサイズを調整します。

レイヤー	インスタンス名	サイズ		配置する座標位置
		幅	高さ	x	y
Address	address_name	225.0	34.0	35.0	360.0
budget_name	budget_name	225.0	18.0	35.0	335.0
food_name	food_name	225.0	18.0	35.0	310.0
genre_name	genre_name	225.0	18.0	35.0	280.0
shopname	shop_name	225.0	18.0	35.0	35.0
shop_image	shop_image	225.0	195.0	35.0	65.0
url_button	url_button	100.0	22.0	160.0	425.0

これで、店舗情報表示用ムービークリップが新しい外観になりました。
最後に、サムネイルをクリックすると、新しいウィンドウが開くように処理を変更します。

サムネイルクリック時の動作の変更

サムネイルをクリックして、店舗情報を新しいウィンドウに表示するようにActionScriptを変更します。まず、新しいウィンドウを作成するためのActionScriptを記述します。

「Script」レイヤーのフレーム1:

        function makeWindow(
	transparent:Boolean,systemChrome:String,itm:XML):NativeWindow {
	//ウィンドウ初期化オプション
	var options:NativeWindowInitOptions = new NativeWindowInitOptions();
	options.type=NativeWindowType.NORMAL;
	options.transparent =transparent;
	options.systemChrome=systemChrome;
	
	//ウィンドウの生成
	var window:NativeWindow=new NativeWindow(options);
	window.title            ="新規ウィンドウ";
	window.stage.align      =StageAlign.TOP_LEFT;
	window.stage.scaleMode  =StageScaleMode.NO_SCALE;            
	window.stage.stageWidth =320;
	window.stage.stageHeight=500;
	window.visible          =true;
	
	var shopview:ShopView = new ShopView( itm );
	window.stage.addChild( shopview );
	return window;
}
    

このmakeWindow関数を実行することで、新しいウィンドウが作成されます。

次に、手順1で記述したmakeWindow関数を呼び出す部分を追加します。前回記述したmake_shop_thumb関数を修正します。

「Script」レイヤーのフレーム1:

        //各サムネイルに対して必要な情報を当て込みます
function make_shop_thumb (itm:XML, thumbnail_x:int, thumbnail_y:int ):Thumb {
	//XMLにあるネームスペースの回避
	namespace ns = 'http://webservice.recruit.co.jp/HotPepper/';
	use namespace ns;
	
	//ThumbというムービークリップにXMLの要素を当て込みます
	var thumbnail:Thumb = new Thumb(itm);
	thumbnail.x = thumbnail_x;
	thumbnail.y = thumbnail_y;
	
	//サムネイルがクリックされた場合、その詳細画面が表示されるようにします。
	thumbnail.addEventListener(MouseEvent.CLICK, thumbnail_click);
	function thumbnail_click (event:Event):void {
		//make_shop_view( itm );
		var window0:NativeWindow;
		window0=makeWindow(true,NativeWindowSystemChrome.NONE,itm);
		window0.stage.addEventListener(MouseEvent.MOUSE_DOWN, windowMove2);
		function windowMove2(event:MouseEvent):void {
			window0.startMove();
		}
		var shop_close_btn:shop_close = new shop_close();
		window0.stage.addChild(shop_close_btn);
		shop_close_btn.addEventListener(MouseEvent.MOUSE_DOWN, windowClose2);
		function windowClose2(event:MouseEvent):void{
			window0.close();
		}
	}
	return thumbnail;
}
    

【プレビューして動作を確認】

[制御]メニューの[ムービープレビュー]を選択し、動作を確認します。
サムネイルをクリックすると、新しいウィンドウに店舗情報が表示されます。
それぞれのウィンドウの閉じるボタンをクリックすると、ウィンドウが閉じます。

以上で、今回のチュートリアルは終了です。
次回では、Flashならではの表示効果の追加方法や、より使いやすくアプリケーションを拡張する方法をご紹介します。

AIRチュートリアル　Flash 第３回　ブラウザでは出来ない表現を実現しよう！～ウィンドウをカスタマイズする～

著者ガジェット王子氏

著者鈴木拓生氏

Content

作成日

ページツール

タグ

必要条件

ユーザーレベル

必要な製品

サンプルファイル

はじめに

作成フロー

【AIRアプリケーションとインストーラの設定の変更】

最小化ボタンと閉じるボタンの作成

背景の作成とオブジェクトの配置

【ボタンの動作とウィンドウドラッグ時の動作の作成】

店舗情報表示用ムービークリップの編集

サムネイルクリック時の動作の変更

【プレビューして動作を確認】

製品

ソリューション

業種別ソリューション

サポート

ラーニング

ご購入方法

ダウンロード

会社情報

AIRチュートリアル Flash 第３回 ブラウザでは出来ない表現を実現しよう！ ～ウィンドウをカスタマイズする～

著者 ガジェット王子氏

著者 鈴木 拓生氏

Content

作成日

ページ ツール

タグ

必要条件

ユーザーレベル

必要な製品

サンプルファイル

はじめに

作成フロー

【AIRアプリケーションとインストーラの設定の変更】

最小化ボタンと閉じるボタンの作成

背景の作成とオブジェクトの配置

【ボタンの動作とウィンドウドラッグ時の動作の作成】

店舗情報表示用ムービークリップの編集

サムネイルクリック時の動作の変更

【プレビューして動作を確認】

製品

ソリューション

業種別ソリューション

サポート

ラーニング

ご購入方法

ダウンロード

会社情報

AIRチュートリアル　Flash 第３回　ブラウザでは出来ない表現を実現しよう！～ウィンドウをカスタマイズする～

著者ガジェット王子氏

著者鈴木拓生氏

ページツール