Intermediate Demo Authoring:
Using Animations with External SWFs

In the last segment, we made a simple player/demo/web site: it had buttons, it loaded external SWFs. But what if you want cool things to animate to introduce each SWF you're loading?

There are several ways to do this (aren't there always in Flash?), but the most straightforward is to create "bands" in the _root timeline (Main Timeline/Scene One) that play animations in the master SWF and then load an external SWF. Here is a sample that plays a little (badly designed) animation prior to loading each SWF:

1. Create "Bands" Along Your Master SWF's Timeline

Copy the FLA you used for the last excercise, and rename it (Save As). We'll use all the same pieces.

When we made the first player, we really only needed to put all our objects (buttons, frames, etc.) on the first frame of the timeline. The button events did all the work, reaching out to the external SWFs and loading them into an empty movie clip. To have animations, obviously we need to have more room to move. We'll create "bands" in the timeline for each. Your finished timeline with layers will look something like this, and I'll refer back to this image:

To start with, add frames to your movie, to accomodate the frames needed for introducing each SWF. In my movie, I used a very simple animation that only needs 10 frames.

> Make a "Markers" layer, and place a marker for each SWF to be loaded

Make a new layer, and call it "MARKERS" (some shops prefer "LABELS"). Place a keyframe where you wish to begin each animation segment to introduce each clip to be loaded. Click on the first keyframe you made and look at the Properties panel. It should look something like this:

See the text box that has the grayed-out "<Frame Label>" in it? Type in a label that suggests your first SWF to load. Mine was "clip1". Now deselect the frame, and a red-flagged label should appear. In the example above, you can see several such labels on the Markers layer. These labels can be used instead of frame numbers in code; instead of gotoAndPlay(10), you might write gotoAndPlay("clip1"). Why use labels instead of frame numbers? Because you can add or subtract all the frames you want, and the code will still find and play the label!

> In your "Actions" layer, and put stops at the end of each band

Put a "stop()" on frame 1. Now on the Actions layer, place keyframes at the end of each band, right before the next label. This stop is where the animation will end and the slave SWF will load, and prevent the playhead from entering the next band.

2. Script Your Buttons and Frames

> Re-script your buttons to gotoAndPlay at the new markers

Remove the current code from each button; our buttons will no longer load the external SWFs, they will instead cause the movie to play sections (bands) of the timeline. On each button, track the button event of your choice (usually "press" or "release"), and put a "gotoAndPlay()" that plays each band in turn. In mine, the first button was scripted like this:

on (release) {
gotoAndPlay("clip1");
}

> Insert the loadMovie() scripts as frame actions

Go to the first band and find its stop(). You'll be using the same script that used to be on your buttons on the same frame. When your first band is done, the code on the stop frame will look something like this:

_root.empty_mc.loadMovie("clip_1.swf");
stop();

This means that when the playhead enters this frame, it will find "empty_mc" along the root timeline and load it with "clip_1.swf", then the playhead will stop.

3. Create and Place Your Animations

> Create your animations

Create whatever animation transitions or clip introductions you want.

> Place the animations

Whatever animations you created must start on the same frame as the label and finish either in the frame before your SWF loads, or in on the same frame, if you want it to continue displaying.

4. Ensure That the Last Movie is Unloaded Before the Next One Loads

> Make use of the unloadMovie() method

In some sense this last bit of code is unneccesary, because as your empty movie clip loads a new SWF, the one before is kicked out. Nevertheless, it's good practice to clear the empty clip, and in some circumstances, it will be necessary. To do this in our example, simply have each button call to the empty clip and tell it to unload whatever is there before the gotoAndPlay, like this:

on (release) {
_root.empty_mc.unloadMovie();
gotoAndPlay("clip1");
}

The unloadMovie() method, as you might guess, tells the empty clip (target clip) to unload whatever's inside it.