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

Loading and Displaying Images

The following exercises create the thumbnails for the gallery. This is where you space and arrange the movie clips that will contain each thumbnail, define which images you want to load, and load the images into the thumbnail containers. This is typically where designers like to exhibit the most creativity in the way the photo gallery appears and functions. The arrangement of thumbnails can vary greatly, and the way users can manipulate them to view the pictures that are available to view is determined by the way you build your application at this stage.

After you figure out how to display thumbnails on the Stage, you need to create a function to display the full-size image. The full-size image needs to appear in a new movie clip container, which you use to load the full-sized image from the server. Handling the way images load is important in the application because you need an efficient way to handle loading so users don't have to sit through a lengthy loading process before seeing the gallery. Loading JPEG thumbnails and full-sized images from the server after the SWF file initially loads mean that users never have to wait long to see content.

Exercise 2: Loading thumbnail images

In this exercise, you add a custom function that creates each thumbnail movie clip and loads each thumbnail image using the thumb_mcl movie clip loader instance. The ActionScript in this exercise also positions each of the thumbnail images on the Stage, based on several ofExercise 1. In this exercise, you hard code the images that appear within the gallery. However, you can also modify the exercise so you get the images from an external source, such as an XML file or text file that loads into the SWF.

1. Select frame 1 of the actions layer. Enter the following ActionScript below all of the existing code that's currently in the Actions panel.

function image(thumbSrc_str:String,
fullSrc_str:String):Void {
var holder_mc:MovieClip =
this.createEmptyMovieClip("thumb"+_global.numImages+"_mc
", this.getNextHighestDepth());
}

This previous code defines a function named image() that takes two parameters: the URL to a thumbnail and the full image. The function starts by creating a blank movie clip on the Stage for each thumbnail image.

Notice that you assign the new movie clip a dynamic instance name, which is based on the current value of the _global.numImages variable. You define this variable in the first exercise of this chapter, and you gave it an initial value of 0. Doing so causes the first movie clip to be named thumb0_mc. The global variable increments later in the image function, and you end up naming future movie clips thumb1_mc, thumb2_mc, and so on.

2. Add the following code to the image() function you added in step 1. Place this ActionScript inside the final closing curly brace.

if ((_global.xPos+maxThumbWidth)>Stage.width) {
_global.xPos = padding;
_global.yPos += maxThumbHeight+padding;
}
holder_mc._x = _global.xPos;
holder_mc._y = _global.yPos;
holder_mc.fullImg_str = fullSrc_str;
holder_mc.createEmptyMovieClip("image_mc",
holder_mc_mc.getNextHighestDepth());
thumb_mcl.loadClip(thumbSrc_str, holder_mc.image_mc);
_global.numImages++;
_global.xPos += maxThumbWidth+padding;

Exercise 1) triggers.

The last two lines in the previous snippet are responsible for incrementing the _global.numImages variable and adjusting the value of _global.xPos by incrementing the variable's current value by the maximum thumb width and amount of padding.

3. Now that the image function is complete, you can call the function to specify which images load into the dynamic gallery. Add the following snippet of code at the very end of the ActionScript on frame 1 of the actions layer to specify a few images to load.

image("images/t_1.jpg", "images/f_1.jpg");
image("images/t_2.jpg", "images/f_2.jpg");
image("images/t_3.jpg", "images/f_3.jpg");
image("images/t_4.jpg", "images/f_4.jpg");
image("images/t_5.jpg", "images/f_5.jpg");
image("images/t_6.jpg", "images/f_6.jpg");
image("images/t_7.jpg", "images/f_7.jpg");
image("images/t_8.jpg", "images/f_8.jpg");
image("images/t_9.jpg", "images/f_9.jpg");
image("images/t_10.jpg", "images/f_10.jpg");

The previous snippet calls the image function 10 times, and defines thumbnail and full images for each call to the function.

4. Before you can test this application, you need to make sure that you copy the images for this example from the CD-ROM onto your hard drive. Create a new folder named images in the same folder as the current FLA file (gallery.fla). Copy the 10 thumbnail and 10 full images from the CD and paste them into the new images folder on your hard drive.

Loading Sequentially Named Images

Because you name the filenames sequentially, you can easily modify the previous code snippet to use a for loop to import the images, instead of defining each one manually. For example, you can swap the code in step 3 with the following code instead.

for (var i = 1; i<=10; i++) {
image("images/t_"+i+".jpg", "images/f_"+i+".jpg");
}

You will find this code in the FLA file (except for 36 images instead of 10). For more information on loops and looping, refer to Chapter 7.

5. At this point, you can test your dynamic image gallery. Remember that the code isn't complete yet, and you cannot view the full-sized images. Select File > Publish Preview > Defaul117 (or press F12) to launch your default web browser and view the gallery project.

Each image should display after a small delay. The images should tween downward with a slight elastic effect (the Tween class effect) when they appear. When you move your mouse over a thumbnail image, it should also display the semitransparent white rectangle, which disappears when you move the mouse cursor off of the image.

6. Return to the Flash authoring environment, and save the changes you made to your file.

Exercise 3: Displaying full images

With the hardest part of the gallery already written, the only modules left for you to build are for displaying the full-sized image and adding a preloader (progress bar) effect to display the loading progress for full-sized images.

1. Select frame 1 of the actions layer. Add the following code to the Actions panel below the existing code.

this.createEmptyMovieClip("full_mc",
this.getNextHighestDepth());
full_mc._visible = false;

The code begins by creating a new movie clip on the Stage named full_mc. You use the full_mc movie clip to hold a custom progress bar that you create in the next exercise. The movie clip also holds a nested movie clip where you eventually load the full-sized image. The next line of code sets the new movie clip's _visible property to false, so it isn't initially visible within your Flash movie.

2. Add the following code below the ActionScript added in the previous step.

with (full_mc) {
beginFill(0xFFFFFF, 80);
moveTo(0, 0);
lineTo(Stage.width, 0);
lineTo(Stage.width, Stage.height);
lineTo(0, Stage.height);
lineTo(0, 0);
endFill();
}

Chapter 9 for more information about with.

This code again uses Flash's drawing methods to draw a rectangle on the Stage that will be 80 percent visible and cover the entire width and height of the Stage. This movie clip will become visible when the full-sized image is displayed so that the thumbnails become faded out and the full image stands out a bit better.

Exercise 4: Creating a progress bar

Because the full-sized images are more than a few kilobytes (KB) in size, they can take a bit longer to load; therefore, it is a good idea to add a progress bar so users know that something is happening. In this exercise, you create a progress bar using a rectangle that you scale according to the percentage of the image that has loaded into the SWF file.

1. Click Insert Layer to create a new layer. Rename the layer content and drag it beneath the actions layer. Using the Rectangle tool, select any stroke (outline) and fill color, set the stroke height to 4 pixels, and draw a rectangle approximately 300 pixels wide by 10 pixels high on the Stage.

2. Select the entire shape. Use the width and height text fields in the Property inspector to adjust the size of the rectangle on the Stage to the dimensions in step 1, if necessary. Select a stroke height of 1 pixel.

3. Double-click the rectangle's stroke and press F8 to convert the stroke into a symbol. Select the Graphic behavior from the Convert to Symbol dialog box, and enter a symbol name of stroke. Click OK.

4. Click the rectangle's fill and press F8 to convert the fill shape into a symbol. In the Convert to Symbol dialog box, enter a symbol name of bar and choose the Movie Clip behavior. Click OK.

5. Using the Property inspector, select the bar movie clip on the Stage and type in an instance name of bar_mc.

6. Next you need to put the bar_mc movie clip behind the stroke graphic created earlier. With the bar_mc instance still selected on the Stage, choose Modify > Arrange > Send to Back. This command positions bar_mc below the stroke graphic.

7. Select both the stroke and fill and press the F8 key to convert the shape into a movie clip symbol. Give the movie clip a symbol name of progressBar and click the Advanced button if you aren't already in advanced mode. In the Linkage section of the dialog box, enable the Export for ActionScript check box and set the linkage identifier to progressBar_mc. Click OK.

8. Select the progressBar movie clip, and delete the rectangle from the Stage. The movie clip is added from the Library at runtime using ActionScript.

9. Select frame 1 of the actions layer, and add the following code in the Script pane.

full_mc.attachMovie("progressBar_mc", "pBar_mc",
full_mc.getNextHighestDepth());
full_mc.pBar_mc._x = Math.round((Stage.width-
full_mc.pBar_mc._width)/2);
full_mc.pBar_mc._y = Math.round((Stage.height-
full_mc.pBar_mc._height)/2);
full_mc.pBar_mc.bar_mc._xscale = 0;
full_mc.createEmptyMovieClip("image_mc",
full_mc.getNextHighestDepth());

This code attaches the progressBar movie clip from the Library in the full_mc movie clip instance and assigns an instance name of pBar_mc. The progress bar isn't visible by default because you set the full_mc movie clip's _visible property to false in an earlier exercise.

The next step is to center the progressBar instance horizontally on the Stage by subtracting the width of progressBar from the Stage's width and dividing by 2. By default, the Stage width for a Flash document is 550 pixels wide (which is what your FLA should be set to). If a progress bar movie clip is 300 pixels wide, you subtract 300 from 550, and divide the result by two (giving you 250/2, or 125 pixels from the left edge of the Stage) to center the progress bar.

Then the nested bar_mc movie clip's _xscale property is set to 0. The _xscale property controls the horizontal scaling of a movie clip or button. Because the _xscale property is 0, it will be zero percent of its original width. When you click on a thumbnail in the finished file, the full image loads and the bar_mc's _xscale property increases to 100% to display how much of the image loads.

The final line of code in the previous snippet creates a new movie clip in full_mc called image_mc, which you use to load the full-sized image.

Exercise 5: Using MovieClipListener for large images

In this exercise, you use a MovieClipLoader object to load the full-sized images into the full_mc.image_mc movie clip. This exercise also uses several listeners that are in the MovieClipLoader class to update the custom progress bar that you made in the previous exercise. Ultimately, the full image centers on the Stage and fades in using the Flash's Tween class. You are still working with gallery.fla in this exercise.

1. The first step to load the full-sized images is to write a listener object that handles the various events that throw when using the MovieClipLoader class. This step shows the code that's necessary for handling the onLoadStart listener.

Select frame 1 of the actions layer and add the following code to the Actions panel below any existing ActionScript.

var fullListener:Object = new Object();
fullListener.onLoadStart = function(target_mc:MovieClip) {
target_mc._parent._visible = true;
target_mc._parent.pBar_mc.bar_mc._xscale = 0;
};

The first line of code in this snippet creates the actual listener object, named fullListener. The remaining lines of code define an inline function that executes when the onLoadStart listener invokes. This listener has one optional parameter, which is the target movie clip for the MovieClipLoader instance.

The code in the onLoadStart event TRiggers when the image begins to load. This assumes that you can load the image into the SWF file; otherwise, the onLoadError listener triggers instead.

2. The next listener that you add to the fullListener object is the onLoadProgress listener. This listener triggers while the content loads into the target movie clip. Add the following code snippet after the ActionScript that you added in step 1:

fullListener.onLoadProgress =
function(target_mc:MovieClip, numBytesLoaded:Number,
numBytesTotal:Number) {
target_mc._parent.pBar_mc.bar_mc._xscale =
Math.round(numBytesLoaded/numBytesTotal*100);
};

Like the onLoadStart listener, the onLoadProgress listener has a few optional parameters. The first optional parameter is the target movie clip that the JPEG image or SWF loads into (target_mc:MovieClip). Notice that you add :MovieClip to strict data type the parameter. This helps avoid errors because you can make sure that the target is actually a movie clip. You can make sure that numerical values return for the other two parameters, because you strict data type them with :Number.

The remaining two parameters are the number of bytes currently loaded (numBytesLoaded:Number) and total number of bytes (numBytesTotal:Number), respectively. By dividing the number of bytes loaded by the total number of bytes, you can calculate the percentage of the movie clip that has already been loaded into the target movie clip. For example, if you load a JPEG image that is 200 kilobytes (KB) total, and only 140 KB has loaded so far, you can calculate that only 70 percent of the file has loaded so far (140/200 = 0.7).

In step 1, the _xscale property of the pBar_mc.bar_mc movie clip was set to 0. The onLoadProgress listener sets the same movie clip's _xscale property to the percentage that has already being loaded in. Therefore, you set the pBar_mc.bar_mc._xscale property to 70 wide (70%) so the user can see the current loading progress of the movie clip.

You call onLoadProgress multiple times during the loading process unless the image or SWF that you're loading has a small file size. Therefore, the progress bar appears to grow while the image loads.

3. The next section of ActionScript is a bit longer than the previous two snippets. This code handles the onLoadInit listener, which invokes when the target movie clip completely loads and initializes and can then be manipulated on the Stage.

Select frame 1 of the actions layer, and add the following snippet to the bottom of the Actions panel:

fullListener.onLoadInit = function(target_mc:MovieClip) {
var border:Number = 10;
var fullWidth:Number = target_mc._width+border;
var fullHeight:Number = target_mc._height+border;
with (target_mc) {
lineStyle(0, 0x000000, 100);
beginFill(0xFFFFFF, 100);
moveTo(-border, -border);
lineTo(fullWidth, -border);
lineTo(fullWidth, fullHeight);
lineTo(-border, fullHeight);
lineTo(-border, -border);
endFill();
}
target_mc._x = Math.round((Stage.width-
target_mc._width)/2);
target_mc._y = Math.round((Stage.height-
target_mc._height)/2);
new mx.transitions.Tween(target_mc, "_alpha",
mx.transitions.easing.Strong.easeOut, 0, 100, 2, true);
target_mc.onPress = function() {
full_mcl.unloadClip(target_mc);
target_mc._parent._visible = false;
};
};

The previous code snippet is a bit lengthy, but you've seen most of the code before in previous snippets and even in other projects. The first line of code within the onLoadInit listener (var border:Number = 10;) sets a value for the border variable, which you use to control how much padding appears between the image that you load and the rectangle's stroke. You create two more values, fullWidth and fullHeight, to record how wide and high the image is, and also adds the value of the border variable.

Next, you use Flash's Drawing API to draw a rectangle on the Stage with a very thin black stroke and a white background. This decorative rectangle displays behind the loaded image to help it stand out a bit better from the rest of the Flash document.

After the with statement, the target_mc movie clip centers horizontally and vertically on the Stage when you subtract the width of the loaded image from the width of the Stage, and divide by 2. This is similar to the code you use to center the progress bar in the previous exercise.

Using the code that starts with new mx.transitions.Tween, the target movie clip then fades in from 0% to 100% alpha over 2 seconds using the Tween class. Finally, you create the onPress event handler for the target_mc movie clip. This event handler unloads the image in target_mc using the MovieClipLoader class' unloadClip() method. Also, you set the target movie clip's parent movie clip's (full_mc) _visible property to false.

4. The only thing that remains is to create the second movie clip loader instance, and assign the listener object to the movie clip loader. This is shown in the following snippet.

The finished file on the CD-ROM loads the entire contents of the images folder. If you want to load all the images, either add them to the list of images in your ActionScript (added in Exercise 2), or use the for loop from the Sidebar in Exercise 2 and change (var i = 1; i<=10; i++) to (var i = 1; i<=36; i++).

Select frame 1 of the actions layer and add the following ActionScript to the end of the existing code on the actions layer:

var full_mcl:MovieClipLoader = new MovieClipLoader();
full_mcl.addListener(fullListener);

The first line of code creates a movie clip loader instance named full_mcl. You use full_mcl to handle loading full-sized images. The second line of code assigns the listener object that you created earlier, fullListener, to the movie clip loader instance full_mcl. Loading full-sized images happens earlier in the ActionScript code (when a user clicks a thumbnail image), as demonstrated earlier in this project.

5. Select Control > Test Movie to test the SWF file in the test environment. Click through the images, and make sure that the gallery works correctly and you are happy with the overlay color.

If you are happy with the results, return to the authoring environment. Select File > Publish and close the document.