Loading...
You need Flash 8!

Tutorials

Tutorial 1: Simple search

This tutorial will take you through the steps of creating an application which can connect to flickr.com and you will build a very simple application which can trace out details of photos from flickr.com matching a given tag. You can download all the code you will need for the application below:

Now lets take a look at what we are going to create:

You need Flash 8+ to view this example

As you can see, this is a very simple flash file which allows the user to input a tag. It then searches flickr.com for pictures matching that tag and retrieves further information about the first 10 photos. Then it prints this information to screen.

Download the files and extract the contents of the zip file. You will need Flash 8 to open the .fla file (Flashr can also be used with MTASC but we'll stick with the Flash IDE here to keep things simple). You can get a 30 day trial from the Adobe site.

The first thing you will notice when you open the fla is that there is a clip on the Stage. This is associated with our com.kelvinluck.flashr.example.FlashrSimpleSearch class so the constructor of the FlashrSimpleSearch class is automatically run when the clip is loaded. You will also notice the following actionscript:

butGo.onRelease = function()
{
    simpleSearch.doSearch(tag.text);
}
 

This simply means that when the "GO" button (which has an instance name of "butGo") is pressed then the doSearch method on the FlashrSimpleSearch object will be called, passing in the text value from the textfield tag (which you can also see on the stage). All of the "interacting with flickr" magic happens inside the FlashrSimpleSearch class which you will find in the src/com/kelvinluck/flashr/example directory.

We will now step our way through the relevant actionscript from that class:

LogWrapper.getInstance().init();
LogWrapper.getInstance().addTracePublisher();
//LogWrapper.getLog().setLevel(Level.ERROR);
 

The first two lines initialise logging for this application and add a publisher so that we can see the results of the logging in Flash's trace panel. It is a good idea to include these lines in any Flashr application as Flashr uses the LogWrapper to send useful debugging and error messages. You can leave the third line commented out as it is here to see all messages (especially useful when you are just learning Flashr or trying something new) or you can uncomment it so that only error messages are actually shown. You can also add different types of publisher (like my SOSLogPublisher).

_flashr = Flashr.getFlashr();
_flashr.apiKey = "b40e05adf210ad4c4cc4da00f99f4184";
_flashr.cacheQueries = true;
 

Here we create a reference to the Flashr object and set the API Key (you will need to get an API key for every application you build which uses the Flickr API - get them here). We also tell Flashr that we would like it to cache any queries we make. This means if we repeat the same query more than once then Flashr won't bother asking the Flickr servers again, it will just return the same result each time.

_flashrResponse = new FlashrResponse();
_flashrResponse.onPhotosSearch = Delegate.create(this, onPhotosSearch);
_flashrResponse.onPhotosGetInfo = Delegate.create(this, onPhotosGetInfo);
 

Here we create a FlashrResponse object. This will receive notification whenever Flashr receives any responses from Flickr. We are only interested in the responses to a couple of methods so we override those methods on our FlashrResponse and use a Delegate so that the scope of the response is our current FlashrSimpleSearch object.

function doSearch(tags:String)
{
    log("Searching for " + NUM_RESULTS + " photos matching tag '" + tags + "'");
    _photos = [];
    _flashr.photosSearch({tags:tags, per_page:NUM_RESULTS});
}
 

This is the function that is called when you press the "GO" button in the application. First it logs what is happening (the log method is a very simple one for this tutorial which simply writes the passed String to a TextField on stage). Next it initalises _photos as an empty array ready to hold all the returned photos. Then it calls the photosSearch method of our Flashr object, passing in the tag we are searching for and the number of results we want per page. This is where Flashr does it's magic. It goes off and contacts Flickr and parses the returned XML. Once this is done, _flashrResponse.onPhotosSearch is triggered:

function onPhotosSearch(rs:ResultsSet)
{
    _numResults = rs.photos.length;
    log("Loaded data for " + _numResults + " photos out of " + rs.total
        + " matching tag, requesting more details about each photo");
    for (var i:Number=0; i<_numResults; i++) {
        var thisPhoto:Photo = rs.photos[i];
        _flashr.photosGetInfo(thisPhoto.id, thisPhoto.secret);
    }
}
 

As you can see, onPhotosSearch gets passed a ResultsSet. This contains all of the information returned by Flickr in response to your request as well as a handle to the request itself. In this case, we simply loop over all of the photos returned and call photosGetInfo on each one. photosGetInfo is a useful call which gives you pretty much all the available information for a given photo. When there is a response to it, onPhotosGetInfo is triggered on any FlashrResponse objects:

function onPhotosGetInfo(photo:Photo)
{
    log("Loaded detailed data for photo '" + photo.id + "'");
    _photos.push(photo);
    if (_photos.length == _numResults) {
        onAllPhotosLoaded();
    }
}
 

As you can see, here we push a reference to the photo whose information we have just got onto the _photos Array. If we have now got information on all of the photos returned in our call to photosSearch then we are ready to call onAllPhotosLoaded:

log("*************ALL PHOTO INFO LOADED*************");
log(" ");
for (var i:Number=0; i<_photos.length; i++) {
    var thisPhoto:Photo = _photos[i];
    log("Photo " + thisPhoto.id + " :");
    log("  Title: " + thisPhoto.title);
    log("  Description: " + thisPhoto.description);
    log("  Taken: " + thisPhoto.dateTaken);
    log("  Author: " + thisPhoto.owner.username);
    log("  Author ID: " + thisPhoto.owner.nsid);
    log("  Thumbnail: " + thisPhoto.thumbnailUrl);
    log("  Photo page URL: " + thisPhoto.photoPageUrl);
    log("  Tags: " + thisPhoto.getTagsAsStrings());
    log("------------------");
    log(" ");
}
 

This is the point where we would normally start doing something interesting with our Photo data. In this case we simply loop over it and log it all to screen. As you can see, we can directly access information about the photo like the date it was taken or the name of it's author. We now know everything we need to know to display a slideshow. Or some kind of browsing interface. Or whatever you like! This is also the point where we end this first tutorial which has demonstrated how simple it is to retrieve information from Flickr using their API :)