How to Create a Bitmap(Matrix Graphics) Progress Bar in Flex

February 11th, 2009

Ntt.cc

lime-apple-128x128 Usually we could use percentage or progress bar to show how the progress going on. But some cases such as the file divided into some same size of the block and deal with these blocks. Then using matrix graphics to indicate the progress is very direct-viewing. Following let’s try to do it.

First let’s see the screen shot of the program or run the Demo (switch effect by click)

Demo | Download Full Project

clip_image002

Program Outline: Package single small icon as Class and Control these icon by relevant Then realize the switch function in different status.

First prepare one small icon.

We could create icon by Flash CS3

New File KUI.fla, new add MovieClip name “Cell” in DB.

Then draw following graph in work area.

Add highlight effect:

Ok, now one of the icon statuses came out. We name it as “default”.

Then add more statuses in film frame:

Definite blue status as “start”

Definite Green status as “success”

Definite Yellow status as “warning”

Definite Red status as “error”

We add “Stop();” in first frame to avoid film auto playing.

Write frame tag for every frame according the name of status:

Then, find Cell in library panel and export as SWC

Ok, now we have finished the work of icon. Open the Flex Builder 3, create new project KMatrix.

Finished, create new folder lib. Move Cell.swc into lib:

Open the project property panel, click ActionScript Build Path, switch to Library path, click Add SWC button, select the Cell.swc in pop-up panel:

Ok, as the following image:

Then we have add the resource into the project. Next we will go to the step of program.

New add document com/kingnare/controls, and new add class MyMatrix in it.

Control the Internal multi-cell by the class MyMatrix

Code as the following ( view the source file )

package com.kingnare.controls
{
import flash.display.Sprite;
public class MyMatrix extends Sprite
{
private var list:Array;
private var maxWidth:uint;
private var maxHeight:uint;
private var _columnNum:uint;
private var _hDis:uint;
private var _vDis:uint;
public function MyMatrix()
{
super();
_hDis = 1;
_vDis = 1;
_columnNum = 50;
maxWidth = 1;
maxHeight = 1;
}
private function create(num:uint):void
{
if(num < 0) return;
list = [];
for(var i:uint = 0;i<num;i++)
{
var cell:Cell = new Cell();
list.push(cell);
}
updateLayout();
}
private function updateLayout():void
{
var wNum:uint = 0;
var hNum:uint = 0;
var beginX:int = 0;
var beginY:int = 0;
var len:int = list.length;
for(var i:uint = 0;i<len;i++)
{
var cell:Cell = list[i] as Cell;
if(cell)
{
cell.x = beginX+wNum*(cell.width+_hDis);
cell.y = beginY+hNum*(cell.height+_vDis);
if(wNum >= _columnNum-1)
{
wNum = 0;
hNum++;
}
else
{
wNum++;
}
}
}
maxWidth = _columnNum*(list[0].width + _hDis);
maxHeight = (hNum+1)*(list[0].height + _vDis);
drawMatrix();
}
private function drawMatrix():void
{
var i:uint = 0;
while (list && i < list.length)
{
var cell:Cell = list[i] as Cell;
if(!this.contains(cell))
{
addChild(cell);
}
i++;
}
}
public function clear():void
{
while(this.numChildren>0)
{
this.removeChildAt(0);
}
while(list && list.length>0)
{
var cell:Cell = list.pop() as Cell;
cell = null;
}
}
public function set count(value:uint):void
{
if(!isNaN(value))
{
clear();
if(value > 0)
{
create(value);
}
}
}
public function get count():uint
{
return list.length;
}
public function set columnNum(value:uint):void
{
_columnNum = value;
updateLayout();
}
public function get columnNum():uint
{
return _columnNum;
}
public function set hDis(value:uint):void
{
_hDis = value;
updateLayout();
}
public function get hDis():uint
{
return _hDis;
}
public function set vDis(value:uint):void
{
_vDis = value;
updateLayout();
}
public function get vDis():uint
{
return _vDis;
}
}
}

Using create to new add Cell and save into the list. Layout it by updateLayout and add the Cell into the show list by drawMatrix.

Then we add test code into the main program KMatrix.

package {
import com.kingnare.controls.MyMatrix;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
[SWF(width="700", height="2000", backgroundColor="#333333", framerate="30")]
public class KMatrix extends Sprite
{
public function KMatrix()
{
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
var m:MyMatrix = new MyMatrix();
addChild(m);
m.count = 300;
m.columnNum = 50;
m.x = 50;
m.y = 50;
}
}
}

We got the result after running:

It is 12 line and 50, good performance and low occupy.

Add the number to 10000, output normally but the CPU will fluctuate in a range and the value will be increase a lot compared with previous. This is because a large number of Cell objects respond to the default event. Then following we will introduce how to solve this problem by using of bitmap, and this is also the focus of this article.

Don’t add these Cell objects into the show list, but mapping these Cell objects as a bitmap. When one Cell object updated, we re-map this Cell object’s bitmap area.

In this way, the thousands of Cell could be deal with as a bitmap.

Then let’s revise the MyMatrix code:

First declare the variable:

private var bitmap:Bitmap;
private var bitmapData:BitmapData;
private var matrix:Matrix;

Do initialization in the Constructor

matrix = new Matrix();
bitmapData = new BitmapData(1, 1, true, 0);
bitmap = new Bitmap(bitmapData);
addChild(bitmap);

Update the draw method, draw all the cell objects.

private function drawMatrix():void
{
bitmapData = new BitmapData(maxWidth, maxHeight, true, 0×00FFFFFF);
var i:uint = 0;
while (list && i < list.length)
{
matrix.tx = list[i].x;
matrix.ty = list[i].y;
bitmapData.draw(list[i], matrix);
i++;
}
bitmap.bitmapData = bitmapData;
}

How to control the status of the Cell? We need add two methode.

public function setStatus(number:uint, status:String):void
{
if(number < list.length)
{
var child:Cell = list[number] as Cell;
if(child)
{
child.gotoAndStop(status);
matrix.tx = child.x;
matrix.ty = child.y;
bitmapData.draw(child, matrix);
}
}
}
public function getStatus(number:uint):String
{
if(number < list.length)
{
var child:Cell = list[number] as Cell;
if(child)
{
return child.currentFrameLabel;
}
}
return MyMatrix.DEFAULT_FRAME;
}

Click here to see the full source of MyMatrix.

Ok, now let’s do the test. Revise the main project.

var m:MyMatrix = new MyMatrix();
addChild(m);
m.count = 10000;
m.columnNum = 50;
m.x = 50;
m.y = 50;
m.setStatus(0, MyMatrix.DEFAULT_FRAME);
m.setStatus(1, MyMatrix.START_FRAME);
m.setStatus(2, MyMatrix.SUCCESS_FRAME);
m.setStatus(3, MyMatrix.ERROR_FRAME);
m.setStatus(4, MyMatrix.WARNING_FRAME);

Run the result:

Even if fast move in the matrix, the occupy of the Mouse & CPU is low.

We also could let it dancing.

Click here to see the full source of KMatrix

Then the finial running result as following:

Now it could be used as the progress bar for a project. In this tutorial we didn’t introduce how to add the scrollbar. I want to leave this function to you own.