Site Structure 2: Using loadMovie to load external swfs

On this page, we'll look at an example in which the final published swf looks identical to the one previously examined, but the fla is different. In this example, we've removed the content for each website section from the main fla and instead created three separate flas, one for each website section. Those flas are published to swf files, and each swf is then loaded into the main movie when a site visitor clicks the corresponding navigation button. The advantage of this type of structure is that content which is not needed is not loaded, and the main site starts up much quicker (especially if the individual flas contain heavy graphics).

Creating the section fla's

When making a fla that will be loaded into another fla, you can either make it the same size as the mother fla, in which case you will load it into a point at x=0, y=0 in the main fla, or some smaller size, and load it into a movieclip positioned at the same point where you want the upper left corner of the loaded swf to appear. The background color of the child fla is irrelevant, and any part of the stage which has no content in the child fla will show no content in the mother fla. In this example, we made each fla the size of the area it will fit into in the main movie. The content of the three fla's, which may be downloaded from the class directory, is identical to the section content in the original movie, with one exception: we added a preloader section to the photos fla, since it contains bitmap graphics which may take some time to load. That section is the same as we made previously for the original site, using a 100-frame movieclip and a two-frame loop to check for loading and display a percent loaded indicator. This time, the preloader movieclip is a horizontal bar that is shape-tweened over 100 frames. The structure of the photos fla (site2_photos.fla, available via link at right) looks like this:

Creating the holder movieclip

Because we want the loaded swfs to be displayed in the green area of the main movie, we create a holder movieclip and place it at the upper left corner of that area. We also want the original welcome message to be tweened in, so we might as well put that tween (fade-in) into the holder movieclip.

When the movie is played, the preloader message shows, the nav buttons appear as before, then the welcome message (now inside holder_mc) tweens in, then holder_mc stops and waits for the site visitor to click a button. Each button contains code to load the corresponding swf into holder_mc:

on (release) {
   holder_mc.loadMovie("site2_photos.swf");
}

This code loads the corresponding swf into holder_mc, plays the preloader frames of it if there are any, and then displays the section content the same as the original movie. The other two buttons contain similar code, overwriting holder_mc's current content with the new content:

on (release) {
   holder_mc.loadMovie("site2_resume.swf");
}

on (release) {
   holder_mc.loadMovie("site2_contact.swf");
}

The main fla and content fla's may be downloaded from the class directory (link under Files at right).