Flickr in Flash
1 The static title and description 2 The Photosets with their thumbnails and titles 3 The Photo with it’s title and description 4 Thumbnails of the photos Now that we know what our design will look like, we can take a closer look at the individual components. The PhotosetItem The PhotosetItem will simply display the thumbnail for the primary photo of that album, and the title of the album. The user will simply click on the PhotosetItem to load the list of images held within that Photoset. To do this we're going to need at the very least, a blank MovieClip that we can load the thumbnail into, and a dynamic text field to display the title. With that in mind, create a new MovieClip instance. Name it PhotosetItem and tick the Export for Actionscript box. Set the path to items.PhotosetItem and click OK. This will throw an error as it won't be able
to find that class file but that's fine as we are going to create it soon so for now, just ignore the error. Now inside your PhotosetItem MovieClip, draw a dynamic TextField. Give it the instance name of titleTxt . Create a blank MovieClip in your library and name it BlankMC . Add an instance of it to your PhotosetItem MovieClip. Position them however you like, and add any other design elements that you want to include. Now it's time to add the code for the PhotosetItem. Create a new Actionscript File and save it in the Items folder that you create inside your Portfolio folder. Name it PhotosetItem.as. Start by creating a class that extends the MovieClip class. You'll need to import the necessary classes too. When constructing the instance of the PhotosetItem we'll need to pass it an object. This object will be obtained from Flickr and will contain all of the information a Photoset holds. We use this information to populate the title and the image, see (Listing 1).
Next we'll need to set up some variables, see (Listing 2). The first is a Loader that we will use to load the Photoset thumbnail image into. The second is an ID. This will be set from the data inside the Object that is passed when the instance of the PhotosetItem is constructed. We can use this ID later on when we request photos from a photoset. For ease of use, we'll set this as a public variable. (If you feel like encapsulating the class you can go ahead and use a getter/setter here but for this example, I'll stick with a public variable). Once we've set up our variables, we can get started on the public PhotosetItem function, see (Listing 3). First of all we'll use the id parameter from the Photoset Object (ps) to set our public ID variable. Then we'll add an eventListener to the contentLoaderInfo of our Loader ( _loader ) that will call a function named imgLoaded when the COMPLETE event is fired. Now we can load the thumbnail url into our Loader. As per the last issue's tutorial, image urls in Flickr are made up of
Listing 1. The PhotosetItem Class
package items{
import flash.display.MovieClip; import flash.display.Loader; import flash.display.Bitmap; import flash.text.TextField; import flash.net.URLRequest; import flash.events.Event; import flash.events.MouseEvent; public class PhotosetItem extends MovieClip{
public function PhotosetItem(ps:Object):void{
}
}
} Listing 2. The PhotosetItem Variables
private var _loader:Loader = new Loader(); public var ID:String; Listing 3. Loading the details into the PhotosetItem
public function PhotosetItem(ps:Object):void{ ID = ps.id; _loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded); _loader.load( new URLRequest("http://static.flickr.com/" + ps.server + "/" + ps.primaryPhotoId + "_" + ps.secret + "_m.jpg")); img.addChild(_loader); titleTxt.text = ps.title; buttonMode = true ;
addEventListener(MouseEvent.ROLL_OVER, handleOver); addEventListener(MouseEvent.ROLL_OUT, handleOut);
}
03/2009 (5)
39
Made with FlippingBook HTML5