February 02, 2010

Creating the custom preloader in AS3

Hi,
I am try to use the preloader component from Flash CS3. But it takes more size while creating the swf file. So i try to create the custom preloader class in AS3. Its very nice look and we can set the preloader bar style as gradient or normal style. In below i added the custom preloader class code. use this code and enjoy.
package util
{
import flash.geom.Matrix;
import flash.text.TextField;
import flash.display.Sprite;
import flash.display.Graphics;
import flash.display.GradientType;
import flash.display.SpreadMethod;
import flash.display.InterpolationMethod;
public class Preloader extends Sprite
{
private var _matrix:Matrix;
private var _loadBar:Sprite;
private var _progressBG:Sprite;
private var _barColor:Array;
private var _percLabel:TextField;
private var _controlUtil:ControlUtils;
private var _preloaderWidth:Number = 0;
private var _preloaderHeight:Number = 0;
private var _trackColor:uint = 0xFFFFFF;
public function set barColor(val:Array):void
{
if(_barColor != val)
_barColor = val;
}
public function Preloader(wid:Number,hgt:Number,trackColor:uint)
{
super();
_matrix = new Matrix();
_preloaderWidth = wid;
_preloaderHeight = hgt;
_trackColor = trackColor;
_controlUtil = new ControlUtils();
createBackground();
}
private function createBackground():void
{
_progressBG = new Sprite();
_progressBG.graphics.clear();
_progressBG.graphics.lineStyle(0x000000,2);
_progressBG.graphics.beginFill(_trackColor,1);
_progressBG.graphics.drawRect(0,0,_preloaderWidth,_preloaderHeight);
_progressBG.graphics.endFill();
addChild(_progressBG);
_loadBar = new Sprite();
_progressBG.addChild(_loadBar);
_percLabel = _controlUtil.createTextField(0x000000);
_progressBG.addChild(_percLabel);
_percLabel.x = (_preloaderWidth - _percLabel.width)/2;
this.width = _preloaderWidth;
this.height = _preloaderHeight;
}
public function setLoadProgress(loaded:Number,total:Number):Boolean
{
var _percent:Number = loaded/total;
var _val:Number = Math.round(_percent * 100);
if(_val <= 100)
{
_percLabel.text = _val+" %";
var _tempValue:Number = Math.round(_percent * _preloaderWidth);
_matrix.createGradientBox(_tempValue,_preloaderHeight,Math.PI/2,0,0);
var _ratios:Array = [0,255];
var _alphas:Array = [0.75,0.75];
var _colors:Array = [_barColor[0],_barColor[1]];
_loadBar.graphics.clear();
if(_barColor.length > 1)
_loadBar.graphics.beginGradientFill(GradientType.LINEAR,_colors,_alphas,_ratios,_matrix);
else
_loadBar.graphics.beginFill(_barColor[0],0.7);
_loadBar.graphics.drawRect(1,1,_tempValue-1,_preloaderHeight-1);
_loadBar.graphics.endFill();
if(_val == 100)
return true;
}
return false;
}
}
}

1 comment:

  1. hi Arun Sir ..
    I am new in flex development and want to customize flex preloader to show "Loading 'x' of 'total'" where 'x' is the count of loaded library and 'total' is the total library.
    Plz help me out.
    Thanks.

    ReplyDelete