Coding
i. One thing that we have to do before we write the code is give our fire Movieclip an instance name. We use instance names to address Movieclip through Actionscript.
So, select the fire Movieclip and press Ctrl + F3 to open your Properties Window, in case it's not already open. In the bottom-left corner of this window should be a text field. This is where we specify the instance name of symbols. Type fire there. Yes—that's the name of our symbol as well.
 |
ii. Next, select the first frame of the main timeline and press F9. In the Actionscript window that will appear, type the following code:
- i = 0;
- Mouse.hide();
- this.onEnterFrame = function() {
- i += 1;
- _root.fire.duplicateMovieClip("fire"+i, i, {_x:_root._xmouse+random(4), _y:_root._ymouse});
- };
IMPORTANT: we could pretty much finish our tutorial here, but there is one very important reason why we shouldn't.
Each of the duplicated Movieclips, although not visible, is still there, which means that we will have thousands of Movieclips on the stage in just a few minutes. Dealing with some many objects is very CPU-consuming.
So, what can we do?
Yes—we can get rid of the Movieclips that we don't need anymore.
Select the fire Movieclip and press F9. In the Actionscript window that will appear, copy and paste the following code:
- onClipEvent(enterFrame){
- if(random(300) == 0){
- removeMovieClip(this)
- }
- }
And, of course, here comes something for those who could do with some explanation.
Explanation
- Mouse.hide();
First off, we get rid of the mouse.
- i = 0;
Then, we need to declare the i variable. We will use this variable to duplicate the Movieclips.
- this.onEnterFrame = function() {
- i += 1;
- _root.fire.duplicateMovieClip("fire"+i, i, {_x:_root._xmouse+random(4), _y:_root._ymouse});
- };
The first line is the so-called event handler which tells Flash to execute the code between its opening and closing curly brackets every frame. Now let's have a look at what happens within the event handler.
- i += 1
1. We increment (increase by 1) the i variable.
- _root.fire.duplicateMovieClip("fire"+i, i, {_x:_root._xmouse+random(4), _y:_root._ymouse});
2. We duplicate the Movieclip whose instance name is fire, and then use the variable i to give the newly-duplicated Movieclip a unique name. So, the duplicated Movieclips' names will be fire1, fire2, fire3, fire4, fire5, and so on.
Between the curly brackets ( { } ), we can specify other properties of the duplicated Movieclips like the x and y coordinates of the Movieclips.
As you can see, the y coordinate of the new Movieclip is the same as the y coordinate of the mouse, while the x coordinate is the same except that a random number is added to it. I did that to receive an effect of randomness that is characteristic for fire.
And here comes the explanation for the code place on fire(n) (where n denotes a number) Movieclip:
- onClipEvent(enterFrame){
- if(random(300) == 0){
- removeMovieClip(this)
- }
- }
Oho, we've got an event handler again. What does it do?
It tells Flash to execute the code between its opening and closing curly brackets everyframe.
And what is the code that is executed every frame all about?
It is in fact an "if statement" that checks if a random number, picked from 0 to 299, is equivalent to 0. The reason I did that was I wanted to give some time for the Movieclip to play its animation, and disappear only when it's over. I know—I could have done it another way. But then again, this one is not that bad, is it?
And finally, I used the removeMovieClip function to delete the Movieclips.
Below you can download the FLA files for your better understanding.
So! This really was some longer tutorial. I hope you've enjoyed it and managed to get some useful information from it!
If you are not as much tired as I am after writing this tutorial, you might enjoy having a look at other tutorials this website has to offer :-)
Cheers!
