#4 - Rain

Research and experimentation is the key to everything in FX animation, whether it's CGI for feature film or low-budget Flash FX for television or online games!

The more you research, the better you'll see and understand the physical world around you and how it moves, how it displaces, how objects and shapes materialize and dematerialize, how weight shifts and balance is maintained, how fumes, fires, fluids dissipate, how stuff breaks apart or comes together. See the video below, the principles you observe here can be applied to fire and smoke as well, the nature of how FX form and deform are vital elements to learn when reproducing 2D or 3D effects animation.



For water lets start off with rain, then move on to splashes and ripples.

Start off with a 5 pt line, use the Line Tool, drag a strip down, then convert the vector line to paint. Now you can place a semi-transparent blue to -fully-transparent white gradient in the line. Use the paint bucket to click the fill in, play around with how gradient fades out till you're satisfied with the look. Make it into a symbol, this will be your 'core symbol' change this one symbol to change all the droplets at once later on.





Now copy/paste and re-size and re-position a variety of these duplicated long droplets. stretch them out randomly, then make a symbol out of this whole cluster. Then do it again with a new set "Cluster B", with a new variety of differently placed droplets, then tween them both going downwards (on separate layers) at different speeds.






Above are two samples, slow rain and fast rain symbols, isolated separately after a simple tween is made with your two groups of static rain droplets. Once combined together, you can play around with the speed of the tweens by adding or removing the amount of frames between your first and second set of keys, thus altering the velocity of the dropping rain.




For a "cartoonier" rain, stick with thicker droplets, and a solid color, to simulate the rain impact on characters or objects, make a single 3 to 4 frame water splat cycle, mae it into a symbol and duplicate it all over, off set the timing so it dosne' appear so duplicated, in fact making 2 or 3 different version of the simple splat efect can then be re-used and re-sized all over, scaling it bigger according to how close (or how low) to camera it is.



Combining the fast and slow symbols with the two altered version of droplet positions creates a bit of depth, place your character between a foreground layer of rain and another (offset timing) background layer of rain and it is beginning to look a bit better. Also, depending on the effect you're looking for, rotate your symbols at 45 degrees for a different effect.



Download the original Flash files:
-Three Rain Files-

Here's the blog of master effects animator Kathleen Quaife.
And samples of some great 2D effects for some commercial work here.

As always, research is very important to all FX animation, YouTube and DailyMotion and Google Images are all fantastic resources for studying the physics of how things work, how they react, and how they move.

There's always hundreds of samples of wonderful reference materials that are all free to watch online:

#3 - Basic Lens Focus

This simple guide will show you how to make a short focus blur while the camera is shifting and moving through the point of view of binoculars.

This is a very common shot in any spy/action/secret agent story:



To achieve this you start off with opening your scene and placing all your animation into one Graphic Symbol.


In this case all I have are the many different levels that compromise this background. It doesn't matter how much animation or how many layers and symbols you have within your scene, the more complex the greater the render time, otherwise you can have all the movement and madness you wish, it won't matter.

Copy all your animation into one self-contained symbol so your timeline is just one layer and one key holding all your animation. Make a new layer on top for your binoculars overlay.


Make a giant black square that covers your entire canvas, then click and drag (holding down SHIFT) to make two circles with the OVAL tool. Click and delete the paint from the ovals and any outlines you may have. Now you have the cut-out POV of the binoculars.

Now select all the artwork on this top layer and make it into a Movie Clip Symbol.
Make sure your Filters Window is open, and choose the Blur filter from the "+" button, type in the numbers 15 for your values and HIGH for the quality.


Now you're ready to add a bit of a shaky camera effect. Place keyframes along the timeline, one at a time, F6 then shift up or down, left or right the symbol containing all your animation, you can change the size of it as well, but I'd recommend no more than 5% difference at a time if your key frames are fairly close together, you don't want an overly fast zoom in or out. the more spacing you make the more distance you'll cover and the faster the moves will be.


Of course once you're done plotting out your keys of slightly shifted and/or scaled symbol across the timeline, you tween all the keys. In this case there's only a bit of an "ease in" on the middle and second to last key frame to add a bit of variety so the tween aren't too repetitive and too even in speed.

Looking like this:



And with the blurry overlay:



Now comes the fun part. Making the animation look like it's going in and out of focus.

Make a new layer and copy and drag a set of frames that holds two keys with tweens between them. As shown below, copy the first frames (including the start and end position of one of your tweens) and copy them on top, then hit F6 to keyframe all the frames, then right click or go to the Properties window to Remove the Tween.


You've essentially copied the camera move containing all the animation on another layer, now key framed and ready to by "symbolized".


Repeat the process a few more times, grabbing frames that aren't in mid-tween is easiest and makes most sense with the whole focusing while moving/zooming concept.

Make sure you have a blank key frame at the end of each group of keys you create. Now go frame by frame (the only boring part) and click on the frame to select all the artwork on that frame and hit F8 to convert it into a MOVIE CLIP symbol.

Have that Filters Window handy because you're going to go frame by frame to add progressive blurs. Now start with the first key and give it only a Blur value of "2". and each frame after that go up by one each time (make sure the Quality is HIGH) go up to 5 (or 7 depending on how long the tween originally was, the longer the tween the more keys in each chunk you may have). Frame by frame progressively go up then down to simulate a gradual focused image to blurry to focus again. Start with 2 then 3, 4, 5, 6, 5, 4, 3, 2. Is what it could look like once your done and click on the symbol frame by frame as you go ahead on the timeline to continue with the increase and decrease in blur intensity.



Here's an alternative, zoom in and blur effect at once.



The timeline would look like this each frame would be set to an increasing blur increments of 1 going from 1 to 9 then back to 1 within 18 frames.



And there you have it. Make sure your 'binoculars layer' is on top of everything, render a line test and see how it works. This is an effect that I'm sure After Effects can do quick and simple, but the principles in this technique can be used in many different situations beyond just camera stuff in Flash. But if you don't have After Effects on your personal computer than you can experiment with this theory further with any isolated FX, symbol, water, smoke, fire, steam, fumes can all benefit from a good softened effect like this. But it's not too shabby for 5-10 minutes of work, 3 layers, and not too memory intensive.

Here's the Flash file for download.



Tutorials coming soon: More smoke! Some rain! And later on some hand-drawn Flash FX tips & techniques for water ripples, fires and explosions! Till then read this inspiring article on The Classical Art of Hand-Drawn Effects Animation by Flash FX Master Joe Gilland.

#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.