Tech Tips: Display TwitPic Images in Flex & AIR

Problem:
The TwitPic API does not currently support outgoing requests and the image source from amazon aws contains an AWS AccessKeyId, expiration time stamp, and signature. This would normally require a regular expression to rip the source JPG path out of the HTML. Ripping the source out of the HTML is a bit of a pain and is not a long term solution. It is possible to use the following shortened url to gain access to the full image path using the TwitPic image id.

Solution
Use this url to gain access to the full image: http://twitpic.com/show/full/s0z4.jpg and thumbnail: http://twitpic.com/show/thumb/s0z4.jpg (replace the s0z4 with your image id). Notice that this shortened path returns the longer url that would normally have to be ripped out of the HTML to gain access to the image.

PLAIN TEXT

HTML:

<mx:HTTPService
id="rssParse"
url="php/twitpic.php"
result="processResult(event)"
resultFormat="e4x" />

PLAIN TEXT

PHP:

<?php
$twitter_feed = 'http://twitpic.com/photos/chrisjblack/feed.rss';
$rawfeed = @file_get_contents($twitter_feed);
print $rawfeed;
?>

PLAIN TEXT

Actionscript:

import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
[Bindable]
private var _rssResults:ArrayCollection;
// Define and use atom namespace.
private namespace atom = "http://www.w3.org/2005/Atom";
use namespace atom;
private function processResult(event:ResultEvent):void
{
var xmlList:XMLList = event.result.channel.item as XMLList;
for each(var item:XML in xmlList){
// Formatt the date
var myDate:String = item.pubDate;
myDate = myDate.slice(0,22);
// Pull the image id out of the link url
var imageId:String = item.link;
imageId = imageId.replace("http://twitpic.com/", "");
// Push the results into our data array
_rssResults.addItem({title: item.title, date: myDate, id: imageId});
}
}
private function init():void
{
_rssResults = new ArrayCollection();
rssParse.send();
}

PLAIN TEXT

HTML:

<mx:VBox width="900" height="500" horizontalAlign="center">
<mx:Label styleName="subTitleText" text="Twitter Feed:" fontWeight="bold" fontSize="16"/>
<mx:VBox height="450" width="800" verticalScrollPolicy="auto" horizontalScrollPolicy="off" horizontalAlign="center">
<mx:Repeater id="twitter" dataProvider="{_rssResults}">
<mx:Text textAlign="center" width="300" text="{twitter.currentItem.date}"/>
<mx:Text textAlign="center" width="300" text="{twitter.currentItem.title}"/>
<mx:Image source="http://twitpic.com/show/thumb/{twitter.currentItem.id}.jpg" />
<mx:Image source="http://twitpic.com/show/full/{twitter.currentItem.id}.jpg" />
</mx:Repeater>
</mx:VBox>
</mx:VBox>