4/12/2011

Loading Images from Picasa

This post will show you a quick and easy way of connecting to your online Picasa Web Album. It allows you to load and display your images from your Picasa account. Use Picasa as your image server and content management system! Perfect for a simple online portfolio.

SETUP

Picasa:
Use Picasa Web Albums to create an album and upload pictures to it. Go to album properties to make sure that its visibility is set to 'Public on the web'. You can also 'Organize and reorder' to set the order that the images will be shown.

Next, we will also need the user id and album id. To get that, copy the RSS link in the right panel while viewing the album. The copied link text would be something like
https://picasaweb.google.com/data/feed/base/user/sampleid/albumid/5594794381827112529?alt=rss&kind=photo&hl=en_US Here, you can see that the user id is 'sampleid' and the album id is '5594794381827112529'. Record these as we will need it later for Flash to access.

Picasa Flash API:
We will be using Michal Gron's Picasa Flash API. Download the it here. Place the swc in your project folder. To add it to the library, go to the ActionScript settings of the project FLA. Then under Flash tab, go to 'Script: Settings'. In advanced ActionScript Settings, go to "Library path" tab, and add the swc you just downloaded. (click following pic to see steps)

USAGE

Before coding anything, we need to load the policy file that allows flash to load from the Picasa servers. Use the following code and url: import flash.system.Security; var path:String="http://photos.googleapis.com/data/crossdomain.xml"; Security.loadPolicyFile(path);
With that out of the way, let's get our pictures. The PicasaService class is responsible for making the connection to your Picasa Album. It has quite a few properties, but the ones that matter for now are imgmax, thumbsize, max_results, and photos.

imgmax and thumbsize both determine the maximum dimension of the image and the thumb. They are strings because you can append "u" or "c" to the a number to tell Picasa to fetch an uncropped or cropped image. I.E. For a 200x100 image, "100u" retrieves the full image with dimensions 100x50 and "100c" retrieves a cropped image that's 100x100.

max_results limit the maximum images to get from the album.

Here's the code for instantiating a PicasaService: import sk.prasa.webapis.picasa.PicasaService; var service:PicasaService = new PicasaService(); service.imgmax="500u"; service.thumbsize="100c"; service.max_results=25; The PicasaService can also be used to get a lot of other information - like tags, community, albums, comments, etc. For now, we will just concern ourselves with getting the photos. The photos object in PicasaService is a class that handles getting the pictures from Picasa. Here is how to get all pictures from an album: import sk.prasa.webapis.picasa.PicasaResponder; import sk.prasa.webapis.picasa.events.PicasaDataEvent; var responder:PicasaResponder=service.photos.list(userid,albumid); responder.addEventListener(PicasaDataEvent.DATA,receivedData); userid and albumid are the ids for your picasa album that you noted during the setup section. PicasaResponder handles the response. Add an PicasaDataEvent.DATA listener to it to know when the images data are received and ready for use. import sk.prasa.webapis.picasa.objects.feed.IAtom; function receivedData(picsDataE:PicasaDataEvent):void{ var picsData:IAtom=picsDataE.data; // picsData.entries is the array of Photos var l:int=picsData.entries.length; for(var i:int=0;i<l;i++){ // media contains all the information of the photo trace(picsData.entries[i].media.thumbnails[0].url); trace(picsData.entries[i].media.content.url); trace(picsData.entries[i].media.description); } } Now that you have the urls to the images, you can use it to load them with Loader or your favorite content loader.

The data received contains a great deal of information with a very complex structure. Unfortunately there is very limited documentation and the best way to discover the information available to you is by using an object tracer. This is what I use, and it has been tremendously helpful in understanding this API. Code hinting and looking into the classes yourself also helps.

HERE'S THE CODE ALL TOGETHER import flash.system.Security; import sk.prasa.webapis.picasa.PicasaService; import sk.prasa.webapis.picasa.PicasaResponder; import sk.prasa.webapis.picasa.events.PicasaDataEvent; import sk.prasa.webapis.picasa.objects.feed.IAtom; var userid:String="hhhenryhhh"; var albumid:String="5594794381827112529"; var path:String="http://photos.googleapis.com/data/crossdomain.xml"; Security.loadPolicyFile(path); var service:PicasaService = new PicasaService(); service.imgmax="500u"; service.thumbsize="100c"; service.max_results=25; var responder:PicasaResponder=service.photos.list(userid,albumid); responder.addEventListener(PicasaDataEvent.DATA,receivedData); function receivedData(picsDataE:PicasaDataEvent):void{ var picsData:IAtom=picsDataE.data; var l:int=picsData.entries.length; for(var i:int=0;i<l;i++){ trace(picsData.entries[i].media.thumbnails[0].url); trace(picsData.entries[i].media.content.url); trace(picsData.entries[i].media.description); } } Here's a simple image gallery that loads from my Picasa web album using the code above.

7 comments:

  1. this is so cool!!!! looking forward for the code.
    the dog is so adorable. who does it belong to?

    ReplyDelete
  2. Very cool! Thanks for the info.

    ReplyDelete
  3. Place the swc in your project folder. To add it to the library, go to the ActionScript settings of the project FLA.

    I thougt adding the swc to the same folder would be enough. But no, I received an error: 1046: Type was not found or was not a compile-time constant: PicasaDataEvent.

    After ading the swc to the library everything was ok. Thanks for the TUT.

    ReplyDelete
  4. Hello,
    I get the following error when it try use the above code to access my picasa album, can you please point out as to where or what i am missing?

    GET) http://photos.googleapis.com/data/feed/api/user/1024xxxxxx06745l/albumid/56xxxxx623294913
    Error opening URL 'http://photos.googleapis.com/data/feed/api/user/1024xxxxxx06745l/albumid/56xxxxx623294913?imgmax=500u&kind=photo&start%2Dindex=1&max%2Dresults=25&thumbsize=100c'
    Error #2044: Unhandled ioError:. text=Error #2032: Stream Error. URL: http://photos.googleapis.com/data/feed/api/user/1024xxxxxx06745l/albumid/56xxxxx623294913?imgmax=500u&kind=photo&start%2Dindex=1&max%2Dresults=25&thumbsize=100c
    at sk.prasa.webapis.picasa.core.receiver::GetFeedReceiver()
    at sk.prasa.webapis.picasa.core::Photos/list()
    at album_fla::MainTimeline/frame1()

    ReplyDelete
    Replies
    1. This error comes because you are checking it locally. Once you upload this to server then it will work fine.

      Delete
  5. something's wrong with the url -> 1024xxxxxx06745l

    shouldn't have those xxxxxx

    ReplyDelete