Tutorial: Pull Twitter Updates into Flash
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:
- Hit a PHP page or javascript function from Flash (we’ll use PHP)
- Parse the XML data that the call returns
- 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.
(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:
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.
Popularity: 38% [?]
(4 votes, average: 4.00 out of 5) 
Loading ...
Email This Post
Our Feeds 
Great tutorial!
Did you know you don’t need the numeric ID though? You can use your username, like http://twitter.com/statuses/user_timeline/UntoldEnt.rss (or .xml if you prefer).
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!
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.
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!
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.
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!
Nice! I’m going to use this tutorial over and over and … well, you get the idea. Thanks Ryan!
Great! Where are you going to use it?
For those of us still stuck in AS 2.0, any takers on this?
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.
Thanks Ryan,
I just had a client ask for this today so I was glad to find this tut!
Glad it was useful!
Ryan, i’d appreciate the code for as 2. you may have just saved my neck with this :P
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.
Will this work for pulling WordPress feeds in to Flash?
No.
Does anyone know how to pull WordPress feeds in to Flash?
Markergreen does.
When I load paste this AS3 in my site, I get a “Unexpected package” error. Any ideas?
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.
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.
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
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.
Hi Ryan
Any help for a graphic designer that knows only how to mash up in AS2 and badly at that!
Cheers
Adam
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
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.
Now I’m getting this…
Error opening URL ‘http://www.myAddress/twitter_status.php?twitterId=myUserName‘
Error #2044: Unhandled ioError:. text=Error #2032: Stream Error. URL: http://www.myAddress/twitter_status.php?twitterId=myUserName
at Main/loadTwitterXML()
at Main()
Ah!
(anything above that says “myAddress/UserName” I actually have typed in my info)
.com was missing in my address causing the problem on the comment above, but now I’m back to the first error message.
Sorry, David – i’m getting confused. Which error is still giving you problems?
You have to set the txt field to render as html
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!
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.
Nope. Setting the twitter_txt field to render as html didn’t fix it.
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?
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?
Any ideas on the “Parameter text must be non-null” error, 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?
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.
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
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.
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! :)
Ok thanks I did everything you said and it works perfectly. XD awesome
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
Scott – read the previous comments on this post. We just went through it all.
- Ryan
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
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.
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?
Sorry here is the URL: http://mediagord.com/biz/twitter/header.html
Gordon – check the other comments. It’s a sandbox issue. Make sure you’re not making the same mistakes we’ve already covered.
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
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.
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!
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?
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
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.
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
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.
Another bug bites the dust! Glad you got it figured out.
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
Never mind!
I didn’t re-name the references in Main.as from “Main” to “MainBTF” .. thanks for the great tutorial!
Hooray! You’re welcome. i’m glad it works!
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?
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?