jump to navigation

Custom preloader – progress bar flex August 21, 2010

Posted by Tournas Dimitrios in Flex.
trackback

So you want to replace the default preloader of flex by your own designed preloader well its easy . Download the project source file CustomPreloader.zip and copy the “preload” from src folder to the source folder of your project. It contains 2 files needed to run preloader : One class file “CustomPreloader.as” contains code and a design file ” greenBar” of progress bar . To change design you can also replace the “greenBar” with your own file swf file .
Now the final step: set custom Preloader class to implement on your project by setting
preloader =preloader= “preload.CustomPreloader” in the application tag of your project mxml file .
Like this :

< ? xml version="1.0" encoding="utf-8"?>
<m x: Application 	xmlns:mx="http://www.adobe.com/2006/mxml"	preloader= "preload.CustomPreloader" 
	layout="absolute"
	  backgroundColor="#000000">
		
	<m x: Button label="Application loaded " top="256" right="215" left="411" bottom="39"/>
	
	
</m x: Application>

How it functions:

We start from the code file “CustomPreloader.as” . This class CustomPreloader extends DownloadProgressBar which replaces thedefault progressbar of flex. The external design file contains design of 200 px preloader in width. The class file loads the preloader design file and masks it completly by drawing application background color line.Black in this case because background is black. As the application loads the mask starts decreasing in size revealing the masked progressbar.And compete progress bar is shown when file is loaded completely.

How to change design :

Well you would definatly like to change color or design of progress bar for your project . For this You can modify the flash source file included in the preload folder.

Code of CustomPreloader.as :

package preload
{
import flash.display.Loader;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.events.TimerEvent;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.utils.ByteArray;
import flash.utils.Timer;

import mx.preloaders.DownloadProgressBar;
/*###############################################################
Class created for http://askmeflash.com
get answers to all your flash, flex, FMS problems at askmeflash.com its free
Flash developers website http://askmeflash.com
################################################################*/
public class CustomPreloader extends DownloadProgressBar {
private var timer:Timer;
//progress bar
private var pBar:Sprite= new Sprite();
//Progress bar mask
private var maskBar:Sprite= new Sprite();
//Text box to diplay loading percentage
private var txtBox:TextField = new TextField();
//loader for loading swf design of progress bar
private var loader:Loader;
//Load swf file containing design of progress bar
[ Embed(source="greenBar.swf", mimeType="application/octet-stream") ]
public var WelcomeScreenGraphic:Class;
//background color
private var bgSprite:Sprite= new Sprite();

private var txtFormat:TextFormat;
public function CustomPreloader()
{
this.addChild(bgSprite);
//timer
timer = new Timer(1);
timer.addEventListener(TimerEvent.TIMER, drawProgress );
timer.start();
//loading swf file of progress bar design
loader= new Loader();
loader.loadBytes( new WelcomeScreenGraphic() as ByteArray );
pBar.addChild(loader);
this.addChild(txtBox);
pBar.addChild(maskBar);
pBar.mask=maskBar;
//position textbox
txtBox.textColor=0xffffff;
txtFormat= new TextFormat();
txtFormat.font="Arial";
//background color of preloader
bgSprite.graphics.beginFill(0x000000);
bgSprite.graphics.drawRect(0,0,200,200)
bgSprite.graphics.endFill();
}

override public function set preloader( preloader:Sprite ):void
{
preloader.addEventListener(ProgressEvent.PROGRESS, SWFDownloadProgress);
//position progressbar to center of stage
var centerX:Number=(this.stage.stageWidth - 475) / 2;
var centerY:Number=(this.stage.stageHeight - 153) / 2;
//position progress bar
pBar.x = centerX;
pBar.y = centerY;
//position percentage textbox
txtBox.x=centerX+6;
txtBox.y=centerY-14;
bgSprite.width=this.stage.stageWidth;
bgSprite.height=this.stage.stageHeight;
this.addChild(pBar);
}
private var progress:Number;
private function SWFDownloadProgress( event:ProgressEvent ):void {

//progress multiplied by 2 cos our progress bar design is 200 px
var multiplier:Number=2;
progress=multiplier*Number(event.target.loaderInfo.bytesLoaded/event.target.loaderInfo.bytesTotal*100);
}
private var currlen:Number=0;
public function drawProgress(event: Event):void{
//change the mask color to the color of your background
if(currlen
currlen+=1;
maskBar.graphics.beginFill(0x0000ff);
maskBar.graphics.drawRect(0,0,currlen+10,200);
maskBar.graphics.endFill();
txtBox.text="Loading.."+Math.round(currlen/2)+"%";
txtBox.setTextFormat(txtFormat);
}
if(currlen==200){
timer.stop();
dispatchEvent( new Event( Event.COMPLETE ) );
}

}

}
} 

Comments»

No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s