04/01/2008
Flash Steam Tutorial

This is what we will be making:

You can download the .fla file here.

This tutorial assumes that you have a basic knowledge of flash. For more basic tutorials pleas visit FlashKit.

We will start off in Adobe Photoshop. Begin by creating a new document, making it's width the intended size of your Flash document and make the height the same size as the width so that it is a square.

Select Black and white as your pallette colors. Go to Filter/Render/Clouds. This should create an image that looks like this. >>

Next go to Filter/Render/Difference Clouds. Repeat this step (ctrl+F) until you get something that looks like this. >>

You will need to creat 3 versions of this image, and save them as steam1.jpg, steam2.jpg, & steam3.jpg.

You will also need to create a gradient to use as a background image.
It should look similar to this >>

Now swap over to Macromedia/Adobe Flash and create a new document; the width should be the same width as the cloud document, and the height should be half that size, and set the frame rate to 24.

STEP 1: Import your bacground image into Layer 1 and label it BG.

STEP 2: Create a new symbol as a movie clip. Name it steam_mov.

STEP 3: Import steam1.jpg, steam2.jpg, & steam3.jpg into steam_mov, distribute to layers, and label them accordingly. Convert these to symbols, and align the top of the symbols to the top of the document.

STEP 4: In the steam1 layer insert a keyframe at frame 100 (this can be changed to adjust the speed of the steam), and align the bottom of the symbol to the bottom of the document (in frame 100). Now create a motion tween.

STEP 5: Now go to frame 50 and insert a keyframe.

STEP 6: Click on keyframe 1 and select the steam1 symbol in the document area. Go to your properties menu and set the color tab to alpha @ 0%, and set the blend mode to overlay. Also click on keyframe 100 and select the steam1 symbol in the document area. Go to your properties menu and set the color tab to alpha @ 0%, and set the blend mode to overlay.

STEP 7: Click on keyframe 50 and select the steam1 symbol in the document area. Go to your properties menu and set the color tab to alpha @ 50%, and set the blend mode to overlay.

STEP 8: Repeat steps 4 - 7 on Steam2 and Steam3 layers.

STEP 9: Go to the Steam2 layer Select frames 1 - 100 and move frame 1 to frame 10.

STEP 10: Go to the Steam3 layer Select frames 1 - 100 and move frame 1 to frame 20.

That's all there is to it. although you will have to make some minor adjustments to make the steam run continuosly.

More Tutorials ›