Loading Movies or Images

The MovieClipLoader lets one Flash movie play another. Effectively, the second movie plays on top of the first. It's easiest to understand, though, if you think of one movie as the host and the other movie (the one that's loaded on top of the host) as the submovie. Think of a big entertainment system a wall of stereo and TV equipment. The movie you put into your VCR can play on only the TV screen. Think of the TV as the host Flash movie, and the video you put into your VCR is loaded on top of it.

One reason to do this is because you might have several submovies that only play one at a time. You might want to give the user the choice as to which submovie to play. All you need to do is trigger the MovieClipLoader when the user clicks a button. It's sort of like a jukebox, where each record or CD is a separate submovie. The reason the MovieClipLoader is beneficial is that only the submovies the user requests have to download.

Let's look at some of the technical issues with the MovieClipLoader; then you can try it. First, only .swf files can execute the MovieClipLoader's loadClip action. Therefore, not only will you have to use Test Movie to see the results, but if you plan to load movies they need to first be exported as .swf files (in the case of loading image files, you simply need to have those JPGs, GIFs, or PNGs available). Second, when you use the MovieClipLoader, you must specify into what target to load the movie. Movies are loaded into one of two basic targets: a clip instance or a level number. If you load a movie into a clip, the clip is replaced with the movie that's loaded. If you load a movie into a level, anything that happens to be in that level currently is replaced by the movie.

By the Way: Levels: The Hidden Layer

Levels are the numbering system Flash uses to describe the stacking order of loaded movies. The host movie is always in Level 0 (referred to as _level0). If you load one movie into _level1 and another into _level2, the _level2 movie will appear on top of everything else.

Finally, remember when I said that when you load a movie, it gets loaded "on top"? That's not entirely true. When you load a movie into a clip, the loaded movie actually replaces the clip, so the loaded movie resides in the same level where the clip was. That is, if the clip was in front of something or behind something, the loaded movie will be, too. In the case of loading a movie into a level, the loaded movie will be in front of everything else that happens to be assigned lower-level numbers and behind items assigned higher-level numbers. The _root Stage is always _level0. Therefore, if you load a movie into _level1, it will be on top. However, if you load another movie into _level2, it will be on top of everything else the first loaded movie (_level1) will be sandwiched between the Stage and the new l loaded movie. In the next task you'll see that there's actually a way to avoid levels and load movies into actual clips.

Try It Yourself: Load a Movie

In this task you'll use the MovieClipLoader to selectively let the user download just the segments he or she is interested in. Here are the steps to follow:

1.	The name of the game for this task is organization. Remember, haste makes waste. Create a new empty folder into which you'll save and export all your movies. You'll be making three colored tweens plus the main hosting file.
2.	Create a new file and set both the movie's width and height to 300. Use Modify, Document (or Ctrl+J) to do this. Make sure that Ruler Units is set to Pixels.
3.	Create a simple tween of your choice, and make the tweening object entirely red. Save the movie as red.fla in the folder you created in step 1. Use Test Movie, which exports a movie called red.swf to the same folder as your red.fla file.
4.	Use Save As to name the file green.fla, and change the color of the tweening object to green. (You might need to change the color in each keyframe.) Remember to save and then use Test Movie to create the .swf.
5.	Repeat step 4 but create a file with everything blue.
6.	You should have three .fla files and three .swf files (red, green, and blue for each) as shown in Figure 20.1. Close all the Flash files. Then create a new Flash file and save it as main.fla in the same folder. Set this document's size to 500x500. This "main" file will load movies into a clip. Figure 20.1. From each of your three .fla files you'll need to create a corresponding .swf.
7.	Draw a l square exactly 300x300 by drawing any rectangle and then using the Info panel to change its dimensions to 300x300. Make sure there's a line around the box and then delete the fill. Select the entire outline and convert to it a symbol (make it a movie clip, name it box, and select the top-left Registration option). Name the instance on the Stage theClip_mc in the Properties panel while the box is selected.
8.	Drag a Button component onto the Stage and open the Actions panel with the button selected (by pressing F9). Type the following code: on(click){ _root.theLoader_mcl.loadClip("red.swf","theClip_mc"); } This tells the MovieClipLoader instance (named theLoader_mcl) to begin loading the red.swf file into the theClip_mc instance in the _root Timeline. We'll make the theLoader_mcl in the next step. (You can change _root to this._parent if you prefer.)
9.	Select the first keyframe in the movie and open the Actions panel. Type the following line of code: theLoader_mcl = new MovieClipLoader();
10.	Test the movie. Notice that the loaded movie is registered perfectly. That's because the loaded movie loads with its upper-left corner aligned with the clip's registration point (in this case, it's the upper-left as specified when you created the clip in step 7).
11.	Make two more buttons and use the same basic script as before, except change the string for one to "green.swf" and to "blue.swf" for the other.

You can tweak l the task you just completed to display images. In addition to loading .swf files, Flash Player 8 can load images in the following formats: .jpg (both regular and progressive encoded JPGs), .gif, and .png. Flash 7 supports only.jpg and .swf. The .gif format has been used very widely, and .png is great because it supports alpha channels meaning portions of the loaded image overlay (and see through to) objects underneath. Anyway, to load images just change the first parameter in the loadClip() method. For example, in step 8, change "red.swf" to read "someimage.png". You'll need an image (named "someimage.png") in the same folder, of course.

Before we look at more advanced variations, I want to point out that you can use the MovieClipLoader to load into levels instead of clip instances. Change the second parameter in the loadClip() method (step 7 previously) to read: "_level1" (or "_level2", "_level3", and so on). One advantage of loading into levels instead of clip instances is that you don't need to first create a clip, place it onstage, and give it an instance name. Personally, I still prefer to load into clip instances. I just think it's more intuitive because you can visually position the instance on stage or set any other property (such as rotation or alpha). Levels require that you keep track of which level is being used for which loaded image. That is, at any one time you can load only one object (image or .swf) into a single level, or clip instance, for that matter). Also, you should be aware that loading into _level0 replaces your whole movie. Normally, you'll want to load into level 1 or higher (or, better yet, into clip instances you've placed onstage).