Preloading External Flash Movies--tutorial.jcwcn.com

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

Step One: Creating an External SWF Preloader

Open a new: Flash Movie
Go to: Modify > Document
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.
In the Timeline use the Insert Layer button to add 3 layers so you have a total of: 4 Layers
Rename Layer 4 to: ActionScript
Rename Layer 3 to: Timer
Rename Layer 2 to: Preloader
Rename Layer 1 to: Border

You should now see this in the Timeline:

Step Two: Setting up the Timeline

Select Frame 2 on all the layers

All the Frame 2's are selected.
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.
Select all the: Frame 3's
Right click on any of the Frame 3's and select Insert Blank Keyframe

You should have this:

Step Three: The Preloader ActionScript

Select Frame 2 of the Layer: ActionScript
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

Go to: Insert > New Symbol (Ctrl F8)
For Name type: Bar
For Behavior select: Movie Clip
Click: OK
In the Timeline use the Insert Layer button to add 1 layer so you have a total of: 2 Layers
Rename layer 2 to: Border
Rename layer 1 to: Progress Bar

The Layers.
Select Frame 1 of the: Border Layer
Select the Rectangle Tool and: Draw a Rectangle
Return to the Selection Tool:
Click in the centre of the rectangle and press: Delete
Select the outline by double clicking on the: Stroke (Rectangle Outline)
In the Property Inspector set its width to: 102.0
Set its height to: 6.0
In the Timeline Lock the: Border Layer

Your Loader Bar should look similar to this.
Select Frame 1 of the: Progress Bar Layer
Select the Rectangle Tool and: Draw a Rectangle
Return to the Selection Tool:
Double click on the outline Stroke (border) and press: Delete
Click in the centre of the rectangle to select the: Fill
In the Property Inspector change the Fill colour of the rectangle to: Black (or anything you like)
In the Property Inspector set its width to: 0.1
Set it's height to: 3
Then position it inside the border like so:

Note: You may need to Zoom In:

Black Rectangle positioned inside the border.
Right Click on the black rectangle in the Progress Bar Layer and select: Convert to Symbol
Give it a Name: Loading bar
For Behavior select: Movie Clip
For Registration select centre left:
Click: OK
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.
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
The Progress Bar is now complete so click on the Scene 1 Tab to return to the Main Stage:

Go to: Insert > New Symbol

Name the new symbol: preloaderloader

For Behavior select: Movie Clip

Click: OK

Add 2 Layers so that you have a total of: 3 Layers

Rename Layer 1 to: ActionScript

Rename Layer 2 to: Text

Rename Layer 3 to: Progress

Layers inside the preloaderloader.

The ActionScript Layer

Select Frame 1 of the ActionScript Layer and add this code:

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

On the ActionScript Layer right click on Frame 3 and select: Insert Blank Keyframe

Frame 3 has a blank Keyframe.

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
}

On Frame 5 of the ActionScript Layer right click select: Insert Blank Keyframe

Frame 5 has a blank Keyframe.

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

On the Text Layer right click on Frame 2 and select: Insert Blank Keyframe

Frame 2 in the text layer has a blank Keyframe.

Select the Text Tool:

Drag a Text Tool on the Stage to create a: Text Box

Return to using the Selection Tool:

Move the Text Box to the: Centre of the Stage

If the Property Inspector is closed, open it: Window > Properties (Ctrl F3)

In the Property Inspector set the Text Box to: Dynamic Text

If the Show Border Around Text is selected, deselect it:

Give the Text Box a Variable Name (Var): DisplayProgress

Don't get the Variable Name (Var) mixed up with the Instance Name!

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

On the Progress Layer right click on Frame 2 and choose: Insert Blank Keyframe

Open the Library: Window > Library (F11)

Drag onto Stage your Movie Clip: Bar

Place it just above the Text Box like this:

The Bar is just above the Text Box.

In the Property inspector give the Bar Movie Clip an Instance Name: bar

On the Progress Layer right click on Frame 3 and choose: Insert Frame (Not a Keyframe)

Your Timeline should now look like this.

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:

On the Main Stage select Frame 3 in the layer: Preloader

Open the Library: Window > Library (F11)

Drag onto Stage the Movie Clip: preloaderloader

Place it towards the: Centre of the Main Stage

In the Property Inspector give it an Instance Name: preloaderloader

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.
Go to: Insert > New Symbol (Ctrl F8)
Give it the Name: Timer
For Behavior select: Movie Clip

Click: OK
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();
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
On the Main Stage select Frame 3 on the: Timer Layer
Open the Library: Window > Library (F11)
Drag on to the Main Stage the: Timer Movie Clip
Position it about in the: Centre
In the Property Inspector give it an Instance Name: timer

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.
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:
Open the Movie that you wish to use as your: External Flash Movie
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.

Double Click on the Scene 1 Label and rename it: Main Content

Scene 1 renamed.

Click on the Add Scene button:

You now have two Scenes.

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!!
Drag the new External Preloader Scene to the top:

The Scene order is now correct.

Click on the External Preloader Label in the Scene Panel to go to the new Scene. Go to: External Preloader Scene

Add the following ActionScript to Frame 1:
stop();
Right click on Frame 2 and select: Insert Blank Keyframe (not Insert Frame)

If the Property Inspector is closed, open it: Window > Properties (Ctrl F3)

Give frame 2 the following Label: Play (This is case sensitive)

Frame Label: Play

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.
Example: Download the Flash file Int 150a

discuss this topic to forum

[Print][Close][Bookmark:digg+,reddit+,del.icio.us+,dzone+]

Preloading External Flash Movies

relation tutorial

Category

New

Hot