header
ask question
Click here to ask Question Now Its free No registration required. Flash, Flex, Flash Media Server, ActionScript,Adobe Air. Most questions receive a response in an hour.
Inder
Points:3010
Posts:0

Custom preloader - progress bar flex
Posted On: 4/19/2009 4:56:34 AM

/ Views: 32344



Problem: Replace default flex preloader design by some other design .
Solution: Use this custom preloader class and load any preloader design from external swf.


Project source files : CustomPreloader.zip

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.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);
preloader.addEventListener(FlexEvent.INIT_COMPLETE, initCompleteEventHandler);
//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);
}

public function initCompleteEventHandler(event: Event):void{
progress=100*multiplier;
}
private var progress:Number;
private var multiplier:Number=2;
private function SWFDownloadProgress( event:ProgressEvent ):void {

//progress multiplied by 2 cos our progress bar design is 200 px
if(progress!=(100*multiplier)){
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< progress){
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 ) );
}

}

}
}


Members Login

Email  
Password
Forgot Password





This website focus on: Flash | Flex | FMS | RED5 | WOWZA | Flash Media Server | Adobe AIR | ActionScript,Flash Solutions | Flash Question | Flash Answers | Flash Developers | Flash Problem, Flash Help, Flash bugs, Flash workaround | Flash Blog | Flex Question Answers | Flash Forum | Flex Development | Actionscript development | Flash development | Adobe AIR development
Copyright © 2008 AskMeFlash.com. All rights reserved. Privacy Policy | Terms & Conditions