[SWF(width = 600, height = 500, backgroundColor=0xFFFFFF)]
var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0xFFFFFF);
addChild(new Bitmap(canvas));
var matrix:Matrix = new Matrix();
var grid:Sprite = new Sprite();
grid.filters = [new DropShadowFilter(4, 0, 0, 0.05, 20, 10)];
matrix.rotate(Math.PI / 4);
matrix.scale(1, 0.6);
matrix.translate(stage.stageWidth / 2, stage.stageHeight / 2 + 50);
grid.transform.matrix = matrix;
var rowCol:int = 9;
var spikeNum:Number = rowCol * rowCol;
var diameter:Number = 30;
var space:Number = diameter + 10;
var halfGridSize:Number = rowCol * space / 2;
var radius:Number;
addEventListener(Event.ENTER_FRAME, onLoop);
function onLoop(evt:Event):void {
radius = diameter / 2;
grid.y -= 0.9;
grid.graphics.clear();
for (var i:Number = 0; i<spikeNum; i++){
var xp:Number = i % rowCol;
var yp:Number = int(i / rowCol);
drawSpike(xp * space - halfGridSize, yp * space - halfGridSize, (xp + yp) / 4, 0, -yp);
}
canvas.draw(grid, grid.transform.matrix);
diameter -= 0.5;
if (diameter < 3){
removeEventListener(Event.ENTER_FRAME, onLoop);
}
}
function drawSpike(xp:Number, yp:Number, rot:Number = 0, xOff:Number=0, yOff:Number = 0):void{
matrix.createGradientBox(diameter, diameter, rot, xp - radius + yOff, yp - radius + xOff);
with (grid.graphics){
beginGradientFill(GradientType.LINEAR, [0xFFFFFF, 0x999999], [1,1], [0, 255], matrix, SpreadMethod.PAD);
drawCircle(xp, yp, radius);
}
}
This snippet draws some isometric cones. Here are some images created by tweaking a few of the values:
