block transition

hey guys. I have an image that I want to transition using that block transition that is pretty common. I have the block part down. I want each block to fade in now obviously. I can get them to fade in one row or column at a time, just not each individual block at a time. It has to do with the delay set on my tween line I think

var rows = 7;
var columns = 7;
var blockWidth = Math.ceil(e.target.content.width / columns);
var blockHeight = Math.ceil(e.target.content.height / rows);

for (i = 0; i < rows; i++)
{
    for (j = 0; j < columns; j++)
    {
        bitmap_data = new BitmapData(blockWidth,blockHeight);
        matrix = e.target.content.transform.matrix;
        matrix.translate(-blockWidth * i, -blockHeight * j);
        bitmap_data.draw(e.target.content,matrix);

        block = new Sprite();
        block.alpha = 0;
        block.x = blockWidth * i;
        block.y = blockHeight * j;
        bitmap = new Bitmap(bitmap_data);
        block.addChild(bitmap);
        photoHolder.addChild(block);
        TweenLite.to(block,0.3,{alpha:1,delay: (i * 0.08) });
    }
}

TweenLite.to(block,0.3,{alpha:1,delay: ((i*columns + j) * 0.08) });

Instead of using 2 for loops, I would suggest using the modulus instead:

for(i=0;i<10;i++){
     trace( i % 2 ); // output: 0, 1, 0, 1, 0, 1, 0, 1, 0, 1
}

for(i=0;i<9;i++){
     block.x = ( i % 3 ) * blockWidth;   // So this goes: 0, 1, 2, 0, 1, 2, 0, 1, 2
     block.y = Math.floor( i / 3 ) * blockHeight; // And this one: 0, 0, 0, 1, 1, 1, 2, 2, 2 
}

Might be useful when doing delays as well.

Or diagonally would be:

TweenLite.to(block,0.3,{alpha:1,delay: ((j*rows/columns + i) * 0.08) });

djankey said
something like this?

TweenLite.to(block,0.3,{alpha:1,delay: ((i*columns + j) * 0.08) });

ravenwill said
Or diagonally would be:

TweenLite.to(block,0.3,{alpha:1,delay: ((j*rows/columns + i) * 0.08) });

ah perfect guys..that is so awesome