Hi Everyone, I would like to create a 2D pattern as per the size of the brick. Which is in this example 190 length X 60 Height. I have a Preview area which is 400 Length X 300 Height. I have a mask for the preview area so anything outside of this preview area will be hidden. I have a code so far which shows the first rectangle / brick correctly as a child movieclip of the preview movieclip into the preview area sizewise and locationwise. But I can not find an easy way to duplicate or clone this brick movieclip to achieve the pattern shown in the attached image. This actions happens on a button's click event. Any sort of help is greatly appreciated. I also would like to clean this preview area first for any previously shown preview. I have a for loop to removechild but it only removes one at a time. thanks a lot in advance.
//Checks if all required textfields have valid data -- if yes then true else false
if(Vdata == true){
//Here I should check and clean the preview area and any children previously added.
var Pview_mc:MovieClip = new MovieClip; //Main moiveclip which holds all rectangles.
Pview_mc.name = "Pview_mc"; //name the instance so that easy to remove later on.
var rectangle:MovieClip = new MovieClip; // initializing the variable
rectangle.graphics.lineStyle(0, 0x990000, 1); //defines line style (thickness, colour, alpha)
rectangle.graphics.drawRect(0, 0, Number(Txt_ST.text),Number(Txt_HT.text)); // (x spacing, y spacing, width, height)
Pview_mc.addChild(rectangle); // adds rectangle to Pview_mc movieclip
Preview_Area.addChild(Pview_mc); // adds the Pview_mc to the Preview_Area MovieClip
rectangle.y = rectangle.y-Number(Txt_HT.text); // positions the rectangle.
}
I made quick and dirty implementation of brick pattern drawing function. It is not optimized, just draws the pattern you want.
For simplicity, i do not use child objects and just draw directrly to the MovieClip. The function clears and draw pattern on each call. The following image shows possible result.
Draw function:
// graphics - Object to draw to
// origin_x - Center of the top left brick
// origin_y - Center of the top left brick
// brick_count_u - Number of bricks along the x-axis
// brick_count_v - Number of brick along the y-axis
// brick_w - Brick width
// brick_h - Brick height
// gap - Brick gap
function draw_bricks(
graphics :Graphics,
origin_x :Number,
origin_y :Number,
brick_count_u :int,
brick_count_v :int,
brick_w :Number,
brick_h :Number,
gap :Number) :void
{
graphics.clear();
graphics.lineStyle(0.0, 0x00FF00, 1.0);
//
// For every brick along y-axis
for (var v :int = 0; v < brick_count_v; v += 1) {
//
// [ row ordinate ]---|
// |
// [ base offset ]---| |
// | |
// v v
var brick_y :Number = origin_y + ((brick_h + gap) * v);
//
// For every brick along x-axis
for (var u :int = 0; u < brick_count_u; u += 1) {
//
// [ odd row offset ]---|
// | [ column abscissa ]---|
// [ base offset ]---| | |
// | | |
// v v v
var brick_x :Number = origin_x - (brick_w * 0.5 * (v % 2)) + ((brick_w + gap) * u);
//
// Draw brick centered at {brick_x, brick_y}
graphics.drawRect(brick_x - brick_w * 0.5, brick_y - brick_h * 0.5, brick_w, brick_h);
}
}
}
Usage:
var bricks :MovieClip = new MovieClip;
addChild(bricks);
draw_bricks(bricks.graphics, 0.0, 0.0, 8, 8, 190.0, 60.0, 10.0);
If you do not actually need display object hierarchy for this brick wall i suggest you to use this approach because this way you do not need to remove or create any "brick objects", you can just refresh single masked display object.
Note: You still need to compute optimal brick count for each axis.
Note: Remember that in flash x-axis points right and y-axis points down.