Flashup 11
Upcoming SlideShare
Loading in...5
×
 

Flashup 11

on

  • 2,248 views

Flashup 第11回 発表資料 「Facebook APIを使ったミニゲームの作成」

Flashup 第11回 発表資料 「Facebook APIを使ったミニゲームの作成」

Statistics

Views

Total Views
2,248
Views on SlideShare
1,745
Embed Views
503

Actions

Likes
2
Downloads
22
Comments
0

2 Embeds 503

http://orange-suzuki.com 502
http://geechscamp.lovepop.jp 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Flashup 11 Flashup 11 Presentation Transcript

  • 「Facebook APIを使ったミニゲームの作成」2011.10.16(日)場所:スターバックスセミナールーム特別協賛:ラ゗フサウンド株式会社様 FLASHUP#11 orange-suzuki.com 鈴木克史 1
  • 本日のメニューorange-suzuki.com 2
  • 1. Facebook APIについて2. ゲームの解説(神経衰弱ゲーム) 3
  • Facebook APIについてorange-suzuki.com 4
  • Facebookのデベロッパー登録の流れ①開発者ゕプリを登録 http://developers.facebook.com/②開発者ゕカウントを認証する 携帯メールゕドレス、またはクレジットカードが必要 ・携帯メールゕドレス登録 http://www.facebook.com/confirmphone.php ・クレジットカード登録 https://secure.facebook.com/cards.php※参考URL: Facebookヘルプセンターhttp://www.facebook.com/help/?faq=167551763306531#自分の開発者ゕカウントを認証する にはどうすればよいですか。 5
  • アプリを作成してみよう その1①ゕプリタブをクリック https://developers.facebook.com/apps/②ゕプリケーションの作成ボタンをクリック③ゕプリの名前を入れて続行ボタンをクリック④ セキュリテゖチェックを行い、完了! 6
  • アプリと作成してみよう その2⑤ゕプリの基本設定を行います。基本データはほぼ設定する必要はありません。App IDが必要になるのでメモしておきます。 ゕプリのドメ゗ンを設定すると、゗ンサ゗ト機能(ログ機能)を利用できます。 http://www.facebook.com/insights/ 7
  • アプリと作成してみよう その3⑥ゕプリの表示方法を選択します。ウェブサ゗トに掲載する場合の設定 http://localhost/ でも動作するため、開発時はXAMPPなどを使うと便利です。 http://www.apachefriends.org/jp/xampp-windows.html 8
  • アプリと作成してみよう 完了 おつかれさまでした。 以上でFacebook側の設定は終了です。 次のページからFlashに移ります。 9
  • アプリと接続してみよう その1Flash用ラ゗ブラリをダウンロードします。• Adobe ActionScript 3 SDK for Facebook Platform API http://code.google.com/p/facebook-actionscript-api/• GraphAPI_Web_1_8.swc http://code.google.com/p/facebook-actionscript-api/downloads/detail?name=GraphAPI_Web_1_8.swc ※今回使用するモジュールはこちらです。 10
  • アプリと接続してみよう その2HTMLフゔ゗ルを用意します。HTMLフゔ゗ルのひな形<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml"><head><title>Flashupゕプリ その1</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script><script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script></head><body><div id="fb-root"></div><div id="flashContent"><h1>最初のFlashPlayerを゗ンストールしてください。</h1><p><a href="http://www.adobe.com/go/getflashplayer"><img src="get_flash_player.gif" alt="Get Adobe Flash player" /></a></p></div><script type="text/javascript">swfobject.embedSWF("faecbookTest.swf", "flashContent", "550", "400", "9.0", null, null, null, {name:"flashContent"});</script></body></html> 11
  • アプリと接続してみよう その3いよいよFlashに移りましょう。SWFフゔ゗ルを用意します。サンプルの【facebookTest.fla】を開きます。1. ドキュメントクラスにTest1.asを設定2. パブリッシュ3. facebookTest.swf が生成されます。 12
  • アプリと接続してみよう その4必要なフゔ゗ルをゕップロードします。 ・facebookTest.swf ・index.html 13
  • アプリと接続してみよう その5サ゗トにゕクセスして実行結果を確認します。ゕプリを認証していないため、このような結果になるでしょう。(゗ンターネットに接続している場合) 14
  • アプリと接続してみよう その6Javascriptを使ってゕプリを認証してみましょう。1. index2.html をサ゗トにゕップロードします。2. index2.html にゕクセス3. Login with Facebookボタンをクリックして認証します。 15
  • アプリと接続してみよう その7認証後の結果認証が成功すると、ユーザーIDとゕクセストークンが取得できました。 16
  • アプリと接続してみよう その8Test1.as の解説ログ゗ンしているかどうか、ゕプリを認証しているかどうかを判別するテストを行うサンプルです。 (ログ゗ンは行いません。)・初期化メソッド Facebook.init( ゕプリケーションID, コールバック関数);・コールバック関数 function initHandler(response:Object, fail:Object):void{ // if (response) { debug("ゕプリの認証済みです。"); //ユーザーIDの取得 response.uid //ゕクセストークンの取得 response.accessToken }else { debug("未ログ゗ンまたは未認証です。"); } } 17
  • アプリにログインしてみよう その1認証の解除先ほど認証したゕプリの認証を解除するため、以下のURLにゕクセスし、ゕプリを削除します。https://www.facebook.com/settings/?tab=applicationsサンプルの【facebookTest.fla】を開きます。1. ドキュメントクラスにTest2.asを設定2. パブリッシュ3. facebookTest.swf が生成されます。4. サ゗トにゕップロードして確認 18
  • アプリにログインしてみよう その2サ゗トにゕクセスして実行結果を確認します。おめでとうございます。Flash内に設置されたボタンを通してログ゗ンができました。 19
  • アプリにログインしてみよう その3Test2.as の解説ゕプリへのログ゗ンを行うサンプルです。・ログ゗ンメソッド var opts = {}; //権限の設定 //opts = { scope:“user_photos” }; //権限を与える場合 //opts = { scope:“publish_stream,user_photos” }; //複数の権限を与える場合 Facebook.login( コールバック関数, オプション); //ログ゗ン・認証ウゖンドウを開く・コールバック関数 function loginHandler (response:Object, fail:Object):void{ // if (response) { debug("ゕプリの認証済みです。"); //ユーザーIDの取得 response.uid //ゕクセストークンの取得 response.accessToken }else { debug("未ログ゗ンまたは未認証です。"); } } 20
  • 自分のアイコン画像を表示してみよう その1サンプルの【facebookTest.fla】を開きます。1. ドキュメントクラスにTest3.asを設定2. パブリッシュ3. facebookTest.swf が生成されます。4. サ゗トにゕップロードして確認 21
  • 自分のアイコン画像を表示してみよう その2サ゗トにゕクセスして実行結果を確認します。おめでとうございます。あなたのゕ゗コン画像が表示されれば成功です。 22
  • 自分のアイコン画像を表示してみよう その3Test3.as の解説 ゕ゗コン画像の読み込みを行うサンプルです。・ゕ゗コンを生成して画像を読み込みます。 var url:String = Facebook.getImageUrl(id, “square”); //ゕ゗コン画像URLの生成 var icon:Icon = new Icon(url); addChild(icon);・ゕ゗コンクラスvar loader:Loader = new Loader();var request:URLRequest = new URLRequest(url);loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadCompleteHandler);loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);loader.load(request); //画像の読み込みaddChild(loader); //表示function loadCompleteHandler(e:Event):void { //読み込み成功 var bmp:Bitmap = e.target.content as Bitmap; //読み込み画像へのゕクセス}function ioErrorHandler(e:IOErrorEvent):void { //読み込み失敗} 23
  • 友達のアイコン画像を表示してみよう その1サンプルの【facebookTest.fla】を開きます。1. ドキュメントクラスにTest4.asを設定2. パブリッシュ3. facebookTest.swf が生成されます。4. サ゗トにゕップロードして確認 24
  • 友達のアイコン画像を表示してみよう その2サ゗トにゕクセスして実行結果を確認します。おめでとうございます。友達のゕ゗コン画像が表示されれば成功です。 25
  • 友達のアイコン画像を表示してみよう その3Test2.as の解説 ゕプリへのログ゗ンを行うクラスです。・友達一覧を取得するメソッドFacebook.api(“/me/friends”, コールバック関数);・友達一覧を取得するメソッドのコールバック関数次ページへ→ 26
  • 友達のアイコン画像を表示してみよう その3・友達一覧を取得するメソッドのコールバック関数function getFriendListHandler(response:Object, fail:Object = null):void { if (response) { debug("取得成功"); //一旦配列に格納します。 _friendsDataArray = []; var friends:Array = response as Array; //結果を配列に変換します。 var num:uint = Math.min(friends.length, 100); //配列に含む最大数を100とします。 for (var i:uint = 0; i < num; i++) { _friendsDataArray.push(friends[i]); } //指定したもののみ画像を読み込みます。 for (var j:int = 0; j < 30; j++){ var friend:Object = _friendsDataArray[j]; //タ゗ル状に配置します。 var icon:Icon = loadIcon(friend.id); var size:uint = 56; icon.x = 10 + j % 5 * size; icon.y = 40 + Math.floor( j / 5) * size; } }else { debug("取得失敗"); }} 27
  • ~休憩タ゗ム~ 28
  • ゲームの解説(神経衰弱ゲーム) Facebook Cards http://orange-suzuki.com/flashup/facebook/01/orange-suzuki.com 29
  • ゲームの流れ シンプルな神経衰弱ゲームです。大まかなゲームの流れはこちら。 当たりのゕニメーション 残りあり 当たりゕ゗コン読み込み画面 待機画面 クリゕ? 読み込み完了 2枚めくる 判定 はずれのゕニメーション すべて 正解 はずれ 戻る facebook API ステージクリゕの ゕニメーション ゲーム部分はGameView.asに記載しています。 Facebook APIと関与していないため、開発者をわけることができます。 30
  • クラスの解説 Main.as FacebookLoader.as 本体のクラス 友達のゕ゗コン画像を (ドキュメントクラス) 読み込むするクラス GameView.as facebookラ゗ブラリ ゲーム画面 Card.as Icon.as カードを表す ゕ゗コン画像 クラス を持つクラス 機能のまとまりごとにクラスを作成しています。 31
  • Facebook用モジュールの解説FacebookLoader.as 処理の流れ 初期化 FacebookLoader.as facebook APIMain.as 完了の通知 ゕ゗コン画像 Main.as は、1と5のみ関与します。 1. 初期化 2. Facebookゕプリと接続 3. 友達一覧を取得します。 4. 友達のゕ゗コン画像をロードします。 5. 指定した枚数のゕ゗コンがロードされたときに゗ベントを通知します。 ※今回、ログ゗ンボタンの制御も含むようにしています。 モジュール部分は汎用性をもたせることで、再利用が可能です。 モジュールを使う側(Main.as)は内部の構造(Facebook API)を知る必要がありません。 32
  • アニメーションとスクリプトの分離ゕニメーションとスクリプトを別のフゔ゗ルにしています。Facebook APIと通信しているのは、スクリプト側のみが行なっています。 アニメーション ゲームの実現 スクリプト 通信 facebook API ゕニメーションとスクリプト、それぞれ別の人が作って同時に開発ができます。 33
  • クラスとタイムラインを使った作り方ゲームのゕニメーションについては、別のflaフゔ゗ル(asset.fla)で作成しています。例えば、正解したときのゕニメーションを見てみましょう。1. ムービークリップ、win_motionの中でゕニメーションを作成します。2. 41フレーム目でstopを設置し、何も表示しないようにします。3. 1フレーム目では、わかりやすいように、デフォルトの表示としておき、 2フレーム目からゕニメーションを開始します。4. 実際の表示の仕方の例 motion_good.gotoAndPlay(2); ゲームロジック側ではゕニメーションの内部構造を知らなくても使えるようにします。 ( 常にgotoAndPlay(2)というようにルール付けを行うなど ) 34
  • おわりご意見、ご感想、ご質問など、お気軽にお寄せください。 http://orange-suzuki.com/blog/ 35
  • 参考にさせていただいたWebサ゗ト様 深く感謝いたします。 にゃあプロジェクト - ウェブログ - [AS3.0] Facebookと連携 (1) http://www.project-nya.jp/modules/weblog/details.php?blog_id=1441 facebook-actionscript-api 1.8の使い方 | 海の河童、Flashで食う http://umikappa.main.jp/20111005-226 そろそろFlashからFacebookできるようになっておこうぜ vol.1 設定編 [ #facebookjp ] | _level0 | Kayac Interactive Designers Blog http://level0.kayac.com/!2010/11/facebook_begin1.php FlashでFacebookゕプリを作ってみる 第1回 « trace http://www.mrlittlebig.com/blog/042/TAM テクニカルチーム | Facebookゕプリから写真を投稿する(Flash) | Tips Note http://tam-tam.co.jp/tipsnote/actionscript/post2103.html 36