Using loadMovie() to load an image or a movie into a movie clip is a rather straight-forward task when used with a simple movie clip on the stage. However, movie clips can present some unexpected problems in regard to the dimensions of the content loaded into them if you are not aware of what is happening.
Movie clips, by their nature, take on the dimensions of the content loaded into them. Therefore, if you create an empty movie clip, add it to the stage, and load an image into it that is 160x120, the image will appear on the stage as a 160x120 image, regardless of how big the original movie clip is. However, things can become a little confusing and complicated if any transformation is applied to the movie clip instance before loading content into it.

If you create a movie clip as a placeholder with a 160x120 rectangle and drop an instance of that movie clip on the stage, it will - for all purposes, practical and otherwise - forever represent a 160x120 image. This is true even if the movie clip is transformed. For example, say you use the free transform tool to resize the movie clip on the stage to be 320x240. You might think that now you can load a 320x240 image into it and have it fit nicely within the rectangle. But to your surprise, after loading a 320x240 image into it via loadMovie(), you discover the image appears twice as big!

This is because, by transforming the dimensions of the movie clip, you are defining the scale that is applied to that movie clip. A 160x120 movie clip that has been stretched to 320x240 must be loaded with a 160x120 image in order to fill that new 320x240 rectangle exactly. This is because the 160x120 image will be stretched (or scaled up) to fit inside the stretched movie clip instance. This is what I mean when I say the 160x120 movie clip will forever represent 160x120 images.

If a 320x240 image is loaded into this movie clip, it will be scaled by the same amount (in this case, to twice the width and twice the height). In order to properly display a 320x240 image, you would have to create an original movie clip with a 320x240 rectangle and put that on the stage. That movie clip instance will then act as a placeholder for 320x240 images and will behave as you would expect when resizing it, as long as you limit it to 320x240 images.

The following Flash movie illustrates this scaling behavior. Click on a "Load" button to load the corresponding image into the four clip views to see how different size images fit (or don't fit) into the target movie clips, depending on how they are scaled (or not scaled).

Download FLA

So what happens if you nest a movie clip within another movie clip? When you transform a movie clip instance on the stage, everything inside that movie clip instance is scaled proportionally; even other movie clips! Say you create a 320x240 movie clip and you add another movie clip inside of it that is 160x120. You add the 320x240 movie clip to the stage and use loadMovie() to load a 160x120 image into the nested movie clip, then test the movie and everything looks fine.

But now you go back to change the size of the 320x240 movie clip instance - perhaps to make it smaller to fit off to one side. Test the movie again and suddenly the 160x120 image is now very small. This is because the parent movie clip instance has been transformed, causing the nested movie clip content to be scaled down.

The following Flash movie presents three examples of this scaling behavior. In this movie, all three parent movie clips are the same size (160x120), but each one contains a movie clip of a different size. The first one contains a nested movie clip that is 120x90 (smaller than the parent), the nested movie clip in the second one is 160x120 (same size as the parent), and the third nested movie clip is 200x150 (larger than the parent). In each example, a small, medium and large image can be loaded into the respective nested movie clip to provide a visual display of the effects of these actions.


Download FLA

One key item to remember in all this is that altering the size of a movie clip instance on the stage determines the scaling factor of everything that the movie clip contains. In other words, you are not simply altering the frame or just the perimeter around the movie clip content, you are actually affecting the entire content of a movie clip when transforming (resizing) an instance of it on the stage.

This is an important characteristic to remember. What if you had a variety of images of different sizes that you wanted to present within a fixed frame size on the stage? Well, one solution would be to note all the different sizes of all the images and create a movie clip of those dimensions for each unique size and nest them within a parent movie clip that would represent your fixed frame size. You could then scale up each of those nested movie clips to fit exactly within the parent movie clip, and then devise some way through ActionScript to select which nested movie clip gets displayed for which image.

That is exactly what I did in the flash movie, above, and you can download the relevant files (created in Flash MX 2004 Professional) to see how I did it. However, this method can become unwieldy if you have a variety of image sizes or need to update the Flash with new image sizes in the future, or you simply need a more dynamic solution. A more elegant approach would be to have a single nested movie clip and perform some math to deal with the scaling issues by resizing the movie clip after content has been loaded. But this approach bumps up against other issues that I may write about in a future tutorial.