After Flash MX 2004 came out I heard all of these great things about the new MovieClipLoader class and how easy it was to use. So naturally I decided to use it for my new site to make the loading of multiple files as easy as possible. Well, I started searching around for information on the class and I only found some very vague documentation, but I decided to go ahead and push through to get it working. With some help from PEDALSPEED I finally got on the right track.

Because of the lack of information out there I decided to put this up to make it as easy as possible for anyone, even someone new to AS to use this great class. This quick little walkthrough will illustrate how to use an arrays to develop a loading queue for loading multiple files in sequence.

Below is the class with comments explaining everything fairly well so if anything is unclear let me know.

/*********************************************************************/
// ---------------------------- Movie Que ----------------------------/
/*********************************************************************/
 
//Create new instance of the MovieClipLoader
var queCL = new MovieClipLoader();
//Sets the inital value of allLoaded to false
_global.allLoaded = false;
 
 
//
//onLoadStart
// ---------- function executed when the file is just pulled from the
// ---------- server before loading starts
//
queCL.onLoadStart = function(targetMC) {
    //Define the loadProgress of the target movie clip
    var loadProgress = queCL.getProgress(targetMC);
    //sets preload bar to inital scale to 0
    preLoader.bar._xscale = 0;  
};
 
 
//
//onLoadProgress
// ---------- function executed while the files is being loaded
//
queCL.onLoadProgress = function(targetMC, loadedBytes, totalBytes) {
    //Get the diviser of loaded versus total size
    myDiviser = Math.floor((targetMC.getBytesLoaded()/targetMC.getBytesTotal())*100);
    //Adjust the xscale of the bar as it is being loaded
    preLoader.bar._xscale = myDiviser;
};
 
 
//
//onLoadComplete
// ---------- function executed once the file is finished loading
//
queCL.onLoadComplete = function(targetMC) {
    var loadProgress = queCL.getProgress(targetMC);
    //Ensures that the bar is set at 100 xscale once it is loaded
    preLoader.bar._xscale = 100;
    //Check lenght of loading loading que array
    //If items still remain in the array
    if (objectsToLoadQue.length != 0) {
        //Shifts file last loaded and moves next file up on the list
        objectShifted = objectsToLoadQue.shift();
        targetShifted = targetsQue.shift();
        //Calls the our queCL instance of MovieClipLoader to load next
        //file in the array
        queCL.loadClip(objectShifted, targetShifted);
    //If no items remain in the que array
    } else {
        //Once all the files in the array are loaded it deletes
        //the array.
        delete objectsToLoadQue;
        delete targetsQue;
        preLoader.bar._xscale = 100;
        //All loaded variable is now set to true
        allLoaded = true;
    }
};
 
//
//onLoadInit
// ---------- function executed once the file is loaded and first frame
// ---------- is intialized
queCL.onLoadInit = function(targetMC) {
    //Place inital actions once loaded
};
 
//
//onLoadErrors
// ---------- function executed if an error results during loading
queCL.onLoadError = function(targetMC, errorCode) {
    //Place actions in case of error
};
/*********************************************************************/
//--------------------------------------------------------End Included
/*********************************************************************/ 

Usage:

//Create instance of the array objectsToLoadQue and targetQue
//objectsToLoadQue = files to be loaded
//targetQue = target movieclips to load into
objectsToLoadQue = new Array();
targetsQue = new Array();
//Fill arrays with values
objectsToLoadQue = ['home_mc.swf', 'homeCenter.swf'];
targetsQue = [_root.myContentPath.holder, _root.centerFlashHolder.holder];
//Starts the intial loadClip and the class handles the rest
queCL.loadClip(objectsToLoadQue[0], targetsQue[0]); 

Disclamer - I am not by any means a heavy duty programmer so some might even laugh at some of my methods. I know this works, but if anyone can improve on this feel free. This is all about learning.

Few people are capable of expressing with equanimity opinions which differ from the prejudices of their social environment. Most people are even incapable of forming such opinions. -- Albert Einstein.

www.newezra.com | www.2advanced.com

[NewEzra]

One other thing to remember is you will not see any results in the Flash output window if you want to trace to test the loading. As odd as it sounds it just will not work. The workaround is to use a text area component and populate the variables to the text area. What I found that works best is to load a large image file to the web and load it from the flash file to test the preloader.

[Prem]

nice tutorial bluebox_d ! I love it !

[ooxford]

push

[dharmesh]

thx bluebox_d

[enyrgee]

nice. I've also written a class for sequentially loading files. It basically accomplishes the same thing as yours (though none of these files ever actually show, its just for preloading). It packages up the code and makes it easier to work with (pass it an array, and a free depth, and tell it to start). Anyway, you can check it out here:

ListLoader Class

BTW - Nice site Bluebox, I hadn't seen it yet!

[stormBliss]

nice..just what i was looking for.

[djrez]

Nice, exactly what I came back here to learn. I can only get the first mc in the array to load. Could someone tell me what is wrong? The following is the only thing I have done. I haven't even made the preLoader.bar yet, so I am confused on how I am already making it complicated for myself.

I used:

queCL.onLoadInit = function(targetMC) {
    targetMC.play();
};
 
 
ObjectsToLoadQue = ['menu.swf', 'logo.swf', 'static.swf'];
targetsQue = [_root.menu_mc, _root.logo_mc, _root.static_mc];
//Starts the intial loadClip and the class handles the rest
queCL.loadClip(ObjectsToLoadQue[0], targetsQue[0]); 

If I try:
queCL.loadClip(ObjectsToLoadQue[1], targetsQue[1]);
or:
queCL.loadClip(ObjectsToLoadQue[2], targetsQue[2]);

...those mc's load fine and play (still only 1 MC though). So I know that the clips and containers are named right.

Why won't all 3 load (or play)?
thanks,
rez

[NewEzra]

did you forget...

ObjectsToLoadQue = new Array();
targetsQue = new Array();

[djrez]

No, I didn't forget that. It still doesn't work. I have 3 empty clips on the stage named: menu_mc, logo_mc, and static_mc. Here is my frame 1. Do you see the problem?

#include "lmc_tween.as"
stop();
// ---------------------------- mc preloader ----------------------------/
var queCL = new MovieClipLoader();
_global.allLoaded = false;
queCL.onLoadStart = function(targetMC) {
    var loadProgress = movCL.getProgress(targetMC);
    preLoader.bar._xscale = 0;
};
//
queCL.onLoadProgress = function(targetMC, loadedBytes, totalBytes) {
    myDiviser = Math.floor((targetMC.getBytesLoaded()/targetMC.getBytesTotal())*100);
    preLoader.bar._xscale = myDiviser;
};
queCL.onLoadComplete = function(targetMC) {
    var loadProgress = movCL.getProgress(targetMC);
    preLoader.bar._xscale = 100;
    //Check lenght of loading loading que array
    //If items still remain in the array
    if (objectsToLoadQue.length != 0) {
        //Shifts file last loaded and moves next file up on the list
        objectShifted = objectsToLoadQue.shift();
        targetShifted = targetsQue.shift();
        //Calls the our queCL instance of MovieClipLoader to load next
        //file in the array
        queCL.loadClip(objectShifted, targetShifted);
        //If no items remain in the que array
    } else {
        //Once all the files in the array are loaded it deletes
        //the array.
        delete objectsToLoadQue;
        delete targetsQue;
        preLoader.bar._xscale = 100;
        //All loaded variable is now set to true
        allLoaded = true;
    }
};
//
//onLoadInit
// ---------- function executed once the file is loaded and first frame
// ---------- is intialized
// ---------------------------- Play home mcs ----------------------------/
queCL.onLoadInit = function(targetMC) {
    targetMC.play();
};
//
//onLoadErrors
// ---------- function executed if an error results during loading
queCL.onLoadError = function(targetMC, errorCode) {
    //Place actions in case of error
};
// ---------------------------- first loaded mcs ----------------------------/
ObjectsToLoadQue = new Array();
targetsQue = new Array();
ObjectsToLoadQue = ['menu.swf', 'logo.swf', 'static.swf'];
targetsQue = [_root.menu_mc, _root.logo_mc, _root.static_mc];
//Starts the intial loadClip and the class handles the rest
queCL.loadClip(ObjectsToLoadQue[0], targetsQue[0]);
// ---------------------------- Button Sounds ----------------------------/
blip_snd = new Sound();
blip_snd.attachSound("blip_snd"); 

rez

[macronesia]

that sucks i never learned 1.0... as 2.0 is tons easier

[NewEzra]

Rez... start doing some tracing to see what the value of objectsToLoadQue.length is. That's what should tell it to start looping through the que.

Also, do you have your export options set to AS 2.0?

[gump]

thanks, appreciate that very much.

[djrez]

Busted! See what you get when you cut and paste someone else's code? Just what I deserved. ObjectsToLoadQue has caps in the "usage" suggestion above.

ahhhh... don't you love pressing F12 and finally seeing what you expected over an hour ago?

thanks for the preloader experience,
rez

[NewEzra]

Originally posted by djrez
Busted! See what you get when you cut and paste someone else's code? Just what I deserved. ObjectsToLoadQue has caps in the "usage" suggestion above.

lol... I fixed it above, so if you want to copy and paste now it should work.

[radakast]

lol, its times like this that i feel like such a noob for not knowing you could do that.

[kiosk77]

MovieClipLoader doesn't work with flash 6.0 does it?

[jocabola]

no way! at least specifications on help tell Flash Player 7 or above...

[laco]

i dont use MovieClipLoader, Bokel has writen Loader Class http://www.helpqlodhelp.com/stuff/lo...rclass1.02.zip
It runs fine too under FP6 and has many cool features

[Julian]

I finally got around to testing out this tutorial and it worked perfect on a new swf I created, but when I tried to build it into my featured work module of my v2 the preloader bar doesn't seem to be moving.

I checked and double checked the path to the bar, so it couldn't be that.

Stage.scaleMode = "noscale";
function fadeOut(object) {
    var fadeTween = new mx.transitions.Tween(object, "_alpha", mx.transitions.easing.Strong.easeOut, 100, 0, 3, true);
    fadeTween.onMotionFinished = function() {
        var fadeFinish = true;
    };
}
var queCL = new MovieClipLoader();
_global.allLoaded = false;
queCL.onLoadStart = function(targetMC) {
    var loadProgress = movCL.getProgress(targetMC);
    bar_mc._xscale = 0;
};
queCL.onLoadProgress = function(targetMC, loadedBytes, totalBytes) {
    myDiviser = Math.floor((targetMC.getBytesLoaded()/targetMC.getBytesTotal())*100);
    bar_mc._xscale = myDiviser;
};
queCL.onLoadComplete = function(targetMC) {
    fadeOut(bar_holder);
    fadeOut(bar_mc);
    mask.play();
    var loadProgress = movCL.getProgress(targetMC);
    bar_mc._xscale = 100;
    if (objectsToLoadQue.length != 0) {
        objectShifted = objectsToLoadQue.shift();
        targetShifted = targetsQue.shift();
        queCL.loadClip(objectShifted, targetShifted);
    } else {
        delete objectsToLoadQue;
        delete targetsQue;
        bar_mc._xscale = 100;
        allLoaded = true;
    }
};
queCL.onLoadInit = function(targetMC) {
    trace("Load Successful");
};
queCL.onLoadError = function(targetMC, errorCode) {
    trace("Error in loading");
};
project = new XML();
project.ignoreWhite = true;
project.onLoad = function() {
    id.text = this.firstChild.childNodes[0].childNodes[0].nodeValue;
    display = this.firstChild.childNodes[1].childNodes[0].attributes.loc;
    address.text = this.firstChild.childNodes[2].childNodes[0].nodeValue;
    client.text = this.firstChild.childNodes[3].childNodes[0].nodeValue;
    tech.text = this.firstChild.childNodes[4].childNodes[0].nodeValue;
    date.text = this.firstChild.childNodes[5].childNodes[0].nodeValue;
    description.text = this.firstChild.childNodes[6].childNodes[0].nodeValue;
    _global.link_length = this.firstChild.childNodes[1].childNodes.length;
    _global.current_link = 1;
    objectsToLoadQue = new Array();
    targetsQue = new Array();
    objectsToLoadQue = [display];
    targetsQue = [targetMC];
    queCL.loadClip(objectsToLoadQue[0], targetsQue[0]);
    for (i=0; i<_global.link_length; i++) {
        links_holder.attachMovie("link", "link"+i, i+1000);
        links_holder["link"+i].link_label.text = i+1;
        links_holder["link"+i].num = i;
        links_holder["link"+i].link_address = this.eval["i"+i]=(this.firstChild.childNodes[1].childNodes[i].attributes.loc);
    }
};
project.load("project.xml"); 

[scarlet10]

Never,

queCL.onLoadProgress = function(targetMC, loadedBytes, totalBytes) {
myDiviser = Math.round(loadedBytes/targetMC.totalBytes*100);
bar_mc._xscale = myDiviser;
};

That shud work!

[Renjamin]

Great Tutorial.

[depth]

bluebox_d --

i noticed you didn't use a listener object with your MovieClipLoader. why not? flash/as help docs all use a listener object.

or more specifically, is there anything that using a listener gives you that you can't get otherwise?

[jassh]

since some =one asked about listener..
i want to add some question along the way..

my question, does listener uses the same CPU resource as onEnterFrame?
Is it resource intensive/intrusive??
What does listener do anyway? how does it triggers??

[Gleyder]

bluebox_b this may sound funny as ***** but ..Where does the script go? im using the same idea of loading multiple movie clips

thanks in advance

[digimat]

good stuff

[ashlaz]

Thanks a lot dudes. I do know the MovieClipLoader class, but this tutorial was great.
Great Going Guys.

[PEDALSPEED]

Originally posted by jassh
since some =one asked about listener..
i want to add some question along the way..

my question, does listener uses the same CPU resource as onEnterFrame?
Is it resource intensive/intrusive??
What does listener do anyway? how does it triggers??

My understanding:

onEnterFrame uses no resources. Moving an Object.onEnterFrame would use up resources.

The playhead is always moving at a user-defined framerate.

To define your question: Are listeners attached to setIntervals or onEnterFrames?

SetIntervals are frame rate dependent.

[AVisioN]

SetIntervals are frame rate dependent.

Since SetInterval works with milliseconds, how can it be that it`s frameDependend.
Isn`t it true that the listener is frame dependend?

[Julian]

I'm back to preloading...again.

One thing I don't understand is why you use movCL.getProgress(targetMC);. Aren't you suppose to use the name of your MovieClipLoader? Also I don't see where you define movCL, maybe I'm just missing it since it's late or something.

Method; returns the number of bytes loaded and total number of bytes for a file that is being loaded using MovieClipLoader.loadClip(); for compressed movies, it reflects the number of compressed bytes. This method lets you explicitly request this information, instead of (or in addition to) writing a MovieClipLoader.onLoadProgress listener function.

Cheers,
-Neverrain

[NewEzra]

Originally posted by Neverrain
One thing I don't understand is why you use movCL.getProgress(targetMC);. Aren't you suppose to use the name of your MovieClipLoader?

movCL is the name of the MovieClipLoader. The targetMC is the var being used in the function. When you call the funtion it will refer to the targetMC that you are calling.

Originally posted by Neverrain
Also I don't see where you define movCL, maybe I'm just missing it since it's late or something.

var queCL = new MovieClipLoader();

That's where the MovieClipLoader is being defined

[Julian]

var queCL = new MovieClipLoader();

That defines movCL? Why isn't it more like this then?

var movCL = new MovieClipLoader();

[rowdypig]

Yeah, I am glad someone else got confused here. I have read the scripts for more than a dozen pre-loaders and they all have some random lack of declaration for the object to which the methods getProgress, etc. are applied. It's as though movCL in the above example is some "generic" or temporary variable that is never used other than to extract the results of the method. But still, why doesn't anyone discuss it? Thanks Neverrain for asking...I'm curious too.

[exuk]

Could someone post a fla file for this thread?

This might help some people who just want to load one swf at a time in an easy and simple manner with actionscript 2.0 (using the player 7).

Paste this on keyframe 1 actions of your master.swf: (I will call this the mcl BLOCK between the mcl line comments for later reference.)

// ------------<MCL>------------ \\
var myMCL:MovieClipLoader = new MovieClipLoader();
var myListener:Object = new Object();
myListener.onLoadProgress = function(target_mc, loadedBytes, totalBytes) {
_level50._visible = true;
var preloadPercent:Number = Math.round((loadedBytes/totalBytes)*100);
_level50.preloader.gotoAndStop(preloadPercent);
_level50.preloadInfo1.text = preloadPercent + " %";
_level50.preloadInfo2.text = Math.round(loadedBytes/1000) + " K / " + Math.round(totalBytes/1000) + "K";
}

myListener.onLoadComplete = function(target_mc) {
_level50._visible = false;
}
myMCL.addListener(myListener);
// ------------</MCL>------------ \\


/* the next action below this comment loads in your actual preloader.swf onto level 50 or a higher number but must be a number above all other levels. The preloader is just a 100 keyframe animation of yours such as a growing line or image representing your loading progress made into an MC and given an instance name of preloader. The above script has two lines of code which mention preloadInfo1.text and preloadInfo2.text... you can have 2 dynamic text fields on your preloader animation to show the percent totals in numbers also if you like...just remember to give them instance names of preloadInfo1 and preloadInfo2. Make sure you have a stop(); action inside the preloader movie clip on the first keyframe so it doesn't animate until we tell it to)*/

myMCL.loadClip("preloader.swf", 50);

//below is something that prompts an error if something fails

// ------------<LoadVars>------------ \\
var myLV:LoadVars = new LoadVars();

myLV.onLoad = function (success) {
if (success) {
_level5.loadedInfo.htmlText = myLV.info;
} else {
_level5.loadedInfo.text = "There has been an error loading the content, please contact the webmaster to let him/her know. Thank you.";
}
}
// ------------</LoadVars>------------ \\

//REMEMBER THIS COMMENT IN CAPITAL LETTERS FOR LATER.

/*if in doubt just paste all this stuff ABOVE THIS COMMENT in keyframe 1 of the actions layer on your master main root swf.*/

__________________________________

Now to the Preloader.fla

paste this in keyframe 1 of your actions layer on the front page of preloader.fla. (the page which has your closed preloader MC in the middle of the page).

/*this tell the dynamic text fields to adjust if necessary for the size of the percent number increase.*/

this.preloadInfo1.autoSize = "left";
this.preloadInfo2.autoSize = "right";

/* don't forget to have a stop action inside the preloader movie clip animation on it's first keyframe as mentioned further up.*/


/* From now on all you have to do to load in swf's and have the preloader do it's thing is as follows: Where it says REMEMBER THIS COMMENT IN CAPITAL LETTERS FOR LATER further up you would type as below*/

myMCL.loadClip("menu.swf", 6);

/*this loads in your main menu page - mine is called menu.swf and i chose level 6 to load it into. All of that stuff above now boils down to just saying myMCL.loadClip (blahblah.swf, layer number or movieclip name); each time you want to load something in using the preloader.*/

/* finally for each other page in your site that contains buttons with which you will load in content using this preloader you should paste the mcl BLOCK mentioned above into the same place on those pages.

I hope this is of some use to people out there.

I didn't write it myself, i just learn't it via Lynda.com Flash tutorials (which i recommend) and have found it very useful as are many of their training videos.

[thaGizmo]

Hi all, i have tried before to write a class like this, but always ran into problems with:

a. Viewing the preload progress in the IDE (seems there are problems with onLoadProgress in the IDE)
b. Trying to add 'load onto level' instead of creating a MC for every load.

Are these problems both solvable? Until then i'll keep using the loaderclass mentioned above (which works great btw, but just isn't clear as2.0 unfortunately)

[macronesia]

onloadprogress only works in the browser.

this is helping me... glad i found it.

[macronesia]

anyone know how to play an SWF animation instead of text?

i really need to find out.

[macronesia]

bluebox's PM INBOX IS FULL...

no... i had a Q about how he made new ezra's transitions.

[macronesia]

guys, bluebox you use que as an MCL class, you don't even have a listener... thus making the code invalid.