AIRチュートリアル・Flash 第２回　インターネット上の情報を使ってみよう！～ホットペッパーAPIを利用する～

サムネイル表示用ムービークリップの作成

1. [挿入]メニューの[新規シンボル…]から新規シンボルを作成します。
2. 「新規シンボルの作成」ダイアログボックスに以下の値を入力します。
   • 名前: Thumb
   • タイプ: ムービークリップ
   • クラス: Thumb
   • 基本クラス: flash.display.MovieClip
   • リンケージ: [ActionScriptに書き出し]チェックボックスにチェックする。
     　　　　　　 [最初のフレームに書き出し]チェックボックスにチェックする。
     
3. [OK]ボタンをクリックします。

   *「ActionScriptクラスに関する」ダイアログボックスが表示される場合には、[OK]ボタンをクリックし閉じます。

4. 画面上部のタイムラインで上から順に「shop_image」、「bg」という名前でレイヤーを作ります。
   • 
5. 「bg」レイヤーにサムネイルの背景となる矩形を描画します。 　［矩形ツール］で、［線のカラー］をなし、［塗りのカラー］を黒（#222222）、幅を100.0、高さを100.0とし、x座標0.0、y座標0.0の位置に配置します。
   • 
6. 「コンポーネント」パネルが表示されていない場合、[ウィンドウ]メニューから[コンポーネント]を選択し、「コンポーネント」パネルを表示します。
   • 
7. 「shop_image」レイヤーに、「コンポーネント」パネルから「User Interface」下の「UILoader」コンポーネントを配置し、インスタンス名を｢shop_thumb｣とします。配置した「UILoader」コンポーネントは、「bg」レイヤーに配置した矩形よりも小さめになるように、幅を90.0、高さを90.0とし、x座標5.0、y座標5.0の位置に配置します。
   • 

   以上が終了したら、シンボルの編集モードを終了し、「シーン1」に戻ります。

8. サムネイル表示用ムービークリップに、画像の表示および、ボタンとしての機能を持たせるために、新規ActionScript(AS)ファイルを作成し、「Hotpepper001.fla」を保存した階層と同じフォルダにファイル名を「Thumb.as」として保存します。
9. Thumb.asに以下のActionScriptを記述します。

Thumb.as:

package {
	//必要なパッケージのインストール
	import flash.display.*
	import flash.events.*;
	import fl.containers.UILoader;
	
	public class Thumb extends MovieClip {
		//ネームスペースの回避
		namespace ns = 'http://webservice.recruit.co.jp/HotPepper/';
		use namespace ns;

		public function Thumb( itm :XML) {
			//shop_thumbというインスタンス名のUILoaderにXMLから取得した画像を配置
			shop_thumb.scaleContent = true;
			shop_thumb.source = itm.photo.pc.m;
			shop_thumb.load();
			shop_thumb.buttonMode = true;
		}
	}
	
}

Thumb()コンストラクタの引数itmにWebサービスから取得したXMLオブジェクトが渡されます。以降の行で「UILoader」コンポーネント(インスタンス名: shop_thumb)にXMLオブジェクト内の画像のURLを設定し、その読み込みを実行しています。

コンストラクタの最後の行では「UILoader」コンポーネントがボタンとして機能するように設定しています。
XMLオブジェクトからの値の取得にはActionScript 3.0から新しく加わった機能のE4X（ECMAScript for XML）をしています。
E4Xでは、読み込むXMLにネームスペースが指定されている場合には、Flashにこのネームスペースを指定しないとアクセスできないので、ネームスペースを指定しています。

ページ 3 / 7

前のページ

次のページ