| ANIMATED CHARTS as3 |
|
This tutorial will show you how to create basic animated bar charts using only actionscript 3.0. This example works with five values but you can add or remove
addional bars as you like. At the end you should get something like this:
All we need is empty actionscript 3.0 file. Everything else is done by actionscript. Select first frame and open actions window ( press F9 ). Now insert the following code:
var startX:Number=10;
var startY:Number=220;
var sirka:Number=25; // width
var vyska:Number=0; // heigth
var n:Number=0;
var grafData:Array=[{val:120,col:0xFF0000},{val:200,col:0x00FF00},
{val:55,col:0x0000FF},{val:171,col:0xFFFF00},
{val:23,col:0x9900FF},{val:91,col:0xF0F0F0}];
stage.addEventListener(Event.ENTER_FRAME,KRESLI);
var mojGraf:Shape = new Shape();
function KRESLI(e:Event) {
mojGraf.graphics.beginFill(grafData[0].col);
mojGraf.graphics.drawRect(startX+(0*35),startY,sirka,(vyska/100)*grafData[0].val);
mojGraf.graphics.endFill();
mojGraf.graphics;
addChild(mojGraf);
mojGraf.graphics.beginFill(grafData[1].col);
mojGraf.graphics.drawRect(startX+(1*35),startY,sirka,(vyska/100)*grafData[1].val);
mojGraf.graphics.endFill();
mojGraf.graphics;
addChild(mojGraf);
mojGraf.graphics.beginFill(grafData[2].col);
mojGraf.graphics.drawRect(startX+(2*35),startY,sirka,(vyska/100)*grafData[2].val);
mojGraf.graphics.endFill();
mojGraf.graphics;
addChild(mojGraf);
mojGraf.graphics.beginFill(grafData[3].col);
mojGraf.graphics.drawRect(startX+(3*35),startY,sirka,(vyska/100)*grafData[3].val);
mojGraf.graphics.endFill();
mojGraf.graphics;
addChild(mojGraf);
mojGraf.graphics.beginFill(grafData[4].col);
mojGraf.graphics.drawRect(startX+(4*35),startY,sirka,(vyska/100)*grafData[4].val);
mojGraf.graphics.endFill();
mojGraf.graphics;
addChild(mojGraf);
vyska-=2;
if (vyska<-100) {
stage.removeEventListener(Event.ENTER_FRAME,KRESLI);
}
}
var grafHodnota0:TextField = new TextField();
var grafHodnota1:TextField = new TextField();
var grafHodnota2:TextField = new TextField();
var grafHodnota3:TextField = new TextField();
var grafHodnota4:TextField = new TextField();
while(n<5){
this["grafHodnota"+n].width=25;
this["grafHodnota"+n].textColor=0x000000;
this["grafHodnota"+n].y=startY;
this["grafHodnota"+n].text=grafData[n].val;
this["grafHodnota"+n].x=startX+(n*35);
addChild(this["grafHodnota"+n]);
n++;
}
First five lines are variables used in script such as starting position of first bar (X,Y), width of bars and distance between them. Line 7 is array that contains all the input data.
In this case its value and color for every bar. You can input these values manualy or load them from external source, that is up to you. Line 11 creates event listener that runs KRESLI function every time frame loads.
Line 12 is definition of new shape object, in this case bars we will draw in the following function. Lines 16-20 creates one bar (out of 5 in this case). BeginFill sets the color of this bar, drawRect draws the
bar with these properties (position X, position Y, width, heigth). EndFill will then finish the filling of the rectangle and last two parts of this section then adds this rectangle to the stage. Duplicate this
section 5 times to generate 5 bars. By changing the value in grafData[x] each bar will have value and color saved in grafData array. This function runs untill heigth reaches 100 (negative value makes the bars grow from
bottom to up). Lines 58-66 creates labels under every bar with its value.
|