Flashup 11

「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

アプリと接続してみようその1

Flash用ラ゗ブラリをダウンロードします。

• 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


HTMLフゔ゗ルを用意します。

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


いよいよFlashに移りましょう。SWFフゔ゗ルを用意します。
サンプルの【facebookTest.fla】を開きます。

1. ドキュメントクラスにTest1.asを設定
2. パブリッシュ
3. facebookTest.swf が生成されます。

12


必要なフゔ゗ルをゕップロードします。

・facebookTest.swf
・index.html

13


サ゗トにゕクセスして実行結果を確認します。

ゕプリを認証していないため、このような結果になるでしょう。
(゗ンターネットに接続している場合)

14


Javascriptを使ってゕプリを認証してみましょう。

1. index2.html をサ゗トにゕップロードします。
2. index2.html にゕクセス
3. Login with Facebookボタンをクリックして認証します。

15


認証後の結果

認証が成功すると、ユーザーIDとゕクセストークンが取得できました。

16


Test1.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

4. サ゗トにゕップロードして確認

18



おめでとうございます。
Flash内に設置されたボタンを通してログ゗ンができました。

19

Test2.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



21



あなたのゕ゗コン画像が表示されれば成功です。

22


Test3.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



24



友達のゕ゗コン画像が表示されれば成功です。

25


Test2.as の解説ゕプリへのログ゗ンを行うクラスです。

・友達一覧を取得するメソッド
Facebook.api(“/me/friends”, コールバック関数);

・友達一覧を取得するメソッドのコールバック関数
次ページへ→

26


・友達一覧を取得するメソッドのコールバック関数

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 API
Main.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 Designer's 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

Flashup 11

More Related Content

Similar to Flashup 11

More from Katsushi Suzuki

Flashup 11