Category: AS3

May 06

How to GetFriends (and influence people?)

Flash/Flex/FDT, Social Media, AS3 10 feedbacks »

The Facebook Actionscript 3.0 API is good. The documentation for the API is lacking. There are also several posts in the forum related to the API which don't really help to clarify how to use certain features of the API. This doesn't make things easier for otherwise clued-up developers who want to get to work with Facebook and Actionscript.

One example of this shroud of mystery is the use of GetFriends. I had posted a question about using this method, only to receive no response. After watching this video from Daniel Dura(thanks Daniel!) I had a good basic application running in Flex. The application logs into Facebook and retrieves the Name and Profile Picture for the logged user.

I suggest you watch the video and follow it through to arrive at the same basic example app - it's nicely done and the app is nice and clean. It also works ;)

I then set about extending it to retrieve the user's friends. Here's what I then did:

Firstly, add a call to a new function, getFriends(), just after assigning the user picture and name text in the complete() function. Your complete function should now look like this:

Code:

private function complete(event:FacebookEvent):void {
    var infoData:GetInfoData = GetInfoData(event.data);
    var user:FacebookUser = FacebookUser (infoData.userCollection.getItemAt(0));
            
    userAvatar.source = user.pic_square;
    userName.text = user.name;
            
    getFriends();
            
}

Please note that we have no error checking in here. See my previous post or the final code for this...

Line 8 above is our new function call.

Then, build the function to use the API method to retrieve all friends for the logged in user (implied by the fact that you made them log in):

Code:

private function getFriends():void {
    var call:FacebookCall = fbook.post(new GetFriends());
    call.addEventListener(FacebookEvent.COMPLETE, gotFriends);
}

OK, no rocket science there... Then code the gotFriends function. This function will be triggered once the friends data has been returned:

Code:

private function gotFriends (event:FacebookEvent):void {
    var getFriendInfoData:GetFriendsData = GetFriendsData(event.data);
    friendArray = new ArrayCollection();
                    
    var len:uint = getFriendInfoData.friends.length;
    var friendIdArray:Array = new Array();
 
    for(var i:uint = 0; i < len; i++) {
        friendIdArray.push(getFriendInfoData.friends.getItemAt(i).uid);
    }
                        
    var call:FacebookCall = fbook.post(new GetInfo (friendIdArray,["first_name", "last_name"]));
    call.addEventListener(FacebookEvent.COMPLETE, gotFriendsInfo);
}

So, a little bit more code in there. Here's what it does: Firstly, we extract the actual friends info data from the event data returned, casting it to the GetFriendsData class as we do so.

The next line, line 3, is referring to a public var declared for our app. make sure you declare this!

We then loop through the returned getFriendInfoData items (it's basically an array) and assign the uid values to the array variable we've just declared, friendIdArray. The aim here is to build up an array of friend uid values for use in the next call: The GetInfo call.

We already used GetInfo to retrieve the name and profile picture for the logged in user. Now we'll use it again to retrieve the names of all friends for whom we've saved a uid in the friendIdArray array. The first parameter into the GetInfo function call is an array of uid values. By passing in the array with all values already in it we can retrieve all names of all friends with one API call - and avoid a timeout or "limit exceeded" error from the API!

We then define an event listener to trigger once all of the information has been returned.

Now code the gotFriendsInfo function:

Code:

private function gotFriendsInfo (event:FacebookEvent):void {
    var getInfoData:GetInfoData = GetInfoData(event.data);
    var len:uint = getInfoData.userCollection.length;
                    
    for(var i:uint = 0; i < len; i++) {
        var userFriend:FacebookUser = FacebookUser (getInfoData.userCollection.getItemAt(i));
        userFriends.text += userFriend.first_name + " " + userFriend.last_name + "\n";
    }
}

Again, cast the event data to the class we need - in this case getInfoData (as per the original tutorial). Then we loop through the results and retrieve the name values and, in this case, output them to a TextArea.

That's it!

There's no real mystery to the GetFriends API method once you've made it work. The exact same approach can then be applied to GetEvents and other API calls, simply ensuring that you cast the event.data returned to the correct class to use it further.

For those who would like the entire code, including the original tutorial contents, here's mine (with added error checking):

Code:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  <mx:Script>
      <![CDATA[
        import com.facebook.errors.FacebookError;
        import mx.messaging.channels.StreamingAMFChannel;
        import mx.collections.ArrayCollection;
        import com.facebook.Facebook;
        import mx.validators.ValidationResult;
        import com.facebook.net.FacebookCall;
        import mx.controls.Alert;
        import com.facebook.events.FacebookEvent;
        import com.facebook.utils.FacebookSessionUtil;
        import com.facebook.data.users.FacebookUser;
        import com.facebook.commands.users.GetInfo;
        import com.facebook.data.users.GetInfoData;
        import com.facebook.data.users.GetInfoFieldValues;
        import com.facebook.commands.friends.GetFriends;
        import com.facebook.data.friends.GetFriendsData;
        
        public var facebookSession:FacebookSessionUtil;
        public var fbook:Facebook;
        public var friendArray:ArrayCollection;
        public var eventsArray:ArrayCollection;
        
        public function login():void {
          facebookSession = new FacebookSessionUtil("<insert key>","<insert secret>",stage.loaderInfo);
          facebookSession.addEventListener(FacebookEvent.WAITING_FOR_LOGIN, waitLogin);
          facebookSession.addEventListener(FacebookEvent.CONNECT, connect);
          
          facebookSession.login();
        }
        
        private function waitLogin(event:FacebookEvent):void {
          var alert:Alert = Alert.show("Click OK when you've logged in", "Logging into Facebook");
          loginStatus.text = "Connecting";
          alert.addEventListener(Event.CLOSE, doClose);
        }
        
        private function connect(event:FacebookEvent):void {
          fbook = facebookSession.facebook;
          var call:FacebookCall = fbook.post(new GetInfo([ fbook.uid ], [ GetInfoFieldValues.ALL_VALUES ]));
          call.addEventListener(FacebookEvent.COMPLETE, complete);
        }
        
        private function complete(event:FacebookEvent):void {
          if (event.success == true) {
            var infoData:GetInfoData = GetInfoData(event.data);
            var user:FacebookUser = FacebookUser (infoData.userCollection.getItemAt(0));
            
            userAvatar.source = user.pic_square;
            userName.text = user.name;
            
            getFriends();
          } else {
            traceError(event);
          }
          
        }
        
        private function getFriends():void {
            var call:FacebookCall = fbook.post(new GetFriends());
                    call.addEventListener(FacebookEvent.COMPLETE, gotFriends);
        }
        
        private function gotFriends (event:FacebookEvent):void {
                    if (event.success == true) {
                      var getFriendInfoData:GetFriendsData = GetFriendsData(event.data);
                        friendArray = new ArrayCollection();
                    
                        trace("getFriendInfoData.friends.length: " + getFriendInfoData.friends.length);
                        var len:uint = getFriendInfoData.friends.length;
                        var friendIdArray:Array = new Array();
 
                        for(var i:uint = 0; i < len; i++) {
              friendIdArray.push(getFriendInfoData.friends.getItemAt(i).uid);
            }
                        
                        var call:FacebookCall = fbook.post(new GetInfo (friendIdArray,["first_name", "last_name"]));
            call.addEventListener(FacebookEvent.COMPLETE, gotFriendsInfo);
                        
                    } else {
            traceError(event);
                    }
                }
 
                private function gotFriendsInfo (event:FacebookEvent):void {
 
          if (event.success == true) {
             var getInfoData:GetInfoData = GetInfoData(event.data);
             var len:uint = getInfoData.userCollection.length;
                      trace("Facebook friends retrieved "+len);
                      
                      for(var i:uint = 0; i < len; i++) {
              var userFriend:FacebookUser = FacebookUser (getInfoData.userCollection.getItemAt(i));
              trace("Facebook Name: " + userFriend.first_name + " " + userFriend.last_name);
              userFriends.text += userFriend.first_name + " " + userFriend.last_name + "\n";
              friendArray.addItem(userFriend.first_name + " " + userFriend.last_name);
                      }
          } else {
            traceError(event);
          }
 
                }  
                
                private function traceError(event:FacebookEvent):void {
          var errObj:FacebookError = FacebookError (event.error);
                    trace("Facebook error "+errObj.errorMsg+", "+errObj.reason);
        }
 
        private function doClose(event:Event):void {
          facebookSession.validateLogin();
          loginStatus.text = "Logged in";
          loginButt.enabled = false;
        }
        
      ]]>
    </mx:Script>
  
  <mx:Button id="loginButt" x="92" y="61" label="login" click="login()"/>
  <mx:Image id="userAvatar" x="174" y="61" width="50" height="50"/>
  <mx:Label id="userName" x="244" y="63" width="129"/>
  <mx:TextArea x="92" y="132" id="userFriends" width="281" height="155"/>
  <mx:Label x="92" y="94" width="74" id="loginStatus"/>
  
</mx:WindowedApplication>

My project is a Flex project for an AIR application. You can basically use this same code for a non-AIR Flex app, or reuse the Actionscript within the <mx:Script> tags within the Flash environment - just make sure you create the UI pieces and rename references in the code accordingly.

Hope this helps to clear up some of the confusion with GetFriends!

Robert



Apr 26

How to debug errors in the Facebook Actionscript API

Flash/Flex/FDT, Social Media, AS3 Send feedback »

I've been playing around a bit more (ahem, I mean researching) with the Facebook Actionscript API today. While testing some code I found myself having a real deja vu experience: Something that worked one minute failed to work the next... this took me back to some of the problems I've had when testing PHP Facebook Apps at peak times - i.e. when the college kids start surfing ;)

The problem I suspected was that good old friend of the Facebook App developer - the timeout.

The Facebook Actionscript API doesn't give us the same sort of error feedback that, say, the URLLoader Class would give us - no IOErrorEvent.IO_ERROR equivalent. What we do have to base our success testing on in the FacebookEvent Class is a success boolean. If it's true the event.data should contain what we're expecting. If not, then we can look into the event.error contents to see what went wrong.

Here's my simple errorTrace function:

Code:

private function traceError(event:FacebookEvent):void {
    var errObj:FacebookError = FacebookError (event.error);
    trace("Facebook error "+errObj.errorMsg+", "+errObj.reason);
}

Note that the event.error is not a String but an Object of type FacebookError. Cast it and you can extract an error message or reason (plus other properties if you wish).

Here's a usage example, retrieving the Facebook user's details once a login has been completed:

Code:

private function connect(event:FacebookEvent):void {
    fbook = facebookSession.facebook;
    var call:FacebookCall = fbook.post(new GetInfo([ fbook.uid ], [GetInfoFieldValues.ALL_VALUES]));
    call.addEventListener(FacebookEvent.COMPLETE, complete);
}
        
private function complete(event:FacebookEvent):void {
    if (event.success == true) {
        var infoData:GetInfoData = GetInfoData(event.data);
        var user:FacebookUser = FacebookUser (infoData.userCollection.getItemAt(0));
            
        userAvatar.source = user.pic_square;
        userName.text = user.name;
        /* ...etc */
    } else {
        traceError(event);
    }  
}

That's it: Four lines of code and a quick check of the success flag and you can save yourself hours of frustration when coding Facebook Actionscript Apps. Don't forget that the Facebook platform can, at times, be more than a bit shaky. Making sure you capture errors is always important anyway. In the context of Facebook application development it is essential for your own sanity as well.

Happy coding

Robert



Mar 31

Actionscript 3.0 Facebook API available!

News, Flash/Flex/FDT, Social Media, AS3 Send feedback »

Adobe and Facebook have announced today that the Actionscript 3.0 API for Facebook is now available. Good news for developers who work in both areas and have had to rely on server-side coding to integrate Facebook data into Flash content or even make the two "Worlds" work together smoothly - take the Apprentice Game which I integrated into Facebook for Legacy Interactive, for example.

The game needed to be integrated into Facebook and to gain the ability to save scores which would then be shown on the global and friends' score tables.

In this case I implemented the scoring logic with Flash Remoting and PHP.

Now this may not be necessary. At the very least, the instantiation of the Facebook API and retrieval of user data can now be done 100% in AS3.0. I've yet to take a look at the API but will be doing so and writing more about it here!

Meanwhile, here's a great video from Daniel Dura, Platform Evangelist at Adobe focusing on the Flash Platform, and lots of other materials available to get you started:

Flash Facebook API
Flash Facebook API - source: Adobe

The Adobe Developer Connection page for the Flash Facebook API can be found here: http://www.adobe.com/devnet/facebook/

Watch this space for more feedback once I've had a chance to try the API out!

Robert



Jan 05

A simple AS3 MVC framework

Flash/Flex/FDT, AS3 6 feedbacks »

MVC (Model, View, Controller) is a design pattern that has it's origins in the days of Smalltalk. It is essentially a simple and very useful pattern, allowing you to cleanly separate out application data and logic (Model), interface (View) and the relationship between the two (Controller) which also ensures that user inputs result in changes to the data.

For those who'd like a more eloquent description and some pictures, here's a link to Colin Moock's explanation of the pattern.

I've used this design pattern a few times in projects of differing sizes and had also spent some time looking at various MVC frameworks. Just about everything I found seemed to be overly complex, or just not in the spirit of the original concept. I believe in simple and straight-forward and think that solutions should be just that.

Colin Moock has a very clean and simple example of an MVC implementation in the book chapter mentioned above, albeit in AS2.

I decided to abandon the search for a framework and build my own, based upon Colin Moock's examples but updated to AS3 and with the addition of a CustomEvent class to provide more flexibility/usability. I also believe in pragmatic and practical, so the framework is intended to be just that.

You can download the framework here (MVCExample.zip)

The package itself can be viewed as two parts:

  • the MVC framework itself - net.turrall.mvc. These classes won't normally need any changes. This code is licensed under the Creative Commons Attribution 3.0 license
  • an example implementation showing how you may use the framework. This includes a document class and subclasses of each of the Model, View and Controller to provide an application-specific implementation. These are stubs that you may use as a starting point for your own use

The example doesn't do anything as dramatic as Colin Moock's Clock example (it doesn't actually DO anything other than instantiate all classes) but it should contain enough comments to help you to get to grips with the concepts involved.

As stated before: This is a simple MVC framework but it is capable of being used in some seriously big and complex projects. It's been used in projects before and has proven to be effective and resilient.

Please feel free to use this framework as you see fit and post any questions in comments and I'll do my best to keep up!



Contact. ©2010 by Robert Turrall
Entries RSS Comments RSS Log in