Massive Learning Experiences from Working with Flash and Twitter API: Loading XML Data From Twitter

by carl schooff on April 14, 2011 · View Comments

in seminar

This movie requires Flash Player 9

See that nifty little Flash/Twitter Widget? It simply loads the profile images of a Twitter user’s followers. It took me about 2 hours to get working 95% and 10 hours to make it 99% bullet proof. The following is a discussion on things you should look out for when not only loading assets or data from Twitter but any third-party source. I guarantee that if you make it through the whole seminar you will learn plenty that will save you hours of your life in the future. This is not my typical “how to” tutorial, but more of a behind the scenes look into all the potential stumbling blocks you can expect to encounter when getting Flash to communicate with any number of services like youtube, facebook, flickr, google maps, rss feeds and many more. Tell the boss you’re busy and get settled in…

Introduction

This project started out as just a little rainy-day experiment. I’ve always been curious about getting Twitter data into Flash. After a bit of time reading through some Twitter docsit became clear that there is an abundance of user data you can get without dealing with any authentication, just a simple request to an xml file. I was instantly excited about the potential to build a little Flash widget to animate various Twitter data.

Although you can build a completely robust, full-featured Twitter app like TweetDeck in Flash, I just wanted to build something more along the lines of a sidebar widget, or something that could add a little social network flair to any old website sidebar. I decided to build something with the following functionality:

1: load xml of all followers as seen here: http://api.twitter.com/1/statuses/followers/snorkltv.xml

2: load image of each follower

3: display and animate image of each follower

I used GreenSock’s LoaderMax to load the xml and all of the images. The GreenSock Tweening Platform handles all the animation. surprise;) The amount of code needed to do this is ridiculously small and easy to implement. LoaderMax has plenty of features to allow you to not only track the loading of 100′s of assets, but also respond when things go wrong via its onProggress, onComplete, onHTTPStatus, onSecurityError, onFail and other callbacks. What I wasn’t expecting initially were the errors that Twitter would give me and how I would deal with them.

The following videos discuss in detail the errors I encountered along the way and how I dealt with them. I will provide some text and code to support the videos but the reason I blab on and on is to avoid writing a whole bunch:)

What Can Go Wrong When Loading XML From Twitter

When making a request to the Twitter API / REST Services you are simply asking for an xml or json file (xml is my data format of choice). When you request a file 3 things usually happen:

1: You get the xml file you requested.

2: You get an xml file describing an error from Twitter.

3: LoaderMax catches some error due to a nonexistent/malformed url, security violation or lack of internet connectivity.

For me the the most troublesome was what I wasn’t expecting regarding #2, the Twitter errors. Fortunately, Twitter’s responses are fairly well documented, but since I easily get frustrated with technical mumbo-jumbo it wasn’t until I encountered these errors randomly that I realized it was worth my time to learn about them.

2 Most Common Errors Twitter Will Report

The user does not exist
It is very possible you are requesting something that Twitter can not provide. In this case Twitter responds with:

  /1/statuses/followers/snorkltv123.xml
  Not found

To see this error visit http://api.twitter.com/1/statuses/followers/snorkltv123.xml and do view source if necessary.

The user’s account is protected and YOU are not authorized
Twitter users can choose to lock their accounts and not make them publicly available. In this case Twitter will return

  /1/statuses/followers/ivanalarcon.xml
  Not authorized

To view this error visit: http://api.twitter.com/1/statuses/followers/ivanalarcon.xml

Twitter Rate Limit
This one was a total hassle and I will devote a whole post to it very soon. Basically your app can only make requests of Twitter 150 times an hour. I had some troubling findings which I will get back to you on.

Keep in mind these errors are NOT caught by LoaderMax because these files DO LOAD. It’s just not the data you want
In my app, once I got a Status OK:200 and LoaderMax fired its onComplete I had to run a check on my xml to see if there was an node in the xml I got. Based on that string I display the appropriate message in my error_mc. For Twitter response errors that I’m not expecting I have a generic “something’s wrong” type message.

The error that sneaks by Twitter AND LoaderMax: User has no followers
I loved this error. It was so much fun. This error had me scratching my head as it had my app stopping dead in its tracks and Flash, Twitter and LoaderMax didn’t report a single thing wrong. This is the kind of thing the genius Information Architects leave out of the requirements and head-strong and eager Flash developers don’t find out about until after the app goes live and the client’s CEO shows it in the boardroom.

In this scenario, my data loaded, it didn’t have an error but the user simply didn’t have any followers so there were no images to load. The app simply thought: “i’m done, it’s all good”. I probably would have never found it had I not spent time blindly typing random made-up usernames.

It’s incredibly hard to test a condition
-you’re not even thinking about
-that’s almost impossible to replicate in a live setting

How on earth does one find a twitter user with no followers? I have no idea other than my “dumb-luck”. Had I thought of this problem in advance I could have made a dummy xml file to load that had no users. Thankfully my good buddy howser (at the time of this writing) has no followers and I can use him as my test case. His xml looks like this if you “inspect element”:

I initially was going to make this one giant post, but it seems I have a ton more to say and I know I wouldn’t have the patience to read it all at once:)

Other Articles In This Series

-Detecting illegal image names prior to loading
-Loading assets from other domains via a php proxy
-Dealing with Twitter’s rate limit

If you experience any errors when using the swf above, please report the username you tried to load and what you experienced. Thanks!

Carl

Post to Twitter Post to Facebook

  • http://www.snorkl.tv/2011/04/how-to-validate-image-url-prior-to-loading-more-learnings-from-flash-and-twitter-project/ How to Validate Image URL Prior to Loading: More Learnings from Flash and Twitter Project

    [...] now that you’ve seen the trouble I had with Loading XML from Twitter, I’m going to talk a bit about making sure the images you try to load have valid file names. [...]

  • http://www.facebook.com/profile.php?id=290301287 Devon Franklyn

    great stuff like always. I just happen to be working on a twitter related project too (you keep doing that lol)

  • http://www.snorkl.tv/2011/04/get-data-into-flash-from-other-domains-with-crossdomain-xml-or-php-proxy-script/ Get Data into Flash from Other Domains with CrossDomain.xml or PHP Proxy Script

    [...] This post is a continuation of my series on “What I Learned from Building the TwitterSpitter“. [...]

  • http://www.snorkl.tv/ carl schooff

    awesome. here is the next one:
    http://bit.ly/fLae6G

    enjoy

    Carl

  • http://www.snorkl.tv/2011/04/understanding-the-twitter-rate-limit-and-how-it-can-impact-your-flash-apps/ Understanding the Twitter Rate Limit and How it can Impact Your Flash Apps

    [...] seminar The final thorn in my side when building the TwitterSpitter was something totally out of my hands. Twitter limits how many times you can request data from its [...]

  • http://www.snorkl.tv/2011/04/fun-and-quick-timelinemax-effect-cluster-bomb/ Fun and Quick TimelineMax Effect: Cluster Bomb

    [...] {}); I was recently asked by a youtube subscriber how I made the animation I used in the TwitterSpitter. Here is a quick code walk-through. I think most of you will do fine just grabbing the source [...]

blog comments powered by Disqus

Previous post:

Next post: