Download Demo Files (Start & Completed versions for Part 1 & Part 2) In order for the completed code to work you have to put in your Facebook App ID and generated Facebook Social Plugin code in the required fields.
I would also recommend publishing for Adobe AIR 2.6 or 2.7. I have not tested this with AIR 3.0.
In this article, we will look deeper at the ActionScript 3 SDK for Facebook Platform and use some of the API’s to securely log into Facebook, read data from the logged in user, post to the users wall and also post to a public Facebook page.
This article picks up/assumes that you have already registered as a Facebook Developer and created a Facebook application. For more information on how to become a developer and create a Facebook application, click here and/or click here.
I would like to keep the explanations of each step fairly clear and straight forward. Here are the tasks that we are going to accomplish in this article:
- Download and Install the ActionScript 3 SDK for Facebook Platform
- AS3 – Initialize your Facebook Application with your Flash project
- AS3 - Prompt the user to login to Facebook
- AS3 - Post to your wall
- AS3 - Post to a public page
- AS3 - Read the wall of a public page
Download and Install the ActionScript 3 SDK for Facebook Platform
There are many ways to communicate with Facebook using Flash, but some kind folks from the community and Adobe created an easy to use SDK, that will do all the heavy lifting for you. Download the SDK from this link: Download ActionScript 3 SDK. At this page you will notice there are different “.swc” files depending on your type of project. For starters download everything… But in this article we will be using the Desktop API for Adobe AIR, GraphAPI_Desktop_xxxx.swc.
There are three targets for developing for Facebook: Web(Website and Facebook.com), Mobile, Desktop.
Download the as3corelib.swc Click here to download
The as3corelib.swc contains classes and utilities for MD5 hasing, image encoers, JSON, etc.
Click here to download the as3corelib.swc file that will be used to parase the JSON data that we will receive from Facebook. FYI in Flash Player 11 & Adobe AIR 3 there is a new native AS3 JSON API
Add the .swc's to Flash Professional
Once you download the .swc, in Flash Professional, File -> ActionScript Settings -> Library path (tab) and navigate to the location of the .swc files.
Make sure you change the path to your location of: as3corelib.swc andGraphAPI_Desktop_xxx.swc , if you do not change it, you will get errors.
Once you have added the path to the .swc file, you have access to all of the Facebook/ActionScript API and the
Click here to view the online docs.
Facebook ActionScript API
Download the files used in this exercise
Download Demo Files (Start & Completed versions for Part 1 & Part 2)
- facebookNOTO.fla
- Tools.as – used to dump objects and arrays to the output panel or string, making an easy way to read the JSON Facebook data
- NotoFB.as – used in Part 1 – Creating a Facebook Like Button in Flash Professional for Adobe AIR, already has completed code for the Facebook “LIKE” button
The NotoFB.as file will look like this:
package{
import flash.display.Sprite;
import flash.html.HTMLLoader;
import flash.display.NativeWindowInitOptions;
import flash.display.NativeWindowType;
import flash.net.URLLoader;
import flash.geom.Rectangle;
import flash.events.Event;
import flash.events.MouseEvent;
public class NotoFB extends Sprite{
private var html:HTMLLoader;
private var options:NativeWindowInitOptions;
private var boundaries:Rectangle;
public function NotoFB(){
html = new HTMLLoader();
html.scrollV = 200;
html.navigateInSystemBrowser = true;
options = new NativeWindowInitOptions();
options.type = NativeWindowType.NORMAL;
boundaries = new Rectangle(950,55,300,300);
loadFacebookLikeButton();
}
private function loadFacebookLikeButton():void {
var myString:String = 'ADD YOUR HTML5 CODE FROM YOUR PASTED FACEBOOK SOCIAL';
html = HTMLLoader.createRootWindow(false,options,false,boundaries);
html.loadString(myString);
addChild(html);
html.width = 292;
html.height = 60;
html.x = 15;
html.y = 0;
html.addEventListener(Event.COMPLETE, completeHandler);
}
private function completeHandler(event:Event):void {
trace("Facebook Like Button Loaded");
}
}
}
Create an init() function. This function will make an initial call to your Facebook application. And also define the event handlers for the buttons on the page. Update the NotoFB constructor function to make a call to the init() function. Make sure you put your Facebook Application ID in the first parameter in the FacebookDesktop.init() function.
public function NotoFB() {
html = new HTMLLoader();
html.scrollV = 200;
html.navigateInSystemBrowser = true;
options = new NativeWindowInitOptions();
options.type = NativeWindowType.NORMAL;
boundaries = new Rectangle(950,55,300,300);
loadFacebookLikeButton();
init();
}
private function init():void {
FacebookDesktop.init("YOUR APP ID HERE", handleLogin);
authorize_btn.addEventListener(MouseEvent.CLICK, onAuthorize);
post_btn.addEventListener(MouseEvent.CLICK, onYourPost);
get_btn.addEventListener(MouseEvent.CLICK, onGet);
postPage_btn.addEventListener(MouseEvent.CLICK, onPagePost);
logout_btn.addEventListener(MouseEvent.CLICK, onLogOut);
}To make calls via ActionScript to the Facebook Graph API we use the .api() method. In this case. FacebookDesktop.api(). You can find out more about all of the available Facebook Graph API calls by visiting http://developers.facebook.com/docs/reference/api/ and there is also an interactive Graph explorer (https://developers.facebook.com/tools/explorer ) that allows you to test calls to your app. One thing to keep in mind, by visiting the Facebook Developer docs it does not base their examples for ActionScript. We use the Graph API and insert it into the FacebookDesktop.api() method. So you must review the Facebook Developer Graph API documentation, as well as the Facebook ActionScript SDK.
private function onAuthorize(e:MouseEvent):void {
FacebookDesktop.login(handleLogin,"publish_stream");
}
private function onLogOut(e:MouseEvent):void {
FacebookDesktop.logout();
desc.text = "logout";
}
private function onYourPost(e:MouseEvent):void {
FacebookDesktop.api("/me/feed",submitPostHandler,{message:post_txt.text}, "POST");
}
private function onPagePost(e:MouseEvent):void {
FacebookDesktop.api("/229237793792361/feed", submitPostHandler, {message:post_txt.text}, "POST");
}
private function onGet(e:MouseEvent):void {
FacebookDesktop.api("/229237793792361/feed", submitPostHandlerPage, null, "GET");
}
private function handleLogin(session:Object, fail:Object):void {
if (session != null) {
userImage.source = FacebookDesktop.getImageUrl(session.uid,"large");
desc.text = session.user.name + "\n";
}
}
private function submitPostHandler(result:Object, fail:Object):void {
desc.appendText("\n\nRESULT:\n" + JSON.encode(result));
}The code below uses the Tools.as file to loop through the JSON so it is easy to read. I downloaded the original Tool.as from here, but the one using in this project has been tweeked a little.
private function submitPostHandlerPage(result:Object, fail:Object):void {
var arr:Array = (JSON.decode(JSON.encode(result)) as Array);
trace("Number of records: " + arr.length);
var myString:String = Tools.pr(arr);
desc.appendText(myString);
desc.appendText("Message: " + arr[9].message);
}The final code is here:
package {
import com.facebook.graph.FacebookDesktop;
import com.adobe.serialization.json.JSON;
import Tools;
import flash.display.Sprite;
import flash.html.HTMLLoader;
import flash.display.NativeWindowInitOptions;
import flash.display.NativeWindowType;
import flash.net.URLLoader;
import flash.geom.Rectangle;
import flash.events.Event;
import flash.events.MouseEvent;
public class NotoFB extends Sprite {
private var html:HTMLLoader;
private var options:NativeWindowInitOptions;
private var boundaries:Rectangle;
public function NotoFB() {
html = new HTMLLoader();
html.scrollV = 200;
html.navigateInSystemBrowser = true;
options = new NativeWindowInitOptions();
options.type = NativeWindowType.NORMAL;
boundaries = new Rectangle(950,55,300,300);
loadFacebookLikeButton();
init();
}
private function init():void {
FacebookDesktop.init("YOUR APP ID HERE", handleLogin);
authorize_btn.addEventListener(MouseEvent.CLICK, onAuthorize);
post_btn.addEventListener(MouseEvent.CLICK, onYourPost);
get_btn.addEventListener(MouseEvent.CLICK, onGet);
postPage_btn.addEventListener(MouseEvent.CLICK, onPagePost);
logout_btn.addEventListener(MouseEvent.CLICK, onLogOut);
}
private function loadFacebookLikeButton():void {
var myString:String = "FACEBOOK SOCIAL HTML CODE HERE";
html = HTMLLoader.createRootWindow(false,options,false,boundaries);
html.loadString(myString);
addChild(html);
html.width = 292;
html.height = 60;
html.x = 15;
html.y = 0;
html.addEventListener(Event.COMPLETE, completeHandler);
}
private function completeHandler(event:Event):void {
trace("Facebook Like Button Loaded");
}
private function onAuthorize(e:MouseEvent):void {
FacebookDesktop.login(handleLogin,"publish_stream");
}
private function onLogOut(e:MouseEvent):void {
FacebookDesktop.logout();
desc.text = "logout";
}
private function onYourPost(e:MouseEvent):void {
FacebookDesktop.api("/me/feed",submitPostHandler,{message:post_txt.text}, "POST");
}
private function onPagePost(e:MouseEvent):void {
FacebookDesktop.api("/229237793792361/feed", submitPostHandler, {message:post_txt.text}, "POST");
}
private function onGet(e:MouseEvent):void {
FacebookDesktop.api("/229237793792361/feed", submitPostHandlerPage, null, "GET");
}
private function handleLogin(session:Object, fail:Object):void {
if (session != null) {
userImage.source = FacebookDesktop.getImageUrl(session.uid,"large");
desc.text = session.user.name + "\n";
}
}
private function submitPostHandler(result:Object, fail:Object):void {
desc.appendText("\n\nRESULT:\n" + JSON.encode(result));
}
private function submitPostHandlerPage(result:Object, fail:Object):void {
var arr:Array = (JSON.decode(JSON.encode(result)) as Array);
trace("Number of records: " + arr.length);
var myString:String = Tools.pr(arr);
desc.appendText(myString);
desc.appendText("Message: " + arr[9].message);
}
}
}
Save/Test your movie.
- Click on Login, enter your credentials
- You can Post on your wall, you can post on a page wall (Change the id in the onGet/onPagePost to post to another page)
- You can read a page’s wall
