November 23, 2009

Custom indeterminate Preloader in Actionscript3 in Flex

Hi,
The custom inderterminate preloader can be build by actionscript only and it can be support for change the background and preloader color by set the style of the custom preloader class. The code as follows


package com
{
import mx.controls.Label;
import mx.containers.VBox;
import mx.controls.ProgressBar;
import mx.managers.PopUpManager;
import flash.display.DisplayObjectContainer;
[Style(name="mapLoaderBackgroundColor",type="uint",format="Color",inherit="no")]
[Style(name="maploaderProgressColor",type="uint",format="Color",inherit="no")]
public class MapPreloader extends VBox
{
private var _progressBar:ProgressBar;
private var _loadingLabel:Label;
public function MapPreloader()
{
super();
width = 250;
height = 80;
setStyle("paddingTop",20);
setStyle("paddingBottom",10);
setStyle("cornerRadius",10);
setStyle("backgroundAlpha",1);
setStyle("borderStyle","solid");
setStyle("horizontalAlign","center");
setStyle("verticalScrollPolicy","off");
setStyle("horizontalScrollPolicy","off");
}
override protected function createChildren():void
{
super.createChildren();
_progressBar = new ProgressBar();
_progressBar.label = "";
_progressBar.labelPlacement = "center";
_progressBar.width = 200;
_progressBar.indeterminate = true;
_progressBar.setStyle("themeColor",0x333333);
addChild(_progressBar);
_loadingLabel = new Label();
_loadingLabel.text = "Loading...";
_loadingLabel.percentWidth = 100;
_loadingLabel.setStyle("fontSize",12);
_loadingLabel.setStyle("textAlign","center");
addChild(_loadingLabel);
}
public function show(parent:DisplayObjectContainer):void
{
PopUpManager.addPopUp(this,DisplayObjectContainer(parent),true);
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth,unscaledHeight);
var _bgColor:uint = getStyle("mapLoaderBackgroundColor");
setStyle("backgroundColor",_bgColor);
var _progressColor:uint = getStyle("maploaderProgressColor");
_progressBar.setStyle("themeColor",_progressColor);
}
}
}

The color of custom indeterminate preloader can be change by following way

MapPreloader{
mapLoaderBackgroundColor:#FF0000;
maploaderProgressColor:#FFCC00;
}

No comments:

Post a Comment