Custom preloader – progress bar flex


How to implement :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 :

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.text.TextField;

import flash.utils.ByteArray;

import mx.events.FlexEvent;

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 {

//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;

public function CustomPreloader()

{

//loading swf file of progress bar design

loader= new Loader();

loader.loadBytes( new WelcomeScreenGraphic() as ByteArray );

pBar.addChild(loader);

pBar.addChild(txtBox);

pBar.addChild(maskBar);

//position textbox

txtBox.y=-20;

txtBox.textColor=0xffffff;

}

override public function set preloader( preloader:Sprite ):void

{   preloader.addEventListener(ProgressEvent.PROGRESS, SWFDownloadProgress);

preloader.addEventListener(FlexEvent.INIT_COMPLETE, initCompleteEventHandler);

//position progressbar to center of stage

pBar.x = (this.stage.stageWidth – 475) / 2;

pBar.y = (this.stage.stageHeight – 153) / 2;

this.addChild(pBar);

}

private function SWFDownloadProgress( event:ProgressEvent ):void {

//progress multiplied by 2 cos our progress bar design is 200 px

var multiplier:Number=2;

var progress:Number=multiplier*Number(event.target.loaderInfo.bytesLoaded/event.target.loaderInfo.bytesTotal*100);

//change the mask color to the color of your background

maskBar.graphics.lineStyle(25,0×000000);

maskBar.graphics.moveTo(200,11);

maskBar.graphics.lineTo(175,11);

txtBox.text=“Loading..”+(progress/multiplier)

}

public function initCompleteEventHandler(event: Event):void{

//this will remove loader and show the application when loading is complete

//comment this line to see ur progress bar

dispatchEvent( new Event( Event.COMPLETE ) );

}

}

}

Advertisements

~ by mjcprasad2000 on May 4, 2009.

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 )

Google+ photo

You are commenting using your Google+ 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 )

w

Connecting to %s

 
%d bloggers like this: