Thursday, February 10, 2011

Creating charts using AS3: Part 18

Today we'll start creating a 3d-bar chart - a brick that is filled with different colors.

In this first tutorial we will create the base for our block. Here's what you will get in the end of this tutorial:


Here's the code:

import flash.display.Shape;

var myChart:Shape = new Shape();
addChild(myChart);

drawChart(300, 140, 200, 380, 40);

function drawChart(theHeight:Number, theWidth:Number, baseCenterX:Number, baseCenterY:Number, closure:Number):void
{
myChart.graphics.clear();

myChart.graphics.lineStyle(1, 0x444444);

myChart.graphics.beginFill(0xD7FFD4);

myChart.graphics.drawRect(baseCenterX-theWidth/2, baseCenterY-theHeight, theWidth, theHeight);
myChart.graphics.endFill();

myChart.graphics.beginFill(0xB1EEAC);

myChart.graphics.moveTo(baseCenterX+theWidth/2, baseCenterY);
myChart.graphics.lineTo(baseCenterX+theWidth/2+closure, baseCenterY-closure);
myChart.graphics.lineTo(baseCenterX+theWidth/2+closure, baseCenterY-theHeight-closure);
myChart.graphics.lineTo(baseCenterX+theWidth/2, baseCenterY-theHeight);

myChart.graphics.moveTo(baseCenterX+theWidth/2, baseCenterY-theHeight);
myChart.graphics.lineTo(baseCenterX-theWidth/2, baseCenterY-theHeight);
myChart.graphics.lineTo(baseCenterX-theWidth/2+closure, baseCenterY-theHeight-closure);
myChart.graphics.lineTo(baseCenterX+theWidth/2+closure, baseCenterY-theHeight-closure);
myChart.graphics.endFill();
}

The script is pretty simple. We draw 3 sides - the front side is pretty straight-forward, we use drawRect; the other two sides are drawn manually with lines. The function drawChart() has 5 parameters - theHeight, theWidth for the dimensions of the brick, baseCenterX and baseCenterY to position it, and closure to define the thickness of our brick.

That's it for now.

Thanks for reading!

Related:

Creating charts using AS3: Part 1
Creating charts using AS3: Part 2
Creating charts using AS3: Part 3
Creating charts using AS3: Part 4
Creating charts using AS3: Part 5
Creating charts using AS3: Part 6
Creating charts using AS3: Part 7
Creating charts using AS3: Part 8
Creating charts using AS3: Part 9
Creating charts using AS3: Part 10
Creating charts using AS3: Part 11
Creating charts using AS3: Part 12
Creating charts using AS3: Part 13
Creating charts using AS3: Part 14
Creating charts using AS3: Part 15
Creating charts using AS3: Part 16
Creating charts using AS3: Part 17
Creating charts using AS3: Part 19
Creating charts using AS3: Part 20
Creating charts using AS3: Part 21

No comments:

Post a Comment