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 http://twitpic.com/show/full/s0z4.jpg and thumbnail http://twitpic.com/show/thumb/s0z4.jpg images (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.

<mx:HTTPService
	id="rssParse"
	url="php/twitpic.php"
	result="processResult(event)"
	resultFormat="e4x" />
<?php
  $twitter_feed = 'http://twitpic.com/photos/chrisjblack/feed.rss';
  $rawfeed = @file_get_contents($twitter_feed);
  print $rawfeed;  
?>
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();
}
<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>	

This allows for Adobe AIR applications to post to (Post to TwitPic from Adobe AIR) and retrieve images from TwitPic.

View Sample / Source Files

Links:
TwitPic Previewer

2 thoughts on “Display TwitPic Images in Flex & AIR

  1. Pingback: Twitpic
  2. hi chris ……..

    thank you so much for my “ah ha” moment

    im new to programming and i find it damn hard to comprehend regular expression. been trying to get the image url with that html link but just couldnt figure out

    when i saw the part where you mentioned i can access the full url, i went “ah ha” …. i could use the replace method to extract the twit message.

    what was odd that i saw this url in http://dev.twitpic.com/docs/thumbnails/ yesterday but it did not stick to me.. until i saw this blog post

    thank you so much chris
    :)

Comments are closed.