ActionScript Development
static.flickr.com plus the photo's server, it's id (in this case the primary photo ID of the Photoset), the photo's secret, and then the size of the photo followed by . jpg . Now we can add the Loader to our img MovieClip. Next, set the titleTxt TextField's text to the ps Object's title parameter, and set the
buttonMode of your PhotosetItem to true. Finally, add some eventListeners to deal with the RollOver and RollOut interactivity of the PhotosetItem. Once the Loader has completed loading the image, it will call the imgLoaded function. This is what we will write next, see (Listing 4).
First we will remove the eventListener. Following this, we will resize the thumbnail. Because the square size that we have loaded is 75x75, and I want mine to be a little larger (115x1115 pixels) we simply set the height to 115, and then set the scaleX property to equal the scaleY property. Finally we create a new Bitmap so that we can smooth the result (it's a good idea to do this if you are scaling dynamically loaded images up and down as they usually pixelate. Our final step in the PhotosetItem is to add the functions to handle themouse interactivity. I'm just going with a simple alpha change, see (Listing 5). The ThumbItem Now that we have created our Photoset cover, or button if you well, we'll need to create the photo Thumbnail item that will represent each photo in the Photoset. The ThumbItem is very similar to the PhotosetItem in that it takes data from an Object and loads an image in. The only different here is that we not resizing it, or adding a title to it. Create a new MovieClip and call it ThumbItem. Export it for Actionscript and make sure it's class is set to items.ThumbItem. Again, ignore the error as we're going to create the class for it shortly. Add an instance of the BlankMC MovieClip to your ThumbItem and give it the instance name img and position it at 0, 0. Once again, you can go nuts with any other graphical elements here, but I'm just going to keep it simple. Moving straight on to the code, create a new Actionscript File, save it in the Portfolio/ items folder and call it ThumbItem . Now create the class (making sure it extends MovieClip) and import the necessary classes. You will also need to add an object (called p ) within the constructor, see (Listing 6). Next we'll add two variables, see (Listing 7). As with the PhotosetItem we'll need a Loader. We'll also to create a public variable called PHOTO. We will use the contents of this object to load the larger image later on. Now inside the public ThumbItem function, set the PHOTO object using the object from the ThumbItem constructor (p). Next, load the thumbnail URL using the same method to construct the url as you did in the PhotosetItem class, see (Listing 8). The only different is that this time we are using the photo's ID, not the photoset's primary photo id. Next we'll add the Loader to our img MovieClip. We won't both listener for the COMPLETE event as we won't need to smooth this image (I'm keeping it at 75x75). Finally, we add the mouse interactivity eventListeners and set the buttonMode of the ThumbItem to true. All we need to do to finish this class off is add two functions that handle the mouse interactions, see (Listing 9). Once again I'll use the totally (un!)original alpha change!
Listing 4. Resizing and Smoothing the thumbnail
private function imgLoaded(e:Event):void{
_loader.removeEventListener(Event.COMPLETE, imgLoaded); _loader.height = 115; _loader.scaleX = _loader.scaleY; var img = e.target.loader.content as Bitmap; img.smoothing = true ;
} Listing 5. Adding mouse interactivity
private function handleOver(e:MouseEvent):void{ alpha = 0.5; } private function handleOut(e:MouseEvent):void{ alpha = 1; } Listing 6. The ThumbItem class
package items{
import flash.display.MovieClip; import flash.display.Loader; import flash.net.URLRequest; import flash.events.Event; import flash.events.MouseEvent; public class ThumbItem extends MovieClip{
public function ThumbItem(p:Object):void{
}
}
}
Listing 7. The ThumbItem variables
private var _loader:Loader = new Loader(); public var PHOTO:Object; Listing 8. Loading the thumbnail into the ThumbItem
public function ThumbItem(p:Object):void{ PHOTO = p; _loader.load( new URLRequest("http://static.flickr.com/" + p.server + "/" + p.id + "_" + p.secret + "_s.jpg")); img.addChild(_loader);
addEventListener(MouseEvent.ROLL_OVER, handleOver); addEventListener(MouseEvent.ROLL_OUT, handleOut); buttonMode = true ;
}
03/2009 (5)
40
Made with FlippingBook HTML5