After spending some time playing around the api of Facebook and Flash AS3, I finally manage to do Image Tagging of the friends of the user in Facebook using Facebook and Flash AS3.
Before moving any further, I had used the following api's to get my way around this topic.
- facebook-actionscript-api: This library is one of the easiest way to work your way around Flash AS3 and Facebook.
- Facebook - Graph API - Photo: You might want to spend some time understanding the Facebook Graph API for uploading of images, so that you will know what I'm going to cover.
Basically the theory is pretty simple:
- You upload an image to Facebook and upon success uploading, store the image id that was return from Facebook.
- Based on the image id, send the user id of your friend and the X and Y coordinates of the point you want to tag your friend.
Note:- The X and Y coordinates were actually in percentages ranging from 0 - 100.
- The parameter name for the friend's user id were actually "to" in the Facebook API. Please refer to the Facebook - Graph API that I had mentioned earlier in this post.
The following will be the actionscript codes of my Main Fla.
package com.FacebookTest{
//The following are the neccessary imports of AS3 classes
import com.adobe.serialization.json.JSON;
//This AS3 class is written by myself for having a connection with Facebook
import com.util.facebook.FacebookConnect;
import flash.events.Event;
import flash.events.DataEvent;
import flash.geom.Point;
public class Main extends InterfaceSetup{
//This MovieClip is used to display all my outputs.
private var resultMC;
//A reference to my AS3 Facebook Connection Object class
public var fbConnectRef:FacebookConnect = null;
public function Main(){
//Call setupBtns() to setup all my movieclip buttons
setupBtns();
resultMC = results_mc;
publish_txt.text = "";
//Setting up my Facebook Connection Object
fbConnectRef = new FacebookConnect();
//Add a Listener for DataEvent
fbConnectRef.addEventListener(DataEvent.DATA, fbEvent);
/*
Setting up the AS3 Facebook Connection Object
1st param: Facebook App ID
2nd param: Width and Height of Flash file as a Point Object
3rd param: Do you want to show the Facebook Distractor? True / False
4th param: parent obj of the Facebook Connection Object
*/
fbConnectRef.setup("123666563282",new Point(300,350),true,this);
}
//This function will handle all the 'data' of the DataEvent of my AS3 Facebook Connection Object class
private function fbEvent(event:DataEvent){
if(event.data == "appLogin_Success"){
tracer(String(event.data));
}else if(event.data == "login_Success"){
tracer(String(event.data));
}else if(event.data == "login_Failure"){
tracer(String(event.data));
}else if(event.data == "logout_Success"){
tracer(String(event.data));
}else if(event.data == "logout_Failure"){
tracer(String(event.data));
}else if(event.data == "uploadImage_Success"){
tracer(String(event.data));
//When image had been uploaded, re-setup all those buttons again
setupNormBtn(btns_mc.findImage_mc.cover_mc);
setupNormBtn(btns_mc.publish_mc.cover_mc);
}else if(event.data == "uploadImage_Failure"){
tracer(String(event.data));
//When image had been uploaded, re-setup all those buttons again
setupNormBtn(btns_mc.findImage_mc.cover_mc);
setupNormBtn(btns_mc.publish_mc.cover_mc);
}else if(event.data == "uploadImage_Login"){
tracer("Error: You need to login to Facebook.");
//When image had been uploaded, re-setup all those buttons again
setupNormBtn(btns_mc.findImage_mc.cover_mc);
setupNormBtn(btns_mc.publish_mc.cover_mc);
}else if(event.data == "publish_Failure"){
tracer(String(event.data));
}else if(event.data == "publish_Success"){
}else if(event.data == "uploadImage_Found"){
tracer(String(event.data));
tracer(fbConnectRef.getResult());
imgName_txt.text = fbConnectRef.getResult();
}
}
//Function to loop through all the MovieClip in the btns_mc and pass it into setupBtn();
private function setupBtns(){
var tempMC;
for(var i = 0; i < btns_mc.numChildren; i ++){
tempMC = btns_mc.getChildAt(i);
setupBtn(tempMC);
}
}
//Function to label and setup the given MovieClip into a button
private function setupBtn(mc){
var nameArray = String(mc.name).split("_");
mc.text_txt.text = nameArray[0];
mc.text_txt.autoSize = "left";
mc.cover_mc.width = mc.bg_mc.width = mc.text_txt.width;
mc.cover_mc.height = mc.bg_mc.height = mc.text_txt.height;
setupNormBtn(mc.cover_mc);
}
//This funcation will handle all the click events of all the buttons
override public function clickEvent(event:Event){
if(event.target.name == "cover_mc"){
if(event.target.parent.text_txt.text == "login"){
login();
}else if(event.target.parent.text_txt.text == "logout"){
fbConnectRef.logout();
}else if(event.target.parent.text_txt.text == "publish"){
killNormBtn(btns_mc.findImage_mc.cover_mc);
killNormBtn(btns_mc.publish_mc.cover_mc);
//Change if user had enter any userid
if(isEmpty(publish_txt.text) == false){
/*
If user had entered an userid, it will format it into an array.
The following will be the layout of my XML:
123456 //Facebook Profile ID comes here
10 //The X coordinate of the user on the picture. Value would be ranging from 0-100 percent.
10 //The Y coordinate of the user on the picture. Value would be ranging from 0-100 percent.
.
.
.
*/
var tagArray:Array = String(publish_txt.text).split(";");
var tempXML:XML;
var tempXMLStr:String = "";
for(var i = 0; i < tagArray.length; i ++){
tempXMLStr += "";
tempXMLStr += "" + tagArray[i] + "";
tempXMLStr += "" + Math.round(Math.random() * 100) + "";
tempXMLStr += "" + Math.round(Math.random() * 100) + "";
tempXMLStr += "";
}
tempXMLStr += "";
tempXML = new XML(tempXMLStr);
/*
Sending an request for the uploading of the image and tagging of the users into the image
1st param: where you want to upload the photo to?
2nd param: Message / Description of the Image
3rd param: The XML format of the Userid that I explained earlier.
*/
fbConnectRef.uploadImage("/photos","Image Upload test",tempXML);
}else{
fbConnectRef.uploadImage("/photos","Image Upload test");
}
}else if(event.target.parent.text_txt.text == "findImage"){
//Prompt the AS3 Facebook Connection Object class to look for the image the user wants to upload
fbConnectRef.findImage();
}
}
}
private function login(){
//Passing or requesting for the rights or permission of this Facebook App upon the User's login
fbConnectRef.login("publish_stream,create_event, rsvp_event, sms, offline_access" +
", user_about_me, friends_about_me, user_activities, friends_activities, user_birthday" +
", friends_birthday, user_education_history, friends_education_history, user_events" +
", friends_events, user_groups, friends_groups, user_hometown, friends_hometown, user_interests" +
", friends_interests, user_likes, friends_likes, user_location, friends_location, user_notes" +
", friends_notes, user_online_presence, friends_online_presence, user_photo_video_tags" +
", friends_photo_video_tags, user_photos, friends_photos, user_relationships" +
", friends_relationships, user_relationship_details, friends_relationship_details" +
", user_religion_politics, friends_religion_politics, user_status, friends_status" +
", user_videos, friends_videos, user_website, friends_website, user_work_history" +
", friends_work_history, email, read_friendlists, read_insights, read_mailbox" +
", read_requests, read_stream, xmpp_login, ads_management, user_checkins, manage_pages");
}
//Function to handle all the outputs
private function tracer(tempStr){
resultMC.appendText(tempStr + "\n");
resultMC.verticalScrollPosition = resultMC.maxVerticalScrollPosition;
}
}
}
Click
here to take a look at the example that I had created.
Click
here for the source files of the example that I had created.
