Animation and Effects with Macromedia Flash MX 1002004 [Electronic resources] نسخه متنی

Project 10: Building a Dynamic Photo Gallery

This project walks you through the process of building a dynamic photo gallery that allows you to load both thumbnails and full images at runtime without having to add a lot of images to your Library. This means that your visitors can load the gallery quickly, on any number of different connections, and navigate through the gallery without waiting a long time for it to load.

Leave the FLA file at the default dimensions of 550 px (width) by 400 px (height), with a white background. If you change the default settings, change your FLA file to match these dimensions and background color.

Before you start, copy all the finished files and images from the CD-ROM (10/complete/) to your hard drive, and open gallery.fla in the authoring environment. Glance over the finished code for the document (frame 1 of the actions layer), and try testing the file in a browser window (F12). After you are familiar with the intended result, start with Exercise 1.

Exercise 1: Using the MovieClipLoader class

You set up a new Flash document for the image gallery project in this exercise. You add ActionScript that positions thumbnail images in the image gallery, and you use MovieClipLoader to handle loading images into the SWF file. You will also use the Drawing API to draw a rectangle around the images.

1. Create a new Flash document, and rename Layer 1 to actions. Lock the layer to prevent accidentally adding any assets to this layer. Save this file to your hard drive as gallery.fla.

2. Select frame 1 of the actions layer and open the Actions panel. Add the following ActionScript code to the Script pane:

var padding:Number = 10;
var maxThumbWidth:Number = 75;
var maxThumbHeight:Number = 50;
_global.xPos = padding;
_global.yPos = padding;
_global.numImages = 0;

You use this code to position each of the thumbnail images added later in Exercise 2. The first variable, padding, dictates how far you indent the thumbnails from the top and left edges of the Stage, and how many pixels you add between images.

The next two variables, maxThumbWidth and maxThumbHeight, tell the SWF file the dimensions of the thumbnails that you dynamically load. This helps you determine how high each row of images needs to be so that images won't overlap. The next two variables are global variables that will be referred to throughout the ActionScript to position the various thumbnail images on the Stage. The final variable listed in the previous snippet, _global.numImages, is used as a counter that tracks how many thumbnail images you place on the Stage.

To "invoke" simply means that the code will be called when an event happens. You see this term used in discussions about events, listeners, or functions.

3. Select frame 1 of the actions layer. Type the following code below the existing ActionScript in the Actions panel:

var thumbListener:Object = new Object();
thumbListener.onLoadInit = function(target_mc:MovieClip) {
};
var thumb_mcl:MovieClipLoader = new MovieClipLoader();
thumb_mcl.addListener(thumbListener);

This code begins by defining a new object, which you use to intercept events that generate by the MovieClipLoader event handlers. The thumbListener object listens for a single event listener: onLoadInit. Because this event triggers after the target movie clip finishes loading, and already been initialized, you can access the target movie clip's methods and properties (such as _width, _height and _yscale).

4. Modify the code in the onLoadInit listener function (from step 3), and add the following code that's in bold face.

thumbListener.onLoadInit = function(target_mc:MovieClip) {
var boxWidth:Number = target_mc._width;
var boxHeight:Number = target_mc._height;
new mx.transitions.Tween(target_mc, "_yscale",
mx.transitions.easing.Elastic.easeOut, 0, 100, 1, true);
};

Because the onLoadInit listener invokes after the image completely loads and initializes, you can access the movie clip's methods and properties and position the movie clip on the Stage. The code begins by creating two local variables, boxWidth and boxHeight, which you use in the next step to draw a rectangle the same size as the loaded image. Then you use the Tween class to animate the target movie clip on the Stage. The tween stretches the target movie clip's _yscaleProject 9 in Chapter 9. Several sections of Project 9 explain how to use the class in more detail.

5. In frame 1 of the actions layer, add the following code after the snippet from the previous step:

target_mc.createEmptyMovieClip("box_mc",
target_mc.getNextHighestDepth());
target_mc.box_mc._visible = false;
with (target_mc.box_mc) {
beginFill(0xFFFFFF, 30);
moveTo(0, 0);
lineTo(boxWidth, 0);
lineTo(boxWidth, boxHeight);
lineTo(0, boxHeight);
lineTo(0, 0);
endFill();
}
target_mc.onRollOver = function() {
target_mc.box_mc._visible = true;
};
target_mc.onRollOut = function() {
target_mc.box_mc._visible = false;
};
target_mc.onRelease = function() {
full_mcl.loadClip(this._parent.fullImg_str,
full_mc.image_mc);
};

The previous code begins by creating an empty movie clip within the target thumbnail movie clip. You use Flash's drawing methods inside this new movie clip to draw a semitransparent rectangle over the thumbnail. The rectangle is transparent by default and appears only when the mouse hovers over the thumbnail. This makes the thumbnail appear to have a cover overlay, as shown in the following figure (you can change the color value in the previous ActionScript).

Using MovieClipLoader

The MovieClipLoader class allows you to dynamically load SWF or JPEG images into your Flash documents, and also lets you execute blocks of code when you encounter certain events. For example, in this exercise, you create a listener object for the thumbnail movie clip Loader instance. The MovieClipLoader class has the following events:

onLoadStart:
Invokes when the specified image begins to load.

onLoadProgress:
Continually invokes while the image downloads until the onLoadComplete event TRiggers.

onLoadComplete:
Invokes after the image completely downloads to the users local computer, but before the image initializes. Because the image hasn't initialized yet, you are unable to access the target movie clip's methods or properties at this point.

onLoadInit:
Invokes after the specified image has downloaded and been initialized. After this event invokes, you can determine the target movie clip's width and height or go to a different frame using the gotoAndPlay or gotoAndStop methods.

onLoadError:
Invokes when the specified image cannot load. If the MovieClipLoader instance does not load the specified image, this is the only event that triggers.

After you create the new movie clip using the createEmptyMovieClip() method, you set the new movie clip's _visible property to false so the box is initially invisible. Next, you dynamically draw the rectangle using the MovieClip class' beginFill(), moveTo(), and lineTo() methods. You set the rectangle's fill color to white (0xFFFFFF) and its alpha level is set to 30% transparent.

Project 9 in Chapter 9.

You then create three event handler functions for the following events: onRollOver, onRollOut and onRelease. The onRollOver and onRollOut event handlers are responsible for toggling the visibility of the box_mc movie clip, which is the 30% visible white rectangle. This means that when the user hovers her mouse cursor over aExercise 5 in this chapter.