Tutorial: Pull Twitter Updates into Flash

Fwitter

That’s right – i said “Fwitter”

It’s a very simple thing to display your Twitter updates in a Flash widget. We’re going to use the xml feed, because that’s what i’m most comfy with. Unfortunately, you can’t grab the xml feed from Twitter’s site, because they’ve locked their crossdomain policy file … but you can pull down the data using any other damned process. Here’s the basic flow you have to follow:

  1. Hit a PHP page or javascript function from Flash (we’ll use PHP)
  2. Parse the XML data that the call returns
  3. Display the goodies in your Flash app

Here Comes the Code

This is the Actionscript 3 code you’ll need:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
package
{
	/**********************************************
	 * 
	 *  This fun Twitter widget is brough to you
	 *  by Untold Entertainment Inc, and 
	 *  peanut butter!  Peanut butter: a gooey,
	 *  yummy snack that might kill you.
	 * 
	 *  http://www.untoldentertainment.com
	 * 
	 **********************************************/
 
	// Here are all the goodies you're going to need 
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.net.URLLoader;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.events.Event;
 
	public class Main extends MovieClip
	{
		private var twitterXML:XML; // This holds the xml data
 
		public function Main()
		{
			// Put your Twitter username here.  For example, ours is "untoldEnt" :
			var myTwitterID:String = "myTwitterID"; 
			// Put the path to your php script here:
			var twitterPHPScriptPath:String = "http://www.yourdomain.com/thePathToYourPHPScript";
			// Fire the loadTwitterXML method, passing it the url to your Twitter info:
			loadTwitterXML(twitterPHPScriptPath + "?twitterId=" + myTwitterID);
		}
 
		private function loadTwitterXML(URL:String):void
		{
			var urlLoader:URLLoader = new URLLoader();
			// When all the junk has been pulled in from the url, we'll fire finishedLoadingXML:
			urlLoader.addEventListener(Event.COMPLETE, finishLoadingXML);
			urlLoader.load(new URLRequest(URL));			
		}
 
		private function finishLoadingXML(e:Event = null):void
		{
			// All the junk has been pulled in from the xml!  Hooray!
			// Remove the eventListener as a bit of housecleaning:
			e.target.removeEventListener(Event.COMPLETE, finishLoadingXML);
 
			// Populate the xml object with the xml data:
			twitterXML = new XML(e.target.data);
			showTwitterStatus();
		}
 
		private function showTwitterStatus():void
		{
			// Uncomment this line if you want to see all the fun stuff Twitter sends you:
			//trace(twitterXML);
 
			// Prep the text field to hold our latest Twitter update:
			twitter_txt.wordWrap = true;
			twitter_txt.autoSize = TextFieldAutoSize.LEFT;
 
			// Populate the text field with the first element in the status.text nodes:
			twitter_txt.htmlText = twitterXML.status.text[0];
		}
	}
}

And here’s the PHP code:

1
2
3
4
5
6
7
8
9
10
<?php
 
$twitterId = isset($_REQUEST["twitterId"]) ? $_REQUEST["twitterId"] : '';
if( $twitterId == "" ){
                exit;
}
$file = file_get_contents("http://twitter.com/statuses/user_timeline/" . $twitterId  . ".xml" );
echo $file;
 
?>

Et voila! Your latest Twitter update appears in a text box on the stage.

[SWF]http://www.untoldentertainment.com/blog/tutorials/twitter/twitterUpdatesInFlash.swf, 550, 100[/SWF]

(note: this tutorial assumes you have a textField on the stage named “twitter_txt”)

Twitter exposes a pile of other information, including time stamp, post count, number of followers, etc etc that you can play around with. This simple example should get you started, anyway.

You can download the source code here:

twitterUpdatesInFlash.zip

Big thanks to Jeffie G for writing the PHP code to circumvent Twitter’s silly security restriction.

Don’t miss the second part of this tutorial:

Tutorial: Twitter Updates in Flash Part 2

For more Flash AS3 Tutorials and a pile of other useful stuff, check out our Flash and Actionscript 911 feature.

142 thoughts on “Tutorial: Pull Twitter Updates into Flash

  1. Ryan

    Oh hey! That makes it even easier! i must have been given some old intel – the link in the tutorial takes you to a blog post from 2008, which may pre-date that non-numeric capability. i’ll patch up the tutorial tomorrow.

    Thanks for this!

    Reply
  2. Mark

    There’s no problem pulling xml in from another domain? I’ve found I’ve run into the domain/sandbox issues only once I uploaded to the server. Working locally I haven’t run into the sandbox issues.

    Reply
  3. Ryan

    You’re right – no security sandbox stuff when you test this in the Flash IDE. If you double-click the resulting swf, the Flash player will complain. When you upload to the server, you get similar problems – apparently, twitter closed off their crossdomain policy a year ago so that these requests can no longer be made.

    Serves me right for posting a tutorial without adequately testing it! The tutorial is fixed now and everything works. Thanks, Mark!

    Reply
  4. Michael

    There is actually one other potential problem you might run in to here: Twitter only allows you to make 100 calls per hour. I think this is counted from the IP where the swf is hosted, rather than the IP from which it’s run in the browser — I’ve only tried this from a swf embedded in another swf, which was confusing.

    You can get round this by requesting to be whitelisted (more info: http://twitter.zendesk.com/forums/10711/entries/15364 ) or by routing your calls through another app that is already whitelisted, like Yahoo Pipes.

    Reply
  5. Ryan

    Holy crap – i’m getting SCHOOLED here. My next tutorial will be “how to write a trace action in Flash” – i probably won’t screw that up. (No promises.)

    If my traffic ever reaches 100 hits per hour, i might consider this :) Still – i may yet modify the tutorial to pull the data through Pipes. Thanks again for the info!

    Reply
    1. Ryan

      Hey Heath. The PHP remains the same – you just have to do a standard XML setup and call the same function. Let me know if you need to see the code.

      Reply
    1. Ryan

      i’m glad you found it useful, andres! The AS2 code is very similar to the AS3 code – just use the AS2 method for loading XML (check the documentation – very good cut/paste example in there). The method is almost identical.

      Reply
    1. Ryan

      This code is generalized – you have to put in a few extra steps to make it work. Make sure the file is saved as Main.as. Put the proper package path at the top of the Main.as file, making sure that it mirrors the folder structure where the file is kept. Then point to that Main.as file in your Document Class path in Flash. Finally, update the classpath in Flash so it knows where to look for all your as files. You know – all that good stuff.

      Reply
  6. David

    Thanks for the quick response! I did all that you said, but the last part “update the classpath in Flash so it knows…” I don’t quite understand that. Sorry, I’m new to AS3. I appreciate your help.

    Right now, when I test my site it takes a longer to load and then doesn’t work properly. It just keeps replaying the entire timeline, but doesn’t give me any errors.

    Reply
    1. Ryan

      Flash doesn’t give you errors in the browser, unless you have the debug player installed. And even then, the errors are unhelpful.

      Let’s say you have your code in a folder called “classes”. The typical folder structure (i don’t know why) is to go backwards through your url. So in our classes folder, we have these folders:

      classes
      – com
      — untoldentertainment
      — games
      —– kahoots (for example)

      and our Kahoots as files are in the Kahoots folder.

      Every Kahoots as file starts with

      package com.untoldentertainment.games.kahoots
      {
      }

      In Flash, through the Publish Settings menu option, we find the little target icon and set the classpath – that’s the folder that Flash needs to look for if it wants to find all of our as files. We point the classpath to that top-level “classes” folder. Et voila.

      The Document Class in that little field in the Properties panel reads “com.untoldentertainment.games.kahoots.Main”

      Does that help?

      Man – i was stuck on this stuff myself a few months ago. Maybe i should post a tutorial on this?

      – Ryan

      Reply
  7. David

    Yeah, I finally figured that structure out after filtering through some other sites about AS3. But since my Main.as file is in the same folder as the FLA file, it was just: package { }

    When I say “test” I’m testing within Flash, not in browser. I’m still missing something though, because after it finally loads…no Tweets are displayed. But I don’t want to bog down your comments board with my problems, heh. I’m going to keep researching and see if I can figure out the problem. It’s probably some simple problem that I just don’t have knowledge about.

    Thanks for all your help Ryan.

    Reply
  8. Adam

    Hi Ryan

    Any help for a graphic designer that knows only how to mash up in AS2 and badly at that!

    Cheers

    Adam

    Reply
  9. Ryan

    i’ve nearly forgotten all the AS2 i knew! AS2 and AS3 are such different worlds.

    Look for a tutorial that shows you how to hit a php page from Flash in AS2. It’s very simple. The php code itself doesn’t change. You just need to send out the call, and receive it when it comes back in.

    If i’m feeling big-hearted later next week, i may toss up some AS2 code, but please don’t wait on me.

    – Ryan

    Reply
  10. David

    Ryan,

    I got this to work for me using the AS3 from the tutorial files, but eventually I ran into the Sandbox issues. So I tried using the AS3 posted on this page and it gives me an error:

    TypeError: Error #2007: Parameter text must be non-null.
    at flash.text::TextField/set htmlText()
    at Main/showTwitterStatus()
    at Main/finishLoadingXML()
    at flash.events::EventDispatcher/dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at flash.net::URLLoader/onComplete()

    Any ideas?

    Thanks.

    Reply
  11. David

    .com was missing in my address causing the problem on the comment above, but now I’m back to the first error message.

    Reply
    1. Ryan

      Thanks, Craig! i’ll add that change to the tutorial, and i’ll harmonize the tutorial with the download file.

      So, David … does it work yet?? :) This tutorial will be the death of me!

      Reply
  12. David

    This is the error:

    TypeError: Error #2007: Parameter text must be non-null.
    at flash.text::TextField/set htmlText()
    at Main/showTwitterStatus()
    at Main/finishLoadingXML()
    at flash.events::EventDispatcher/dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at flash.net::URLLoader/onComplete()

    Btw, the AS3 on this page and the AS3 in the tutorial files are different… When using the tutorial files, I got it to work, but then I ran into the Sandbox issue. But with the AS3 from the page, I just get the error posted abobe.

    Reply
  13. Scott

    Does the php code need to be placed on the page that has the flash .swf on it or in other words i wanna post my swf on myspace but they dont allow php code so i was wondering if this would still work?

    Reply
    1. Ryan

      The php code is a separate file – ie whatever.php. Since Flash kicks up a fuss when you try to access scripts from outside the security sandbox (usually the site where Flash is embedded), you may not be able to pull it off. If it IS possible from MySpace, you’d keep the php script with your own web host, and create a crossdomain policy file to allow connections from MySpace. i think.

      Anyone wanna jump in here?

      Reply
  14. Ryan

    i was able to reproduce the error in a different file like so:

    var myTxt:String = null;
    txt.htmlText = myTxt; // Parameter text must be non-null

    So obviously, twitterXML.status.text[0]; is coming through as “null”. Maybe try putting some echo statements in the php code to figure out why the php (apparently) isn’t returning any data to you?

    Reply
  15. David

    Wow, ok. I figured out why the PHP wasn’t returning anything, but I’m too embarrassed to tell you why, lol. I fixed that problem. We’ll leave it that.

    So, the code works(without any errors) when I run it within Flash. It displays my status, it’s wonderful. But it doesn’t not run when it’s live up on my site, however. It’s a Flash site and I’m using an addChild to load in this “Flash widget” for the Twitter updates.

    The widget(within my Flash site up on the live web) just sits at “Loading…” but never displays a status. The widget works with my Flash site while testing it within Flash. Weird.

    Reply
  16. Ryan

    Security sandbox errors won’t flare up in the Flash IDE until you deploy stuff online, which is exactly what bit us with this tutorial our first time out.

    Make sure the php file is in the same domain as the swf that calls it. Even a slight difference like http://mywebsite.com vs. http://www.mywebsite.com will enrage the Flash gods.

    – Ryan

    Reply
  17. David

    Ryan, you are awesome. It is officially working. I really appreciate all your help. Thanks a bunch.

    After I fixed my PHP slip up and made sure all of the domains had “www”, then it all worked out.

    Reply
  18. Ryan

    That’s great news! It was a long road, but we made it through!

    The funny thing is that while you were working on it today, i’ve been piecing together my own Flash Twitter updater for the site. Look for it in the Flash nav at the top of the page some time tomorrow. (Or follow me, and i’ll tweet about it! :)

    Reply
  19. Scott

    wait in your flash document did you do any linking to the action script file because my custom document dosen’t do anything when on the web

    Reply
  20. Scott

    ok i almost got his entirely figured out now in comment 22 does untoldentertainment represent your domain name or is that the name of a folder in your domain

    Reply
  21. Ryan

    It’s a working folder. It has nothing to do with what’s going on on your website. You could call it com.monkeybutt.whatever.stuff – it just describes a directory structure.

    Reply
  22. Gordon

    I was wondering. I have this working, but only on my computer, the twitter text doesn’t load when uploaded to my server. I even uploaded your source code to my server and it won’t work on there either. Am I missing something?

    Reply
    1. Ryan

      Gordon – check the other comments. It’s a sandbox issue. Make sure you’re not making the same mistakes we’ve already covered.

      Reply
  23. Will

    Hey Ryan – thanks for the great tutorial!

    I was just wondering about one thing, how to get links clickable (and highlighted) in the flash. I see you managed to do it at the top of your site – would be awesome if you could share how that was done as I’m struggling to find a solution…
    thanks again

    Reply
    1. Ryan

      You use TextField.htmltext instead of TextField.text. In Twitter’s case, you have the entire url right there. Since i’m breaking up the tweet by individual words, i check each word for indexof(“http://”). If the index is 0, then “http://” is at the beginning of the word – therefore, it’s a url. So i just say myTextField.htmltext = “” + word + ““; Something like that.

      Reply
  24. Will

    I hate to say it but i’m stumped as well on the sandbox issue.

    With the original downloads everything worked great from flash, but now I have implemented the php and modified the AS, I can’t get it working on my server. I’ve checked all the above comments and tried adding twitter.com to the crossdomain file, but to no avail. I have also tried variations (http://www, http://, relative path) for the path to the php file. Am I correct in saying that the php stays 100% as it is?

    sorry to be a pain, I get the feeling the comments are dragging on a bit!

    Reply
  25. Ryan

    Will – silly question, but did you put the php code in a separate file, called whatever.php (instead of embedding it in the same page that houses the Flash file)? Do you have the lastest version of php installed on your server? Did you try putting extra echo statements in the php code and calling it directly in the browser url to see if it returns anything? What’s the path to your php file?

    Reply
  26. Will

    Well, both my swf (cs_site.swf) and the php file (twitter.php) are in the same folder http://cooperativestudios.com/dev/
    Does this mean that I should use a relative path ie: ‘ var twitterPHPScriptPath:String = “twitter.php”; ‘
    or absolute ‘ var twitterPHPScriptPath:String = “http://www.cooperativestudios.com/dev/twitter.php”; ‘ ?

    The server is running PHP 5.2.6.
    As for the echo statements, my php is pretty limited, but you mean essentially tracing the variable to get it to show in the browser? I’m not too sure about that but will read up.
    Thanks

    Reply
  27. Gordon

    I as well went through everything with no luck still. My php file echos, my urls all have www. My .swf, .as and .php file are all in the same directory. I put the twitter id in properly and linked to the .php file correctly. What do I need to put for my class path considering they are all in the same spot? Sorry to bug, I’ll keep going over it though on my own.

    Reply
  28. Gordon

    Also, when I try to exit the class path window it says this: A definition for the document class could not be found in the classpath, so one will be automatically generated in the SWF upon import. Is this the problem? I’m not sure what to put in for the path if it is. Everything is located at http://www.mediagord.com/biz/twitter

    Reply
  29. Gordon

    Well lol, you were right, apologies gentlemen, my .as file was main.as instead of Main.as from when I was screwing around with the paths yesterday. Got it to work, thanks everyone.

    Reply
  30. Ben Taylor

    Hi Ryan,

    I’ve got a question for you regarding this tutorial.

    I want to replace the custom “status updates” that I have implemented at the top of my band’s page (www.myspace.com/asweclimb) with twitter updates, but want to use your tutorial to keep the same custom look they have at the moment.

    I need to make 4 of these (1 for each member of the band).. when I change the class name from “Main” to let’s say “MainBTF” and then test, I get this error:

    http://asweclimb.com/error.jpg

    I was going to make 4 identical swf’s.. but with the link to the .as changed to like “MainBTF”, “MainJames” etc etc.. It works fine with “Main” but when I re-save it with “MainBTF” it doesn’t work.. and yes, I re-saved Main.as as MainBTF.as

    can you tell me what’s going wrong?

    Thanks!

    Ben

    Reply
  31. Tom

    Hi,

    I’ve read through this and checked that I’ve done everything previously suggested, but it still won’t load the feed from twitter? I tested through Flash and it worked fine, and have tested the PHP with an echo and that worked but when I try it online it doesn’t display my twitter? I inspected it with Firebug and it came back with a GET crossdomain.xml and this underneath –

    Any ideas what this means, or what I can do to fix it?

    Reply
  32. Gordon Donaldson

    Hi everyone. So I got everything working, but now I’m trying to make it work on a server that is running wordpress. I’ve got everything in this path: http://tag7blog.ch/wp-content/themes/tag7/flash/ But the twitter text will not pop up. I even tried making the path to the classes in flash: http://tag7blog.ch/wp-content/themes/tag7/flash/ and pointing to the parse.php file with http://tag7blog.ch/wp-content/themes/tag7/flash/parse.php. Anyone know what’s going on?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *