Reusable Preloader Using MovieClipLoader

by Macneilslt   | filed under Flash and ActionScript

This tutorial is a step by step guide on creating a reusable preloader for external .swf and .jpg files, using the new MovieClipLoader(); class introduced in Macromedia Flash MX 04. Since this tutorial uses the MovieClipLoader(); class, preloader will only work in flash player 7.

The movie below is an example of what we will be making. High broadband users may not get a chance to see the preloader in action, but dial up users will be able to see the full effect.

[ an example of what you will create ]

Here is How:

1. Open Flash MX 04, create a new document, I used 300x200, but any size will work.

2. Name the first layer "Actions" (no quotes). Insert a new layer, name the new layer "bar" (no quotes). Use the rectangle tool to draw a borderless rectangle 100px wide and 7px tall. After you have the rectangle on the stage select it, then press F8, or Select ... Modify...Convert to symbol, and choose Movie clip. Before you press okay, be sure to set the registration point of the movie to left. After you have the bar symbol created, Open the properties selector and give it an instance name of "bar" (no quotes).

3. After the "bar" symbol is on the stage, open it's properties and give it an instance name of "bar" (no quotes). See the image below for comparison.

[ Take note of registration, Symbol name, and "bar" Instance Name]

4. After you have the "bar" layer completed, insert a new layer. Give the new layer a name of "border" (no quotes). On this layer, using the line tool, draw a border for the "bar" symbol you have just created. Hint: Turn on the Snap Objects Option (located at bottom of tool bar, shaped like a magnet) to make make the lines snap to the "bar" symbol. You can use any color or line thickness. I used a red line, 4px thick.
5. After you have you have the border created, select all 4 sides and press F8 to convert it to a symbol, or Select... Modify... Convert to symbol. Choose Movie clip, and give it a name of "border" (no quotes"). After you have the "border" (no quotes) symbol created, open the properties selector, and give it an instance name of "border" no quotes. See the image below for comparison.

   
   
   
   [ Take note of Symbol name, and "border" Instance Name ]
    
6. So far we have 3 layers, actions, bar, and border. Next we need to insert a new layer, name this new layer "text" (no quotes). Insert a Dynamic text box below your bar. Open up the text properties, set the instance name to "pText" (no quotes). see the image below for comparison.
   
   
    
   [ Take note of Dynamic Text Option, and "pText" Instance Name]
    
7. If your text looks like mine, then we are ready to move on. Insert a new layer called "buttons" (no quotes"). I made mine 75px wide and 19px tall, but any width / height will work. After you have your rectangle drawn out, select it and press F8, or Select... Modify... Convert to symbol, to convert it into a Movie clip. After you have the button clip created, give it an instance name of "button1" (no quotes). Copy and paste the button on the stage two more times, give each new button an instance name of "button2" and "button3" respectively.

[ Take note of the "button1" instance name ]

8. Now that we have finished setting up the stage, we are ready to move on to the next section and set up the script that makes this preloader work.

Before we move on, compare your stage to the image below, if you didn't use same sizes as I did then your movie will look different. This is just a guide. Stage setup was explained in the previous section.

[ an example of what you will create ]

Adding the Action Script

Click the first keyframe of the of the "actions" layer and insert the following code. It seems complicated, but we will go over it shortly.

bar._visible = false;
border._visible = false;
this.createEmptyMovieClip("container", "100");
my_mc = new MovieClipLoader();
preload = new Object();
my_mc.addListener(preload);
preload.onLoadStart = function(targetMC) {
  trace("started loading "+targetMC);
  container._visible = false;
  bar._visible = true;
  border._visible = true;
  pText._visible = true;
};
preload.onLoadProgress = function(targetMC, lBytes, tBytes) {
  bar._width = (lBytes/tBytes)*100;
  pText.text = "% "+Math.round((lBytes/tBytes)*100);
};
preload.onLoadComplete = function(targetMC) {
  container._visible = true;
  border._visible = false;
  bar._visible = false;
  pText._visible = false;
  trace(targetMC+" finished");
};
//default image
my_mc.loadClip("picture1.jpg", "container");
//buttons
button1.onPress = function() {
  my_mc.loadClip("picture1.jpg", "container");
};
button2.onPress = function() {
  my_mc.loadClip("picture2.jpg", "container");
};
button3.onPress = function() {
  my_mc.loadClip("picture3.jpg", "container");
};

That is the script behind this movie. Now lets go over it a few lines at a time to get a better understanding of what is going on.

bar._visible = false;
border._visible = false;
var empty = this.createEmptyMovieClip("container", "100");
empty._x = 0;
empty._y = 0;

The first and second lines set the "bar" and "border" symbol's visibility to false when the movie first loads. The third line creates an empty MovieClip with an instance name of "container" (no quotes) and a depth of 100. This is where the content willl be loaded The fourth and fifth lines set the empty containers X and Y coordinates.

my_mc = new MovieClipLoader();
preload = new Object();
my_mc.addListener(preload);

The first line assigns the MovieClipLoader(); class to the variable "my_mc" (no quotes. The next line declares a new Object(); and names it preload. The third line listens for events related to the preload object.

preload.onLoadStart = function(targetMC) {
  trace("started loading "+targetMC);
  container._visible = false;
  bar._visible = true;
  border._visible = true;
  pText._visible = true;
};

The first line is initiated when the the a file begins to load in the targeted mc (which is later set to "container"). Next there is a trace, this is just a check to see if the movie clip is loading properly, this will be displayed in the output box in flash. Next we set the "bar" and "border" symbol's visibility to true so that the user can see the progress of the movie, what good would a preloader be with out visual aids? after that, we also set the visiblity of pText to true.

preload.onLoadProgress = function(targetMC, lBytes, tBytes) {
  bar._width = (lBytes/tBytes)*100;
  pText.text = "% "+Math.round((lBytes/tBytes)*100);
};

The first line of code declares the onLoadProcess function, part the the MovieClipLoader(); There are 3 parameters in this function, Target, Loaded Bytes, and Total Bytes respectively. The second line sets the bar's width based on the amount of bytes loaded divided by the amount of total bytes, this updates automatically as the the listener receives call backs from the function. pText is updated in the same way as as the bar width, Math.round(); is used to make the number pretty.

preload.onLoadComplete = function(targetMC) {
  container._visible = true;
  border._visible = false;
  bar._visible = false;
  pText._visible = false;
  trace(targetMC+" finished");
};

The first line of code declares the onLoadComplete(); function, the parameter indicates the targeted Movie Clip which is still "container". Next the "container" symbol's visibility is set to true so the user can see what has been loaded into the movie. The next two lines after that set the "bar", "border", and "pText" visibilities to false. This ensures they will not be visible over the loaded content. The last line is in the function is a trace to verify the movie has been loaded correctly.

my_mc.loadClip("picture1.jpg", "container");

This line is pretty simple, it defines the default image to be loaded. The line involves to parameters, the first one "picture1.jpg" is the file name. If you do not have your images in the same directory, you need to include the path, Example: "www.yoursite.com/images/picture1.jpg" . The next param, is the target, this image is being loaded into the the empty "container" Movie clip that we created at the start.

button1.onPress = function() {
  my_mc.loadClip("picture1.jpg", "container");
};
button2.onPress = function() {
  my_mc.loadClip("picture2.jpg", "container");
};
button3.onPress = function() {
  my_mc.loadClip("picture3.jpg", "container");
};

The last few lines are also quite easy to understand. This is how you use the three buttons you created in the previous section of of this tutorial. When each button is pressed, the corresponding image is loaded into the "container" Movie Clip.

That's it, enjoy your reusable preloader.

	Note
In order for you to see your preloader in action, you need to test it online. Also be sure to publish for the Flash 7 Player.

Download Source

If you have any problems with this tutorial, I and others will be more than happy to help you out on the Flash MX 04 Forum.

Cheers!

Macneilslt aka James Chaney

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy kirupa's books, became a paid subscriber, watch the videos, and/or interact on the forums.

Your support keeps this site going! 😇