Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
23rd June 2009

Simulating realistic smoke effects in Flash

WE REVEAL THE SECRETS TO CREATING ATMOSPHERIC SMOKE EFFECTS FOR YOUR FLASH ANIMATIONS TO HELP INTENSIFY THE DRAMATIC MOOD

Simulating realistic smoke effects in Flash
WE REVEAL THE SECRETS TO CREATING ATMOSPHERIC SMOKE EFFECTS FOR YOUR FLASH ANIMATIONS TO HELP INTENSIFY THE DRAMATIC MOOD

WITH FLASH BEING the undisputed king of web browser plug-ins, it’s no surprise that quite a lot of graphics created in Flash can end up having what many would describe as ‘the Flash look’. That’s because Flash uses very flat-looking vector graphics to keep its file size down, and getting away from that can often be quite difficult. To get around this, we’re going to create ordinary vector graphics but spice them up by relying on Flash’s filters, in particularly the Blur filter. By adding a heavy blur and transparency to our graphics, we can generate what looks like smoke. If we animate several layers of smoke changing capacity and size, we can easily re-create atmospheric smoke. This can also be used in photographs to animate smoke on water or wispy clouds in the sky; ultimately, it’s all down to your imagination and what you think will benefit from some added smoke effects.

Download the tutorial files
Originally appeared in Web Designer Issue 151 – Author: Mark Shufflebottom

01 Getting started
Simulating realistic smoke effects in Flash
Open Flash and create a new document, choosing an ActionScript 3.0 document. In the Properties palette, click the Size button and change the size of the document to 750 by 450 pixels. Make the background of the document black and increase the frame rate to 30 frames per second.

02 Create a Movie Clip
Simulating realistic smoke effects in Flash
Press Ctrl+F8 to create a new symbol in the library. Select Movie Clip as the symbol type and name this ‘smoke 1‘. Click OK, and you are now ready to start creating this symbol. Select the Oval tool from the toolbar and select a light beige as the fill colour.

03 Add circles
Simulating realistic smoke effects in Flash
Select the stroke colour in the toolbar and click on the No Stroke icon. Roughly copy the screenshot to the left, adding circles randomly. Feel free to cut some of the circles out of existing ones to get a more random pattern. At the moment this looks nothing like smoke, but with a heavy blur that will all change.

04 Another Movie Clip
Simulating realistic smoke effects in Flash
Press Ctrl+F8 to create another Movie Clip. Name it ‘smoke 2‘ and click OK. Now use the Paintbrush tool to add random circles, making sure that you have the largest round brush selected. Zoom in using Ctrl and +, and click with the Paintbrush to create small circles. Zoom out pressing Ctrl+– and click with the Paintbrush to add larger circles.

05 Zooming in and out
Simulating realistic smoke effects in Flash
You may find it strange to zoom in and click with the Paintbrush, then zoom out with the Paintbrush and click again. This is actually much quicker than changing the size of the brush. When zoomed in, Flash keeps the paintbrush the same size while all other content
is larger and therefore the brush paints smaller, and vice versa when zoomed out.

06 The final smoke
Simulating realistic smoke effects in Flash
Press Ctrl+F8 to create another Movie Clip, naming this ‘smoke 3‘ and press OK. As before, use the Paintbrush and zoom in and out to add circles in a random pattern similar to those shown in the screenshot above. With these three Movie Clips, we should be able to create our animated smoke.

07 Animating the smoke
Simulating realistic smoke effects in Flash
Once again, create a new Movie Clip by pressing Ctrl+F8, this time naming it ‘smoke clip‘. Press OK and drag the symbol smoke 1 to the stage. Click on the Filters tab in the Properties palette and add a Blur filter, giving it a value of around 36 pixels.

08 Fade in and out
Simulating realistic smoke effects in Flash
Click on frame 7 and press Ctrl+F6 to add a new Keyframe, then click on frame 22 and press Ctrl+F6 again. Select frame 1 and in the Properties panel, change the Color drop menu to Alpha with a value of eight per cent. Repeat this for frame 22. Click on frame 2 and Shift-click on frame 21 to add a Motion Tween from the Properties panel.

09 A new layer
Simulating realistic smoke effects in Flash
Next up, add a new layer and add a Keyframe at frame 8. Drag the smoke 2 clip from the library onto the stage, using the Transform panel to scale and rotate the smoke so that it appears a little different to the first. Again, add a Blur filter then add a Keyframe at frames
20 and 39.

10 Overlapping smoke
Simulating realistic smoke effects in Flash
Choose frame 9 and Shift-click on frame 38, then add a Motion Tween from the Properties panel. You will notice if you move the playhead backwards and forwards that we are overlapping different smoke clips, fading in and out over the top of one another. This will
give the effects of swirling smoke.

11 Continuing the smoke
Simulating realistic smoke effects in Flash
Continue to add new layers with more smoke symbols from the library, randomly scaling and rotating them. Each time, fade the symbols in and out by changing the alpha value and add a suitable soft blur for each of the animations. You can repeat sections again by copying and pasting the frames.

12 Looping effect
Simulating realistic smoke effects in Flash
Whatever your last animation is, copy and paste some of the frames from the end of that animation to the beginning. This will loop your animation much better without it looking like it comes to an end. Copy frames by clicking on the first, Shift-clicking on the last frame, then right-click and choose Copy Frames.

13 Add to the main timeline
Simulating realistic smoke effects in Flash
Right-click on empty frames at the beginning of the timeline and choose Paste Frames to add in the frames. Once the loop is complete, click on the icon Scene 1 to return to the main stage. Drag the Movie Clip symbol smoke clip to the stage, positioning this instance in the centre of the stage.

14 Add the logo
Simulating realistic smoke effects in Flash
Add a new layer and add your logo to the stage, again positioning this in the centre. Once done, press Ctrl+Enter to test the SWF file. You should see your smoke atmospherically animated behind the logo. You may need to tweak the animation to suit your needs, then save the file.

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://armigesfahani.com Armig Esfahani

      Thank you.. really useful..

    • Priyanshu

      nicely done…..knowledgable

    • bhupesh

      goood tutorial very well doe

    • Lyandu

      you guys are amazing!!!

    • SiChern

      hello, don’t you know that this will extremely Pump up your CPU Usage?
      it’s totally not worth to spend such resources just for this effect.