Return to Kroll Design home page

Flash Tutorials (with .FLA files included)

 
« Return

ActionScript 3

Preloader

If it takes a few seconds (or longer) for a Flash movie to load, it's more respectful to users to show them the progress of the movie that's loading, instead of just showing them a blank screen. Also, some Flash movies will fail to work correctly if the user starts to use it before it's done loading. In order to address these concerns, many Flash movies, especially games or other content with large file sizes, display something called a "preloader" while the Flash movie is loading. The preloader has several common looks: (1) an empty rectangle that fills from left to right as the movie loads (2) a ring that rotates while the movie is loading (3) a text message that indicates what percent of the movie is loaded so far.

This example uses a preloader, and if your internet connection is really quick, you may not even see the preloader in action. But I purposely made the movie load a very large photo, over 2 megabytes in size, so many users will see the preloader before the file is done loading.

To intentionally slow the loading of the image, so that you can see the preloader in action, do Ctrl-Enter to open the test (SWF) window, then from THAT windows select "View...Download Settings" to select a simulated download speed, then after that do "View...Simulate Download" to simulate a slow connection:



Download the FLA file

// When testing this movie, do Ctrl-Enter to open the test (SWF) window,
// then from THAT windows select "View...Download Settings" to select a simulated 
// download speed, then after that do "View...Simulate Download" to simulate a slow
// connection.  This allows you to see the preloader in action.

// For some reason, when I do Simulate Download, when it's done loading, 
// I get an error message that keeps repeating, which indicates to me that the 
// removeEventListener is failing when I do Simulate Download: 
//   TypeError: Error #1009: Cannot access a property or method of a null object reference.
// I don't get this error message when I test the movie without Simulate Download --
// When I test the movie without Simulate Download, removeEventListener succeeds, as 
// proven by the trace statement display of doesListenerExist2. 

stop();

preloader_mc.preloaderFill_mc.scaleX = 0;

preloader_mc.addEventListener(Event.ENTER_FRAME, checkLoadProgress);

var doesListenerExist1:Boolean = preloader_mc.hasEventListener(Event.ENTER_FRAME);
trace("doesListenerExist1: " + doesListenerExist1);

function checkLoadProgress(myEvent:Event)
{
// It's important that amountLoaded is declared as Number, not int, because
// amountLoaded is a number less than 1 for all but the final moment of loading, 
// and a number less than 0.5 for the first half of loading.
   var amountLoaded:Number = root.loaderInfo.bytesLoaded / root.loaderInfo.bytesTotal;
	 var percentLoaded:int = amountLoaded * 100;	
	 
	 //trace("amountLoaded: " + amountLoaded);
	
	 preloader_mc.pctLoaded_txt.text = percentLoaded;
	 preloader_mc.preloaderFill_mc.scaleX = amountLoaded;	 
		
  if (percentLoaded >= 100)
	 {			
	// Remove the	event listener after it's no longer needed:			 
	   preloader_mc.removeEventListener(Event.ENTER_FRAME, checkLoadProgress);	
		 var doesListenerExist2:Boolean = preloader_mc.hasEventListener(Event.ENTER_FRAME);
     trace("doesListenerExist2: " + doesListenerExist2);
		 gotoAndStop("doneLoading");		 
   }
}


 
« Return


©2012 Kroll Design    info@KrollDesign.net    781.910.3694
Last modified: 12/31/1969 7:00 PM