88

Technique

Flash CS4

Showcase your images in Flash from your Flickr account by following Anton Mills step-by-step guide

Making connections with Flash and Flickr

For this tutorial we will learn the basics of the Flickr Application Programming Interface (API) and roll it in to an image viewer we can use as our portfolio. For budding Flash developers, the notion of connecting to a websites Application Programming Interface (or API for short) can be an intimidating thought. If youve never used an API before or fancied learning the basics of how to use Flickrs own, then this is for you. Flickrs API is extremely user friendly, comprehensive and, most of all, fun to use! It was the first I ever used, and Id wager that once you get your first few pieces of data returned from the API youll be just as hooked as I am. In this tutorial we will cover getting the API keys youll need, using Flickrs API Explorer and tying Flash and Flickr together with an image viewer. Before you begin though, if you havent already, youll need to create a Flickr account.

01

Sign in to your Flickr account and go to http://tinyurl.com/2f7h2d, the main portal for the extensive Flickr API. Select the Apply for a new API Key link. Youre given a choice of commercial or non-commercial. To use the API (and most APIs, in fact) you usually need a unique key assigned to you. Select non-commercial for this tutorial.

02

Type a description to give a reference that what youre creating is not for commercial use. Complete the form and you will be given a key and a secret store these as they are important in Step 6. Were going to begin by constructing our own queries using the API Explorer to define criteria that we would like to filter by.

Anton Mills A Rich Media developer and freelance writer working in Cardiff, Anton deals primarily with Flash and a new love for the mobile platform with iPhone development. Find out more at www. antonmills.com

On the disc The files that accompany this tutorial can be found in Disc Contents\ Resources\Flickr

Time needed 30 minutes Skills  Constructing Flickr queries  Generating URLs from XML responses  Applying what has been learned to an existing image viewer

Back on the API Documentation page (refer to the URL in Step 1), take a look down the right-hand column at the links available. These are all methods available for retrieving data from Flickr. Click on Flickr.Photos.Search under the Photos header. The new page contains detailed information on all the arguments that this search will accept, so its definitely worth a read.

03

Computer Arts July 2009

www.computerarts.co.uk

ART163.tut_flash2 88

11/5/09 12:32:27 pm

89

When youre ready, click the API Explorer link at the bottom of the page. Make a note of your user ID on this new page, for future reference. Lets make a simple query that returns 15 bridges. Do this by entering bridge in the tags field and also setting the per_pages argument to 15. Finish up by selecting no code signing and clicking call Method.

04

Voila! Youve just constructed a Flickr call easy, huh? As long as everything went smoothly, it will have returned XML data as pictured above. It returns photo nodes for each image, with information such as an ID, owner and title. These values will be used in Flash to load images from your own account. You can also see the URL underneath with the arguments we used contained in the address.

05

06

Open Step6.fla from your cover disc and look at the code in frame 1. Change API_KEY and API_SECRET to the versions you received in Step 2. Copy the previously shown URL into Flash and edit it so it resembles the string on line 42. Were removing the search details from the string to make it easier to change the search in the future.

Change the apiSearchTerm variable to something of your choice. Optionally, you can change the apiUseAccount variable to your user ID. Doing this searches your own account for the search term rather than Flickrs public photos. This is perfect for our portfolio application. Just tag the images you need with something like portfolio and it will retrieve them all.

07

Youve probably noticed that theres no URL for any photos in the returned XML. It gives us all the information we need, the URL just has to be pieced together. Read http:// tinyurl.com/cagwjz, which covers this in detail. Alternatively you can read my own method on line 98 to save time.

08

Test the movie to see that it loads all the images returned by the search by creating Loaders and telling them to load the URLs we pieced together. Give yourself a pat on the back weve learnt a lot in a few short steps. Now open Step11.fla from your disc.

09

www.computerarts.co.uk

Computer Arts July 2009

ART163.tut_flash2 89

11/5/09 12:32:29 pm

90 Technique

10

We are going to finish off by applying the Flickr searching weve learned to an image viewer, to make a portfolio site that you can build on in the future. In your Flickr account, tag a few images you would like to use as portfolio, if you havent already done this.

In this Flash file, you can see some MovieClips placed on the stage. You can edit these to add in your name and the details for this demonstration. For the the purpose of this tutorial, weve put together a 3D image viewer that simply works by being fed URLs and titles.

11

Looking at the code in frame 1, it resembles the core Flickr search code we used in Step 6. Weve just added the image viewer code to the bottom of the document (line 100 onwards). This code creates an instance of the image viewer we just need to tell it what to load.

12

Line 80 is where we retrieve the details of each Flickr image from its ID, title etc. This is the ideal place to tell an image viewer what to load, each loop giving the viewer more images. We will give ours the generated URL from the flickrURLGenerator method and a title. Copy the two lines as pictured above.

13

Once the image viewer has received its data, it performs a mass load and organises the layers but it needs to be told this. Add the line: stackController.initialStackLayout() immediately after the for loop on line 87, and youre ready to test the image viewer with your own Flickr search data.

14

Useful terms
API Application Programming Interface. Secret and Key Your personal identifier to the API. API Explorer The Flickr API web pages used to construct or learn about the available methods. Query Requesting image information from Flickr that matches our given criteria. Response The data Flickr returns after a query. Returned in XML, PHP , REST, SOAP and JSON formats.

The Flickr API is pretty fun to play with. It contains a lot of great features, such as groups and geotagging of images. You can use the Base.fla on the CD as a basis for your own applications, try the other search methods in the API homepage and find other ways of searching, filtering and returning your own data.

15

Computer Arts July 2009

www.computerarts.co.uk

ART163.tut_flash2 90

11/5/09 12:32:29 pm