Flash Tutorial: Preloading External Movies	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Tutorial - Preloading External Flash Movies

Free Flash Tutorial

This preloader tutorial shows you how to load an external Flash file into another Flash file with a preloader. This gives you the opportunity to break your Flash Movie into several more manageable parts rather than having one very large Flash file. It also means that the user need only wait for that section of the Movie that they wish to view to preload rather than waiting for a much larger file to load.

Cross Ref: There are many other Flash Pre-Loader tutorials including several which cover loading external Flash Movies and loading multiple external Flash Movies. To ensure that you are following the right tutorial for your needs, you may wish to read a brief description of each: Preloader Tutorial Listings

Example: Download the Flash file  Int 150a

Note: If you can see the Flash Movie (an animation) and not the preloader press Refresh (F5 or try Ctrl + F5) in your Browser. Once a Flash Movie has loaded the Browser may not truly refresh or re-load the Movie. Therefore if you did not see the preloader in action: Click here

Step One: Creating an External SWF Preloader

1. Open a new: Flash Movie
2. Go to: Modify > Document
3. Set the Dimensions to: 185 x 125px

Tip: The Movie needs to be large enough to hold the external loaded swf Movies that you want to load. It is simplest if all the Movies are the same size.

4. In the Timeline use the Insert Layer button to add 3 layers so you have a total of: 4 Layers
5. Rename Layer 4 to: ActionScript
6. Rename Layer 3 to: Timer
7. Rename Layer 2 to: Preloader
8. Rename Layer 1 to: Border
   
   You should now see this in the Timeline:
   
   
   All the Layers on the Main Stage.

Step Two: Setting up the Timeline

1. Select Frame 2 on all the layers
   
   
   All the Frame 2's are selected.
   
   
   
2. Right click on any of the Frame 2's in the Timeline and select: Insert Blank Keyframe
   
   
   Blank Keyframes in all of the Frame 2's.
   
   
   
3. Select all the: Frame 3's
   
4. Right click on any of the Frame 3's and select Insert Blank Keyframe
   
   You should have this:
   
   
   Four layers each with 3 blank Keyframes.

Step Three: The Preloader ActionScript

1. Select Frame 2 of the Layer: ActionScript
2. Add this code to that frame (if you wish you may leave out the gray code hints):
   
   // Get info on how much of the Movie has loaded so far and compare it to how much of the Movie has to be loaded
   if (this.getBytesLoaded()>=this.getBytesTotal()) {
   
   // If the Movie has fully loaded then go to and stop at the next frame
   gotoAndStop(3);
   
   // If the Movie hasn't fully loaded
   } else {
   
   // Then go back to frame 1 and play from frame 1 to check again
   gotoAndPlay(1);
   }

Step Four: Creating a Progress Bar

The progress bar is a visual representation of the percentage of the external Movie that is loading. It looks something like this:

Progress Bar.

1. Go to: Insert > New Symbol (Ctrl F8)
2. For Name type: Bar
3. For Behavior select: Movie Clip
   
   
   
   
4. Click: OK
   
   
5. In the Timeline use the Insert Layer button to add 1 layer so you have a total of: 2 Layers
6. Rename layer 2 to: Border
7. Rename layer 1 to: Progress Bar
   
   
   The Layers.
   
   
8. Select Frame 1 of the: Border Layer
9. Select the Rectangle Tool and: Draw a Rectangle
10. Return to the Selection Tool:
11. Click in the centre of the rectangle and press: Delete
12. Select the outline by double clicking on the: Stroke (Rectangle Outline)
13. In the Property Inspector set its width to: 102.0
14. Set its height to: 6.0
15. In the Timeline Lock the: Border Layer
    
    
    Your Loader Bar should look similar to this.
    
    
16. Select Frame 1 of the: Progress Bar Layer
17. Select the Rectangle Tool and: Draw a Rectangle
18. Return to the Selection Tool:
19. Double click on the outline Stroke (border) and press: Delete
20. Click in the centre of the rectangle to select the: Fill
21. In the Property Inspector change the Fill colour of the rectangle to: Black (or anything you like)
22. In the Property Inspector set its width to: 0.1
23. Set it's height to: 3
24. Then position it inside the border like so:
    
    Note: You may need to Zoom In:
    
    
    Black Rectangle positioned inside the border.
    
    
25. Right Click on the black rectangle in the Progress Bar Layer and select: Convert to Symbol
26. Give it a Name: Loading bar
27. For Behavior select: Movie Clip
28. For Registration select centre left:
    
    
    
    
29. Click: OK
    
    
30. In the Property Inspector give the new Movie Clip the Instance Name of: ba
    
    
    The Instance Name in the Property Inspector.

Note: The Instance Name and Movie Clip Names are different. In the ActionScript it is always the Instance Name that is important. Remember that Instance Names are case sensitive and must not start with a number or contain spaces. The Movie Clips name can be anything you want (as long as each Movie Clip has it's own unique name). Instance Names do not need to be unique.

Cross Ref: For detailed information about how to name objects see the tutorial on: ActionScript Syntax


Progress Bar ActionScript

You now have to add some code to the Loading bar Movie Clip. What this does is control the width of the bar. So that as more of the object loads the wider bar becomes. The bars width will match the percentage. If 50% has loaded then the bar will be 50 pixels wide etc.

31. Select the Loading bar Movie Clip and add the following code (if you wish leave out the gray comments):

// When the Flash Movie loads do the following...
onClipEvent (load) {

    //  Call the following function
    function follow(source, target, percent) {

        /* Set the variable vector equal to the percentage of the content being loaded and minus current width of this Movie Clip.  */
        vector = (source-target);

        //  Set the desp variable equal to the vector variable times by the percent which is the percentage loaded
        desp = (vector*percent);

        //  Return the amount loaded
        return (source-desp);

        //  Reset the target value
        dd.target = 0;

        //  Close the function
        }

    // Close the above Clip Event
    }

//  When this Movie Clip enters the frame (every 1/12th of a sec) do...
onClipEvent (enterFrame) {

    //  Call the function from above to reset this Movie Clip's width
    this._width = follow(this._width, target, .2);
}



Note: The above code is attached directly to the outside of the Movie Clip not to the Timeline. In your Actions Panel it should say Actions - Movie Clip in the top left corner or the Actions Panel:


The Actions are attached to the Movie Clip not the Timeline.


Cross Reference: The comments in the ActionScript above are very brief and if you don't understand how the code works I suggest you look at one of the preloader tutorials where you will find a more in-depth explanation as to how preloaders work: Preloaders or Preloader Listings

32. The Progress Bar is now complete so click on the Scene 1 Tab to return to the Main Stage:

Step Five: Creating the Preloader Movie Clip

The Progress Bar that you have just created is just part of the final display. We need to combine it with other information such as the percentage. This is done inside a new Movie Clip:

1. Go to: Insert > New Symbol
2. Name the new symbol: preloaderloader
3. For Behavior select: Movie Clip
4. Click: OK
   
   
   
   
5. Add 2 Layers so that you have a total of: 3 Layers
6. Rename Layer 1 to: ActionScript
7. Rename Layer 2 to: Text
8. Rename Layer 3 to: Progress
   
   
   Layers inside the preloaderloader.
   
   
   
   The ActionScript Layer
   
   
9. Select Frame 1 of the ActionScript Layer and add this code:

// Stop the preloader from automatically running
stop();


10. On the ActionScript Layer right click on Frame 3 and select: Insert Blank Keyframe
    
    
    Frame 3 has a blank Keyframe.
    
    
    
11. Add this code to this new Frame (miss out the gray comments if you wish):

//  Get the total bytes to be loaded
total_bytes = (this._parent.MyExternallyLoadedSWFMovieHolder.getBytesTotal());

//  Get the bytes loaded so far
loaded_bytes = (this._parent.MyExternallyLoadedSWFMovieHolder.getBytesLoaded());

//  Work out the difference between the total bytes to load and the bytes loaded so far
remaining_bytes = (total_bytes-loaded_bytes);

//  Work out the percentage loaded
percent_done = (int((loaded_bytes/total_bytes)*100));

//  Set the target bar percentage loaded
bar.ba.target = (percent_done);

//  Display progress of percentage loaded in the text box
DisplayProgress = (Math.round(bar.ba._width))+" % loaded.";

//  Check to see if everything has loaded
if (bar.ba._width>99) {

    //  If everything has loaded move onto the next frame
    gotoAndPlay(4);

//  If everything hasn't loaded then run this code
} else {

    /*  If everything has not loaded return to frame 2 and try again.  This creates a loop and then runs the code above again. This is how everything updates. The values will change as more content is loaded.  */
    gotoAndPlay(2);

//  Close the if-else statement
}


12. On Frame 5 of the ActionScript Layer right click select: Insert Blank Keyframe
    
    
    Frame 5 has a blank Keyframe.
    
    
    
13. Add this ActionScript to the new frame:

// Tell the external Movie to goto and play frame labeled "Play"
// You can use frame numbers too
_root.MyExternallyLoadedSWFMovieHolder.gotoAndStop("Play");

//  Stop on this frame
stop();



The ActionScript Layer should now have three little a's. The ActionScript Layer is now finished.



The Text layer

14. On the Text Layer right click on Frame 2 and select: Insert Blank Keyframe
    
    
    Frame 2 in the text layer has a blank Keyframe.
    
    
    
15. Select the Text Tool:
16. Drag a Text Tool on the Stage to create a: Text Box
17. Return to using the Selection Tool:
18. Move the Text Box to the: Centre of the Stage
19. If the Property Inspector is closed, open it: Window > Properties (Ctrl F3)
20. In the Property Inspector set the Text Box to: Dynamic Text
21. If the Show Border Around Text is selected, deselect it:
22. Give the Text Box a Variable Name (Var): DisplayProgress
    
    
    Don't get the Variable Name (Var) mixed up with the Instance Name!
    
    
23. On the Text Layer right click on Frame 3 and choose: Insert Frame (Not a Keyframe)
    
    
    The Timeline should now look like this. The Text Layer is now Finished.
    
    
    
    The Progress Layer
    
    
24. On the Progress Layer right click on Frame 2 and choose: Insert Blank Keyframe
25. Open the Library: Window > Library (F11)
26. Drag onto Stage your Movie Clip: Bar
27. Place it just above the Text Box like this:
    
    
    The Bar is just above the Text Box.
    
    
28. In the Property inspector give the Bar Movie Clip an Instance Name: bar
    
    
    
    
29. On the Progress Layer right click on Frame 3 and choose: Insert Frame (Not a Keyframe)
    
    
    Your Timeline should now look like this.
    
    
30. The Preloader is now ready to be placed on to the Main Stage. In the Edit Bar click on the Scene 1 Tab to return to the Main Stage:
    
    
31. On the Main Stage select Frame 3 in the layer: Preloader
32. Open the Library: Window > Library (F11)
33. Drag onto Stage the Movie Clip: preloaderloader
34. Place it towards the: Centre of the Main Stage
35. In the Property Inspector give it an Instance Name: preloaderloader
    
    
    Movie Clips Instance Name in the Property Inspector.

Step Six: Creating the Timer Movie Clip

This Movie Clip has a small amount of ActionScript that controls the loading of the first external MC. Subsequently MCs are loaded when the user clicks on one of the buttons.

1. Go to: Insert > New Symbol (Ctrl F8)
2. Give it the Name: Timer
3. For Behavior select: Movie Clip
   
   
   
   
4. Click: OK
   
5. On Frame 1 of the Timeline add this code:

// This is how we automatically load the swf when the Movie loads
loadMovie(_root.MyVariable, _root.MyExternallyLoadedSWFMovieHolder);

//  Tell the preloader to preload the first MC
_root.preloaderloader.gotoAndPlay(2);

//  Stop this Movie Clip now the first MC has loaded
stop();

6. The Timer Movie Clip is now complete. Return to the Main Stage by clicking the Scene 1 Tab:

Step Seven: Placing the Timer on the Main Stage

1. On the Main Stage select Frame 3 on the: Timer Layer
2. Open the Library: Window > Library (F11)
3. Drag on to the Main Stage the: Timer Movie Clip
4. Position it about in the: Centre
5. In the Property Inspector give it an Instance Name: timer
   
   
   The Timer Instance Name.

Step Eight: The ActionScript

It is the ActionScript on frame 3 of the Main Stage that controls the bulk of the information that needed to preload the external swf Movie.

1. Select Frame 3 of the ActionScript Layer and add the following code:

// Create a Movie Clip to load the swf Movie into
this.createEmptyMovieClip("MyExternallyLoadedSWFMovieHolder", 0);

/* Create a variable to hold the location of where the external swf Movie can be located and the file name of the swf Movie to be loaded in externally as an externally loaded swf Movie. e.g. the path to the image could be like c:\myFolder\MySWFMovie.swf or http://www.MyWebSite.com/myFolder/MySWFMovie.swf or if the swf file is in the same location you can use just the swf file name. */

// Change the URL below:
var MyVariable = "myMovie.swf";

// Set the loaded content's location on the Stage
MyExternallyLoadedSWFMovieHolder._x = 0;
MyExternallyLoadedSWFMovieHolder._y = 0;

// Stop on this frame
stop();

 

Important: Make sure you change the name of the file to the name of your file: myMovie.swf

Strange but True: It is the location of the web page and the Movie that is loading that is important not the location of this preloader Movie! If you wish to move this preloader Movie to a different folder you can. It can also be used several times on several different web pages as long as each time the web page is located in the same place as a Movie called:  myMovie.swf. Each version of the Movie  myMovie.swf could be a different Movie with different content!

Usually the Main Content Movie would be in the same folder as the web page. If it is not you will need to type a target path like this:

var MyVariable = "images/myMovie.swf";

You may also use a full URL like this:

var MyVariable = "http://www.webwasp.co.uk/images/myMovie.swf";

Confused? If you get in a muddle the easiest thing is to have the Web Page, Preloader Movie and Main Movie all in the same folder.

The preloader Movie is now finished!!

Step Nine: The External SWF Movie

In your external Flash Movie that you want to load you MUST add 2 blank frames at the very beginning on the Movie. It is probably easiest to just create a new scene. This first Scene must be the first thing to load. In the first frame you mush have a stop(); command and in the second frame you must add the label: Play and a play(); command. This is how to do it:

1. Open the Movie that you wish to use as your: External Flash Movie
2. Open the Scene Panel: Window > Other Panels > Scenes (Shift F2)
   
   Every Flash Movie has at least one Scene by default. So unless you have created any Scenes you will see something like this:
   
   
   The Scene Panel.
   
   
3. Double Click on the Scene 1 Label and rename it: Main Content
   
   
   Scene 1 renamed.
   
   
4. Click on the Add Scene button:
   
   
   You now have two Scenes.
   
   
5. Rename Scene 1 to: External Preloader
   
   
   Scene 2 has been re-named.
   
   

Note: The Flash Movie plays from the top Scene down which means that the Preloader will play after the Main Content. Not much point in that!!

6. Drag the new External Preloader Scene to the top:
   
   
   The Scene order is now correct.
   
   
7. Click on the External Preloader Label in the Scene Panel to go to the new Scene. Go to: External Preloader Scene
   
   
8. Add the following ActionScript to Frame 1:

stop();

9. Right click on Frame 2 and select: Insert Blank Keyframe (not Insert Frame)
   
   
10. If the Property Inspector is closed, open it: Window > Properties (Ctrl F3)
    
    
11. Give frame 2 the following Label: Play (This is case sensitive)
    
    
    Frame Label: Play
    
    
12. Add the following ActionScript to Frame 2 :

play();

The External Flash Movie is now complete. Except of course you have to add the real content in the Main Scene.

Warning: If you create a Flash Movie that loops (such as the animation in the example at the beginning of this tutorial) then you need to make sure that the Main content layer(s) does not loop back to this first preloader Scene. Otherwise the stop(); will stop the loop and the animation will cease to animate. In my example that I used at the top of this tutorial I placed the following ActionScript at the end of the Main Content Scene:

    gotoAndPlay (1);

This causes the animation to loop back to frame1 of the Main Scene and play again. If I did not do this the Movie would (by default) go back to Frame 1 of the first Scene and stop. As the main Movie has already loaded the external preloader would no longer nude the main Movie onto action - so the stop would be permanent.

Well that is all there is to it. Enjoy.