Flash Preloader. Howto. (Part 1) Two frames.

There are several ways the preloader can be implemented in the flash document.

This is the first article, which covers the one way of building the flash preloader.

Two frames.

That’s the very old method, I believe it came with ActionScript1, but still is used in various flash applications.

Technique.

The preloader animation and progress label are put in a first frame of your flash document, and in onEnterFrame handler the percentage of loaded data is checked and updated.

All other data: images, animations, texts, etc. are put in the next frame (or frames) of your main stage.

When the document is loaded it’s just needed to navigate to the next frame, hence the preloader screen is not active anymore.

Sample.

[SWF]http://flashdaweb.com/demo/flash/preloader-howto/two-frames.swf , 550 , 400 [/SWF]

Code.

This is a sample code, we put in the first frame for preloader to work as shown in a sample above.

stop();

this.onEnterFrame = function()

{

   var loadingProgress:Number = _root.getBytesLoaded()/_root.getBytesTotal();

   if(loadingProgress < 1)

   {

      //the movie is still loading

      _root.txt_loading.text = "LOADING... " + Math.round(loadingProgress*100) + "%";

   }

   else if (loadingProgress == 1)

   {

       _root.gotoAndStop(2);

   }

}

Sources.

Download the source fla file and see how the above technique of flash preloader was implemented for the sample.

To be continued…

PS: If you are looking for a ready-to-use solution for your preloader need, please check our free flash preloader component page.

Please visit our book store for more tips and tricks described in good books that we recommend