— Forest and the Trees

Flex and Flickr – Quick Start

I decided to do something that no one has thought of before – put flickr images into a Flex app. Here’s a very quick getting started guide. Here’s a link to the final app.

Get the following Adobe libraries:
flickr
corelib

Extract both folders and put into your FlexBuilder3 directory in myDocuments. I am using Flex Builder 3 Beta 2.

Change the names of the folders flickr and corelib (remove the version numbers – make sure “src” is a top level directory)

In Flex, right-click to add a new library. Use default path and name the projects flickr and corelib.

Once the projects are created, right-click on the project, choose Properties. Select FlexBuildPath. Set the main source path to “src”. Click on src to add the classes.

For the flickr library – right-click, select PropertiesClick “Flex Build Path”. Choose “Libraries”. Add the corelib library.

Then create a new project that will use the Flickr API. After creation. Right click on the project, select Properties. Click “Flex Build Path”. Choose “Libraries”. Add both flickr and corelib.

Paste this code into your app…

Actually, the formatting of this gets screwed up in the blog. Go to the app and right click to get source.


< ?xml version="1.0" encoding="utf-8"?>
creationComplete="init();">

< ![CDATA[
import com.adobe.webapis.flickr.Photo;
import com.adobe.webapis.flickr.PagedPhotoList;
import com.adobe.webapis.flickr.events.FlickrResultEvent;
import com.adobe.webapis.flickr.methodgroups.Photos;
import com.adobe.webapis.flickr.FlickrService;
private var myFlickr:FlickrService;
public function init():void{
myFlickr=new FlickrService("5b7c5a6ff6f1863f261d55f6afc391b6");
myLabel.text='searching for dog pictures';
photos=myFlickr.photos;
photos.search('', 'dog');
myFlickr.addEventListener(FlickrResultEvent.PHOTOS_SEARCH, searchComplete);
}
private var photos:Photos;
public function searchComplete(e:FlickrResultEvent):void{
myLabel.text='search complete';
var ppl:PagedPhotoList=e.data.photos as PagedPhotoList;
var o:Object=e.data;
var photoList:Array=ppl.photos;
var photo:Photo=photoList[0] as Photo;
var imageURL:String = "http://static.flickr.com/"+photo.server+"/"+photo.id+"_"+photo.secret+".jpg";
myImage.source=imageURL;
}

]]>




If you run that, you should get a picture of a dog. I included a flickr api key above. But, you should really get your own. Get it here. It’s immediate.

To do more than display a dog, below is a good example w/ source.

Flickr Flex app.

8 comments
  1. kathryn says: November 9, 200711:02 am

    have you been able to get uploading to work? i’m using the same API, with the latest source from the google repository, and always get an invalid signature error, even though i’ve signed my app.

    looks like you’re just getting images, but thought i’d ask just in case you’ve tried uploading too.

  2. Doug says: November 9, 200711:05 am

    Hey Kathryn,

    I haven’t tried uploading yet. sorry

    d

  3. jeff says: December 8, 20078:05 am

    I get an error. Type was not found or was not a compile-tem constant:FlicrkResultEvent. Do you know why?

  4. Doug says: December 11, 20078:27 am

    hmm… sounds like the library isn’t being imported correctly. I just followed these instructions on my new machine and, while the swf compiled and worked, I was getting some compile time errors. New machine is Vista and using Eclipse w/ Flex plug-in. I’ll take a pass tonight and update the instructions.

  5. Doug says: December 26, 20078:55 am

    Finally had some time. Running Vista, using Flex Beta 3 build 3. For some reason it appeared that my src dir was not being saved as my source dir. This time I opened up the projects and was able to set the source and it worked: right-click on library name, select Properties. Choose “Flex Library Build Path” at right. On the “Classes” tab, set “Main source folder” to “src” and stuff worked. If your srd directory does not have the little “+” icon, it means it is not set as the main source dir.

  6. Ted says: March 4, 20086:01 am

    Good example, thanks for posting it, nice easy introduction to using Flickr and Flex which is what I was looking for.

  7. anoop says: June 5, 20085:34 am

    an error occuring like type was not found or a compile timeconstant:FlickrResultEvent…i imports all above code now itself it coming can u help me

  8. abhishek says: September 18, 20081:40 am

    could u tell how can we upload photos to flickr ?
    abhishekchess1@gmail.com
    :)

Submit comment