Preloading External Images in Flash Using the MovieClipLoader Class

Posted byProsoxi.com Webmaster Leave a comment on Preloading External Images in Flash Using the MovieClipLoader Class

Preloading External Images in Flash Using the MovieClipLoader Class

The MovieClipLoader class is an ActionScript tool for loading external content such as images and Flash movies into another Flash movie. Other ways for doing this same thing is the Loader Component and the old .loadMovie() method. The MovieClipLoader class is better than those other two methods because of its flexibility and advanced options for tracking the progress of your downloaded objects. This tutorial will teach you the basics on how to use the MovieClipLoader class to load an external image in Flash at run time. You are assumed to have a beginner knowledge of ActionScript in order to follow this tutorial.

Why Load Images Externally?

An SWF file can contain all sorts of assets within it, you can easily import an image in Flash and use it that way, but loading it from an external source at run time can provide you with many benefits such as:

  1. You can update the contents of your movie without having to edit the FLA.
  2. External assets can only be loaded when needed unlike when embed files which have to be loaded all in one go.
  3. When working with a massive number of assets (eg. image galleries) it is usually easier to control them dynamically and load them from wherever the images are to be found instead of importing every single asset.

What Can You Do With the MovieClipLoader Class

The basic function of the MovieClipLoader class is to load external assets, but using it along with a listener makes it possible to create a preloader for external assets and react to various events during the loading process such as the start of the downloading process, its progress, and its completion

Preparation

Before we start you will have to name the image you would like to load image1.jpg and place it in the same folder that will contain your FLA, this folder will also by default be the folder to contain your SWF when you generate it. You can use any JPEG, GIF, or PNG image to follow this tutorial, but you will have to make the changes accordingly if you use any file name other than image1.jpg.

MovieClipLoader Tutorial - Your image must be in the same folder as your FLA and SWF

Starting Off

Our entire project will be constructed in ActionScript 1/2. Make sure that you have your ActionScript options set so before you start. Once you have your FLA opened, right-click the only frame on the timeline and open the Actions panel.

Actions Panel

We will start off with a very simply example that load our images with ease. Simply type the code below, test the movie, and then read the explanation below.

var loader:MovieClipLoader = new MovieClipLoader();
this.createEmptyMovieClip(“MyImageContainer”,1);
loader.loadClip(“image1.jpg”,MyImageContainer);
All of my examples make use of datatyping, ie putting the object type after the colons, e.g. loader:MovieClipLoader. You can learn more about Data Typing from this tutorial.

Explanation

  1. The MovieClipLoader Class is an ActionScript class made for managing the loading of external assets such as images and movie clips. As with the majority of classes in ActionScript, you have to create an instance, i.e. a copy, of this class in a variable to be able to make use of its methods and properties. The first line of our code creates a variable named loader which holds an instance of the MovieClipLoader.
  2. The MovieClipLoader needs a movie clip to hold the image that it will load. For this reason, we have to create a new empty movie clip to hold the externally loaded image.
  3. The final line simply uses the .loadClip method of the MovieClipLoader to load the image into the movie clip that we created.

That is the very basic function of the MovieClipLoader, however, the real power of the Class can be seen when used along with a listener to react to display preloading information and react to the different events during the process of loading the external image. The next step will show you how to create a listener and how to attach it to your MovieClipLoader instance to react to its various events.

Creating a preloader for Our MovieClipLoader Class

A listener is an object that tracks actions and events of another object. In our case, we will create a listener that ‘listens’ to events happening to our MovieClipLoader. We will not create any graphical elements in our tutorial and will relay on the trace() method to show our progress.

var loader:MovieClipLoader = new MovieClipLoader();
this.createEmptyMovieClip(“container”,1);
loader.loadClip(“image1.jpg”,container);

var preload:Object = new Object();
loader.addListener(preload);

preload.onLoadStart = function(target){
trace(“Started Loading”);
}

preload.onLoadProgress = function (target, loadedBytes, totalBytes){
trace(Math.floor((loadedBytes/totalBytes)*100)+”%”);
}

preload.onLoadComplete = function(target){
trace (“Finished Loading!”);
}

The first three lines of our code are the same as we had earlier. The fourth line is the place at which we create our listener object. There is no specific listener class so we use the generic object constructor to create our listener object. The name of our listener here is preload.

var preload:Object = new Object();

The next step is to attach it to the object to which it will be tracking, in our case, that object is our instance of the MovieClipLoader class, that is our loader.

loader.addListener(preload);

Now that our listener has been attached to our instance of the MovieClipLoader, it can ‘listen’ to three events, namely:

  1. When the external assets starts loading – One action can be executed at the start of the process. (.onLoadStart)
  2. While the external assets loads – An action can be continuously executed as the file progresses. (.onLoadProgrss)
  3. When the external assets finishes loading – One action can be executed at the end of the process. (.onLoadComplete)

Those events handlers are to be attached to the listener object as will be illustrated below.

preload.onLoadStart = function(target){
trace(“Started Loading”);
}

The code above will be executed only once when the external asset starts loading. When tested in the Flash authoring tool, the text “Started Loading” will be displayed in the output window.

preload.onLoadProgress = function (target, loadedBytes, totalBytes){
trace(Math.floor((loadedBytes/totalBytes)*100)+”%”);
}

The code above will be executed continuously as the file downloads. The code above calculates the progress percentage by dividing the number of loaded bytes by the total number of bytes the external asset has. It is essential to note that you will have to pass these as arguments to the function in order to be able to use them. We later used the Math.floor() method to round down the percentage.

You should be able to use a graphical preloader for your movie using the same techniques shown in our basic preloader tutorial.

The last event that the listener can react to is the .onLoadComplete:

preload.onLoadComplete = function(target){
trace (“Finished Loading!”);
}

This code is executed once when the external assets completes loading. This code will output the text “Finished Loading” in the output window when tested in the Flash authoring tool.

Testing Your Movie

You can test the downloading process in Flash by pressing Ctrl+Enter once to test your movie, and then pressing it again Ctrl+Enter to emulate actual download. You can configure the emulated connection speed by going through View>Download Settings in the test window.

This concludes our tutorial, please feel free to post any questions you have at the Oman3D Forum.

Related Tutorials:

– End of Tutorial

thanks http://www.republicofcode.com/tutorials/flash/moviecliploader/

Leave a comment