Dec 4, 2008

#2 - Smoke

This FX tutorial will cover the animating of simple bursts of smoke used in elements for puffs of dust, smokey explosions, character zip offs, full screen cycles or wipes and character or debris impacts to the ground.

There's dozens of ways to approach smoke FX in Flash, this will cover only a few methods, from these principles you can use these techniques to apply a variety of color and design styles to your smoke animation.

First off, you'll need to draw it all out. Plot out the size and speed in which your smoke will
happen. Is it a fast dissipating smoke? A fast impact then slow dissipating dust cloud? Does it never really dissipate and only cycles there lingering? I won't cover any fume cycles or heavy fire-based explosions, only techniques to enhance your smoke animation once your classically animated smoke is complete. Before you composite, color, blur and efficiently re-use the elements once created, you must first know what your smoke is supposed to be doing in your scene, then build upon it, polish it off and make it look nice.

All these images are thumbnails of a larger image, click on them if you need a closer look of these screen captures.

As an example of a quick double-burst smoke effect, starting off with a more cartoony/stylized design to begin with, you keep your onion skin on and treat it like any other character animation, since this particular sample is quite flat and simplified, it's easy to just draw straight ahead, sometimes you should draw out your most extreme and largest part of the burst, and in-between your way to it. Depending on the spacing between your drawing do you wish to favor to the drawing with the largest volume or keep your timing even and space out your drawings at a relatively equal distance to make a simple (constant speed) smoke dissipation, it's all up to you, here's just one of many ways to approach it, click the play button below to see it looping.

Once you've ruffed out the shape and volume of your smoke bursts and mapped out the timing in which it must come out and dissipate through, you begin to place the final line. In this case a thick black brush line, later to be re-painted a light pale blue. Then go frame by frame to paint it all a white base color. Doesn't matter what colors you choose or what shade your background is, as long as you can clearly see your lines as you trace off those final clean brush strokes, you can easily change the line colors and fill colors later.

See how the overlapping smoke animations are all separated on their own layers? You can do this as you clean-up your artwork frame by frame so you can re-use elements of this later in different combinations if you wish. Even the cartoony blast out lines are separate and traced with a thick version of the 'line tool' as seen below.

Copy all the frames of your final composite into a new symbol, now you can drag multiple copies of your smoke burst symbol onto the blank time line of a new scene and stagger timing and edit the size, rotation and even flip the symbols as you make new duplicates on new layers to simulate multiple burst of smoke with the same 12 drawing you did earlier you can make this animation go a long way to add variety and overlapping versions of itself to give the illusion of several traditionally drawn smoke puffs popping out.
For another sample with different timing see sample below.
This is all on 1s, a fast blast out with a slower dissipation making a smoother effect.

Observe the version below, this time the symbol is duplicated scattered around in position and slightly squashed and stretched to give a bit of variety in the animation, you can even duplicate the symbol in the library, drag that on to your stage at a new point in the timeline and flip the symbol, then go inside that symbol and place the last few frames on 2s to give variety in timing to the various smoke puffs bursting out in your scene, again efficient use of recycling your own animation to save you time and still make your animation seem to have some variety in it.
Below is a sample of a smoke trail you would find hanging off the back of a car. Whether you are inking your smoke cycle with the brush tool or the pencil/line tools try to remember to separate the lines from your base color shapes. Then you can easily re-color your smoke whenever you made need to re-use it for a different scene, the Instance/Tint options from your properties window is also a quick way to re-color your symbol quickly without using the paint bucket, but I find you often loose details and can never quite get the right color you want.

Make certain you use the Edit Multiple Frames button, drag those claws across the time line (make sure to lock your outlines layer first), then Select All and simply choose your new color and it will repaint all frames on all unlocked layers.

Do it again with your outlines layer, locking your base color layer, use a slightly darker or
lighter version of the color you used previously, and presto, you've re-colored your smoke
for the scene it finds itself in.

Adding Blurs

Here we have a puff of smoke that could be used for an object impact to the ground or for a character zipping off screen. Animated stationary, starting off with a small puffy cloud, quickly expanding on 1s, then breaking apart as the gaps grown from the center outwards to make the cloud dissipate slowly on 2s with the spacing between your drawings being very small for the end. Paint it all very light gray with a slightly darker tone for the outlines. Copy these frames and place them into a new symbol.

Now you have a symbol in your library to drag onto the stage, this self-contained looping animation can now have a tint effect placed on to it, (it helps when you chose very light colors to begin with). In the properties window choose Tint or Advanced to play around with the tone and saturation you would like to achieve.

Once you've picked the color you want, you can open the Filters window under the Windows/Properties menu. Now before you go off making some crazy glows and blurs with Movie Clip Symbols, keep in mind are you doing this for the web or for television? Let's assume you're final render will be for hi-resolution broadcast animation. Because as you may know Movie Clips do not render through video codec, the filters you apply to movie clip symbols only render as SWF files, if so, you have no worries, if you're doing this to render out to Quicktime Video then this is any easy fix, well, easy but potentially time consuming.

First you select all the frames on the layer that has your isolated Graphic Symbol of your smoke dispersal animation.

Hit F6 to keyframe everything, then go to the beginning and select the first frame. This selects your symbol

Now frame by frame you must hit Ctrl+F8 to convert to Movie Clip symbol. Repeat the process, in this case it had to be done 28 times, select the frame, Cmd+F8(for mac users) and click OK. Now each individual keyframe has been converted to it's own Movie Clip symbol, simply Use the Edit Mulitple Frames button to activate the onion skin range on the timeline, stretch it out to cover all your keys, Select All and go to your filters window. Choose Blur at a value of 10 (or maybe a bit less depending on the size of your effect on screen), and set the Quality to High. Now test render it and see how you like it. You can always re-select and change the blur settings to whatever you'd like. Why keyframe every frame? For many reasons, it eliminates the random glitches Flash often has with rendering filters to video (such as drop frames sometimes occur) and it allows you total control to gradually make the blur more or less intense as the animation progresses, you could alter it frame by frame to give the effect of slowly going out of focus or the reverse.

Advancing further, here's a rough smoke blast out, wiping the screen, a great transition effect or for a nice cartoony smoke explosion to camera, the villains blasting in through the wall or a coyote tripping his own booby trap can all have a similar effect, a fast initial blast out followed by a slo-mo build up and then a quick dispersal to reveal the room in ruins or the charred character.

Here's a fast 30 frame version of the same smoke blast all on 1s, instead of the slow 130 frame version from above, this one drops all the frames from the slow build up in the middle to go from the initial blast to the final dissipation. Some animators do all their FX on 1s no matter what, but I find (just like character animation) it can look too smooth and gooey and it limits the power and snappy-ness you can achieve in the timing if you limit yourself to animating on only 1s or ony 2s. 1s and 2s used in combination always works best. Again, there's no secret to the actual animation when you don't worry about too many different tones in your effects, rough it out with outlines first keeping your onion skin ON to see your previous frames and expand your blobs of puffy smoke clouds bigger and bigger as they get closer to camera. Find a point in which each element of your smoke animation starts to break apart on itself, splitting it in the middle and animating the morphing of the clouds into smaller bits that gradually dissipate and fade away.

Here's the same version using the technique shown earlier. Frame by frame selecting all the artwork on each frame and converting to a Movie Clip Symbol. Then selecting all these frames, opening the Filters window and adding a "10" high quality Blur to create a fuzzy/out of focus effect.

Here we have a cleaner version. In this case the thick tappered clean line is inked on a saperate top layer, so that you can easily

Here's the fast version. Using Edit Multiple Frames you can quickly select all the frames on an isolated layer and choose a new color from your palette and it instantly re-paints your smoke tones, do it again for the top outlines layer to give that nice two-tones shaded smoke look.

Here's another sample of a build up, cycle, and dissipate.

In this sample the initial burst is followed by a fast clearing.

Here's some simple alterations to the samples shown above. A simple smoke puff variation, and below that an added burst outward with cartoony stars snapping out to the version shown at the beginning of this post.

Add Transparencies & Layers

Let's start over, this time with some simple shapes, "key pose" some new smoke drawing. Animate on 4s or 6s, then break it down frame by frame.

Once you have it all keyed out, you in-between your drawings, keep the onion skin on so you can achieve a nice smooth transition from pose to pose. Then take the pencil tool and with a thin line, start inking your animation. Make a new layer on top and trace over your work. Keep the rough layer locked and your onion skin on, to make any corrections in volume as you clean-up your artwork. The timing/spacing looked like this for this particular spurt of dusty smoke.

Play with the timing, line test your animation with a quick Movie export (SWFs never play in real-time so don't bother unless it's a very small and simple clip).

Once you've cleanned all your animation, you can position, size up, rotate, and convert to a self-contained symbol if you wish. Use the Edit Multiple Frames button (located just below the timeline) to select multiple frames of artwork at once for quick and easy edits in scale, angle, color and line weight of all your artwork.

Now you can paint your animation, take that paint bucket, choose your color and start click-filling frame by frame. Then Edit Multiple Frames button, and choose the Eraser tool on the Erase Lines setting, zoom out of your stage all the way, expand the Edit Multiple Frames range finder on your timeline to cover all your line art and click and drag to erase all the lines on all your frames at once, leaving just the paint. Now you have no outlines on a flat-colored simple smoke animation.

Now you can copy all these frames into a new symbol (if you haven't already). In this particular exercise we'll create two symbols with slightly different versions of smoke animation, this will create more random variety in the final product we are about to create. To produce a semi-transparent, multi-layered smokey effect, you need to use lots of alphas and layers.

Drag these new symbols onto a fresh new timeline, make new layers and scatter them on the timeline, isolating each self-contained Graphic Symbol to its own layer, move the starting keyframes for each new symbol copy you are inserting on the stage. Now make a new key frame at the end timeine for all layers, and randomly move those end frames around. Select-All and now you can change the Alpha to 0% from the Properties Window, then add the tween by selecting a strip of frames on all these new layers, and going to the Properties window again to select Motion tween.

Now you need to start making groups and clusters of these new smoke fade-out symbols together, duplicate seperate smoke symbols (always isolating just one symbol per layer) change the size, rotation and starting point of the animation... make sure all the symbols you make are Graphic symbols, so they'll play when you render them to video and they will loop themselves endlessly to make nice cycles and give the illusion that you have lots of complex smoke animations. Your tome line should look like this, overlapping FX from variously placed and sized smoke symbols, now your simple 18 frame smoke cycle looks more layered and complex.

Copy these layers to their own new 'Smoke Cloud' symbol.

Now you should have 4 symbols in your library. 'Smoke 1' and 'Smoke 2', your two slightly different smoke puff out cycles, and 'Smoke Cloud' (the symbol with all the tweens of your Smoke1 and two symbols fading out at various sizes and positions) and the 'Smoke Group' symbol that includes various 'Smoke Cloud' symbols starting at various times spread out along the timeline, creating the effect shown above. Confused yet? Symbols within symbols within symbols is the key.

Recap: Isolate your first 18 frame smoke poof out and dissipate animation into a symbol, duplicate that symbol and alter the animation with in that symbol, a few added inbetweens, rotate everything a bit, change the size of it all slightly, change the timing a bit. Now with two versions of smoke cycles, insert them into a new Smoke Cloud symbol. each one isolated on a separate level, adding several new layers with one of the two symbols placed on the stage, overlapping each other, change their size and placement and rotation slightly each time, it should look like a mess of overlayed smoke bundled together, make sure they start at different times within a range of 4 or 5 frames, so layer 1 keyframe on frame 1, layer 2 on top keyframe on frame 3, etc. So the timing is slightly staggered. Now copy all those layers to a new 'Smoke Group' symbol, with this you can duplicate the symbols over and over again, staggering the start time and timing of each one, creating more and more layers on top of each other and placing them in a pattern to create a new 'Smoke Cluster' symbol with all these new groups of stacked on top of them selves. Then Key frame at the end of the timeline all these layers, and place the transparencies of all these symbols on all these last key frames to 0% alpha, add a tween to each layer to create a multiple smoke cluster fade out effect.

Now comes the fun part. Group all that into a new symbol. Now you have a master cluster, clear off your canvas, have a new blank stage with empty layers, and start compiling your smoke clusters on the stage, stacking them around the edge of the screen, you can create any number of grouped cycling smoke screen like this, in this particular case it simulates a nice room-engulfing smoke ... with all the layered alpha smoke it creates almost a nice softened-edges look.

The combinations are endless. keep stacking more clusters together, play with the timing, how long or short the initial 'core symbol' fades away, the size and volume desired for the overall effect, and the ease in editing the initial drawings and shape of your original 18 frame animated burst out cycle will carry through to all your groups and clusters, thus you can substitute entirely new effect in your primary two smoke symbols to produce a brand new FX cycle with a different color and design of smoke altogether. Practice is key with any effects animation. Personally I find it's an even longer experimentation process than character acting to see what works and what doesn't. Instilling life in your effects animation re quires the same sort of studies you would for character animation. Find lots of reference materials, observe life, practice and experiment with timing and spacing. Treat your effects animation like you're animating a character, it requires the same sort of attention, maybe lots more 'trial and error' and happy mistakes are made through the experimental process.

Here's some further short examples of specific circumstances for smoke materialization and dissipation with the Movie Clip/Blur Filter technique added to really give a nice soft look to the classically animated effects in Flash.

Remember to spend plenty of time in the initial designing and timing of your FX piece. Rough it all out with some basic poses, figure out the volume of your effects, how it may interact with the background elements and with the characters, map out the shapes and speed of the effects you're creating and choose your colors wisely. The beauty of Flash is that it can easily and quickly edit your artwork and timing as you go. Path of action, follow-thru, line weight, acceleration and deceleration are all things to keep in mind while animating the FX. Strong design and appropriate color tones are all key for the design of the FX, spend time on this at the beginning. Your effects animation must match the visual style of your characters and backgrounds, you don't want your effects to look like they're from another show with a totally different design style.

That's all for now. Check out the works of Adam Phillips and Michel Gagne for some inspiring effects design and animation!

More tutorials to come soon, please comment on any other specific FX elements you would like to see.


Anonymous said...

I enjoy too mauch the tutorials from the site, it's high-quality stuff. Please, post more!

Anonymous said...

I bookmark your page it's quite informative Thanks. Looking forward for more..

Sweetpigster said...

Thank you so much! These tutorials are precious. I so much appreciate your affor of sharing your skills. there are not much really helpful stuff on creating animation technique to be found in the Internet. Your blog is in my favourites now. Thanks again from Saint-Peteersburg, Russia!

Anonymous said...

thx for sharing this :)

Cyril corallo

igor said...

Cool tutorial! Here is like this one but as3 driven

Anonymous said...

This is sooooo helpful, thank you!

Do you have any resources for animating a column of smoke (that doesn't disapear, just a continuous loop?)


Zad Datu said...

Really cool

Anonymous said...

amazing stuff! thanks a lot!

Anonymous said...

can u also post the link to lets people download the completed flash file instead of just tutorial? =(

finetheriddler said...

Thanks for the insperation, I have looked at some other smoke effects especially from places that offer packs of these smoke effects, and this is truly a gem post. I like the style, and am currently making some smoke effects myself. I think the water effects will be usefull too! I have done a few fire effects, but am just learning how to actually animate on two's and threes and you say even six's. This is one of the most profesional tutorials on the subject I have seen. I hope that you will continue to enlighten the community with your art. There just aint any tuts out there for this kind of thing.

finetheriddler said...

Cartoon smart Hyperlink Code is the only company that does this sort of thing on the web, but there all packs that you can buy (which is a great idea!), but thanks for giving step by step instructions.

Unknown said...

I knew this blog post was existed someplace. Thanks to post such articles. Will unquestionably be using it very soon.
k100 mod

Andre Moore said...

Wow this is a great blog. Glad i came across it by mistake.

masaru said...

good ..... thaaaanx


Mando said...

Hi there,I enjoy reading through your article post, I wanted to write a little comment to support you and wish you a good continuationAll the best for all your blogging efforts.

kursi tamu jati

iklan gratis said...

This tutorial is really useful for me, thank you for sharing it.

obat pembesar penis said...


My Review said...

Very cool tutorial. Thanks so much. i would use this for smoke erupting from spicy Jamaican jerk pork.

Unknown said...

meja rias kartini
meja rias ukiran

Unknown said...

Best Site For Signals Forex

Rak Minimarket Palu said...

I think this is useful for us to create smoke picture Grosir Songkok


Good articel.
Jual furniture jepara Kualitas terbaik harga murah.

kartini jati said...

Thanks to information
. I like it.. saya menjual berbagai macam produk furniture... asli dari kota jepara

kartini jati said...

I like it.. thank you... im kartini from indonesia. Please your site my website

Jual Kursi Cafe said...

Produk andalan kami Kursi Cafe Murah

Jual Petis Madura said...

maksh atas sharenya

Unknown said...

Thanks so much for the shout out! Good luck with the site!

سریال ایرانی
طراحی سایت
جی پی اس ورزشی
اس ام اس
سنگ مصنوعی
آموزش زبان
آموزش تافل
آموزش نقاشی
آموزش تلگرام
خرید کسپر اسکای

Forex Signals Provider said...

USA Forex Signal Provide best forex signals in the world . USA Forex Signal Provide free forex trading signals daily.
What are the criteria for selecting USA Forex Signal provider for you?
When you add USA Forex Signal provider, lead not look it to your reside account without the compulsion of investigation. These systems are primarily based on complicated statistical mathematics and algorithms in analyzing marketplace trends, predict, and predictions. USA Forex Signal is a worldwide and adeptly-known Forex signals Company. It is worldwide just about 400+ country SMS and worldwide Email coverage Forex Signals Company. It is top forex signals providers. There are lots of things which they manage to pay for to satisfy customer’s obsession and it incorporates the finding out method. These automated upon the web trading services proclamation you to review and trade hundreds of trading systems and forex signals, stocks, and commodities.
USA Forex Signal:

Forex Signals said...

Most accurate forex signals service provider is Hot Forex Signal . Hot Forex Signal Provide best forex signals and forex trade copier service. To get this service you can get two option, one is trail another is premium. Trial signal services will provide you limited signals, on the other hand, the premium signals services will provide you their full service at a contracted period. Let Visit For forex signals provider
Hot Forex Signal:

Unknown said...

makasih infonya gan
viagra usa

Visco said...

آفر استانبول
آفر گرجستان
گروه ریما آنلاین
امنیت شبکه
خرید دستگاه عرق گیری
بلیط چارتر ارزان

Visco said...

طراحی سایت با وردپرس

Penirum Asli said...

Greetings admin
I like your topic, after reading your article very helpful at all and can be a source of reference
I will wait for your next article updates
Thank you, for sharing


Penirum Asli

Titan Gel

Titan Gel Asli


Vimax Asli

Hammer Of Thor

Hammer Of Thor Asli

Penirum Asli said...



Semenax Asli


Extenze Asli


Viagra Asli


Klg Asli

Hendel Forex

Hendel Forex Asli

Penirum Asli said...


Anabolic Rx24

Anabolic Rx24 Asli


Erogan Asli


Vmenplus Asli

VigRX Plus

VigRX Plus Asli

Testo Ultra

Testo Ultra Asli

Penirum Asli said...



Cialis Asli


Levitra Asli


Soloco Asli

Blue Wizard

Blue Wizard Asli


Potenzol Asli

Vakum Penis

Vakum Pembesar Penis

Penirum Asli said...

Thank You For Sharing, the article is very helpful, good luck to admin


Viagra Asli

Viagra Usa

Viagra Original

Obat Viagra

Obat Kuat Viagra

Jual Viagra

Harga Viagra

Ciri Viagra Asli

Mimbar Gereja said...

Jual Mimbar Gereja semi Ukiran bahan kayu jati kualitas jepara asli.

narges said...

رزرو هتل در استانبول
بلیط هواپیما مشهد ساری
بلیط هواپیما ساری بندرعباس
بلیط ارزان هواپیما مشهد شیراز
بلیط هواپیما مشهد قشم
هتل های 5 ستاره پوکت
تور قبرس
تور سنگاپور
هواپیمایی ماهان
رزرو هتل در لندن

lopo said...

Forex Managed account is a trading account where the owner of the account deposit fund and allow an account manager to trade in his account on the owners behalf. It is very useful for busy and newbie traders. Forex managed accounts alleviates the stress of the account owners. It also helps him to get profit consistently without getting involved in trading. An investor needs to find a suitable forex account manager Forex Managed account to run trades on his behalf.

blogger said...

درباره ما
هوم کا یک مجموعه ارائه دهنده خدمات سلامت از جمله پرستاری، پزشکی و خدمات توانبخشی در منزل و محل شما است. هوم کا کادر مجرب مراقبت و درمانی خود را بسته به نوع درخواست به شما تخصیص می دهد. تنها با یک تماس و یا با چند کلیک می توانید از مشاوره و خدمات هوم کا استفاده کنید.

پرستار سالمند معلول

blogger said...

Onsale حراج
خرید محصولات اصل و اورجینال
فروشگاه اینترنتی صداقت به عنوان مرجع تخصصی قیمت و خرید محصولات و اولین و معتبرترین و با سابقه ترین فروشگاه اینترنتی و دارای سابقه ۳۰ ساله و با هدف تسهیل در خرید انواع محصولات بهداشتی اصل و اورجینال مردانه و زنانه با بهترین قیمت در سطح کشور فعالیت مینماید

سری مسواک برقی اورال بی

DeFocus Studio said...

Nice article. Thanks for the post.

Whiteboard videos
animated explainer video companies
video production services in Bangalore
corporate video production company in Bangalore