Flex/Flash/Actionscript

My first Flickr Flex app

I can’t believe I’ve gone this long without going through the rite of passage that is the Flickr api Flex app. Well, here it is. I’ve created a new component that extends ViewStack that does the “photo shuffling” effect when you change photos here. I’ll be releasing the source code eventually (at least for the custom ViewStack component), maybe I’ll develop it a bit more and add it to FlexLib.

Things to note:

  • It only loads the first 15 images for whatever you search for, if you keep clicking it will just cycle through them again
  • The thumbnail is loaded first while the larger version of the image is loaded
  • I had to use a PHP proxy to be able to get the images to show up in the reflection and to use bitmap smoothing on them
  • The main component is a ViewStack, I just overrode the setter for selectedIndex. That entire extended ViewStack component is under 100 lines of code.
  • A search for “monkey drinking beer” comes up with a series of pretty amazing photos.

View the app here (or click the screenshot below).

flickapp.jpg

Standard

16 thoughts on “My first Flickr Flex app”

  3. Very slick, and I’m looking forward to seeing source on this one for sure. I did notice though that the label on the next picture bobs around a bit when the pictures are moving around to the left, but not to the right. Kind of strange, anyhow, awesome work!

  6. Since the images are located on a flickr server like farm1.static.flickr.com and there is no crossdomain.xml file on that server (there is a crossdomain.xml for api.flickr.com so you can use the api) that means you can’t get access to the bitmapData of the loaded images when you load them from flickr. This is dumb, but that’s the way it is. So you can load images just fine, but the reflection class copies the bitmapData of the image, so that doesn’t work if you load them straight from the flickr server. I also wanted to set bitmap smoothing to true on the images so the thumbnails don’t look as pixelated, and that also requires access to the bitmapData of the loaded image.

    So the answer is to create a proxy that loads the flickr image so it appears to come from the same domain.

    The PHP proxy page looked like this:

    
<?php
    
	
	if(isset($_GET['file']))
    {
	
        // just check if the file to read is from flickr
        if(preg_match("/^http:\/\/[0-9a-z_]+\.static\.flickr\.com\/[0-9]+\/[0-9a-z_]+\.jpg$/", $_GET['file']))
        {
			header( "content-type:image/jpeg" );
			
			$contents = file_get_contents($_GET['file']);
			
			header( "content-length:" .strlen($contents) );
			
			echo $contents;
        }
    }
?>

    Here’s some discussion on this issue with the flickr farm servers:
    http://www.flickr.com/groups/api/discuss/72157594509936466/

    This is more or less the same as what’s documented here:
    http://www.sephiroth.it/tutorials/flashPHP/cube_effect/

  8. Shaun says:

    I particularly like the viewstack. Look forward to seeing it in flexLib. Any thoughts on when it might make it in there?

    And thanks for posting so much cool stuff by the way.

    Shaun

  9. Doug (a different one) says:

    When Flex loads a dynamically loaded image, it converts it into a bitmap. You can apply smoothing to this converted bitmap, and display that instead of the jpeg–no proxy needed! It took me awhile to find the solution, but the one on this site finally worked: http://blog.739saintlouis.com/2007/02/05/scaling-an-image-with-smoothing/

    Doing it this way is better, because having your server act as a proxy for Flickr eats up your bandwith and kills the whole point of putting your images on Flickr instead of your own server.

    By the way, I am using the Flex Builder 3 beta. I think the example on that site was for flash, so I only used the script, and I also imported mx.core.BitmapAsset, but I’m not sure if that was necessary.

  10. Doug (different one),

    I don’t think you tested the smoothing technique (http://blog.739saintlouis.com/2007/02/05/scaling-an-image-with-smoothing/) on a web server. I tried this method thinking to myself, why would it work just because you smoothed the image? It does not work, its kind of like grinding down bananas and smoking them in a pipe, you same advertised “high” effect. If you test anything locally, Flex will not give you any errors, but post the same application to the web, and you will find the sandbox violation staring you in the face. The only way to get by this error is to proxy the image. If you have a working app and code on a serve, I would love to be proved wrong.

  11. Colin says:

    Can anybody help me port this PHP proxy script to Perl? My Perl is not very good but thats what I have to use and I do not want install PHP as well on this server I am using.

    I am actually not using this for Flickr files but rather just for loading a tiny piece of data from another server.

    Cheers,

    Colin

  13. Colin says:

    oops…my script snippet got cut off:

    $session = curl_init($_GET[‘url’]); // Open the Curl session
    curl_setopt($session, CURLOPT_HEADER, false); // Don’t return HTTP headers
    curl_setopt($session, CURLOPT_RETURNTRANSFER, true); // return contents
    $xml = curl_exec($session); // Make the call
    header(“Content-Type: text/xml”); // Set the content type appropriately
    echo $xml; // Spit out the xml
    curl_close($session); // And close the session

    If anyone has a quick answer then great. But I suppose I DO get paid to figure this stuff out on my own. 🙂

  14. Any chance you’re going to a) release the source and/or b) update this to not use a bitmap proxy?

    I’d love to clean it up & put it on riaforge or something if you don’t have the time.

Comments are closed.