Flash CS3 Tutorial - Create a Preloader in Flash

For users who prefer to learn Flash visually we have a range of Adobe Flash CS3 video tutorials, this method of training greatly enhances learning and allows beginners to master even the most complex aspects of Adobe Flash with ease.

View the Flash CS3 Tutorial Videos .

As your SWF files grow bigger, containing a rich variety of resources such as images and sounds, the filesize will inevitably grow. If your Flash is being deployed over the Web, it is likely that at least some users will experience a delay in waiting for your SWF to load fully. Also, if your SWF is interactive, it may be problematic for users to start interacting with it before it is fully loaded. For this reason, a preloader can be extremely useful, particularly one that indicates the progress of the SWF loading, giving the user regular updates on the load progress, this is what we are going to cover on this Flash Tutorial.

There are two broad options for creating a preloader for your SWF: one that is built into the SWF itself, and one that is separate from the main SWF, loading it in as a resource. This Flash tutorial introduces the second approach, which is simpler for beginners.

The method changed significantly with ActionScript 3.0, and as such methods are outlined below for both it and ActionScript 2.0.

We will demonstrate the technique for preloading an SWF that you have created, by creating a second .fla and .swf which will serve the sole purpose of loading the main SWF, indicating progress to the user throughout. To keep the user up to date on the load progress, we need to use an event listener to detect progress in the loading process; we can then provide code that will interpret this progress and feed it back to the user.

For demonstration purposes, you can use an SWF that you have already created as the file that is being loaded; create a new Flash document and save it into the same directory.

For ActionScript 3.0: Create a dynamic textfield on the stage and give it the instance name 'load_txt'; create a new layer for your actions, open the Actions panel (F9 or Window > Actions), enter the following code, replacing the SWF filename with your own:



//required imports

import flash.display.Loader;

import flash.display.LoaderInfo;

import flash.net.URLRequest;

import flash.events.Event;

import flash.events.ProgressEvent;

//create loader and urlrequest objects to load external resources

var swfLdr:Loader = new Loader();

var swfReq:URLRequest = new URLRequest("myswf.swf");//INSERT YOUR OWN SWF FILENAME

//load the swf

swfLdr.load(swfReq);

//set up event listeners to indicate progress to user

swfLdr.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, madeProgress);

swfLdr.contentLoaderInfo.addEventListener(Event.COMPLETE, isLoaded);

//function is called whenever load progress is made

function madeProgress(pEvent:ProgressEvent):Void

{

//show updated percentage

var perc:Number=Math.round((pEvent.bytesLoaded/pEvent.bytesTotal)*100);

load_txt.text="LOADING: " perc;

}

//function is called when load is complete

function isLoaded(evnt:Event):Void

{

//hide textfield

load_txt._visible=false;

}

For ActionScript 2.0: To use the MovieClipLoader class, we also need a MovieClip to load the SWF into; this can be any clip in your movie, but its contents will be replaced by the loaded SWF. Create a dynamic textfield on the stage and give it the instance name 'load_txt'. Then create a new layer for your actions, open the Actions panel (F9 or Window > Actions), enter the following code, replacing the SWF filename with your own:

//create a clip to load the SWF into

var loadclip_mc:MovieClip=_root.createEmptyMovieClip("loadclip_mc", _root.getNextHighestDepth());

//create the MovieClipLoader object

var mcl:MovieClipLoader=new MovieClipLoader();

//create and add the listener object to detect any load progress made

var mcListr:Object=new Object();

mcl.addListener(mcListr);

//define the function for load progress

mcListr.onLoadProgress = function(target_mc:MovieClip, numBytesLoaded:Number, numBytesTotal:Number)

{

var perc:Number=Math.round((numBytesLoaded/numBytesTotal)*100);

load_txt.text="LOADING: " perc;

};

//define the function for when loading is complete

mcListr.onLoadComplete = function(target_mc:MovieClip)

{

load_txt._visible=false;

};

//load the SWF - INSERT YOUR OWN SWF FILENAME

mcl.loadClip("myswf.swf", loadclip_mc);

To see the preloader working normally, you will have to view it over the Web, i.e. upload it to a server and browse to a page with the preloading SWF on it.

Note: The load process is the same if you want to load external resources such as images into your Flash movie.

Advanced exercise: Instead of just displaying the percentage loaded to the user, you can easily create a more stimulating preloader by extending the 'progress' functions. For example, you could create a MovieClip with graphic elements that move or expand along an area representing 100% of the load process (using the percentage to calculate their position each time the 'progress' function is called). Alternatively you can use Flash's built in Progress Bar component to display a simple loading bar effect.