Viral videos from Unruly Media

Unruly Media creates viral campaigns for the world's top brands. The video is then distributed worldwide via Unruly Media's ad distribution network. See some of the videos here:

 








Realistic smoke effect - Flash

view all »


In this tutorial I will show you how to create a realistic smoke/fog effect in flash. This is useful for adding atmosphere to images, games and pretty much whatever you fancy! Your final result will be similar to this:

STEP 1

Create a new flash file, set the framerate to 30 for a smooth animation. Next, import the image you wish to add the smoke effect to and drag an instance of this from the library to the stage. (If you do not have an image to use, set the background colour of the stage to black to see the effect). Lock the first layer and create a new layer called smoke. Your stage should now be nothing more than an image / black backdrop.

STEP 2

Select the smoke layer we just created, then select the brush tool found here:

And select a medium - large brush size here:

Select white for the colour, then draw some squiggles on the stage like so:

Select all on the stage and press f8 to convert to a movieClip. Double click on the smoke to enter this movieClips timeline. What we need to do now is duplicate the squiggles so we can create a loop. Select all on the stage, then while holding Shift + Alt drag to the right to make a duplicate copy, and align it like so:

STEP 3

Within this movieclips timeline, go to frame 300 and insert a new keyframe (f6). On this frame, select all of your squiggles and whilst holding shift, drag to the left until it the duplicate squiggles are in line with where the original ones where.

Select a frame between 1 - 300 and right click, then create motion tween. Hit CTRL + Enter and check that the clip loops like this:

You may need to tweak the position on the last frame to get a smoother loop.

STEP 4

Ok, so we have moving white lines, but now we need to make it look like smoke. Return to the main timeline of your movie, and select the smoke movieClip. In the properties panel, select the filters tab, then click the plus symbol and select blur.

You can set this to your liking, but anything over about 50 should be fine. I have set mine to 69, and the quality to medium.

You may also need to adjust the alpha in the properties panel if your smoke appears to dense. Hit CTRL and enter, and you should see this as your final result:

This is a basic effect, which looks good and with some experimentation excellent results can be achieved.

The Dude

Did this tutorial help you? If so, click the bookmark button, stumble me, add me to your twitter and tell your friends! Alternatively, sign up and leave a comment!

Not what you were looking for? Then leave a comment or email me and we’ll get you the tutorials you need.

Vote in HexoSearch Help me out by voting for this tutorial

Did this post help you? If so help us continue to grow and Digg this page or Share on Twitter!

If you haven't already, sign up to our RSS feed or register to recieve updates direct to your email!

19 Responses to “Realistic smoke effect - Flash”

  1. Matthew

    Hello Jason I sent an email to the address that you have in your contact section and I could very much use your help. I left you my email and I would be overjoyed if you were to reply, thank you kindly.


  2. Hi Matthew,

    Reply sent :)

    The Dude


  3. gr8 work

  4. ONISE

    Thank you very much buddy,

    Very Nice Work…

  5. Garret

    You can take it a step further by duplicating the smoke movieClip and rename the duplicate something else. Create a second layer and add the new movieClip. Edit the new movieClip by cutting it down to 150 frames. This will make 1/2 the smoke move faster appearing to pull away, wave, and dissipate as real smoke does. To keep the opacity down, make each movie clip 50-70% opacity. Thanks for the pointers!


  6. I like your methods Garret, thanks for the comment :)

  7. NITHIN K

    nice work

  8. STRIPE_ACCESS

    Great tutorial! simple but very useful.. Thanks!

  9. melodave

    Such a simple and lush stuff. Keep on smokin’ dude!;)

  10. melodave

    Hey Dude, what’s that Witch on your toolbar? Cool :D


  11. Its a plugin called trick or script, its useful but mainly for the autosave feature for me!

  12. Wowser

    I have a question, the only problem I have is when I view it in my browser in full screen mode the blur effect does not work, it shows the squiggles only. It only work when I resizes my browser smaller. I even tried it via action script, by calling the BlurFilter, still nothing. Any help will be greatly appreciate it.


  13. So simple yet cool little effect. Thanks!

    William Harveys last blog post..Piano lessons reviews


  14. Excellent tutorial. A simple effect that renders awesome impressions on any nature image.. Keep up the good work….


  15. This is pretty cool and could be very useful, thanks for the tip


  16. fantastic tutorial


  17. fantastic! This is pretty easy and gives a great effect! Thx for sharing

  18. Niki

    Thanks !!
    Very helpful tutorial

  19. akansha

    Haven’t tried this out yet. But it seems simple and amazing.. !!

Leave a Reply