Custom Preloader (Download Progressbar)

MyPreload.as

package preload
{
import flash.display.DisplayObject;
import flash.display.Shape;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.filters.DisplacementMapFilterMode;
import flash.text.TextField;
import flash.utils.getTimer;

import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.events.RSLEvent;
import mx.graphics.RoundedRectangle;
import mx.preloaders.IPreloaderDisplay;

public class Mypreload extends Sprite implements IPreloaderDisplay
{
private var _stageHeight:Number = 375;
private var _stageWidth:Number = 500;
private var _backgroundAlpha:Number;
private var _backgroundColor:uint;
private var _backgroundImage:Object;
private var _backgroundSize:String = “”;
private var _preloader:Sprite;

private var percentLoadedtext:TextField;
[Bindable]
private var bytesLoaded:uint;
[Bindable]
private var bytesTotal:uint;

private var _startTime:int;

private var _xOffset:Number = 20;

private var _yOffset:Number = 20;

private var progressOffSet:Number=10;
private var te:int=0;

//private var  g:Shape=new Shape();

private var g:Sprite;
private var _borderRect:RoundedRectangle = borderRect;

private var percentLoaded:uint;
private var fillWidth:uint;

protected function get borderRect():mx.graphics.RoundedRectangle
{
return new RoundedRectangle(14, 39, 154, 200, 0);
}
public function initialize():void
{
_startTime = flash.utils.getTimer();
center(stageWidth,stageHeight);
}
protected function center(width:Number, height:Number):void
{
_xOffset = Math.floor((width – _borderRect.width) / 2);
_yOffset = Math.floor((height – _borderRect.height) / 2);
}
public function Mypreload()
{
super();
g=new Sprite();
}

public function get backgroundAlpha():Number
{
return _backgroundAlpha;
}

public function set backgroundAlpha(value:Number):void
{
_backgroundAlpha=value;
}

public function get backgroundColor():uint
{
return _backgroundColor;
}

public function set backgroundColor(value:uint):void
{
_backgroundColor=value;
}

public function get backgroundImage():Object
{
return _backgroundImage;
}

public function set backgroundImage(value:Object):void
{
_backgroundImage=value;
}

public function get backgroundSize():String
{
return _backgroundSize;
}

public function set backgroundSize(value:String):void
{
_backgroundSize=value;
}

public function set preloader(obj:Sprite):void
{
_preloader=obj;
obj.addEventListener(ProgressEvent.PROGRESS, progressHandler);
obj.addEventListener(Event.COMPLETE,completeHandler);
obj.addEventListener(FlexEvent.INIT_PROGRESS,initProgressHandler);
obj.addEventListener(FlexEvent.INIT_COMPLETE,initCompleteHandler);
obj.addEventListener(RSLEvent.RSL_PROGRESS,rslProgress);
obj.addEventListener(RSLEvent.RSL_ERROR,rslError);
obj.addEventListener(RSLEvent.RSL_COMPLETE,rslComplete);
}
private function rslError(e:RSLEvent):void
{

}
private function rslProgress(e:RSLEvent):void
{

}
private function rslComplete(e:RSLEvent):void
{

}

public function get stageHeight():Number
{
return _stageHeight;
}

public function set stageHeight(value:Number):void
{
_stageHeight=value;
}

public function get stageWidth():Number
{
return _stageWidth;
}

public function set stageWidth(value:Number):void
{
_stageWidth=value;
}

private function progressHandler(e:ProgressEvent):void
{
createChildren();
bytesLoaded=e.bytesLoaded;
bytesTotal=e.bytesTotal;
getPercentageLoaded(bytesLoaded);
trace(“progress”);
}
private function getPercentageLoaded(bytesLoaded:uint):void
{
percentLoaded=(bytesLoaded*100)/bytesTotal;
fillWidth=(fillWidth*100)/percentLoaded;
trace(“fillwidth”);
trace(bytesLoaded);
trace(bytesTotal);
setProgress();
drawlabel();
}
private function initCompleteHandler(e:FlexEvent):void
{
trace(“initcomp”)
g.visible=false;
dispatchEvent(new Event(Event.COMPLETE));

}
private function completeHandler(e:Event):void
{

}
protected function createChildren():void
{

//g.graphics.clear();
//    g.graphics.lineStyle(2,1234);
//g.graphics.drawCircle(_xOffset,_yOffset,_borderRect.width)
//g.graphics.drawRect(_xOffset,_yOffset,_borderRect.width,_borderRect.height);
g.x=14;
g.y=39;
addChild(g);

}
private function initProgressHandler(e:FlexEvent):void
{
trace(“initProgress”);
//    g.graphics.drawRect(_xOffset+1,_yOffset+1,fillWidth,_borderRect.height-1);
//    trace(getTimer()-_startTime);
setProgress();
drawlabel();

}
private function drawlabel():void
{
if(!percentLoadedtext)
{
percentLoadedtext=new TextField()
percentLoadedtext.x=_xOffset+1;
percentLoadedtext.y=_yOffset+20;
g.addChild(percentLoadedtext);
}
percentLoadedtext.text=”Loading..”+percentLoaded.toString()+”%”;

}
private function setProgress():void
{
_xOffset=_xOffset+10;
te=te+10;
g.graphics.drawRect(_xOffset,_yOffset+progressOffSet,10,te);
trace(_xOffset)
progressOffSet=progressOffSet-10;
g.graphics.beginFill(1233,0.5);
}
}
}

Application

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical” creationComplete=”init()” preloader=”preload.Mypreload” >
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.controls.TextInput;
private function init():void
{
gri.dataProvider=new ArrayCollection([{dat:"test"},{dat:"test"}])
}
]]>
</mx:Script>
<mx:ApplicationControlBar width=”100%”>
<mx:Label text=”Application” fontWeight=”bold”/>
</mx:ApplicationControlBar>
<mx:DataGrid id=”gri”>
<mx:columns>
<mx:DataGridColumn headerText=”Test” dataField=”dat”/>
<mx:DataGridColumn headerText=”Test” dataField=”dat”/>
<mx:DataGridColumn headerText=”Test” dataField=”dat”/>
</mx:columns>
</mx:DataGrid>

</mx:Application>

In this for creating a custom preloader i have extended the Sprite and implemented the IPreloaderDisplay Interface which is required for creating a custom download progress bar.

In the Preloader Initialize Method the bar is centered and in the preloader setter method add listeners for download progress and complete and initialize progress and complete

In both the Initialize Progree and Download Progress set the loading text and set the Progress in the Progress Bar

View

lhttp://www.box.net/shared/x7kccjigh

DownloadSource

http://www.box.net/shared/gjp7cq4kqb