Create facebook Iframe Application Using flash AS3 API ( Updated Version ).

please like and post your questions : http://www.facebook.com/pages/FlashCS5-Tutorials/176320862386436

After I have received a lot of requests to update the old tutorial on how to create simple flash application, I decided to create new simpler tutorial with a snap shots of all the steps to accomplish this task, so please if you have any question please posted on my above facebook page ;)

please be aware to follow below steps because any mistake may give you an error .

so as many of you know already know the first step is to create facebook new application from the developer application as you can see in the picture below :

• when you click setup new application you need to choose your application name and agree the facebook terms ( I choose abedtutorial) .

in the new updated api  the application ID is the only parameter you only need to know in order to connect to facebook.

• now click the setting and go to the website tap and fill the site url with your application folder URL so for me i fill it with : http://amazingwork.com/abedtutorial/ so i hosted my files inside amazingtalk folder and in the site-domain just fill it with your domain : amazingwork.com .

• then click the facebook integration tap and now you need to fill the convas url and this is the main URL for your application and every body will access your application thru this URL so for our example I fill it with abedtutorial, and then choose Auto-resize in the iframe size .

• finally, click the advance tab and fill it as you can in the image below :

at this stage we finish creating our application setting ;) now we will start Writing our code to connect with facebook.

so since facebook and adobe updated their API, in this tutorial i will add all the libraries you need along with the whole source codes files.

finally, you need to make below changes with your application parameters to make it work :

• in the Net->FacebookUserConnector.as : change the below appid with your App id.
• private var appId:String = "179085902140993";
• in the index.aspx just replace below variables with your app paramters
•   var APP_ID = "179085902140993";
•   var REDIRECT_URI = "http://apps.facebook.com/abedtutorial/";

by changing above two points you can now get User Information from facebook using flash as you can find in the online demo :

http://apps.facebook.com/abedtutorial/

so by this you finish all itis need to connect to facebook :)

----------------------------------------------------------------------

you can download all you need by follow this link below :

Source Files

Read twitter feeds using as3

if you ever tried to read twitter news directly using flash you will find that you will receive a security error cause flash have a sand box security which mean that twitter should add a cross domain file on their server.

in order to make work you need to create php file that load twitter news and send the result back to the flash as xml as below :

• create new php file and name it twitter.php and then copy&paste below code :

<?php
/*Get Content from Twitter
*/

function get_content($url)
{
$ch = curl_init();

curl_setopt ($ch, CURLOPT_URL, $url);
curl_setopt ($ch, CURLOPT_HEADER, 0);

ob_start();

curl_exec ($ch);
curl_close ($ch);
$string = ob_get_contents();

ob_end_clean();

return $string;
}

#usage:
$content = get_content ("http://twitter.com/statuses/user_timeline.xml?screen_name=your twitter name");
echo $content;

• now in your flash create new class name Twitter.as and this class can be called from anywhere in your flash and then parse the result xml

package 
{
   
    import flash.net.*;
    import flash.events.EventDispatcher;
    import flash.events.Event;
    import EventType.EventType;
    public class Twitter extends EventDispatcher 
{
       
        private static var instant = null ;
        private var twitterAddress:String = "twitter.php" ;
        public var xmlTweets:XML = null;
        public function Twitter()
        {
           
        }
        public static function GetInstant():Twitter
        {
            if(instant==null)
                instant = new Twitter();
            return instant;
        }
        public function GetLatestNews()
        {
           
            var twitterLoader:URLLoader = new URLLoader();
                twitterLoader.load(new URLRequest(twitterAddress));
                twitterLoader.addEventListener(Event.COMPLETE, ProcessTweets);

        }
        private function ProcessTweets(e:Event):void
        {
            xmlTweets = new XML(e.target.data);
            dispatchEvent(new Event("TweetsLoaded"));
        }
    }
   
}

• the final step now is to call the twitter class from ur flash and retrieve the result:

var twitter:Twitter = Twitter.GetInstant();

            twitter.addEventListener("TweetsLoaded",TweetsLoaded);

            twitter.GetLatestNews();

 function TweetsLoaded(e:Event)

 {

var twitter:Twitter =  Twitter.GetInstant();

            xmlTweets = twitter.xmlTweets;      

}

Enjoy :)

Passing parameters to event handlers in AS3

After along research I found a simple way where you can simply passing parameters to event hanlder.

in order to do this you need to extend the event class and create new custom class that will handle the parameters arguments as below :

• create new class and name it EventType.as 

package {

// Import class

import flash.events.Event;

// EventType

public class EventType extends Event {

// Properties

   public var arg:*;

   // Constructor

   public function EventType(type:String, bubbles:Boolean = false, cancelable:Boolean = false, ... a:*) {

   super(type, bubbles, cancelable);

   arg = a;

   }

// Override clone

override public function clone():Event{

return new EventType(type, bubbles, cancelable, arg);

};

}

}

now all you need is to dispatch new event using EventType instead of event as below :

dispatchEvent(new EventType("TestHandler",false,false,"Test :)"))

private function TestHandler(e:EventType):void

{

trace( e.arg[0]);

}

hope it save your time :)

Integrate FaceBook Chat Using AS3 and FaceBook fqlQuery and sending messages using facebook post Stream URL.

please like and post your questions : http://www.facebook.com/pages/FlashCS5-Tutorials/176320862386436

First of all you need to read my post on how to create new facebook application using AS3 by follow below  link:

http://as3flashcs5.blogspot.com/2010/12/create-facebook-iframe-application.html

in this tutorial I will show you two Integration point with facebook API:

• getting Friend Status .
• Sending Messages to you friend chat box.

To get your friends status you need to make sure that friends_online_presence and user_online_presence Permissions have been applied to facebook uiserver.php for your application as below sample :

var PermURL = "http://www.facebook.com/connect/uiserver.php?app_id=181390918539668&next=http://amazingwork.com/fbexampletest/index.html&display=page&locale=en_US&perms=friends_online_presence,publish_stream,user_online_presence&return_session=0&fbconnect=0&canvas=1&legacy_return=1&method=permissions.request"

now in order to get your friends status, you need to get the online_presence field from facebook User table using fqlQuery as below :

Facebook.fqlQuery("SELECT uid, online_presence FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1 = --please fill here the uer Id who you need to get his friends status--) ",LoadOnlineUsers)

private function LoadOnlineUsers(response:Object, fail:Object)

{

trace("-->"+fail)

var OnlineString =""

var OnlineUsers:Array = new Array()

for (var key:Object in response)

{

var oUsersOnlineClass:UsersOnlineClass= new UsersOnlineClass();

oUsersOnlineClass.UserID=response[key]["uid"]

oUsersOnlineClass.Status=response[key]["online_presence"]

OnlineUsers.push(oUsersOnlineClass)

}

}

package 

{

public class UsersOnlineClass

{

private var sUserID:String = "";

private var sStatus:String = "";

//Item Constructor

public function UsersOnlineClass()

{

}

//-----------------------------

public function get UserID():String {

            return sUserID;

        }

        

        public function set UserID(x:String):void {

            sUserID = x;    

        }

//-----------------------------

public function get Status():String {

            return sStatus;

        }

        

        public function set Status(x:String):void {

            sStatus = x;    

        }

}

}

as you can in the above code that I have get my frineds online status ( active, offline, null)and store them along with their Ids in an array to use it anywhere in my application .

-----------------------------------------------------------------------------

sending a new chat message from our AS3 application :

this is that hard part where you need to follow precisely below steps :

•  the first step is to use facebook sending messages URL :
• var url:String = "http://www.facebook.com/ajax/chat/send.php?__a=1";
• the second step is to create URL post variable to send them to the above URL :
• var request:URLRequest = new URLRequest(url);

              var requestVars:URLVariables = new URLVariables();
    requestVars.msg_text = "Message Text";
    requestVars.to = "friend ID";
    requestVars.msg_id = "Random Message ID";
    requestVars.client_time = new Date().getTime().toString();
    requestVars.post_form_id = "you can find this field by viewing facebook source page";and for me i am trying now to get this field in adynamic way using javascript function and pass it to flash ( no success until now cuase i am using Iframe :( "

                   request.data = requestVars;

                   request.method = URLRequestMethod.POST;

• now to send these variables to the facebook message center URL we need to use URL Loader :
• var urlLoader:URLLoader = new URLLoader();

urlLoader = new URLLoader();

urlLoader.dataFormat = URLLoaderDataFormat.TEXT;

                urlLoader.addEventListener(Event.COMPLETE, loaderCompleteHandler, false, 0, true);

                urlLoader.load(request);

• all u need now is to handle the result data and decoded the data using JSON serialization to an object
• function loaderCompleteHandler(e:Event):void {

           var sResult:String = e.target.data as String

                   sResult= sResult.replace("for (;;);","")

                   var Res = JSON.decode(d,false)

                   trace(Res)}

I hope this tutorial will help you to enrich your applications,

for any question regarding this tutorial, please visit http://www.facebook.com/pages/Flash-Community/176320862386436.