mask effect or bitmap usage ?

[rafnews]

Hi,

i've seen on internet several website where a photo is divided into small square (at least virtually) and each square is after displayed as following to reconstruct the whole photo.

- each square is place on stage on a particular place (same location as on the photo)
- each square randomly are selected and are displayed from size (0,0) to it final size (so a smal part of photo, for example 50 x 50 px).

this effect is really nice but i do not know how to do it in AS3, because :
- first : each square seem to be only added to the photo (the phot it self seems to not be divided into little square).
- second : each square start from 0 to reach their final size (but randomly and smoothly)

could anyone help me ?
is there any tutorial for that ?
do they use mask for that effect ?

thx.

A.

[rafnews]

you can see what i try to achieve here :
(http://www.templatehelp.com/pr_interface.php?pr_code=0Zd415v8zz40cr2W6b06SkC9g e7Kir&cols=3&rows=10&type=1&category=0&price1=0&price2=0&sp=0&adult=&sadult=0&keyword=&bgcolor=%23FFFFFF&page=21#)

check the template before last one... with mobile, laptop and pen...
such mosaic effect i try to do.

thx.

[rafnews]

http://www.templatehelp.com/pr_interface.php?pr_code=0Zd415v8zz40cr2W6b06SkC9g e7Kir&cols=3&rows=10&type=1&category=0&price1=0&price2=0&sp=0&adult=&sadult=0&keyword=&bgcolor=%23FFFFFF&page=21#

[mmattrw]

I dont have flash in front of me right now, but if I were to take a stab at this, yes use a mask layer. On the mask create all the little squares, preferably one square instanced over and over again. Give the squares instance names that increment such as mask0, mask1, mask2, etc. Make all their widths and heights equal 0. Then in actionscript use a ENTER_FRAME function with a for loop in it.

maybe something like:


var SqSize = 100; //the desired width and height
var speed = 0.3; // used to keep them from growing too fast
var counter = 0;

addEventListener(event.ENTER_FRAME, goMask);

function goMask(event:Event):void{
for(var i = 0; i <= numOfSquares; i++){
if (root["mask"+i].width < SqSize){
var rand = Math.random();
var temp = (SqSize - this["mask"+i].width) * rand * speed;
root["mask"+i].width += temp;
root["mask"+i].height += temp;
if (root["mask"+i].width > SqSize - 1){
root["mask"+i].width = SqSize;
root["mask"+i].height= SqSize;
counter++;
}
}
if(counter = numOfSquares)
removeEventListener(goMask);
}
}
}

Let me know if that works.

And if someone else knows a better way to do this please post it.