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

Tutorial - Preload External Flash Movies with Components

Free Flash Tutorial

In this preloader tutorial you will learn how to load an external Flash file into another Flash Movie using the Loader and Progress Bar Components. The use of Components make this is very simple and quick build. You can then break up your Flash project into several Flash movies rather than having one very large Flash file. It also means that the user only needs to wait for that section of the site that they wish to view.

Cross Ref: If you are not using Flash 8 or Flash MX 04 you will need to follow an alternative preloader tutorial. 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 151a

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 Layers

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

You should now see this in the Timeline:


The three layers.

Step Two: Setting up the Publish Settings

1. Go to: File > Publish Setting
2. Under the Formats Tab for Type Select: Flash
   
   
   
   
3. Click the: Flash Tab
4. Select: Flash Player 6 (or higher)
5. Select: ActionScript Version 2
   
   
   Selecting Player 6 and ActionScript 2.
   
   
   If you are using external Jpegs it is likely that your Flash Movie is small. All the same I would suggest that you also select Compress Movie. This can make a dramatic difference to the size of the final Movie. I have often seen up to 40% reduction in the file size, depending on the Movie's content. In my experience compressing a Movie makes no difference to the performance.
   
   
6. Select:
   
   
7. Click: OK

Step Three: The Loader Layer

1. Select Frame 2 of the layer: Loader
2. Right click (Mac: Ctrl click) on Frame 2 and select: Insert Blank Keyframe (Not Frame)
3. Open the Component Panel: Window > Components (Ctrl F7)
4. Scroll down until you find the:
5. Drag onto Stage the: Loader Component
   
   
   The Loader on Stage.
   
   
   Your Timeline should look similar to this.
   
   
   

Note: The Movie Will load from the top left corner and expand out to the bottom right as in the illustration below:


The Movie Loads from the top left corner of the Loader Component.

To resolve this it is necessary to reset the X Y positions of the Loader.


6. If your Property Inspector is closed, open it: Window > Properties (Ctrl F3)
7. Set the X and Y positions both to: 0

   Note: From a design point of view it maybe better to set the width and height to the size of the incoming Movie so that you can see the actual position that it will occupy on the Stage. Form a programming point of view this is not necessary unless you wish to scale your external Movie into the Loader. If you wish to do this you will need to make a minor alteration to the ActionScript below.

8. For the ActionScript to know where to place the external Flash Movie the Loader Component needs to be named. In the Property Inspector give the Loader the Instance Name: myLoader
   
   
   The Loader Component has an Instance name and the X Y values have been set.
   
   The Loader Component is now complete but it is easier if the layer is locked.
   
   
9. In the Timeline click next to the Loader lock:
   
   
   Loader layer is locked.

Step Four: The Progress Bar Layer

1. Select the Layer: Progress Bar
2. Right click on Frame 2 and select: Insert Frame (not Keyframe)
   
   
   The Progress Bar Layer has two Frames.
   
   
   
3. Return to: Frame 1
4. From the Component Panel drag onto Stage the:
5. Centre the: Progress Bar
   
   
   The Progress Bar Component centred on the Stage.
   
   
   
6. In the Property Inspector give it the Instance Name: myProgressBar
   
   This Layer is now complete.
   

Step Five: The ActionScript Layer - 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 Six: The ActionScript Layer - Frame 2

1. Right click on Frame 2 of the layer: ActionScript
2. Select: Insert Blank Keyframe
3. Add this code to Frame 2 of the layer: ActionScript
   
   /* 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);
   
   // Makes the Progress Bar visible
   myProgressBar._visible = true;
   
   // Create a listener object event function. The Progress Bar is an object so needs an object function to work
   myProgressBarListener = new Object();
   
   // When the Progress Bar is complete and has preloaded this Movie, the listener will call and run this code below:
   myProgressBarListener = function (eventObject) {
   // Anything you place here will run after the External Movie loads.
   
   // Hide the Progress Bar now that we are done
   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. When it is complete it will call the function myProgressBarListener */
   myProgressBar.addEventListener("complete", myProgressBarListener);
   
   // Set up the Progress Bar Component to polled
   myProgressBar.mode = "polled";
   
   // Set the preloader location of the Progress of the loader Component
   myProgressBar.source = "myLoader";
   
   // Set the file name and location of the external swf Movie
   myLoader.contentPath = "myMovie.swf";
   
   // Set the external swf Movie scales to fit the loader (true), or the loader scales to fit the content (false).
   myLoader.scaleContent = false;
   
   // automatically load the external swf Movie
   myLoader.autoLoad = true;
   
   // Stop the Movie at the Frame until the Movie has been preloaded
   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.