Loading Images into Flash Movies | Macromedia Flash8 Bible

Flash Player 8 adds the incredible capability to load all of the popular Web image formats into a Flash movie at run time — while the movie plays in a Web browser! In older versions of the Flash Player (versions 6 and 7), externally loaded content needed to be in the SWF or standard JPEG image format.

Caution

You cannot load JPEG images directly into Flash movies playing in Flash Player 5 or earlier. The user must have Flash Player 6 to use this feature. Refer to the Runtime Loading chart at www.flashsupport.com/links for a detailed breakdown of Flash Player version support for externally loaded assets.

Some basic rules for using images that are loaded into Flash Player 8 movies are as follows:

Use only supported image formats, which include PNG (all bit depths), GIF, standard JPEG, and progressive JPEG image files. You cannot load JPEG 2000 images into Flash movies.
Watch the file size of image files. Unless your image files are extremely small and/or within a reasonable limit of your target audience's data rate, you will likely want to build a preloader for your JPEG files.
All images that are loaded dynamically will be smoothed in Flash Player 8. Smoothed bitmaps may have an adverse effect on playback performance. You can control the global rendering of bitmaps and all artwork by using the _quality property of the MovieClip object. For example, _quality = "low"; turns off smoothing for all artwork. Use this property with care — most vector artwork and text looks unsightly with low-quality rendering.

Control the physical characteristics of the image (X and Y coordinates, X and Y scale, rotation, and so on) by controlling those properties of the MovieClip object holding the image.

Caution

In practice, you should nest JPEG images within yet another instance in the holder instance. For a reason unbeknownst to us, when you load JPEG images into a MovieClip object, the holder instance stops behaving as a true MovieClip object. Some MovieClip methods will work with the holder, whereas others won't. To be safe, create another empty MovieClip object within the holder instance, and load the JPEG image into that "buffer" clip. If you need to make any changes to the MovieClip instance, control the outer holder instance.

Check the user's version of the Flash Player with ActionScript or JavaScript. The user must have Flash Player 8 to load all of these image formats directly into Flash movies. We discuss Flash Player detection in Chapter 21, "Publishing Flash Movies," and Chapter 22, "Integrating Flash Content with Web Pages."

Cross-Reference

Keep in mind general issues for bitmap usage in Flash movies. Read our coverage of using bitmap images in Chapter 16, "Importing Artwork," and in Chapter 36, "Working with Raster Graphics," which is included as a PDF file on this book's CD-ROM.

When in doubt, test the specific JPEG images with your Flash movies. If you encounter problems with loading the JPEG, check the following:

URL: Make sure you have the correct path and filename specified in the loadMovie() action.
Target: Does the target exist into which you want to load? Check the path to the level or MovieClip object that contains the image.
Format: Is the image a supported format? Or does it use an unsupported encoding such as JPEG 2000?

Without further ado, we'll show you how to create a Flash movie that dynamically loads a JPEG image. In this example, you will load a JPEG file located in the same directory as the Flash movie file (.swf). In ActionScript, the loadMovie() action is used to load JPEG images, using the following syntax:

 instanceName.loadMovie(URL);

where instanceName is the MovieClip object that holds the JPEG image and URL is the relative or absolute path to the JPEG file. In the following code, a JPEG file named cat.jpg will be loaded into a MovieClip object named mcHolder:

 mcHolder.loadMovie("cat.jpg");

 mcHolder.loadMovie("http://mydomain.com/cat.jpg");

On the CD-ROM

For this exercise, you will use the unloadMovie_100.fla document that we discussed earlier in this chapter. You can also make a copy of this completed file from the ch28 folder of this book before you begin this exercise. You will need to copy the beach.jpg file in this location to your local folder as well.

In the following steps, you create a Flash movie that can load an external image file:

Open a copy of the unloadMovie_100.fla document. Resave this file as load_image_100.fla.
Remove the tint effect from the mcHolder instance. Select the instance, and choose None in the Color menu of the Property inspector. Also, edit the rectangle shape in the holderClip symbol, changing its dimensions to 400 x 300 pixels.
Create a new layer named tImg . Place this layer anywhere above the mcHolder layer.
On frame 1 of the tImg layer, select the Text tool and create an Input text field above the buttons. With the text field selected, open the Property inspector and type tImg in the <Instance Name> field. Enable the Show Border option as well. When you are finished, your document's Stage should resemble Figure 28-19.
Select the cbtLoad instance on the Stage. In the Property inspector, change the label value to Load Image.
Select the cbtUnload instance on the Stage. In the Property inspector, change the label value to Unload Image.
Select frame 1 of the actions layer and open the Actions panel. In the Script pane, edit the code to reflect the bold changes shown in Listing 28-4.

Listing 28-4: Modifying the oLoader.click() Handler
```
 var cbtLoad:mx.controls.Button; var cbtUnload:mx.controls.Button; var tImg:TextField; var mcHolder:MovieClip; var oLoader:Object = new Object(); oLoader.click = function(oEvent:Object):Void {    var sLabel:String = oEvent.target.label.toLowerCase();    if(sLabel == "load image"){       mcHolder.loadMovie(tImg.text);    } else if (sLabel == "unload image"){       mcHolder.unloadMovie();    } }; cbtLoad.addEventListener("click", oLoader); cbtUnload.addEventListener("click", oLoader); 
```
Here, you retrieve the current text in the tImg field and use it as the URL of the loadMovie() method of the mcHolder instance. When the cbtLoad component instance is clicked, the oLoader.click() method executes and loads the image file specified in the tImg field into the mcHolder instance. When the cbtUnload instance is clicked, it unloads the contents of the mcHolder instance.
Save your Flash document and test it (Ctrl+Enter or z+Return). In the Test Movie window, type beach.jpg in the text field. When you click the Load Image button, the beach.jpg image will load into the mcHolder instance.

image from book
Figure 28-19: The tImg field will specify the path to the JPEG image.

Try typing other known image URL locations into the text field. For example, you can download the same image from the following location. Be sure to type the full URL, including the http:// protocol:

http://www.flashsupport.com/images/beach.jpg

You can also try some of these image URLs:

http://www.flashsupport.com/images/waterfall.png
http://www.flashsupport.com/images/logo.gif

You may want to go back to the Flash document and move the location of the mcHolder instance to better accommodate the size of the image you are loading.

Caution

If you try to unload an image that was loaded from a domain different than the original .swf file initiating the load, you may receive a warning in the Output panel indicating an access violation. Flash Player 8 has changed the way in which .swf files can access other files. Refer to Chapter 21, "Publishing Flash Movies," for more information, or search the Flash 8 Help panel for "local security policy."

You will learn how to build a loading graphic for image files in the "Using a Preloader for External Assets" section of this chapter.

On the CD-ROM

You can find the completed file, load_image_100.fla, in the ch28ch28 folder of this book's CD-ROM.