ActionScript 3.0 Preloader Tutorial

Flash movies can get pretty large. You don't want your viewers staring at a blank screen; wondering when, if at all, the flash movie will play. You should attach a preloader to your flash movies.

With ActionScript 3.0, making a preloader is duck squat. You simply add a ProgressEvent listener to whatever it is you want to load; .swf, audio file, image, or XML data and update the screen accordingly.

Here is an example of how to create a preloader in Flash:

//www.robkeplin.com/blog

package com.keplin {
	
	import flash.display.MovieClip;
	import flash.display.Loader;
	import flash.display.Sprite;
	import flash.net.URLRequest;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.events.ProgressEvent;
	import flash.events.Event;
	
	public class PreLoader extends MovieClip {
		
		private var outerBar:Sprite;
		private var progressBar:Sprite;
		private var percentTxt:TextField;
		private var format:TextFormat;
		private var loader:Loader;
		
		public function PreLoader() {
			setupGUI();
			
			loader = new Loader();
			loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, updateDisplay);
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE, showSwf);
			loader.load(new URLRequest("NeedsPreloader.swf"));
		}
		
		private function updateDisplay(e:ProgressEvent):void {
			var percent:int = Math.round((e.bytesLoaded / e.bytesTotal) * 100);
			setPercentTxt(percent);
			setProgressBar(percent);
		}
		
		private function showSwf(e:Event):void {
			removeChild(outerBar);
			removeChild(progressBar);
			removeChild(percentTxt);
			outerBar = null;
			progressBar = null;
			percentTxt = null;
			
			addChild(loader.content);
		}
		
		private function setupGUI():void {
			format = new TextFormat();
			format.color = 0x114477;
			format.font = "Verdana";
			format.size = 10;
			
			percentTxt = new TextField();
			percentTxt.x = stage.stageWidth/2 - 20;
			percentTxt.y = stage.stageHeight/2 + 25;
			setPercentTxt(0);
			
			outerBar = new Sprite();
			outerBar.graphics.lineStyle(1, 0x114477);
			outerBar.graphics.beginFill(0xF5F5F5);
			outerBar.graphics.drawRect(stage.stageWidth/2 - 60, stage.stageHeight/2, 100, 10);
			outerBar.graphics.endFill();
			
			progressBar = new Sprite();
			setProgressBar(0);
			
			addChild(outerBar);
			addChild(progressBar);
			addChild(percentTxt);
		}
		
		private function setPercentTxt(perc:int):void {
			percentTxt.text = perc + "%";
			percentTxt.setTextFormat(format);
		}
		
		private function setProgressBar(perc:int):void {
			progressBar.graphics.beginFill(0x114477);
			progressBar.graphics.drawRect(stage.stageWidth/2 - 60, stage.stageHeight/2, perc, 10);
			progressBar.graphics.endFill();
		}
	}
}

If you need more information, or help setting up a preloader - feel free to write a question in the comments, or shoot me an email!