How to create a fire effect using particles!
This tutorial will show you how to make this nice fire effect that is dynamically generated.
What does this mean? It means that for very little effort, you can create a cool looking fire effect.
Open a new Actionscript 2 flash file, set the framerate to around 24 fps, and set the background colour to a dark grey/black (this makes the flames show up more).
Ok, so the first step in creating this effect, is to create our flame particle. On a new layer of the movie, draw a small flame shape. Make the outline yellow, and then fill it with an orange-yellow gradient. You want this to be roughly 20 pixels wide, and 40 pixels tall, not too big and not too small.
Once you are happy with it, select the whole drawing and press F8 to convert it into a movieclip.
Give it the name of “flame_mc”, and then tick the box marked “export for actionscript”, and in the box below, enter the identifier name of “flame”. For the registration point, make sure that the bottom centre mark is selected .
Open the movieclip you have just made, and create 5 keyframes on the main timeline. On each frame, redraw the flame slightly differently – this is to create some variety inside the fire. Ensure that for each flame, the registration point (the black X in the middle of the screen) is in the middle of the bottom (When you add movieclips to the stage via actionscript like we will be doing, they are positioned via this point, so knowing where it is in relation to the contents of a movieclip is important).
That is all the drawing you will need to do for this effect!
Ok, the next step is to create a holder object which will contain our fire. Go back to the main stage (you can delete the flame_mc from the stage now, it only needs to be in the library for this effect to work). Draw a rectangle on the stage, 20 pixels wide, and 100 pixels high. Convert this to a movieclip, call it firebox and set its registration to the top left corner (no need to give it an identifier).
Open the movieclip, double click on the line around the rectangle and delete it (leaving just the fill inside). Click on the fill, and drag the alpha value in the fill colour selector to 0 (to make it invisible).
Ok, now all that is left is to add the code! Inside your flame box movieclip, in a new layer click on the empty keyframe, and then enter the following code:
count = 0;
function flames() {
t = this.attachMovie("flame", "flame"+count, 1+count);t.gotoAndStop(random(4)+1);
t.spread = Math.random()*2-1;
t._x = Math.random()*20;
t._y = 120;
t._xscale = Math.random()*60+40;
t._yscale = Math.random()*80+20;
t._alpha = Math.random()*60+40;
t._rotation = Math.random()*20-10;
t.onEnterFrame = mover;
count++;
}
function mover() {
this._y -= 3;
this._x += this.spread;
this._alpha -= 3;
if (this._alpha<=0) {
delete this.onEnterFrame;
removeMovieClip(this);
}
}
this.onEnterFrame = flames;
I will now go through this code line by line to explain what each part does.
Count = 0;
We create a variable called count, which will be used later on...
function flames() {
We create a function called flames. A function is basically a small packet of instructions, which once declared, can be called on whenever you want.
t = this.attachMovie("flame", "flame"+count, 1+count);
attachMovie is a command which is used to pull a movieclip from the library, and attach it onto whatever target is specified. In this case, we are attaching it to the main timeline of the flamebox movieclip.
The parameters in the brackets are the following:
1. Identifier
- The identifier we specified when we created our flame_mc
2. New Name
- The name that the object you are attaching WILL have once it is created. In this case it will “flame” plus the value of the variable “count”, so as they are created they will be flame0, flame1, flame2 etc.
3. Depth
- Every object in flash has to have a depth. Only one item can exist in the same depth at any one time, so you have to modify the depth. In this case, we are adding the value of count to 1 each time, so that each movieclip will be created in a new depth. For reference, an item with a depth of 1 is treated as being at the back, and as the depth gets higher, the object is treated as further forward.
The “t =” is basically a sneaky way of referring to this object we have just created, without having to refer to it directly. Basically every time we now refer to t in this code, we are referring to this instance of the movieclip.
t.gotoAndStop(random(4)+1);
We created 5 frames, each with a different flame effect. This line tells the movieclip to randomly pick a frame between 1 and 5. (The reason it is 4 + 1, is that random(5) would pick a number between 0 and 5, and as there is no frame 0, it would not work correctly).
t.spread = Math.random()*2-1;
Here “spread” is a variable that we are creating inside our flame movieclip (t). This variable is used later on to add a tiny bit of horizontal movement to the flames. The value of spread will be between 1 and -1.
t._x = Math.random()*20;
Ok, so here we are setting the initial X (the horizontal) position of our movieclip. This code places it on a random point between X = 0 and X = 20.
t._y = 120;
We set our initial Y position to be 120. In flash, the X axis goes from left to right, and the Y axis goes from top to bottom, so a low number will be near the top of the screen, and a high number towards the bottom. The firebox movieclip we created was 100 pixels high, so this code places our flame movieclips 20 pixels beneath the box we drew.
t._xscale = Math.random()*60+40;
t._yscale = Math.random()*80+20;
These lines just add a bit of variety to the flames. _xscale and _yscale are exactly what they sound like – they allow you to control the size of the target movieclip. A value of 100 is normal size, anything lower is smaller, and anything larger is bigger.
t._alpha = Math.random()*60+40;
Similarly, this line means that each flame movieclip is created with a slightly different amount of alpha (transparency) creating a bit more variety inside the fire.
t._rotation = Math.random()*20-10;
More variation here. Rotation is specified in degrees, so in this case I am allowing the movieclips to be randomly rotated between 10 and minus 10 degrees.
t.onEnterFrame = mover;
This line very easily allows us to control the behaviour of our flame. OnEnterFrame is a property which will fire off 24 times a second (assuming your frame rate is 24 fps!). “Mover” is a seperate function which we are about to create. Handy!
Count++;
The final action for this function is to increase the value of “count” by 1. This means that each time the function is triggered, the value of count will be unique.
}
function mover() {
we now create our second function, called mover (the one that is being applied to “t” every frame).
this._y -= 3;
So every frame, we are subtracting 3 from the y value of our movieclip. In essence, this causes our movieclip to move up (remember, the y axis runs from top to bottom) by 3 pixels every frame. We can use “this”, as we know that this mover function is being applied directly to our flame movieclip.
this._x += this.spread;
Every frame, the value of “spread” (that we created as a random number) will be added to the x position of the movieclip. This means that it will slowly move either to the left (if spread is negative) or right (if spread is positive). This causes the flames to fan out into a more realistic fire.
this._alpha -= 3;
We remove 3 from the alpha value of our flame. A value of 0 is totally transparent, and 100 is fully opaque. This causes our flames to gradually fade out as they rise.
if (this._alpha<=0) {
So, if the alpha value of the movieclip is less than or equal to 0...
delete this.onEnterFrame;
The “onEnterFrame” is the propertly that was repeatedly applying the mover function to our flame. Deleting the onEnterFrame call means that it stops trying to apply the function. It is important to do this, as even if we remove the movieclip from the stage, flash will still try to apply this onEnterFrame function to it, unless we delete it (like this).
removeMovieClip(this);
Once the flame is invisible, we want to be able to get rid of it, otherwise all the flames would build up and flash would crash due to lack of memory to create new flames. We can safely remove (delete) the movieclip now that the onEnterFrame call has been deleted.
}
}
this.onEnterFrame = flames;
Finally, we can create the call for our “flames” function. The “this” in this case is now referring to the stage, as we are no longer inside any functions.
If you test your movie now, you should hopefully see something like this:
There are just a couple more steps to go, to create our more realistic looking fire. Firstly, go back to your main timeline, and select the firebox movieclip. Under filters, add a blur filter, and set x to 5 and y to 10.
Now copy the firebox movieclip, and paste 2 extra copies onto the stage. Line all 3 up so that their bottoms are aligned, and their sides are nearly touching. When you test now, you should have a much more realistic looking fire – the multiple copies of the movieclip help to beef it out a bit and make it look more substantial.
That is all there is to it. Now whenever you want to use the fire in anything, you just need to copy the firebox movieclip and place it wherever you want the fire to be. Adding more copies of the box makes the fire more intense. You can scale the box to increase or decrease the size of the fire. The only issue is that you will want to avoid creating TOO many copies of the fire on the screen at once, otherwise it may become a bit too processor intensive and slow down on a lot of computers.
Hopefully from these basics, you will be able to adapt this technique to create lots of different effects. For example, with some small adjustments, this could be used for smoke or steam. It could also be used to create bubbles, sparkles, or any cool glowy effects you so desire.
I will add more particle effect tutorials in the future, but I hope you enjoy this one for now :)
As always, feel free to post any questions or comments on my forum (Which has finally been fixed to allow people to register again!).
John.
|
