Flash記事

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

作成フロー

1. Webサービスを利用するためのAPIキーの取得
2. Flashドキュメントの準備
3. サムネイル表示領域用ムービークリップの作成と配置
4. サムネイル表示用ムービークリップの作成
5. Webサービスからのデータの取得とサムネイルの表示
6. 店舗情報表示用ムービークリップの作成
7. サムネイルクリック時の動作の作成
8. プレビューによる動作の確認

Webサービスを利用するためのAPIキーの取得

以下のサイトより、画面の手順に従ってAPIキーを取得します。

• 【リクルートWEBサービス・ホットペッパーWebサービス】

※利用規約等をお読みいただき、画面の手順に従ってご登録ください。

Flashドキュメントの準備

1. Flash CS3 Professionalを起動します。
2. スプラッシュウィンドウの[新規作成]から[Flash ファイル(Adobe AIR)]を選択します。
   • 
   • *「Adobe AIRのオーサリングについて」ダイアログボックスが表示された場合には、[OK]ボタンで閉じます。
   • 
3. 新規にflaファイルが作成されますので、ここでは「「Hotpepper001.fla」」という名前で保存します。
4. 画面下部プロパティインスペクタの[プロパティ]タブで、以下の値を入力します。
   • サイズ: 幅を700px、高さを500px
   • 背景色: 黒(#000000)
   • フレームレート: 30fps
   • 
5. 画面上部のタイムラインで上から順に「Title」、「container」、「Script」という名前のレイヤーを作ります。
   • 
6. 「Title」レイヤーに静止テキストで「HotPepper API_AIR_vol1」という文字列をステージ上部に配置します。
   • 

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

1. [挿入]メニューの[新規シンボル…]から新規シンボルを作成します。
   • 
2. 「新規シンボルの作成」ダイアログボックスに以下の値を入力します。
   • 名前: cont
   • タイプ: ムービークリップ
   • クラス: cont
   • 基本クラス: flash.display.MovieClip
     　 （※次の「リンケージ：」で［ActionScriptに書き出し］にチェックを入れると自動的に入力されます）
   • リンケージ: [ActionScriptに書き出し]チェックボックスにチェックする。
     　　　　　　 [最初のフレームに書き出し]チェックボックスにチェックする。
     
3. [OK]ボタンをクリックします。
   *[ActionScriptクラスに関する]ダイアログが表示される場合には[OK]ボタンで閉じます。
   • 
4. 「レイヤー１」レイヤーにムービークリップの位置を示すための小さな正方形をシンボルの中央位置から見て左上周辺に描画します。正方形は、［矩形ツール］で「線のカラー」をなし、「塗りのカラー」を黒（#000000）、幅1.0、高さ1.0とします

   ※小さな正方形は、背景色と同じであるため配置されている状態がわかりにくいので、「レイヤー１」のアウトライン表示をオンにすると配置状態を確認しやすくなります。

   • 
5. シンボルの編集モードを終了し、「シーン１」に戻ります。次に、作成したシンボル「cont」を「Hotpepper001.fla」「container」レイヤーのx座標0.0、y座標60.0の位置に配置し、インスタンス名を「Cont」と設定します。
   • 

ページ 2 / 7

前のページ

次のページ