Twitter Feed Updates

In my spare time, or when I just need a break from a crushing deadline, I’ve been continuing to work on the smaller details on this site. I find the tangent brings me back on task revitalized. But that’s another story about the fruitful benefits of adventuring down rabbit trails.

The original design for the site had my twitter feed just above in the red bar displayed in a slightly nicer, thicker font. I also had some of the other detail of the tweets such as the program used included. I decided to make this portion of the page into a little Flash widget and explore a little interactivity.

The PHP Part: Getting the Feed
The HTML only version which still displays on iPhone, mobile, and non-Flash displays is bring delivered via a simple, easy to use Expression Engine plugin: Twitter Timeline. I’ve also used this plugin on the Oceania Official band website. This plugin benefits from EE caching which is helpful because the Twitter API limits requests from an application to 100 / hours. By default the Twitter Timeline doesn’t expose all of the data provided by the Twitter API.

Because I wanted more data from Twitter, and I didn’t really want to hack up the plugin, I went looking for other PHP solutions. The solution I’m using is from arc90 labs. Using this library written by Matt Williams, it was an easy one two step to get all the data I wanted ready to go for Flash.

The Flash Part: Making it Look Better
Then in Flash I’m using the URLLoader to pull in the php feed which renders nicely formed XML. I decided for right now to create a timer that cycles the last 8 tweets every 12 seconds, or you can click on the text to transition to the next tweet.

The transition is a blur plus a fade tween using GTween. The FLA has a sprite called tweetView with a TextField inside of that. That code for the tweening looks like this:

[actionscript]var unblurTween:GTweenFilter = new GTweenFilter(tweetView,1,{blurX:0,blurY:0},{filterIndex:0,autoPlay:false,ease:Sine.easeIn});
var fadeIn:GTween = new GTween(tweetView,1,{alpha:1},{autoPlay:false,ease:Sine.easeInOut});
unblurTween.addChild(fadeIn,GTween.DURATION);

var blurTween:GTweenFilter = new GTweenFilter(tweetView,1,{blurX:20,blurY:20},{filterIndex:0,autoPlay:false,ease:Sine.easeOut});
var fade:GTween = new GTween(tweetView,0.6,{alpha:0},{autoPlay:false,ease:Sine.easeInOut});
blurTween.addChild(fade,GTween.END);
blurTween.addEventListener(Event.COMPLETE, _onBlurComplete);[/actionscript]

Then on my timer events I call:

[actionscript]unblurTween.play();[/actionscript]

or

[actionscript]blurTween.play();[/actionscript]

You’ll notice I have two components to each tween with the GTweenFilter being the parent to do the blur and the GTween as the child to do the alpha. I found that the parent-child relationship doesn’t work the other way around.

On the blurTween I have a listener on the complete event so I can trigger the text to update. That function in turn calls the unblurTween and the cycle repeats (not shown in the code, fyi).

Also worth pointing out regarding this use of GTween is the timing on the blurTween. The blur has a duration of 1 and the alpha has a duration of 0.6 however they are sequenced to match at the end (GTween.END), so the alpha waits for 0.4 before beginning. I really like how GTween handles this.

btw - if I wanted one tween to happen after the other in a chain I would have used nextTween() instead of addChild().

The Flash Part: Adding the Hyperlinks
The text coming from Twitter needs to be parsed so that urls are live links and twitter names also link to the appropriate profiles on twitter.com. I love to code, but I don’t love to solve problems already solved unless I’m playing Sudoku in order to fall asleep. So, I did a quick Google search and within just a few minutes found exactly what I needed on this blog courtesy of Jim Jeffers (@jimjeffers) and Brian Shaler (@brianshaler).

Future
I want to work out a navigation scheme that is intuitive telling the user that more posts exists and that you may interact with the feed. For now, it’s a little improvement.

Additional Resources
CodeIgniter has a twitter library here: http://codeigniter.com/wiki/CodeIgniter-Twitter_Library/
Zend has a twitter client here: http://framework.zend.com/manual/en/zend.service.twitter.html

AS3 Twitterscript - a Twitter API in actionscript: http://code.google.com/p/twitterscript/


Categories: FlashExpression EnginePermalink