Preload External Flash Movies	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Tutorial - Preload External Flash Movies using Movie Clips

Free Flash Tutorial

This tutorial shows you an easy way to load one Flash Movie into another. This loads the external Flash SWF Movie into a Movie Clip with the help of the Progress Bar Component. Loading a Movie into an MC means that you can address the Movie Clip in the ActionScript and change the Movie Clips properties. This MC includes the external swf file so any change that you impose on the Movie Clip also changes the external Movie nested within.

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 152a

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: Setting up the Movie

1. Open a new: Flash Movie
2. Set the Movie to a size large enough to hold the externally loaded swf Movie. Mine is: 185 x 125 px
3. In the Timeline use the Insert Layer button to add 1 layers so you have a total of: 2 Layers
4. Rename Layer 1 to: ActionScript
5. Rename Layer 1 to: Progress Bar
   
   

You should now see this in the Timeline:


The two layers.

Set Two: Setting up the Progress Bar

1. Select Frame 1 or the Layer: Progress Bar
2. Open the Component Panel: Window > Components (Ctrl F7)
   
   
   The Components in Flash 8 Basic.
   
   
3. Drag onto Stage the:
4. Centre the: Progress Bar
   
   
   The Progress Bar centred on Stage.
   
   
5. If the Property Inspector is closed, open it: Window > Properties (Ctrl F3)
6. Give the Progress Bar the Instance Name: myProgressBar
   
   
   The Progress Bar has the Instance Name: myProgressBar

Warning: Instance Names are case sensitive.

7. Right click (Mac: Ctrl click) on Frame 2 and select: Insert Frame (not Keyframe)
8. Lock the Layer:
   
   
   The Progress Bar Layer has 2 Frames and is locked.

Step Three: The Actions - Frame 1

1. Select Frame 1 of the Layer: ActionScript
2. Add this code (if you wish leave out the gray comments):
   
   // Create a new Object. The Progress Bar is an object so needs an object function to work
   myProgressBarListener = new Object();
   
   /* Create a listener object event function. When the Progress Bar is complete and has preloaded this Movie, the listener will call and run this code below:   */
   myProgressBarListener = function (eventObject) {
   
   // Hide the Progress Bar - we don’t need it any more as the Movie has now loaded
   myProgressBar._visible = false;
   
   // Remove the listener
   myProgressBar.removeEventListener("complete", myProgressBarListener);
   
   // Ends the function
   };
   
   // Declares a listener. This detects when the Progress Component has loaded the Movie. Then when the preloading is complete it calls the function myProgressBarListener
   myProgressBar.addEventListener("complete", myProgressBarListener);
   
   // Set up the Progress Bar Component to polled when loading the Movie. This will give a polled look to the Progress Bar as it loads. It has to be set to polled to work
   myProgressBar.mode = "polled";
   
   // Set the location to load as this Movie.
   myProgressBar.source = "_root";

Step Four: The Actions - Frame 2

1. Right click on Frame 2 in the Layer: ActionScript
2. Select: Insert Blank Keyframe (not frame)
3. Add this code:
   
   // Create a Movie Clip to load the swf Movie into
   this.createEmptyMovieClip("myExternallyLoadedSWFMovieHolder", 0);
   
   // A variable to hold the name and location of where the external swf Movie is located
   var myVariable = "myMovie.swf";
   
   // Set the Movie's location on the Stage
   myExternallyLoadedSWFMovieHolder._x = 0;
   myExternallyLoadedSWFMovieHolder._y = 0;
   
   /* Set the Progress Bar to manual mode so that we can reset its value back to 0. We don't want it staring from 100 ! */
   myProgressBar.mode = "manual";
   
   // Reset the Progress Bar back to zero
   myProgressBar.setProgress(0, 100);
   
   // Show the Progress Bar
   myProgressBar._visible = true;
   
   // Create a listener object event.
   myProgressBarListener = new Object();
   
   // When the Progress Bar is complete and has preloaded the Movie, the listener will call and run this code below:
   myProgressBarListener = function (eventObject) {
   
   // Hide the Progress Bar now the Movie is loaded
   myProgressBar._visible = false;
   
   // This next section is optional.
   // If you wish to remain on Frame 2 and view the External Movie do nothing
   // Otherwise un-comment any of the options bellow:
   // Plays the Movie from Frame 2 onwards:
   // play();
   // Go to the next Frame:
   // nextFrame();
   // Go to the next scene but may not automatically play beyond the Frame 1 in the next scene:
   // nextScene();
   // Goes to a Frame Label or Frame number and Play:
   // gotoAndPlay("myFrameLabel");
   // gotoAndPlay(10);
   // Go to and stop at the Frame Label or Frame number:
   // gotoAndStop("myFrameLabel");
   // gotoAndStop(10);
   
   // closes the function
   };
   
   // Declares a listener that detects when the Progress Component has loaded the external Movie and is complete.
   // It will call the function myProgressBarListener when the external swf Movie has loaded
   myProgressBar.addEventListener("complete", myProgressBarListener);
   
   // Set up the Progress Bar Component variables
   // Set up the Progress Bar Component to polled when loading the Movie. It has to be set to polled to work
   myProgressBar.mode = "polled";
   
   
   // Set the preloader source to show the progress of the loader Component as it loads the external swf Movie
   myProgressBar.source = "myExternallyLoadedSWFMovieHolder";
   
   /* This is how we automatically load the external swf Movie. We call the load Movie Clip event and load the external swf Movie into the Movie Clip we created through ActionScript */
   loadMovie(_root.myVariable, _root.myExternallyLoadedSWFMovieHolder);
   
   // Stop the Movie at the frame until the Movie is loaded
   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:

myLoader.contentPath = "images/myMovie.swf";

You may also use a full URL like this:

myLoader.contentPath = "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.

Your Layers should now look like this:

That's it.