blackcj.com » TwitPic http://www.blackcj.com/blog Cutting edge development with Adobe Flex, ActionScript and AIR Thu, 15 Dec 2011 01:01:57 +0000 en hourly 1 http://wordpress.org/?v=3.3 Display TwitPic Images in Flex & AIR http://www.blackcj.com/blog/2009/02/23/display-twitpic-images-in-air-or-anywhere/ http://www.blackcj.com/blog/2009/02/23/display-twitpic-images-in-air-or-anywhere/#comments Tue, 24 Feb 2009 00:50:37 +0000 Chris Black http://www.blackcj.com/blog/?p=230 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.

PLAIN TEXT
HTML:
  1. <mx:HTTPService
  2.     id="rssParse"
  3.     url="php/twitpic.php"
  4.     result="processResult(event)"
  5.     resultFormat="e4x" />

PLAIN TEXT
PHP:
  1. <?php
  2.   $twitter_feed = 'http://twitpic.com/photos/chrisjblack/feed.rss';
  3.   $rawfeed = @file_get_contents($twitter_feed);
  4.   print $rawfeed; 
  5. ?>

PLAIN TEXT
Actionscript:
  1. import mx.collections.ArrayCollection;
  2. import mx.rpc.events.ResultEvent;
  3.  
  4. [Bindable]
  5. private var _rssResults:ArrayCollection;
  6.  
  7. // Define and use atom namespace.
  8. private namespace atom = "http://www.w3.org/2005/Atom";
  9. use namespace atom;
  10.  
  11. private function processResult(event:ResultEvent):void
  12. {
  13.     var xmlList:XMLList = event.result.channel.item as XMLList;
  14.     for each(var item:XML in xmlList){
  15.         // Formatt the date
  16.         var myDate:String = item.pubDate;
  17.         myDate = myDate.slice(0,22);
  18.        
  19.         // Pull the image id out of the link url
  20.         var imageId:String = item.link;
  21.         imageId = imageId.replace("http://twitpic.com/", "");
  22.        
  23.         // Push the results into our data array
  24.         _rssResults.addItem({title: item.title, date: myDate, id: imageId});
  25.     }
  26. }
  27.  
  28. private function init():void
  29. {
  30.     _rssResults = new ArrayCollection();
  31.     rssParse.send();
  32. }

PLAIN TEXT
HTML:
  1. <mx:VBox width="900" height="500" horizontalAlign="center"> 
  2.     <mx:Label styleName="subTitleText" text="Twitter Feed:" fontWeight="bold" fontSize="16"/>
  3.     <mx:VBox height="450" width="800" verticalScrollPolicy="auto" horizontalScrollPolicy="off" horizontalAlign="center">
  4.         <mx:Repeater id="twitter" dataProvider="{_rssResults}">
  5.             <mx:Text textAlign="center" width="300" text="{twitter.currentItem.date}"/>
  6.             <mx:Text textAlign="center" width="300" text="{twitter.currentItem.title}"/>
  7.             <mx:Image source="http://twitpic.com/show/thumb/{twitter.currentItem.id}.jpg" />
  8.             <mx:Image source="http://twitpic.com/show/full/{twitter.currentItem.id}.jpg" />
  9.         </mx:Repeater>     
  10.     </mx:VBox> 
  11. </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

]]> http://www.blackcj.com/blog/2009/02/23/display-twitpic-images-in-air-or-anywhere/feed/ 2 Post to TwitPic from Adobe AIR http://www.blackcj.com/blog/2008/11/20/post-to-twitpic-from-adobe-air/ http://www.blackcj.com/blog/2008/11/20/post-to-twitpic-from-adobe-air/#comments Fri, 21 Nov 2008 00:19:44 +0000 Chris Black http://www.blackcj.com/blog/?p=103 TwitPic is a service that lets you share photos on Twitter by generating a tiny url to the image being uploaded. The flash.filesystem.File class allows Adobe AIR to post an image to TwitPic. By specifying the username, password and posting method it is possible to submit a query to the TwitPic API.

PLAIN TEXT
Actionscript:
  1. package com.cb.twitpic
  2. {
  3.     import flash.events.DataEvent;
  4.     import flash.events.Event;
  5.     import flash.filesystem.File;
  6.     import flash.net.FileFilter;
  7.     import flash.net.URLRequest;
  8.     import flash.net.URLRequestMethod;
  9.     import flash.net.URLVariables;
  10.    
  11.     public class TwitPic
  12.     {
  13.         private var _file:File;
  14.        
  15.         public function TwitPic()
  16.         {
  17.             _file = new File();
  18.             _file.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA,uploadCompleteDataHandler);
  19.             browse();
  20.         }
  21.         private function browse():void {
  22.             _file.addEventListener(Event.SELECT, fileSelected);
  23.             _file.browse( new Array( new FileFilter( "Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg;*.jpeg;*.gif;*.png" ) ) );
  24.         }
  25.        
  26.         private function fileSelected(event:Event):void {
  27.             var urlRequest:URLRequest = new URLRequest("http://twitpic.com/api/upload");
  28.            
  29.             // The API requires the request be sent via POST
  30.             urlRequest.method = URLRequestMethod.POST;
  31.            
  32.             // Enter a valid Twitter username / password combination
  33.             var urlVars:URLVariables = new URLVariables();
  34.             urlVars.username = TWITTER_USERNAME;
  35.             urlVars.password = TWITTER_PASSWORD;
  36.             urlRequest.data = urlVars;
  37.            
  38.             // The API requires the file be labeled as 'media'
  39.             _file.upload(urlRequest, 'media');
  40.         }
  41.        
  42.         private function uploadCompleteDataHandler(event:DataEvent):void
  43.         {
  44.             var resultXML:XML = new XML(event.text);
  45.            
  46.             // Trace the path to the resulting image tiny url (mediaurl)
  47.             trace(resultXML.child("mediaurl")[0]);
  48.         }
  49.     }
  50. }

This can be used within an AIR application by importing TwitPic and initializing the class.

Sample Code
http://www.blackcj.com/PostTwitPicFromAIR.zip

]]> http://www.blackcj.com/blog/2008/11/20/post-to-twitpic-from-adobe-air/feed/ 17