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.
[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:
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.
Hi Ryan,
I am a bit confused and i who’d appreciate any help you might give.
It seems that i don’t have any of the classes required for this project to work. i just cannot find them.
I assume that this question derives from my lack of knowledge in flash, but where do i get the necessary classes.
P.S
i checked in : Local Settings\Application Data\Adobe\Flash CS3\en\Configuration\Classes
and there are just few files under that directories i have net,text,display but none of the files there has the relevant names
Any help would be appreciated
Thanks.
i’m not too sure what your question is, Ron. The only classes you need are the ones we provided in the .zip file at the end of the tutorial. If you’re having a problem with thos import statements, you shouldn’t – any *legal* copy of Flash ships with all of the internal classes you need.
If you’re not pointing your file to a document class (in the Properties panel) but are rather writing your code straight in the Flash IDE, you don’t need import statements. Everything is assumed imported.
Hope that helps.
Hi Ryan,
I am a bit confused and i will appreciate any help you might give.
It seems that i don’t have any of the classes required for this to work. i just cannot find them.
I assume that this question derives from my lack of knowledge in flash, but where do i get the necessary classes.
P.S
i checked in : Local Settings\Application Data\Adobe\Flash CS3\en\Configuration\Classes
and there are just few files under that directories. nothing close to what i need to this project.
Thanks.
Hey Ryan, I’ve got this working in AS3 but has anyone gotten an AS2 version working? Can it show more than the latest tweet?
That’s good news!
The php script should return xml-formatted data with the last 20 tweets, along with information about the tweet time and date, etc.
I’m overlooking something simple here, I know. I’ve input the values for my Twitter, the php file, etc.. possibly in that I have no idea how the package path part works and I’m growing entirely confused. How does the main.as file work with the dynamic text object (I’ve got a movieclip set up in my swf)?
I’m an art guy, who can work html and css just spiffily, but this stuff, after a good 5 hours of poking at it, has fried my brain entirely. Just trying to set up a little flash-based folio and I’ve got EVERYTHING else working but the pretty little twitter bar I’d planned. Any help you can offer for the completely stupid? Syntax of the commands that need to be changed or altered for this code to work? Anything would be helpful.
Also many, many thanks for the commented lines. They DO help me learn bit by bit what all these foreign words mean.
Codetarded – (my new favourite user name)
When you define Main.as as the base class, it’s essentially the same as writing code on the first frame of your main timeline in the Flash IDE, except that you need to follow the proper class structure. That means putting “package {}” at the top, and “public class Main extends MovieClip {}” inside those curlies, etc. You also have to use import statements above the class declaration to tell the compiler which chunks of code you’ll be using. Why waste time and space compiling it if you don’t need it, right?
So because Main.as now acts as a surrogate for the main timeline in your Flash file, you can just refer to your dynamic text field by name. If it’s on the stage, and it exists in the first frame, and it’s got the instance name “heyNonnyNonny”, then you can just say “heyNonnyNonny.text = ‘Hello world'” from within your Main.as file.
Does that help at all?
Uber important: one thing you may have forgotten is to tell Flash that you’re using the Main.as file as the point of entry, instead of the main timeline. You can find the Base Class declaration field in the Flash IDE’s Properties panel.
– Ryan
It’s something to start with certainly! I certainly didn’t tell Flash that Main.as is the point of entry, nor did I have the package right or anything. It’s a huge help and I really appreciate it! Not to mention the fast response!
Fingers crossed that when I jump back into this and try to hammer this out, the results will be better.
Thanks again!
This is something i have been looking for, thanks, but i have spent hours trying to get it to work. I have tried using is as classes and also putting the Main.as in the timeline where the movie clip is.
I keep getting the errors
1114: The public attribute can only be used inside a package
5000:the class ‘Main” must subclass ‘flash.display.MovieClip….
I have kept the code as it appears above on the first line:
package {
because all of my files are within the same folder.
I think that this may be causing the error tho?
Any help would be appreciated
Jamie
The 5000 error means exactly what it says: Main must subclass MovieClip.
public class Main extends MovieClip
The 1114 error probably popped up because your brackets are messed up. package comes first, with its two curly brackets. Inside those brackets are the import statements and the class declaration. The class declaration has two curly brackets. Inside those are the method declarations, field definitions, and the constructor function.
This is all Actionscript 101 stuff, though. If you’re having trouble with the basic structure of a Flash project, like a few other people in this thread, this tutorial probably isn’t the first thing you’ll want to jump into.
– Ryan
Doesn’t work, terrible, terrible excuse as a “tutorial”.
i agree! Hang the author! This place sucks! i’m out of here!
Cool tutorial, how do you get more than one twitter item to show, like say the last 3 tweets, where would you do that in your code?
Take a look at this line:
[0] refers to the first item in the list. Use [1], [2], etc t refer to the other items. So you could just daisy chain them into the same field separated by a space and a comma. That’s one way:
Scour the Internatz for a tutorial on Arrays to figure out how to work with this kind of data.
– Ryan
If any one needs the crossdomain.xml on the twitter server, it is in (some nonsense domain that i edited out – Ryan)
ozgur – i have no idea what you’re trying to say with your link, but it looked pretty spammy so i edited it out. The real Twitter crossdomain file is here, on the Twitter site:
http://www.twitter.com/crossdomain.xml
– Ryan
Ryan- I see that you have no experience loading user icons from twitter to your flash app. Since your flash app is expected to run in a domain in where the twitter user icons are hosted on another domain, you would need my “*NONSENSE*” domain. Your link doesn’ t help anyone, but mine would.
Do you have any solution to load user icons from twitter? I see that you only load and display status. Please, share your experience with the community if you know how to load user icons rather than loading basic text.
ozgur – No need to get hostile. Your original comment didn’t say anything about loading Twitter user icons – it just said “this is the crossdomain.xml on the twitter server”, and then you provided a link to a file that was NOT the crossdomain file on the Twitter server. So my Spidey sense tingled.
What you’re saying is that you want to share a way to load the user icons from Twitter, and since Flash gets sticky about loading images from other domains, you were providing an example of a crossdomain policy file someone could upload to his own server to allow the Flash app to load the Twitter user icon images. Why didn’t you say so? The app i built doesn’t require this, because i’m only ever displaying my own Tweets. But it’s definitely a valuable tip.
Please re-share – it’s a worthwhile point. Sorry for the confusion.
– Ryan
I actually started off with computer science in college but math is for the birds! (tweet tweet), okay, really bad attempt at a pun (or does that even qualify?)…
TY for answering and the info on the array. I’ve been meaning to do more with actionscript 3.0, I have books by Colin Moock sitting around my desk that I’ve been meaning to finish! But with the digital blob available to us all, people ahead of the game and writing how-to’s, kinda saved me time and all, freaking google found you, it’s google’s fault. Appreciate it!
Aaron – You might check out the AS3 Cookbook. i had a lousy time with Moock’s book. You mileage may vary.
– Ryan
Any ideas why my page shows up completely blank when I upload it to the server? It works fine in the IDE, troublesome in the SWF player, and nothing at all on the web server.
I noticed a post early on about this, but didn’t see what was fixed. I converted your tutorial to make myself an AS2 version. Maybe I’ve run into a security issue?
Tommaso – try this:
File>Publish Settings>”Flash” tab
Find the “Local playback security” drop-down, and change it from “Access local files only” to “Acess network only”. It’s all-or-nothing with Flash, so you can’t mix local files with network files.
– Ryan
Wow you’re fast. And a life saver. That worked! Yours is the best tutorial on this out there. Thanks for taking the time and being so supportive!
Tommaso – (phew! Pulled that one out of my wazoo … )
This tutorial would actually help the people that are trying to use it if you would EXPLAIN what to do with each set of scripts instead of just throwing it out there and letting everyone get tons of errors.
Sorry, Brandon – this tutorial presumes a basic knowledge of Flash and PHP. Note that we also didn’t teach you how to use a computer or READ in the tutorial either.
At the risk of sounding retarded, I still don’t get how to do this with AS 2, and I don’t know where to go for the proper “documentation”, as you told andres. Could you point me in the right direction?
Randy – if you’re using CS3, the documentation is right there in Flash. Just look through the Help menu. You need to research how to 1) make a Javascript call from Flash, and 2) how to pull in and parse an XML file. Beyond the official documentation, there are scads of examples online. Those are some search terms to get you started on your merry hunt.
Question: if I already have a document class called Main, can I incorporate this code into my class and it still work or can I rename this as a new class….what extent do I need to go to in order to do that?
Im not the most experienced Flash designer so this question is probably pretty obvious. I am still using AS2. I want to bring my twitter feed into my new flash site. I have a basic understanding of how to do this based on the information you provided. Am I able to design a custom box into my flash site that houses my twitter feeds? Even if it is just a text box over some kind of design element that is consistent with the design of my site? Does this question make sense at all?
Trevor – yep. You can totally do that. Flash is so cool, you can have the text of your Twitter messages march around the edge of a streaming video player carrying little swords if you want to. But that’s beyond the scope of this tutorial.
– Ryan
Hi, Great stuff first of all! I like it alot!
I have a little trouble converting the code for it to work with AS2. I saw you helped a guy out here and was wondering if you could do the same with me?
If you could send me an email it would be great
Appreciate it
Arnold – if i helped him at all, it was by kicking his ass out the door :) i try not to touch AS2 unless absolutely necessary. But if you break this whole thing down into concepts, just research those concepts in AS2 and you should be able to put this together.
im getting your twitter status’ even when i change the code to get my twitter status’ ..what could i be doing wrong?
Ooh – awesome! My website will be twitterised by tonight!
The xml is just plain text right? how do you get the proper links to work from the feed?
Mike – the links are in the xml. So in Actionscript, i scan the Tweet for instances of “http”. i wrap any complete word (a word is a string that is surrounded by a space on either side) with an html a href tag. i make sure the text field is fed htmltext instead of text, and voila – the links are clickable.
I do something similar to link to people’s Twitter names. i look for anything starting with an “@” symbol, and then i wrap that in an anchor tag and link to twitter.com/thatPersonsTwitterName.
Hope that helps.
totally helps…that’s what i was already doing…but was hoping there was html in the xml feed for some reason…
thank you
ryan…i’ve pasted the .php code and uploaded it to my server…when i hit it i get this error..
Parse error: syntax error, unexpected T_VARIABLE in /home/.featherweight/mrtyque/mikemaurerdesign.com/proxy/twitter_updates.php on line 3
any ideas?
Mike – if i knew how to use PHP, i’d help you out in a chicken minute. But uh … i don’t, so here we are.
Pingback: untoldentertainment.com » Tutorial: Clickify Your Twitter Feed in Flash
Pingback: Remco Janssen’s Blog » Blog Archive » Gastles ROC Nijmegen
Hi Ryan
Trying to figure out how to make the tweet links clickable. I read through the comments and I think I get what needs to be done just not sure how to say it in AS3. Basically using an if statement you check each word loaded into the dynamic text box for “http://”? And if that string is found you somehow put anchor tags around the word?
Did anyone ever figure out how to do this is AS2? I’m stuck having to convert a project from AS3 to AS2 and this widget is involved…i’ve looked through the documentation in CS3 and also searched the web but i just don’t have the coding skills to pull it off. Does anyone have anything I could cut and paste?
Victoria- i’ve got an even better idea. Why don’t you just cancel your contract with the client, and i’ll wire your living expenses directly into your bank account?
Seriously – meet me halfway here. It’s not that difficult to learn how to call a URL and parse XML in AS2.
Ryan-
This isnt for pay — I wish! And I’m just the designer who got roped into trying to figure this out, so my coding experience isn’t much… We dont have anyone who teaches this stuff here in Panama, but if it really isnt that difficult, maybe I could figure it out somewhere online…any suggestions?
Victoria – Yep! Just Google “flash xml parsing tutorial”. There’s LOTS of info out there. Make sure you’re looking at an AS2 tutorial.
Also, i take requests for tutorials. If there’s something you want to learn, i’ll definitely consider teaching it here on the site. (But PLEASE don’t make me revert to AS2! :)
– Ryan
Hi Ryan, Thanks a lot for this work. It is working in AS 3.0 but I tried a lot to get it work in AS 2.0 but it is not working. Please provide a solution for us who uses AS 2.0 till now.
-Pavel
Paveloosha – asking me to go back to AS2 is like asking me to build a Mars probe out of hand-churned butter. i decline.
What a AS2 hater!
You know there are still many websites out there built with AS2, therefore having an AS2 version of the Twitter widget is only understandable. Then the widget could be loaded into a Flash website build in AS2…
No problem … build an AS2 solution, and i’ll happily append your code to the end of the article.
hi Ryan, im very excited for getting this done! but really i read all commments a do a lot, even so i have this error on flash, and also if i upload all to the server, the same error, hope you can help me…
TypeError: Error #1088: El marcado del documento que sigue al elemento raíz debe estar bien formado.
any ideas?
thanks
alekbirdie – That’s a malformed xml error, is it not? Are you getting that from the Twitter feed, or have you substituted your own xml file?
Awesome stuff man! Only took me about 30 minutes to customize and inject into my friends site. I appreciate it!
Pingback: Craig Massingham — Task 14
Hunt down the feed for that, i suppose, and pull it in as well!
quick note…. top top comments Ryan ;) made me chortle
Has the source file been updated after this post? I don’t see the point of the php script to get the url when it is already defined in the .as file. Am I missing something here?
Hey Ryan,
I seem to have only one problem:
Scene 1, Layer ‘Actions’, Frame 1, Line 2 1037: Packages cannot be nested.
I really don’t understand this, I’ve copied your code exactly and only changed the Twitter user ID and PHP URL.
Any ideas?
Scratch the last comment…
I now have this problem:
Error opening URL ‘http://twitter.com/statuses/user_timeline/195844548.xml’
Error #2044: Unhandled ioError:. text=Error #2032: Stream Error. URL: http://twitter.com/statuses/user_timeline/195844548.xml
at Main/loadTwitterXML()
at Main()
Seems like Twitter won’t allow me to access the data?
i usually get unhandled stream errors when either my Internet connection or the stream source are down (Twitter problems?), or when i pee with my hands behind my head. Confirm that the address actually works by punching it into the browser (i just did, and it does … )
Hi there, I manged to get this working, thanks very much! great tutorial.
I now want to be able to put another twitter feed into another dynamic text field in the same document. Basically I want to be able to publish several latest tweets by several different dwitter users. I have tried to duplicate parts of the code myself but I’m just guessing.
I’m a graphic design student studying in my final year at university in Bristol England, and I really need to try and crack this for my final project. I only have six weeks left! Please Please Please help me :)
—Joe
Hey, Joe. i got your email too.
i haven’t been in the code in a LONG time, but try something like this:
1. Store a list of the feeds you want to pull from in an array.
2. Loop through the array. With each feed:
i. Pull in the data.
ii. Parse it so that you store all of the tweets as objects in an array.
When you’re done, you’ll have an array filled with tweets from various sources.
Thanks Ryan,
I dont understand how to do that. It would be brilliant, if you have time, to show me how I would write that code.
Thanks Again – Joe
Pingback: Sket på nettet den 16.06.11
I got this error: 1120: Access of undefined property Tweet1.
How to fix!?
I already found the problem :P It’s in a movie clip!
So firstly the clipname and then the Instance name!
Im sorry for spamming ;D
Hello, Neat post. There’s an issue along with your website in internet explorer, could check this? IE nonetheless is the market chief and a huge component to folks will leave out your excellent writing due to this problem.
What’s the issue?
Hey Ryan, love the tut! I’ve only been using AS3 for a few months but seem to be getting the hang of it pretty well. The one problem I keep having is “1120: Access of undefined property of twitter_txt”. I have my text field instance named “twitter_txt”. I’m kinda stuck, any ideas?
Thanks!
So today I downloaded your source code files above, but instead of using the code in the download I used your code from above and plugged in my twitter id and the url for my php file in the Main.as and then tested the “twitterUpdatesInFlash.fla” and I get this:
TypeError: Error #1090: XML parser failure: element is malformed.
at Main/finishLoadingXML()
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at flash.net::URLLoader/onComplete()
Is this saying that it’s not reaching my .php file or Twitter’s XML? Or maybe something altogether different? I’m confooosed . . .
Pingback: How to Add Your Twitter Feed to Your Website
I’m pretty new at this. I was looking at the Main.as and the fla and I didn’t find anything in the fla that connects with the Main.as. I would greatly appreciate any information anyone has.
Solarix – look in the Properties panel, in the “Class:” field.
Hi Ryan, i have done all the process, when i preview the flash file in my computer i can see my account tweets, but in the website (files uploaded) nothing happens. This is the link: http://londongroup.com.mx/orangecup/friends.html
Thanks !!!!!!
Gian
A colleague of mine asked me about a very similar problem, except that in his case, Apple refused to approve his game, and there was nothing he could do about it. i don’t have any solutions yet, but i have my ear to the ground. Please let me know if you solve the problem!
– Ryan
Thanks for the example.
One thing – the sample I downloaded does not use the PHP.
Secondly – the url you are using in the PHP no longer returns a page. Do you have any idea what the new format of the url should be please?
from a browers:
Sorry, that page does not exist
or via the PHP call in Flash:
Warning: file_get_contents(http://twitter.com/statuses/user_timeline/29754661.xml): failed to open stream: HTTP request failed! HTTP/1.0 404 Not Found
in /var/www/02/08/35/xxxxxxxx.info/www/twitter/twitterfeed.php on line 7
Hey there! I just wanted to ask if you ever have any trouble with hackers?
My last blog (wordpress) was hacked and I ended up losing several
weeks of hard work due to no backup. Do you have any methods to stop hackers?