Thursday, March 6, 2014

AS3: Creating Facebook Application

Facebook became one of the most popular social platforms these days. I just finished a flash based game that uses their API and decided to share my experience.

The example that I created is a simple one, but illustrates the basic usage of the Facebook's API. It looks like that:
AS3: Creating Facebook Application 

The flash shows your name, avatar and your friends if you click on Get Friends button. The full source code of the tutorial is available herehttp://krasimirtsonev.com/files/facebookapplication/source.zip.

When I started to work on the project I searched for a AS3 library. And I found one, written by Adobe -http://code.google.com/p/facebook-actionscript-api/. It looks good in the beginning, but after few hours work with it I found it a little bit buggy. I checked some of its code and I found that the version that I needed actually uses ExternalInteface to communicate with Facebook. Last few months I worked with Facebook's JavaScript SDK a lot and to be honest the result was sufficient. So instead of trying to solve bug after bug I decided to skip the AS3 library. All the requests to Facebook were made by JavaScript code and once the data is ready I just sent it to the flash application.

The other tricky part was the developing process. Every Facebook application is connected with a specific Site URL and Site Domain. Let's say that the official version of the game will be hosted onhttp://gamesite.com. In this case we will set Site URL tohttp://gamesite.com and Site Domain to gamesite.com. The application will work, but for every little change we will have to upload the files to http://gamesite.com. That's why it's good to have two versions - one official (connected with http://gamesite.com) and one development version (connected with localhost). For this tutorial I created only the second one.

1. Creating the Facebook application


Before being able to create Facebook applications your account should be verified. If it's not, probably you will see the following message:
    

  1. Your account must be verified before you can take this action. 
    2. 

  2. Please verify your account by adding your mobile phone or credit card.
    3.
I used my mobile phone and suggest you to do the same.
Once you verify your account go to http://developers.facebook.comand click on the Apps link in the header.

AS3: Creating Facebook Application

Choose + Create New App on the next screen.

AS3: Creating Facebook Application

Fill the name of your application, agree with the Facebook's terms and click Continue.

AS3: Creating Facebook Application

At this time the only one setting that you have to do is to set your Site URL and Site Domain. You can do that by going to Web->Site URL & Domain. As you can see on the next image my application is located athttp://localhost/KrasimirTestApplication. The domain is localhost. In order to initialize the Facebook's API is the application ID. Get it from this page also.

AS3: Creating Facebook Application

2. The JavaScript part


I prefer to work with OOP JavaScript. That's why I created a class called FacebookApp.js, which will manage all the things. Here is the initial HTML Code.
    

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4.  
    5. 

  5.   ... meta data here ...
    6. 

  6.   
    7. 

  7.   <title>AS3: create Facebook application</title>
    8. 

  8.  
    9. 

  9.   <script type="text/javascript" src="js/SWFObject.js"></script>
    10. 

  10.   <script type="text/javascript" src="js/json2.js"></script>
    11. 

  11.   <script type="text/javascript" src="js/FacebookApp.js"></script>
    12. 

  12.   
    13. 

  13.  </head>
    14. 

  14. <body>
    15. 

  15.  <div id="fb-root"></div>
    16. 

  16.  <div id="animation"></div>
    17. 

  17.  <script type="text/javascript">
    18. 

  18.  
    19. 

  19.   var F;
    20. 

  20.   
    21. 

  21.   window.onload = function() {
    22. 

  22.    F = new FacebookApp(); 
    23. 

  23.    (function() 
    24. 

  24.     { 
    25. 

  25.     var e = document.createElement("script"); e.async = true; 
    26. 

  26.     e.src = document.location.protocol + "//connect.facebook.net/en_US/all.js?xfbml=1"; 
    27. 

  27.     document.getElementById("fb-root").appendChild(e); 
    28. 

  28.     }()
    29. 

  29.    );
    30. 

  30.   } 
    31. 

  31.   window.fbAsyncInit = function() {
    32. 

  32.    F.init();
    33. 

  33.    F.getLoginStatus();
    34. 

  34.   }
    35. 

  35.  
    36. 

  36.  </script>
    37. 

  37.  
    38. 

  38. </body>
    39. 

  39. </html>
    40.
As you can see I added three .js files in the page:
a) SWFObject.js - flash embeding
b) json2.js - the data from Facebook comes in a JSON format. It should be converted to a string and this library helped a lot.
c) FacebookApp.js - managing the Facebook processes
When I'm working with JavaScript my starting point is alwayswindow.onload event. By doing that I'm sure that all the neccessary resources are fully loaded. What I did here is to create an instance ofFacebookApp and after that place the loading of the Facebook's library. So far, for me the code above seems the best way to do this. When the all.js is loaded, a window.fbAsyncInit is called which triggers the execution of custom method init and getLoginStatus ofFacebookApp class.
The constructor of the class:
    

  1. var FacebookApp = function() {
    2. 

  2.  this.appID = "[YOUR APP ID HERE]"; // the application's ID (provided by Facebook)
    3. 

  3.  this.currentUser = null; // a JSON object that will hold the current user's data
    4. 

  4.  this.token = null; // the access token of the current Facebook session
    5. 

  5. };
    6.
Don't forget to replace [YOUR APP ID HERE] with your actual ID.
Calling the init method of the Facebook's API:
    

  1. init:function() {
    2. 

  2.  log("init appID=" + this.appID);
    3. 

  3.  FB.init({
    4. 

  4.   appId : this.appID,
    5. 

  5.   status: true,
    6. 

  6.   cookie: true,
    7. 

  7.   xfbml: true,
    8. 

  8.   channelUrl: "channel.html"
    9. 

  9.  });
    10. 

  10. }
    11.

Checking if there is a Facebook session and if not, promps the login popup.
    

  1. getLoginStatus:function() {
    2. 

  2.  log("getLoginStatus");
    3. 

  3.  FB.getLoginStatus(function(response) {
    4. 

  4.   if (response.session) {
    5. 

  5.    log("Logged in.");
    6. 

  6.    F.token = response.session.access_token;
    7. 

  7.    F.getCurrentUserInfo();
    8. 

  8.   } else {
    9. 

  9.    log("Not logged in.");
    10. 

  10.    FB.login(function(response) {
    11. 

  11.     if(response.session) {
    12. 

  12.      log("Logging successful.");
    13. 

  13.      F.token = response.session.access_token;
    14. 

  14.      F.getCurrentUserInfo();
    15. 

  15.     } else {
    16. 

  16.      log("Logging failed.");
    17. 

  17.     }
    18. 

  18.    });
    19. 

  19.   }
    20. 

  20.  });
    21. 

  21. }
    22.
Some browsers restrict the opening of the Facebook's login popup. Be sure that your blocker is turned off while you are testing.

Once we have a session we can use the Facebook Graph API. The method getCurrentUserInfo gets the current user data, like account id and name.
    

  1. getCurrentUserInfo:function() {
    2. 

  2.  log("getCurrentUserInfo");
    3. 

  3.  FB.api('/me', function(response) {
    4. 

  4.   if(response) {
    5. 

  5.    F.currentUser = response;
    6. 

  6.    F.showFlash(response);
    7. 

  7.   } else {
    8. 

  8.    log("getCurrentUserInfo failed");
    9. 

  9.   }
    10. 

  10.  });
    11. 

  11. }
    12.
If everything is ok we have enough information to embed the flash.
    

  1. showFlash:function(currentUser) {
    2. 

  2.  log("showFlash");
    3. 

  3.  var rand = Math.floor(Math.random()*1000000);
    4. 

  4.  var swf = new FlashObject("facebook.swf?tmp=" + rand, "animationSwf", "550", "550", "9", "#FFFFFF");
    5. 

  5.  swf.addVariable("userName", currentUser.name);
    6. 

  6.  swf.addVariable("userID", currentUser.id);
    7. 

  7.  swf.write("animation");
    8. 

  8. }
    9.
As you can see I sent the user's name and id to the flash application.
I added one more method which is called from the AS3.
    

  1. getFriends:function() {
    2. 

  2.  log("getFriends");
    3. 

  3.  FB.api('/me/friends', function(response) {
    4. 

  4.   if(response) {
    5. 

  5.    F.getFlash().onGetFriends(JSON.stringify(response));
    6. 

  6.   } else {
    7. 

  7.    log("getFriends failed");
    8. 

  8.   }
    9. 

  9.  });
    10. 

  10. }
    11.
getFriends gets the current user's friends list, converts it to a string and sends it to the flash application.

The full source code of FacebookApp.js could be seen here.

3. ActionScript3 part


The constructor of the document class:
    

  1. public function App() {
    2. 

  2.  debug("App constructor");
    3. 

  3.  
    4. 

  4.  _currentUserName = loaderInfo.parameters.userName || "Krasimir Stefanov Tsonev";
    5. 

  5.  _currentUserID = loaderInfo.parameters.userID || "617578836";
    6. 

  6.  
    7. 

  7.  loadCurrentUserAvatar();
    8. 

  8.  showCurrentUserName();
    9. 

  9.  addControls(); // adds the button and the text area on the stage
    10. 

  10.  
    11. 

  11.  ExternalInterface.addCallback("onGetFriends", onGetFriends);
    12. 

  12.  
    13. 

  13. }
    14.
To be able to test the application in the Flash enviroment I set my own Facebook name and id by default. In a big project, it's a good idea to load this data from an external xml or script for example. I also added the callback of onGetFriends. This method is fired when the JavaScript gets the friends' list.

The loading of the avatar:
    

  1. private function loadCurrentUserAvatar():void {
    2. 

  2.  var url:String = "http://graph.facebook.com/" + _currentUserID + "/picture";
    3. 

  3.  _avatar = new Loader();
    4. 

  4.  _avatar.load(new URLRequest(url));
    5. 

  5.  _avatar.x = _avatar.y = 20;
    6. 

  6.  addChild(_avatar);
    7. 

  7. }
    8.
The avatar of every Facebook's user is accessable with a simple request to http://graph.facebook.com/[USER ID]/picture.

Showing the current user's name and adding the controls:
    

  1. private function showCurrentUserName():void {
    2. 

  2.  var tf:TextFormat = new TextFormat();
    3. 

  3.  tf.font = "Verdana";
    4. 

  4.  tf.size = 12;
    5. 

  5.  tf.color = 0x000000;
    6. 

  6.  _nameField = new TextField();
    7. 

  7.  _nameField.defaultTextFormat = tf;
    8. 

  8.  _nameField.text = _currentUserName;
    9. 

  9.  _nameField.x = 80;
    10. 

  10.  _nameField.y = 20;
    11. 

  11.  _nameField.width = 300;
    12. 

  12.  _nameField.height = 30;
    13. 

  13.  addChild(_nameField);
    14. 

  14. }
    15. 

  15. private function addControls():void {
    16. 

  16.  _controls = new AppControls();
    17. 

  17.  _controls.x = 20;
    18. 

  18.  _controls.y = 83;
    19. 

  19.  _controls.b1.addEventListener(MouseEvent.CLICK, getFriends);
    20. 

  20.  addChild(_controls);
    21. 

  21. }
    22.


Getting the friends' list:
    

  1. private function getFriends(e:Event):void {
    2. 

  2.  ExternalInterface.call("F.getFriends");
    3. 

  3. }
    4. 

  4. private function onGetFriends(result:String):void {
    5. 

  5.  var friends:Array = JSON.decode(result).data;
    6. 

  6.  var text:String = "";
    7. 

  7.  if(friends && friends.length > 0) {
    8. 

  8.   var numOfFriends:int = friends.length;
    9. 

  9.   for(var i:int=0; i<numOfFriends; i++) {
    10. 

  10.    text += friends[i].name + " <u><a href='http://www.facebook.com/profile.php?id=" + friends[i].id + "' target='_blank'>view profile</a></u>
    11. 

  11. ";
    12. 

  12.   }
    13. 

  13.  } else {
    14. 

  14.   text = "Problem reading friends' list.";
    15. 

  15.  }
    16. 

  16.  _controls.area.htmlText = text;
    17. 

  17. }
    18.
getFriends method is called when the user clicks on the button. Once the JavaScript part responds we converted the result string to an array. I used similar library for JSON operations like in the json.js. It's available here.

The full source code of the document class could be seen here.

Example's source code -http://krasimirtsonev.com/files/facebookapplication/source.zip
Facebook JavaScript SDK -http://developers.facebook.com/docs/reference/javascript/
Facebook Graph API -http://developers.facebook.com/docs/reference/api/ 

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)