Red Squares

The idea is simple. There are 100 red squares that must disappear one by one randomly. Here is the effect explained in few easy steps.

Create a 100 * 100 Flash file and add a background image. On the next layer draw a red rectangle (10 * 10) and name it "square". Convert it into a Movie Clip and in the Properties Panel set its position to 0 (_x=0, _y=0). Create another layer and use it only for Actions.

Now let's fill the stage with red squares. On the Actions layer in the first frame add:

c = 1;  
for( i = 0 ; i < 10 ; i++ ) {
	for( j = 0 ; j < 10 ; j++ ) {
			_root.square.duplicateMovieClip("square"+c, c);
			_root["square"+c]._x = i * 10;
			_root["square"+c]._y = j * 10;
			c++;
		}
	}
square._visible = false;

The sequence above creates 100 squares and places them in the right location, so the stage will resemble to chess board. We used three variables: "c" it is a counter used for naming the rectangles, "i" and "j" variables used for placing the rectangle in the exact position ("i" defines the horizontal coordinate and "j" the vertical). By using two loops, second included in the first, we are generating all the pair of numbers between 0 and 9 in the next order : 0,0;0,1...0,9;1,0...etc. By using the "duplicateMovieClip" function we create a new instance of the square with a distinct name given by the variable "c". After all the instances have been created and placed in the right location, we have to get rid of the original square because now we have two Symbols in the same place (0,0), and we do that by setting its "_visible" property to false.

Let's go to the next frame (frame 2) where we will make the symbols disappear. It's obvious we need a frame by frame loop so the best solution is to use an auxiliary, not visible, Movie Clip. In the Actions Layer create a new keyframe(in Windows press F6) and on the other two just extend the existing one (in Windows press F5). In the new keyframe, draw a rectangle somewhere outside the Stage (so it's not visible). Stop the Movie at frame two by adding "stop();" in the Actions layer.

On the Movie clip that servers as the loop, add the following:
 

onClipEvent( load ) {
	max=100;
}

onClipEvent( enterFrame ) {
	nr = random(max) + 1;
	n = 0;
	i = 1;
	do {
		if (_root["square"+i]._visible==true)
			n++;
		i++;
	} while ( n != nr )
	
	final = i - 1;
	_root["square"+final]._visible = false;
	max--;
	if( max == 0 )
		_parent.play();
	
}
	
max = its value is the number of  visible rectangles
      we have on the stage at any time;
nr  = is the randomly generated number (0..max) and
      tells the Script what square to delete;
n   = counts the visible squares and stops when he
      reached the one that has to be deleted.;
i   = counts all the squares until we reach the desired
      square in order to provide the right index
      (so we know what Symbol to delete);

Each time the MC enters a new frame we generate a random number between 0 and the value of the variable "max" which shows us how many visible rectangles are left in the stage. Now we have to start from "square1" and count the visible Symbols, so we add one each time we encounter one, to the variable "n". We also number the number of loops we entered the loop ("i"). When "n" reaches at the value "nr" we stop, because we have found the exact square. Because we had a loop with final condition we added an extra one to the value of "i". So the exact index of the Symbol that will become invisible is "i-1". Next we subtract one form "max" because we had one more rectangle removed. Also we check to see if all the rectangles are gone. If so we pass to frame 3 where we added a "play again button".

That's all. Enjoy!

See in the next tutorial how to create a flame effect.