Flickr in Flash
The PhotoItem So far we have our PhotosetItem to represent each photoset, and our ThumbItem to represent each photo within a photoset. Next we need to create the actual PhotoItem. This will display a larger version of the photo, the photo's title, and the photo's description. We'll also include the percentage of the image that has loaded as these will take a little longer to load than a thumbnail. Create a new MovieClip and call it PhotoItem. Export if for Actionscript and set it's class to items.PhotoItem. Ignore the error when you hit OK. Inside your PhotoItem MovieClip, add an instance of the BlankMC MovieClip from your library and give it the instance name img . Create three dynamic TextFields and call them titleTxt, descriptionTxt, and loadedTxt respectively. Position them how you like, keeping in mind that the image we will be loading in will be 500 pixels on it's longest edge. Create a new Actionscript File. Save it in your Portfolio/items folder and call it PhotoItem. Create the class (making sure it extends MovieClip) and import the necessary classes. You will also need to add an object (called p ) in the constructor, see (Listing 10). Note that we've also imported some classes from the AS3 Flickr Library. We will need to use these to get some additional information about the photo object created in the constructor. Next we will create a couple of variables, see (Listing 11). The first is a Loader that will handle the image, and the second is a FlickrService. If you think back to the previous issue's introductory tutorial, the FlickrService to access all of the methods provided by the Flickr API. Now we can starting writing our public PhotoItem function, see (Listing 12). We'll start by setting our FlickrService variable ( _fs ) to Portfolio.FS . This is actual a public static variable that we will create when we write the Document Class of our Portfolio. At the time that a PhotoItem instance is created, the public static variable FS will already be set up and ready to make calls to the API. To save us creating a brand new FlickrService and authenticating it etc, we simply use the existing FlickrService. Next add an eventListener to the _loader to let us know when the image has finished loading, and we'll also add a ProgressEvent that will let us know how much of the image has loaded. Finally we load the photo url into the Loader. Note that we have removed the _s before the . jpg from the url. This is because the default image size without any prefix to the filetype extension, is 500 pixels on it's longest edge – which is what we'll be using in our PhotoItem. Now we can add the Loader to our img MovieClip.
To finish off the function we'll add an eventListener to our FlickrService ( _fs ) that will listen for a result from our next call – the FlickrService.photos.getInfo call. According to the Flickr API Documentation,
we'll need to pass this a photo id which we'll grab from the p object. With that out the way, we can write the function for our preloader, see (Listing 13). This will use a simple equation to work our the
Listing 9. Adding mouse interactivity
private function handleOver(e:MouseEvent):void{ alpha = 0.5; } private function handleOut(e:MouseEvent):void{ alpha = 1; } Listing 10. The PhotoItem class
package items{
import flash.display.MovieClip; import flash.display.Loader; import flash.text.TextField; import flash.net.URLRequest; import flash.events.Event; import flash.events.ProgressEvent; import com.adobe.webapis.flickr.*;
import com.adobe.webapis.flickr.events.*; public class PhotoItem extends MovieClip{
public function PhotoItem(p:Object):void{
}
}
} Listing 11. The PhotoItem variables
private var _loader:Loader = new Loader(); private var _fs:FlickrService; Listing 12. Loading the details into the PhotoItem
public function PhotoItem(p:Object):void{ _fs = Portfolio.FS as FlickrService; _loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded); _loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, imgLoading); _loader.load( new URLRequest("http://static.flickr.com/" + p.server + "/" + p.id + "_" + p.secret + ".jpg")); img.addChild(_loader); _fs.addEventListener(FlickrResultEvent.PHOTOS_GET_INFO, addDescription); _fs.photos.getInfo(p.id); } Listing 13. Adding a preloader to the image private function imgLoading(e:ProgressEvent):void{ loadedTxt.text = (Math.round((e.bytesLoaded/e.bytesTotal)*100)).toString() + "%"; }
03/2009 (5)
41
Made with FlippingBook HTML5