In Part Four we tidied up the code a bit with another class I’ve called CustomPreloader to extend the DownloadProgressBar class and hold the required functions for CustomPreloaders.  Now if we extend the CustomPreloader class all we need to do is override the listener functions to control our preloader.  So lets have a look at another example.

In this case we are going to use the timeline on the MovieClip to display the download time.  All I’ve done is create a Flash File and a preloader MovieClip within it.  Then in the preloader MovieClip i made it have 100 frames and on each frame I put the text “Frame 1″, “Frame 2″ etc.  You can get the example from here -> Timeline Preloader FLA

Now the code.

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

	public class TimelineCustomPreloader extends CustomPreloader
	{
		private var preloadMovieClip:MovieClip

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

		public function TimelineCustomPreloader()
		{
			super();
			preloadMovieClip = new PreloadAssets();
			addChild(preloadMovieClip);
			preloadMovieClip.gotoAndStop(1);
		}

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

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

		override protected function downloadProgress(event:ProgressEvent):void
		{
			var percent:int = Math.floor(event.bytesLoaded/event.bytesTotal*100);
			preloadMovieClip.gotoAndStop(percent);
		}

	}
}

And we change the code on the Application tag in the MXML to be

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”horizontal”
preloader=”com.worthyashes.preloaders.DynamicPreloader”>

So we are pointing to the correct class.  Lets quickly go through the code, as it is quite straightforward.

public function TimelineCustomPreloader()
{
super();
preloadMovieClip = new PreloadAssets();
addChild(preloadMovieClip);
preloadMovieClip.gotoAndStop(1);
}

The only change we have here is we need to stop the preloader playing as soon as it is instantiated.

override protected function downloadProgress(event:ProgressEvent):void
{
var percent:int = Math.floor(event.bytesLoaded/event.bytesTotal*100);
preloadMovieClip.gotoAndStop(percent);
}

As we go through the download as we work out the percentage downloaded we round off the figure and then tell the clip to display (and stop at) that frame.

Click here to have a look.

Right – well that should give you a good idea how you can use a Falsh MovieClip in a swef as a preloader for flex and how to control it.  What about somethign a bit more interesting?  What if you wanted to create a preloader but not use any Flash assets at all, and do it totally dynamically?  OK – lets have a go.

Lets look at the DynamicPreloader.as

package com.worthyashes.preloaders
{
	import flash.events.ProgressEvent;

	public class DynamicPreloader extends CustomPreloader
	{
		private var preloadSprite:DynamicPreloadDisplay;

		public function DynamicPreloader()
		{
			super();
			preloadSprite = new DynamicPreloadDisplay();
			addChild(preloadSprite);
			trace("New dynamic preloader");
		}

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

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

		override protected function downloadProgress(event:ProgressEvent):void
		{
			preloadSprite.displayDownload(event.bytesLoaded/event.bytesTotal*100);
		}

	}
}

Lets go through the code – it won’t take long .

First look at the variables

private var preloadSprite:DynamicPreloadDisaply;

This is the preloader that we will dynamically create.  We instantiate it in the DynamicPreloader constructor. (NOTE: I left the trace in so if you run this code through the debugger it will trace to the console even though flex hasn’t started properly yet)

Finally we need to send the percent downloaded to the DynamicPreloadDisplay class, so we trigger a function I’ve called displayDownload

override protected function downloadProgress(event:ProgressEvent):void
{
preloadSprite.displayDownload(event.bytesLoaded/event.bytesTotal*100);
}

Lets now look at the DynamicPreloadDisplay.as

package com.worthyashes.preloaders
{
	import flash.display.Sprite;
	import flash.filters.BevelFilter;
	import flash.filters.DropShadowFilter;
	import flash.filters.GlowFilter;
	import flash.text.TextField;

	public class DynamicPreloadDisplay extends Sprite
	{
		private var percentText:TextField;
		private var line:Sprite;
		private var totalLineWidth:int = 260;

		public function DynamicPreloadDisplay()
		{
			drawBackground();
			addText();
			addLine();
			createFilters();
		}

		private function drawBackground():void
		{
			graphics.beginFill(0x666666,1);
			graphics.drawRoundRect(0,0,300,100,10,10);
			graphics.endFill();
		}

		private function createFilters():void
		{
			var bevel:BevelFilter = new BevelFilter();
			this.filters = [bevel];
		}

		private function addText():void
		{
			percentText = new TextField();
			percentText.width = 300;
			percentText.x = 20;
			percentText.y = 20;

			var glowFilter:GlowFilter = new GlowFilter();

			percentText.filters = [glowFilter];

			addChild(percentText);
		}

		private function addLine():void
		{
			line = new Sprite();
			line.x = 20;
			line.y = 40;

			addChild(line);
		}

		public function displayDownload(percent:int):void
		{
			line.graphics.clear();
			line.graphics.lineStyle(2,0x00ff00,1);
			line.graphics.beginFill(0xffffff,1);
			var lineWidth:int = totalLineWidth*percent/100;
			line.graphics.drawRect(0,0,lineWidth,15);
			line.graphics.endFill();

			var dropShadowFilter:DropShadowFilter = new DropShadowFilter();
			line.filters = [dropShadowFilter];

			percentText.text = percent.toString() + "% Downloaded";
		}

	}
}

Again lets go through the code.  The DynamicPreloadDisplay extends the Sprite class.  This gives us access to the drawing api and a sprite to display the preloader in.

Constructor : -

public function DynamicPreloadDisplay()
{
drawBackground();
addText();
addLine();
createFilters();
}

When I’m coding I like to pull things out into individual functions that do one thing (well that’s what i try to do) this means that if I need to fix something I’m normally only looking at one specific problem at a time.

Draw Background function

private function drawBackground():void
{
graphics.beginFill(0x666666,1);
graphics.drawRoundRect(0,0,300,100,10,10);
graphics.endFill();
}

This merely draws the background.

Add Text

I want to have a text field to display the percentage downloaded so I create one on the fly.  Note that we create this after the background.  If we did it the other way round the background would be on top of the textfield.

private function addText():void
{
percentText = new TextField();
percentText.width = 300;
percentText.x = 20;
percentText.y = 20;
//Add a filter for a laugh
var glowFilter:GlowFilter = new GlowFilter();

percentText.filters = [glowFilter];

addChild(percentText);
}

Now I want to create a line to display how much has been downloaded visualy

private function addLine():void
{
line = new Sprite();
line.x = 20;
line.y = 40;

addChild(line);

}

The line is another sprite held by the DynamicPreloadDisplay sprite.

Finally – and this is just to demonstrate that this is possible – I’ve added a filter to the background.

private function createFilters():void

{

var bevel:BevelFilter = new BevelFilter();

this.filters = [bevel];

}

The last function to look at is the displayDownload function

public function displayDownload(percent:int):void

{

line.graphics.clear();

line.graphics.lineStyle(2,0x00ff00,1);

line.graphics.beginFill(0xffffff,1);

var lineWidth:int = totalLineWidth*percent/100;

line.graphics.drawRect(0,0,lineWidth,15);

line.graphics.endFill();

var dropShadowFilter:DropShadowFilter = new DropShadowFilter();

line.filters = [dropShadowFilter];

percentText.text = percent.toString() + "% Downloaded";

}

We clear the graphics from the line sprite.  Then we define the line style and fill.  If you want to understand this a bit better then please look at the Flash Drawing API.  Again I’ve applied filters just for the sake of it.

Finally we set the percentText to the percent downloaded.

Click here to see it working.

Well – I apologise for the shocking design but I hope this has given you a good overview of how to implement and create custom preloaders for Flex.  Have fun!