kirupa.com - Reusable Preloader Using MovieClipLoader

Question of the Week

What non-geek hobbies do you have?

	Flash
	Basics / Animation
	ActionScript
	Special Effects
	HTML5
	CSS / HTML Basics
	Animation
	JavaScript
	Common Tasks
	Windows Phone
	Get Help

Reusable Preloader Using MovieClipLoader
by Macneilslt : 9 March: 2005

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 on the previous page.

[ 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) {
};
preload.onLoadProgress = function(targetMC, lBytes, tBytes) {
};
preload.onLoadComplete = function(targetMC) {
};
//default image
my_mc.loadClip("picture1.jpg", "container");
//buttons
button1.onPress = function() {
};
button2.onPress = function() {
};
button3.onPress = function() {
};

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) {
};

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) {
};

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) {
};

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() {
};
button2.onPress = function() {
};
button3.onPress = function() {
};

The last few lines are also quite easy to understand. This is how you use the three buttons you created on the previous page 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.