Video Training – Tutorials

Flash CS3 Tutorial – Create a Preloader

November 10, 2008 at 6:09 pm Leave a comment

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 .

Creating a Preloader in Flash – Beginners Tutorial

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;
}
//end of code block

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.

Entry filed under: Adobe Flash CS3. Tags: Flash CS3 Tutorial, Preloader in Flash.