ActionScript Development
percentage of the image file that has loaded. We can do this using the ProgressEvent data. All we need to do is divide the number of bytes that have loaded, by the total number of bytes in the image. Then we multiply it by 100, make sure we round it to the nearest number and
convert it to a string. We'll add the % symbol on the end just so that the number has some sort of relevance. Once the image has loaded, we'll write a quick function to remove the eventListeners and get rid of the preloader, see (Listing 14).
The main reason I've put this in is to give you the option to have something happen once the image has loaded. For example you might want to fade the image in, or maybe even get a little more creative with your transitions! The last step for the PhotoItem class is to write the function that will deal with the FlickrService.photos.getInfo call, see (Listing 15). This simply uses the data (photo.description) returned by the FlickrResultEvent to populate the descriptionTxt TextField . I'm only briefly looking at the Flickr API methods as you can find out more about them in the previous issue, as well as the online at http://www.flickr.com/services/api / where it's thoroughly documented. Also be sure to check out the API Explorer for each method – it really comes in handy! Now that we have written the classes for our PhotosetItem, ThumbItem and PhotoItem, there is only one more component we need to create – the ThumbList. This will simply be used to house the ThumbItems of a Photoset. Once a ThumbItem is clicked and a PhotoItem instance is created, the ThumbList will also house the PhotoItem. The ThumbList Create a new MovieClip and name it ThumbList . Export it for Actionscript and set it's class to items.ThumbList. Click OK and ignore the error. Inside the ThumbList MovieClip, add two instances of the BlankMC MovieClip from your Library. Give them the instance names thumbs and img respectively. The thumbs MovieClip will hold the list of ThumbItems. These will load one after another on the x axis, so will only ever by 75 pixels high. With that in mind, I've positioned my thumbs mc at 0, 0, and my img MovieClip at 0, -350. This will give the larger image room to fit in above my thumbnails. You can lay yours out however you like, you'll just need to remember not to let your thumbnails and your larger image overlap. Create a new Actionscript File. Save it in the Portfolio/items folder and call it ThumbList.as. Create your ThumbList Class (making sure it extends MovieClip) and import the necessary classes, see (Listing 16). Note that we'll need to import the ThumbItem and PhotoItem classes as we will be using them. Instead of passing an object to the constructor of this class, we'll need to pass it an Array. This array will be made up of the photos contained in the selected Photoset. The public ThumbList function will loop through the array provided in the constructor, and then create a ThumbItem instance for each photo in the array, see (Listing 17). Once the ThumbItem instance has been
Listing 14. Removing the preloader
private function imgLoaded(e:Event):void{ removeChild(loadedTxt);
_loader.removeEventListener(Event.COMPLETE, imgLoaded); _loader.contentLoaderInfo.removeEventListener(ProgressEvent.PROGRESS, imgLoading); } Listing 15. Adding the description to the PhotoItem
private function addDescription(e:FlickrResultEvent):void{ descriptionTxt.htmlText = e.data.photo.description; } Listing 16. The ThumbList class
package items{
import flash.display.MovieClip; import flash.events.MouseEvent;
import items.ThumbItem; import items.PhotoItem; public class ThumbList extends MovieClip{
public function ThumbList(photos:Array):void{
}
}
} Listing 17. Adding the thumbnails
public function ThumbList(photos:Array):void{
for ( var i:uint = 0; i < photos.length; i ++){ var t:ThumbItem = new ThumbItem(photos[i]); t.x = 80 * i;
t.addEventListener(MouseEvent.CLICK, loadPhoto); thumbs.addChild(t);
} var photo:PhotoItem = new PhotoItem(photos[0]); img.addChild(photo);
} Listing 18. Loading the photo
private function loadPhoto(e:MouseEvent):void{ while (img.numChildren) img.removeChildAt(0);
var photo:PhotoItem = new PhotoItem(e.currentTarget.PHOTO); img.addChild(photo);
}
03/2009 (5)
42
Made with FlippingBook HTML5