Flame

This is one of the coolest effects you have ever seen. It uses 60 instances of the same Movie Clip, each one slightly different than the others. You will find this one incredible simple if you have read the rest of the website. First thing we need is the Movie Clip. This is the essential part that does the entire job. It has to look something like this:

Basically it is a simple transition between 4 transparent circles colored different. Don't bother to recreate this Movie Clip just download the source files and use ours.

The next step is to duplicate this Movie Clip. We used a frame by frame loop, provided by the special function "onClipEvent(enterFrame)", placed on an auxiliary MC. The content of the function it is invoked each time the Clip enters a new frame. Place the Symbol with the circles in the stage and name it "flame" (in the Properties Panel). We did the entire effect inside a Movie Clip so we can copy/paste it at any moment. On an upper layer, outside the visual area of the stage, place a Movie Clip for the loop (doesn't matter how the clip looks because we are using it only for Action Script reasons; in the source file it is visible in the shape of a rectangle). Create another Layer for the actions and make the stage look like this next image:

In the first frame 60 instances of the Clip will be generated, and then the Movie will move to the second frame. In the Action layer, the two frames have the role of stopping the Movie: "stop();". The loop placed on the rectangle it's been done by the next Action Script code:

onClipEvent(load) {
	i = 1;						
	max = 60;
}

onClipEvent( enterFrame ) {
	if( i <= max ) {
		_parent.flame.duplicateMovieClip("flame"+i, i);
		i++;
	} else
		_parent.play();
}

This creates one instance per frame until it reaches 60 of them, with the names: "flame1","flame2"..."flame60". Then it jumps the movie to the second frame where the Symbols will continue looping. Because the Symbols are 30 frames long and we have 60 of them looping, it means that in any frame there are 2 instances starting from frame 1 (this assures continuity). We only need a way to make each instance a bit different, so open the 'flame' Movie Clip and on the first frame, add:

scale = 30 + random(50);
setProperty(_target, _yscale, scale);

We generate a random number between 30 and 79 which is assigned to the _yscale property of the "flame" Symbol (actually we are referring to the Clip inside which we added the code by using "_target"; so inside "flame3" we are manipulating its parameters). By assigning the "_yscale" parameter of a Movie Clip with a value between 30 and 79, we are squeezing the Clip vertically, so its height will be somewhere between 30% and 79% from the height visible in the source file.

Because we placed the code on the first frame, each instance "flame1" ... "flame60" will change its appearance each time enters frame one so the final result looks like a real fire.

Remember two things: you can do other changes to the instances, to make the flame even cooler, and the effect works without a second frame where the "rectangle" is not visible, but the Movie will do some unnecessary work so this is the clean version.

That's all about it,
Enjoy!