Right so in Part Three we actually got to write a bit of code and see a working custom flex preloader (even if it doesn’t really look very pretty).

Looking at the code I can tidy this up a bit.  We are always going to need to override the set preloader function to add the listeners.  I’m a bit lazy so if I create a class in-between then I can save a bit of typing.  My new CustomPreloader class looks like this : -

package com.worthyashes.preloaders
{
	import flash.display.DisplayObject;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.ProgressEvent;

	import mx.events.FlexEvent;
	import mx.preloaders.DownloadProgressBar;

	public class CustomPreloader extends DownloadProgressBar
	{
		public function CustomPreloader()
		{
			super();
		}
		//This is the most important
		override public function set preloader(preloader:Sprite):void
		{
			preloader.addEventListener(ProgressEvent.PROGRESS,downloadProgress);
			preloader.addEventListener(Event.COMPLETE,downloadComplete);
			preloader.addEventListener(FlexEvent.INIT_PROGRESS,flexInitProgress);
			preloader.addEventListener(FlexEvent.INIT_COMPLETE,flexInitComplete);
			preloadStarted();
		}

		protected function preloadStarted():void{}

		protected function downloadProgress(event:ProgressEvent):void{}

		protected function downloadComplete(event:Event):void{}

		protected function flexInitProgress(event:FlexEvent):void{}

		protected function flexInitComplete(event:FlexEvent):void
		{
			dispatchEvent(new Event(Event.COMPLETE));
		}
	}
}

To use this class then we can extend it and then override the listener functions as required.  There is also a default function in the flexInitComplete listener to trigger the COMPLETE Event.  Unless it is required to change this function (easily done by overriding the function) then this class will deal with letting the Application know when to start.

So if we refactor the BasicCustomPreloader.as class we get : -

package com.worthyashes.preloaders
{
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.events.ProgressEvent;

	import mx.events.FlexEvent;

	public class BasicCustomPreloader extends CustomPreloader
	{
		private var preloadMovieClip:MovieClip;

		[Embed(source="assets/swf/basic.swf",symbol="preloader")]
		private var PreloaderAssets:Class;

		public function BasicCustomPreloader()
		{
			super();
			preloadMovieClip = new PreloaderAssets();
			addChild(preloadMovieClip);
		}

		private function centreClip():void
		{
			x = (stageWidth/2) - (preloadMovieClip.width/2);
			y = (stageHeight/2) - (preloadMovieClip.height/2);
		}

		override protected function preloadStarted():void
		{
			centreClip();
		}

		override protected function downloadProgress(event:ProgressEvent):void
		{
			var percentage:int = Math.round(event.bytesLoaded/event.bytesTotal*100)
			preloadMovieClip.percent_txt.text = percentage.toString() + "%";
		}

		override protected function downloadComplete(event:Event):void
		{
			preloadMovieClip.percent_txt.text = "100%"
		}

		override protected function flexInitProgress(event:FlexEvent):void
		{
			preloadMovieClip.percent_txt.text = "Initialising";
		}
	}
}

This is hardly earth shattering, bit it does tidy things up a bit and make the implementation of a CustomPreloader a little easier.

In the final part of this tutorial I’ll create two more preloaders, one that will use the timeline of the swf and another that will dynamically draw a preloader without using any assets at all.