Sunday, June 26, 2011

Flash / Facebook: Image Tagging in Facebook using Flash V2 (Updated to v1.8.1)

After spending some time playing around the api of Facebook and Flash AS3, I finally manage to do modify the way of doing Image Tagging of the friends of the user in Facebook using Facebook and Flash AS3. In my previous example, I was making more than 1 calls to the Facebook API in order to do image tagging for the photos in Facebook. But in this example, I had managed to reduce the number of calls to the Facebook API in order to perform the same duties as before.


The only changes that I had made were in the Facebook connection class
that I had created to make things easier for myself to make API calls to Facebook.

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.

Thursday, June 16, 2011

Flash / Facebook: Image Tagging in Facebook using Flash (Updated to v1.8.1)

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:
  1. You upload an image to Facebook and upon success uploading, store the image id that was return from Facebook.
  2. 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.

Saturday, June 11, 2011

Flash: Unblocking the barrier between your local Flash files (*.swf) and the Web

I am certain that from time to time we will encounter situations where you have a flash file and upon clicking on a button of the flash file, it should point you to a web page. This would make your life difficult especially when you need to upload the files to a server before you can test the functionalities of the button. I will be teaching you how to unblock the barrier between your local Flash Files (*.swf) and the web.


Let's begin shall we?
  1. Download a Archive file from here.
  2. Next, extract all the files and open up the flash file (*.swf) by either double clicking on the Flash file or by dragging the Flash file into your browser.
  3. Click on the graphic in the Flash file to open a webpage.
  4. If you encounter the following error, do not panic.
  5. In order to fix the problem, you can either click on the "Settings" button on the alert box or visit the following URL before moving on to the next step.
  6. After all the contents of the web page had been loaded, click on the button with the label of "Always allow" before clicking upon the "Edit Locations" drop down menu.
    Note: Please click on the following image to have an idea how the web page will look like.
  7. You should be given a list of items that you can choose and change. Select "Select Location" to change the settings of the file or folder that you want to remove the barrier.
    Note: Please click on the following image to have an idea how the web page will look like in this step.

  8. After selecting the button in the previous step, you will get a popup prompting you to select the folder or file that you would like to remove the barrier. After making a selection, click on the "Confirm" button to apply the changes.
    Note: Please click on the following image to have an idea how the web page will look like in this step.

  9. The results that you are getting should looks similar to the following image.

  10. Now, try re-opening the Flash file(*.swf) that you have downloaded from this blog and you should not have any difficult opening a new web page from the Flash file in your local machine.


Thanks for reading this post and please write your comments here if you still have problem of opening a web page from the Flash files in your local machine.

Friday, June 10, 2011

XML / JSON Reader?

Have you ever encounter the problem of getting a XML file / grabbing a JSON object and you have problem reading the contents? If you have, this is a post for you.


XML
For example, you have a xml file like the following:
How is it possible for a normal user be capable in understanding what information had been stored inside the XML file?

Well, here are a few simple solutions for you.
  1. Get yourself a browser like Mozilla Firefox or Google Chrome.
  2. Drag the XML file into the Mozilla Firefox or Google Chrome browser and voila.
Congratulations. You have got yourself a nicely formatted XML file.

And here are the images for your reference how the XML will look like in a Mozilla Firefox browser and a Google Chrome browser.





Mozilla Firefox Result
Google Chrome Result


JSON
Nowadays for and more API's are using JSON Objects to pass parameters around and Facebook's API would be one of the example of such an API.
Here's an example of how does a Raw JSON object will look like.
Well, here's a simple solution for you people out there.
  1. Get yourself the Mozilla Firefox Browser.
  2. Install this Mozilla Firefox extension known as Firebug.
  3. After all the crazy installation, open up your Mozilla Firefox browser and select 'Option' from the drop-down menu from the top of the browser.
  4. Select 'Firebug' and select 'Open Firebug', when the sub-menu appears.
  5. When the panel for 'Firebug' appears, select the option 'Console' from the top menu of the 'Firebug' panel.
  6. Next copy and paste the raw JSON object next to the '>>>' at the bottom left corner of the panel and press the button 'Enter' from your keyboard.

Congratulations. You should be getting something similar to the following.

Upon clicking on any one of the red/green links, you will be able to see a better view of the contents inside the JSON object, like the following screen grab.

Note: if the panel of 'Firebug' returns a 'SyntaxError: invalid label' error, try adding a '[' add the start of the JSON object and a ']' at the end of the JSON object and try pressiong the button 'Enter' on your keyboard again.

Here's a screen grab for your reference.

I hope that this post will help you to make your life easier in reading XML and JSON object.

Sunday, June 5, 2011

PHP / Google Maps API: Playing around driving directions in Google Maps API

If you are going to build a website that requires frequent access to Google Maps, it will be great if you can help the user to enhance their experience of the website by reducing the number of calls to the Google Maps API and access the data stored in your server if a similar search had been created before? In this example, I will show you how to access the data used to build a driving direction in Google Maps using a few lines of codes in Php.


Here's the php code that I would be using:
<?php 
//Getting the description of the starting point and URLEncode it
$saddr = urlencode($_GET['saddr']);
//Getting the description of the ending point and URLEncode it
$daddr = urlencode($_GET['daddr']);
//Generate the URL of the search
$url = "http://maps.google.com/maps?f=d&source=s_d&daddr=".$daddr."&geocode=&ie=UTF8&output=kml&saddr=".$saddr;

//Checks if the server supports the php function 'file_get_contents'
if (function_exists('file_get_contents')) {
 //Grab the contents of the generated URL and display it on the browser
 $route = file_get_contents($url);
 echo $route;
} else {
 //Error message will be displayed if the server does not support the 'file_get_contents' function
    echo "file_get_contents functions are not available.
\n";
}
?>

And here's a simple html that I had created to point to the above php file:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

A simple test form for php/map-route.php
</head>

Start Point:
Ending Point:
</html>

Click here to see the above example.
You can try entering 'Liang Court, Singapore' in the 1st field and 'Jurong Bird Park, Singapore' in the 2nd field. After clicking on the 'Submit' button, it will bring you to a page providing you with the kml/xml formatted data. Which is what we want XD.

Click here for the source files used in this example.

Next Steps: once you have managed to display the results in the browser, you could either save the kml/xml data in a text file or a database for easy access in the future.

Saturday, June 4, 2011

Flash AS3: Making your clickable Movieclip to show the Mouse Cursor


Moving on from Flash 8 to the latest version of Flash, which was 5.5, one might have encounter difficulties like the following. When you have created a Button with a 'Movieclip' type, you will realize that the button will not show the mouse cursor, even you have added all the Eventlisteners.


In as2, an individual will not encounter the following issue:
button1.onRelease = function(){
 //by adding a onRelease function on a Button or a Movieclip, the mouse cursor will appear automatically.
}

But in as3, you need more than adding just an EventListener:
//By adding this line, you will force the mouse cursor to appear on the 'MovieClip'.
button1.buttonMode = true;
//Adding a click event to a Movieclip or Button and point it to a function once the user trigger the event.
button1.addEventListener(MouseEvent.CLICK, clickEvent);

//This function will be triggered when the user clicks on the above button.
function clickEvent(event:Event){
 //Some actions to be done here.
}

After coding for a few years, I preferred using a function to bind the whole 'Button' and 'MovieClip' with the respective EventListeners
//Setup button1 of type 'MovieClip' with all the basic EventListener and show the mouse cursor
setupNormBtn(button1);
//Setup button2 of type 'Button' with all the basic EventListener
setupBasicBtn(button2);

//Function to call to setup the basic EventListeners of a MovieClip
function setupNormBtn(tempMc){
 tempMc.buttonMode = true;
 tempMc.addEventListener(MouseEvent.ROLL_OVER, rollOverEvent);
 tempMc.addEventListener(MouseEvent.ROLL_OUT, rollOutEvent);
 tempMc.addEventListener(MouseEvent.CLICK, clickEvent);
}

//Function to call to remove the basic EventListeners of a MovieClip
function killNormBtn(tempMc){
 tempMc.buttonMode = false;
 tempMc.removeEventListener(MouseEvent.ROLL_OVER, rollOverEvent);
 tempMc.removeEventListener(MouseEvent.ROLL_OUT, rollOutEvent);
 tempMc.removeEventListener(MouseEvent.CLICK, clickEvent);
}

//Function to call to setup the basic EventListeners of a Button
function setupBasicBtn(tempMc){
 tempMc.addEventListener(MouseEvent.CLICK, clickEvent);
}

//Function to call to remove the basic EventListeners of a Button
function killBasicBtn(tempMc){
 tempMc.removeEventListener(MouseEvent.CLICK, clickEvent);
}

//Function will be called when the user rollover a MovieClip
function rollOverEvent(event:MouseEvent){
 event.target.gotoAndStop("over");
}

//Function will be called when the user rollout a MovieClip
function rollOutEvent(event:MouseEvent){
 event.target.gotoAndStop("up");
}

//Function will be called when the user clicks on the MovieClip or Button
function clickEvent(event:MouseEvent){
 if(event.target == button1){
  //do actions for button1
  trace("button1");
 }else if(event.target == button2){
  //do actions for button2
  trace("button2");
 }
}