Preloader in Flash CS3 – Actionscript 3.0 way

When you want to preload a SWF, JPG,PNG, or GIF in Flash CS3 using Actionscript 3.0 you must use some slightly different way as you did in Actionscript 2.0. The MovieClipLoader class is not used anymore in AS3. Also the loadVars classes are away in Actionscript 3. In this small article I discuss the new way of preloading with a simple example that preloads an image.

I am using the Adobe Flash 9 public Alpha (actionscript preview) for this example which you can download here at the labs.adobe.com site.

Let’s start to have a look at the first lines of the code which is all placed on the first frame of a new Flash 9 document.

All loading stuff is done by the Loader and the LoaderInfo class so let’s import it:

import flash.display.Loader;       

import flash.display.LoaderInfo;

As you see they are located in the flash.display package. We make an instance of the Loader class:

var myLoader:Loader = new Loader();

The Loader class has a method called load which takes an URLRequest as parameter. So if we want to load something we must first define an URLRequest instance that points to the file we want to load:

var myRequest:URLRequest =       

new URLRequest("myImageToLoad.jpg");

To use this URLRequest class we also must import it; so at the top of our code we put following code under the import of the LoaderInfo class:

import flash.net.URLRequest;

Now we can use the load method of the Loader class to start load an image on stage and use the URLRequest as parameter:

myLoader.load(myRequest);

Next step is to capture the progress of the loading. This is done by adding eventListeners to the contentLoaderInfo property of the loader object we have instantiated. In this case we use the Event.OPEN, ProgressEvent.PROGRESS and Event.COMPLETE events and we also point to a callback function we want to use:

myLoader.contentLoaderInfo.addEventListener(Event.OPEN,showPreloader);
myLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,showProgress);
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,showLoadResult);

As you see we declared three callback functions: showPreloader(), showProgress and showLoadResult. I used the Event constants to describe which event I want to listen for. This implies that we must import these necessary classes so Flash can interprete those specific constants. So at the top of your code write following code:

import flash.events.Event;
import flash.events.ProgressEvent;

What we want to do is showing the load progress in a simple textField. But offcourse you can make your own custom preloader if you want; principle is the same. So far so good, thus we need a textfield, lets instantiate one:

var loadProgress_txt:TextField = new TextField();

Again, if we want to use the TextField class we must import it: at the top of your code place following import statement:

import flash.text.TextField;

Ok, now we are ready to write the first callback function that reacts on the OPEN event. In this function we just want to display the textfield. We do this by simply adding it to the displayList:

function showPreloader(evt:Event):void {
	addChild(loadProgress_txt);
}

The second callback function is called when progress during loading is made. In this function we want to show how much is already loaded:

function showProgress(evt:ProgressEvent):void {
	loadProgress_txt.text = "loaded:"+evt.bytesLoaded+" from "+evt.bytesTotal;
}

As you see we can get the bytesLoaded and the bytesTotal propertys directly from the progressEvent. We override the text property of our textField every time progress is made.

The last callback function we must write is the showLoadResult() function. This function only must remove the textField from the displayList and add the content that is loaded to the displayList : so here are the last lines of the code:

function showLoadResult(evt:Event):void {
	removeChild(loadProgress_txt);
	addChild(myLoader);
}

As you see preloading in AS is a bit different and you have to get used to the new way but ones you get it, it’s fun!

That’s it for now; if you have questions… please leave a comment !

UPDATE : Take a look at this extra article on preloading