Create a fire in Flash 8

I found that so many people look for ways to create a fire in Flash 8. Many famous Flash scripters also create stunning fire effects. I will describe my way of making a fire in Flash 8 (and later translate it into AS3).

View the fire effect

Download the source

View the burning-building effect

Download the source

Mine is simple to create. Draw a orange-to-black gradient, use perlinNoise as displacementMap filter and apply to the gradient, that's it. You can also apply a background so that it seems burning something, like the pic on the right (I just randomly pick a picture online. I hope the burning building does not offend anyone :D).

There are pros and cons for every method. For mine, the method and code is simple, but the CPU usage is quite intensive.

Let's start!

1. Create a new fla, with a black background and stage size 300x300.

2. Create a movie clip gradient with size 100x100 as follow. Put the movie clip outside the stage and name it "gradient".

3. Create a blank movie clip. It will appear as a white dot. Place it to the (0,0) position of stage. Name it "mc". We will place our fire to this movie clip later.

4. Start typing AS in the 1st frame.

Line Description
1-3 Import the classes that we will use later
5 Size of the bitmapdata that we will be dealing with. It is same as the size of the gradient movie clip.
6-7 Create 2 transparent Bitmapdata. bitmap will store our perlineNoise and fire will store our fire effect.
8 Attach the fire Bitmapdata to the blank movie clip mc.
9-10 Magnify the movie clip.

 

 

 

 

 

To stage is 300x300 but the gradient and bitmapData are only 100x100. Therefore to fill up the whole screen, I scale mc, i.e. the fire effect, to 3 times larger. This is because if we make a perlinNoise of 300x300, it will greatly increase the CPU usage. Even now the CPU usage is still quite significant, but at least better. Also, by just increasing the size to 3 times larger, the resolution is still preserved quite well.

5. Set up a new array as follow. It is for the movement of perlinNoise.

6. Here comes the main bulk of the code.

Line Description
16 Set up an onEnterFrame so that the code will keep running.
17-18

vx and vy are speed of the movement of fire.
In this case, there is no horizontal movement of the fire since vx is 0. You can add some horizontal movement as if there is wind blowing.
The fire move upwards with a speed of 7 as shown by vy. Increase this if you want the fire to move faster

19-22

Change the value of the array and thus change the movement of the perlinNoise.
I will not go into the details of perlinNoise. You can refer to the liveDocs.

24 Set up the perlinNoise. This is an important part since it changes the appearance of the fire.
You can play with the 1st 2 parameters so as to alter the shape of the fire.
The next 2 parameters determine the "detail" of the fire. The more the detail, the higher the CPU usage.
25 Set up the displacementMap filter with the perlineNoise. You can refer to the liveDocs for details of this filter.
26 Draw the gradient into the fire bitmapdata.
27 Apply the filter to fire.

 

 

 

 

 

 

 

 

 

 

You are done :)

For the burning building effect, basically you just place a picture in the layer beneath the blank mc. Since the bitmapData we create are transplant, you can see the building through the fire, and thus looks like burning.

I hope this is a relatively simple yet realistic enough way to create a fire effect. I will re-write this tutorial in AS3 later.