More Related Content
Similar to Flashup 11 (20)
More from Katsushi Suzuki (8)
Flashup 11
- 3. 1. Facebook APIについて
2. ゲームの解説(神経衰弱ゲーム)
3
- 9. アプリと作成してみよう 完了
おつかれさまでした。
以上でFacebook側の設定は終了です。
次のページからFlashに移ります。
9
- 10. アプリと接続してみよう その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
- 11. アプリと接続してみよう その2
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
- 20. アプリにログインしてみよう その3
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
- 23. 自分のアイコン画像を表示してみよう その3
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
- 27. 友達のアイコン画像を表示してみよう その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
- 29. ゲームの解説(神経衰弱ゲーム)
Facebook Cards
http://orange-suzuki.com/flashup/facebook/01/
orange-suzuki.com
29
- 30. ゲームの流れ
シンプルな神経衰弱ゲームです。大まかなゲームの流れはこちら。
当たりのゕニメーション
残りあり
当たり
ゕコン読み込み画面 待機画面
クリゕ?
読み込み完了 2枚めくる
判定
はずれのゕニメーション
すべて
正解
はずれ
戻る
facebook API
ステージクリゕの
ゕニメーション
ゲーム部分はGameView.asに記載しています。
Facebook APIと関与していないため、開発者をわけることができます。 30
- 31. クラスの解説
Main.as FacebookLoader.as
本体のクラス 友達のゕコン画像を
(ドキュメントクラス) 読み込むするクラス
GameView.as facebookラブラリ
ゲーム画面
Card.as Icon.as
カードを表す ゕコン画像
クラス を持つクラス
機能のまとまりごとにクラスを作成しています。
31
- 32. Facebook用モジュールの解説
FacebookLoader.as 処理の流れ
初期化
FacebookLoader.as
facebook API
Main.as
完了の通知 ゕコン画像
Main.as は、1と5のみ関与します。
1. 初期化
2. Facebookゕプリと接続
3. 友達一覧を取得します。
4. 友達のゕコン画像をロードします。
5. 指定した枚数のゕコンがロードされたときにベントを通知します。
※今回、ログンボタンの制御も含むようにしています。
モジュール部分は汎用性をもたせることで、再利用が可能です。
モジュールを使う側(Main.as)は内部の構造(Facebook API)を知る必要がありません。 32
- 36. 参考にさせていただいた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