Sites made with Flash usually exist out of several separate movies, which load into the main movie when given the command to. They are called external loaded swf's because they are not part of the main movie. In this tutorial, we are going to see how to make transitions between those movies in Flash MX, and add a preloader to each external movie. Ready ?

Below is an example on transitions between external loaded movies. Of course, the transitions are fully customizable.

{ Please note this is an example without the additional external preloader }

Setting up the external movie:

1. Open your external movie in Flash. Set up the animation you want to happen when the movie is loaded in the main movie. This animation should start from frame 1 on, in case you are unsure where to start it. Also, set up the animation to play when another movie will load. See my example image in step iv. The red line (playhead) is on the first frame of the outro, and the frame right before that is the content frame. So basically, the structure is Intro-animation - Content - Outro-animation.
   
   

2. Create a new layer by pressing the Insert Layer icon on the bottom left of the timeline, and rename it actions, without the quotes.
   
   

3. Click the the frame number in the actions layer at which your content is at. Hit F6 to convert it to a keyframe. Now right-click the keyframe you just created, choose Actions from the menu and copy and paste stop(); into the Actions dialog box.
    

4. Create a new layer, call it checkvar and select the frame right after the one at which your content is at. Convert it to a keyframe by pressing F6 or by right clicking it and choosing Insert Keyframe from the menu.

[ convert the frame to a keyframe ]

5. Once you have created the keyframe, press CTRL+F8 (Insert | New Symbol). The Create New Symbol dialog should appear. Give it any name, select Movie Clip and press OK. Return to the stage by pressing the button next to the name you just gave the movieclip, on the bar right above the stage.

[ create a new, empty movieclip ]

6. On the checkvar layer timeline, click anywhere between the beginning of the timeline on the and the keyframe you created in step iv. Open the Library by pressing F11 (Window | Library). Search for the name you gave the movieclip. Once you've found it, drag it to the stage. It doesn't matter where.

[ drag the movieclip from the library to the stage ]

7. Now, let's add some code to the movieclip just placed on stage. Right click the the circle with the little cross in it () and select Actions.
   
   Copy and paste the following code into your Actions dialog box:

onClipEvent (load) { _root.curmovie = "maps"; } onClipEvent (enterFrame) { if (_root.curmovie != "maps") { _parent.gotoAndPlay(38); } }

8. Some changes have to be made to the code above depending on your movie setup. 

• maps is the name given to this movie. This variable will be used later on in the main movie setup part. It could be anything like: profile, news, home, work, portfolio ...
  

• 38 is the frame number of the first frame of the outro. In my example image in step iv, 38 is the first frame of the outro. This should of course be replaced by the frame number of the first frame of the outro of your movie.

9. Click the last frame of the external movie (thus the last frame of the outro) in the actions layer, hit F6 to convert it to a keyframe, right-click it, and choose Actions from the menu that pops up. Now insert the following code into the Actions dialog box:

important   The filenames of your movie clips have to be maps.swf, where maps is the name given to the movie clip in the actionscripting in step vii. For the examples given in step viii, the names would be profile.swf, news.swf, home.swf and portfolio.swf.

10. Again, some change have to be made to the code above. _root.content is the instance name of the movieclip that you are loading the external movie into in the main movie.

You are finished with setting up the external movie. We are not yet finished though ! The next page explains how to set up the main movie, and also explains why and how the code works the way it does.