Flash Builder 4 寫 Facebook Apps

Adobe Developer Center 上　Jeanette Stallons　的兩篇 Quick Start 是必看的文章：Build and test locally、Deploy on Facebook。熱騰騰的 Flash Builder 4 當然要好好利用一下 :D

Step 1: 先要有網站空間，使用免費的也行。設定一個空目錄，如：「http://www.riarock.net/fbapps/fbastutorial/」給 Facebook App 使用。

Step 2: 登入 Facebook 並在「http://www.facebook.com/developers/」建立新的應用程式。其中必填的項目為：
基本資料→應用程式名稱 :: 就是應用程式名稱，不能用 Face、FB 等混淆視聽的字眼，所以在此用了 Footbook。
畫布→畫布頁面網址 :: 如「http://apps.facebook.com/fbastutorial/」。
畫布→Canvas Callback URL :: 在這個例子設定為「http://www.riarock.net/fbapps/fbastutorial/」。
畫布→呈現方法 :: 設定使用「Iframe」。
聯外通→聯外通網址 :: 在這個例子設定為「http://www.riarock.net/fbapps/fbastutorial/」。
進階→沙盒模式 :: 測試時先設定為「啟用」。

Step 3: 安裝好 Flash Builder 4 之後，開一個新專案，命名為 fbastutorial。將 Facebook_library_v3.4_flex.swc 放到專案的 libs 目錄。 預設的 Application 為 fbastutorial.mxml，不寫程式，直接執行。

Step 4: 將產生的 bin-debug/fbastutorial.html 複製到 src/index.html。並在指定的位置增加下面標起來的程式碼，用來取得 Facebook 給的 GET 參數。

var flashvars = {}; // ← 找到這一行，增加下面的程式碼
// *** START 增加的部份 ***
var strHref = window.location.href;
if ( strHref.indexOf("?") > -1 ) {
  var strQueryString = strHref.substr(strHref.indexOf("?")+1);
  var aQueryString = strQueryString.split("&");
  for ( var iParam = 0; iParam < aQueryString.length; iParam++ ) {
      var aParam = aQueryString[iParam].split("=");
      flashvars[aParam[0]] = aParam[1];
  }
}
// *** END 增加的部份 ***

Step 5: fbastutorial.mxml 的內容如下。

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="840" minHeight="500"
      applicationComplete="init()"
 viewSourceURL="srcview/index.html">
<!-- *** 注意：這裡是用 applicationComplete，不是用 creationComplete *** -->
 
 <fx:Script>
  <![CDATA[
   import com.facebook.Facebook;
   import com.facebook.commands.friends.GetFriends;
   import com.facebook.commands.users.GetInfo;
   import com.facebook.data.friends.FriendsCollection;
   import com.facebook.data.friends.GetFriendsData;
   import com.facebook.data.users.FacebookUser;
   import com.facebook.data.users.FacebookUserCollection;
   import com.facebook.data.users.GetInfoData;
   import com.facebook.events.FacebookEvent;
   import com.facebook.net.FacebookCall;
   import com.facebook.utils.FacebookSessionUtil;
   
   import mx.controls.Image;
   
   private var session:FacebookSessionUtil
   private var facebook:Facebook;
   private var fbUser:FacebookUser;
   private var dictionary:Dictionary;
   
   private function init():void {
    // *** 一開始測試時可以先填入 API Key 和　Application Secret
    //session = new FacebookSessionUtil("<API Key>", "<Application Secret>", loaderInfo);
    session = new FacebookSessionUtil(loaderInfo.parameters.fb_sig_api_key, null, loaderInfo);
    // 取得 Facebook Session，有 Session 才有權使用 Facebook API
    facebook = session.facebook;
    // 取得 Facebook Session 並連結之後，呼叫 onSessionConnect 方法
    session.addEventListener(FacebookEvent.CONNECT, onSessionConnect);
    
    if(loaderInfo.parameters.fb_sig_added == true){
     // 有登入時，呼叫核對 Session，OK的話發出 CONNECT 事件
     session.verifySession();
    } else if(loaderInfo.parameters.fb_sig_added == false){
     // 沒登入時
     navigateToURL(new URLRequest("http://www.facebook.com/login.php?api_key="+loaderInfo.parameters.fb_sig_api_key),"_top");
    } else {
     // 沒取得資料時
     session.login();
     btnLogin.visible = true;
    }
   }
   
   private function onSessionConnect(event:FacebookEvent):void {
    // 呼叫取得朋友資料
    var call:FacebookCall = facebook.post( new GetFriends() );
    // 取得朋友資料之後，執行 onGetFriendsComplete
    call.addEventListener(FacebookEvent.COMPLETE, onGetFriendsComplete);
   }
   
   private function onGetFriendsComplete(event:FacebookEvent):void {
    // 呼叫時用 GetFriends，取得時用 GetFriendsData
    var friendsData:GetFriendsData = event.data as GetFriendsData;
    var friends:FacebookUserCollection = friendsData.friends;
    // 將朋友的 ID 放入 uids 陣列
    var uids:Array = [];
    for(var i:int=0; i< friends.length; i++) {
     var f:FacebookUser = friends.getItemAt(i) as FacebookUser;
     uids.push(f.uid);
    }
    // GetFriends 只能取得朋友的 uid，必須呼叫 GetInfo 才能取得朋友資料
    var call:FacebookCall = facebook.post(
     // 設定要取得的資料項
     new GetInfo(uids, ["name", "pic_square"])
    );
    call.addEventListener(FacebookEvent.COMPLETE, onGetFriendsAttr);
   }
   
   private function onGetFriendsAttr(event:FacebookEvent):void {
    // 呼叫時用 GetInfo，取得時用 GetInfoData
    var getInfoData:GetInfoData = event.data as GetInfoData;
    var userCollection:FacebookUserCollection = getInfoData.userCollection;
    dictionary = new Dictionary();
    // 一一取出朋友資料
    for(var i:int=0; i<userCollection.length; i++) {
     var usr:FacebookUser = userCollection.getItemAt(i) as FacebookUser;
     var img:Image = new Image();
     // 沒有大頭貼時用預設的圖
     if(! usr.pic_square) {
      img.source = 'http://static.ak.fbcdn.net/pics/q_silhouette.gif';
     } else {
      img.source = usr.pic_square;
     }
     img.toolTip = usr.name;
     img.buttonMode = true;
     // 使用字典以方便用物件取得字串
     dictionary[img] = usr.uid;
     img.addEventListener(MouseEvent.CLICK,onImageClick);
     tilesPic.addElement( img );
    }
   }
   private function onImageClick(event:MouseEvent):void {
    var img:Image = event.currentTarget as Image;
    navigateToURL(new URLRequest("http://www.facebook.com/profile.php?id="+dictionary[img]),"_blank");
   }
  ]]>
 </fx:Script>
 
 <s:Button x="10" y="10" label="點按登入 Facebook" id="btnLogin"
     visible="false" click="session.validateLogin()"/>
 <s:Scroller x="30" y="30" width="800" height="450">
  <s:TileGroup width="100%" height="100%" clipAndEnableScrolling="true" id="tilesPic">
  </s:TileGroup>
 </s:Scroller>
 
</s:Application>

Step 6: 發佈，上傳至「http://www.riarock.net/fbapps/fbastutorial/」測試。

Step 7: 範例在「http://apps.facebook.com/fbastutorial/」，於 swf 上按右鍵選「View Source」就可以看到原始檔，並下載專案檔了。

畫布→Post-Authorize Redirect URL :: http://apps.facebook.com/fbastutorial/

沒設定這個, 使用者在第一次使用時會轉錯網址。

轉載自 : http://qops.blogspot.com/2010/03/flash-builder-4-facebook-apps.html

creationComplete和applicationComplete有什么区别?

creationCompleted 和 applicationComplete


第一个先执行完

第一个是 Application实例完成后就执行的函数

第二个是整个Application所有的东西都实例完成后再执行的函数



Flex程序启动事件的顺序initialize、creationComplete、applicationComplete

JavaScript物件

http://www.csie.nctu.edu.tw/~yctsao/t3/eindex.htm

每次要用到時都會忘記要查一下，乾脆把他寫下來囉！

 JavaScript的substr和substring的分別：

String.substr(N1,N2) ：從指定的位置(N1)截取指定長度(N2)的字串。

String.substring(N1,N2) ：從指定的位置(N1)到指定的位置(N2)的字串。

[SWFObject] SWFObject 2.0 讓你輕鬆的插入及控制 Flash

Setup1 - 請先下載 SWFObject.js 或是將整個 SWFObject 壓縮檔下載回去

Setup2 - 請將 SWFObject.js 放入你的網站資料夾

Setup3 - 將以下的 Code 放入你想出現 Flash 的地方即可


<script type="text/javascript" src="swfobject.js"></script>

<div id="mySWF">
這裡是當瀏覽器不能播 Flash 時，放入你想出現的訊息。
</div>

<script type="text/javascript">
swfobject.embedSWF("test.swf", "MySWF", "550", "400", "9.0.0");
</script>

SWFObject 的語法非常的簡單易懂，以下我們就來看看它的使用方式吧～

swfobject.embedSWF(swfUrl, replaceElementId, swfWidth, swfHeight, flashVersion,expressInstallUrl, flashvars, params, attributes);
=========================================================
swfUrl ======> 這個要寫你的ＦＬＡＳＨ檔名；
replaceElementId ======> 這個是你要替換成 flash 的 DIV 的 ID 名稱；
swfWidth ======> 這個就是你的 swf 的寬度；
swfHeight ======> 這個就是你的 swf 的高度；
flashVersion ======> 這個是播放 swf 的 player 版本，可設定至小數點，但是一般來說整數版本就可以囉；
expressInstallUrl ======> 這個很好用哦～這是當 Flash Player 的版本比你指定的還舊時，他就會自動地到上述的位置，更新安裝 Flash Player 。
flashvars ======> 這是傳值進 Flash 用的；
params ======> 這是控制 Flash 參數用，如需不需要選單；menu="false" ；
attributes ======> 這是為 flash player 控件的屬性值設置；如 id: "myDynamicContent"