First Stop-Motion Animation

Posted: April 19th, 2010 | Author: | Filed under: Animation, Media
Tags: , , , , ,

This is fun! I should do more of these. Can you guess what game the audio comes from?

Last Modified: August 4th, 2015

No Comments »

Twitter To Flash With Clickable URLs

Posted: April 13th, 2010 | Author: | Filed under: Tips/Tutorials
Tags: , , , , , , , ,

UPDATE2: Looks like twitter changed something and the XML timeline no longer works.
UPDATE: I will make a new post soon about caching tweets onto your server instead of loading them each time off Twitter, which has usage limits.

Ever needed to display a twitter feed within Flash, while making any links clickable? Here is one way to do just that, using the Twitter API and PHP.

At the time, I was having trouble working with regular expressions (to spot urls) in ActionScript 2. After some digging and testing, I mashed up bits of code that retrieve the raw XML that twitter sends out, create a new simple XML of pure tweets, surround any urls with HTML link tags, then have flash load this new XML. That actually turned out to be a good thing by not having it all in ActionScript, since anything else that can load XMLs can now use the new small XML of tweets.

Let’s get started then.

You can get a detailed XML of tweets from Twitter by going to http://twitter.com/statuses/user_timeline/*USER*.xml?count=#, where *USER* is the account name, and # is the number of tweets to display. You can omit ?count, which will display the same default amount that shows up on a twitter page (20 tweets). For example, Future Shop posts deals here. If you look at the URL, the account name is ‘FS_Deals’, so if we wanted to see the latest 5 tweets from them in XML, we’d go to http://twitter.com/statuses/user_timeline/FS_Deals.xml?count=5.

As you can see, that’s quite a bit messy and quite a lot of data. We just want 5 little tweets.

Now there is some security check in either Twitter or Flash, so you’ll need a proxy script to load in Twitter’s XML. This one seems to work fine (see notes at bottom). I’ll name it ‘kn-twitterproxy.php‘. We’ll modify the final output/echo so that it’s a simple XML of tweets, plus a regular expression for the urls per tweet:

$xml = new SimpleXMLElement($response);
$top = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<tweets type=\"array\">";
 
for ($i = 0; $i < count($xml->status); $i++) {
  $tweets[$i] = $xml->status[$i]->text;
  $tweets[$i] = preg_replace('@(http://([\w-.]+)+(:\d+)?(/([\w/_.]*(\?\S+)?)?)?)@',
               '<a href="$1" target="_blank">$1</a>', $tweets[$i]);
  $inside .= "\n<tweet>\n  <message>".$tweets[$i]."</message>\n</tweet>";
}
$bottom = "\n</tweets>";
 
echo $top.$inside.$bottom;

In the above code, we first load up Twitter’s XML into PHP. $top will be the beginning of our clean XML that’s about to be read by flash. The for loop goes through every tweet, stores the message as an item of the $tweets array, modifies the item by surrounding the url with HTML link code using a regular expression (you could probably add bold or italic tags too), then makes a new <tweet> line for each. $bottom is the end of the clean XML, pretty simple closing of <tweets>. Then the final output gets sent, which looks something like this:

<?xml version="1.0" encoding="UTF-8"?>
<tweets type="array">
  <tweet>
    <message>A Tweet</message>
  </tweet>
  <tweet>
    <message>Another Tweet</message>
  </tweet>
</tweets>

If you want to get other data from Twitter’s XML about the tweet, just add it in as necessary. For example, to have the time, you can add $time[$i] = $xml->status[$i]->created_at;, then in the $inside, you can add <time>”.$time[$i].”\n right before <message>. (Adjust your flash text fields accordingly)

For Flash, you’ll just read in that newly created XML and use it to your needs. In this example, it will be 5 dynamic textboxes.

Make sure each one is set to ‘Render text as HTML‘, plus use variables instead of instance names.

var myXML:XML = new XML();
myXML.ignoreWhite = true;
myXML.load("kn-twitterproxy.php?url=http%3A//twitter.com/statuses/user_timeline/FS_Deals.xml?count=5");
myXML.onLoad = function(success) {
  if (success) {
    var messages = [];
    for (i=0; i < myXML.firstChild.childNodes.length; i++) {
      messages[i] = (myXML.firstChild.childNodes[i].childNodes[0]);
      _root["tweet"+(i+1)] = messages[i];
    }
  }
};

Finally, a little ActionScript to load the XML, and a for loop to make it easier to fill each textbox out.

Here is the result. Grab the example files if you need to as well.

THINGS TO NOTE:
-Line 30 in the PHP proxy seems to give an error regarding ‘safe mode’ on some hosts. Commenting it out seems to work fine. Maybe someone can tell me what it does.
-The ActionScript is in AS2, but AS3 should be very similar as it’s just a simple XML load.
-If you’re adding extra things like the tweet’s time, don’t forget to target the right ‘childNode‘ with ActionScript. If you had first <message>, then <time>, you’d add a line in the for loop that would be something like times[i] = (myXML.firstChild.childNodes[i].childNodes[1]); since is the second node. (<message> being first, it’s childNodes[0])

I hope you have gotten some ideas from this post for whatever twitter integration you’re working on.

Last Modified: October 19th, 2012

7 Comments »

Made A Kuler Theme

Posted: March 25th, 2010 | Author: | Filed under: Media
Tags: , , , ,

So I was poking around kuler and tried the ‘from an image’ theme creator. The Flickr button goes though the current ‘interesting’ photos, and this one caught my eye. After some fiddling with the green, I think it turned out quite nice for a first theme.

Last Modified: May 3rd, 2010

No Comments »