Flashvalley - Flash tutorials - Preloading movies and pictures with the MovieClipLoader class

Implementation

After the theory let's get our hands dirty and let's put it into practice with a little example that should give you a good overview on how to to implement the MovieClipLoader class. Let's have a look at the code below, roll over the

if you want to see the comments associated with the nearby code (be sure you have javascript enabled for this to work properly).

We are just going to load a picture (see preview below) in an empty movie clip and trace the information available at the different stage of the loading. In order to properly simulate the loading process you will need to select CONTROL / TEST MOVIE and from the VIEW menu you will need to define the DOWNLOAD SETTINGS and to select SIMULATE DOWNLOAD (see picture below). In the download settings we will select 56K since the picture to load is quite small and quick to load on a fast connection.

You can decide to create the container movie clip with actionscript or manually in the authoring environment, in our case we will create it with actionscript.

_root.createEmptyMovieClip("container",1);

myLoaderListener = new Object();

myLoaderListener.onLoadStart = function(myContainer){
trace(myContainer+" started receiving data");
}

myLoaderListener.onLoadProgress = function(myContainer,loadedBytes,totalBytes){
trace(myContainer+" has loaded "+loadedBytes+" of "+totalBytes);
}

myLoaderListener.onLoadComplete = function(myContainer){
trace(myContainer+" has loaded the asset");
}

myLoaderListener.onLoadError = function(myContainer,errorCode, httpStatus){
trace("problem loading the data, the error code is "+errorCode+" and the httpStatus is "+httpStatus);
}

myLoaderListener.onLoadInit = function(myContainer){
trace("The data is loaded and ready for action so let's remove the listener to free up some memory ");
myLoader.removeListener(myLoaderListener);
}

myLoader = new MovieClipLoader();
myLoader.addListener(myLoaderListener);
myLoader.loadClip("bird.jpg","container");

function showProgress(){
trace(myLoader.getProgress(container).bytesLoaded);
}

Since the MovieClipLoader class let's you preload SWF you can actually keep most of your assets (sounds, video, pictures) external and preload them individually when needed. Once you understood the basic concepts associated with the MovieClipLoader class it shouldn't be too difficult to build complex preloading system.

Good luck :)

flashvalley.com