Jun 20, 2015
Jun 3, 2015
#12 Fire
Fire is one of the hardest things to do, but there are a few tricks you can do to get your flame animations to look pretty good.
Shown below is one of hundreds of very useful reference video you can find online.
Only 8 years ago, footage like this was nearly impossible to find anywhere, YouTube, Vimeo, Dailymotion and many other free video-sharing websites has made this type of reference material accessible to all of us. Take advantage of this, before starting a brand new FX animation, take an hour to collect videos and carefully study them.
Free software and plugins like DownloadHelper, Ripzor, and iSquint allows you to download and/or convert these Online movie files to save, collect and view on your computer.
The best one to use for ripping reference from YouTube is ClipConverter.
or other products from us. Ok, let's continue.
Notice how the flickering parts reverse direction. Otherwise it's behaving the same way as a normal campfire, but it's actively pushing outwards, like water pouring out where it bulges out and pinches inwards at a steady stream.
Even torch fire (thick/rounded base with a thin/tall tip) follows the same rules, just less exaggerated. The smaller the flames, the less outlandish they should be, but always building up, breaking off, and rising upwards. Notice how there's hashmarks on this one. This helps in keeping track of the different parts of the flame, other wise you can paint yourself in a corner when it comes to figuring out how to make the flame cycle, similar to rising smoke fumes, keeping track of all the main parts is vital for when you're figuring out how to make the animation loop in on itself.
Here's another approach to take for building and animating simple 2D fire animation:
I find the following theory (or a simpler version of it) to be a good way to start. So beginning to imagine a bubble rising - enlarge and expand this bubble upwards, draw it out in flash, straight-ahead, just with the onion-skin ON to see the previous frame - keep it simple.
Once you've done it, take the art on frame 1 and place it on the second to last frame, then the second frame's art and place it on the last frame, that way you make a complete cycle. Then delete the first two drawings.
Should look like this:
Then space it out (with a blank key between each one, and with the onion skin on inbetween your own work.
Now on a layer on top, start to make a shape (any shape) for your fire design but start on the frame with frame that has the largest bubble (should be on frame 1 now that you've trimmed the first couple frames).
As you go frame by frame, make your flame follow the bubble, keeping a base at the bottom, preventing it from moving. But it can shrink, like blowing soap bubbles.
With each frame I only see (onion skin) the frame before and as I just have the flame go with the flow, the tips point the opposite direction from the previous frame (just to add life to it).
Now when the looping bubble emerging from the base now has to accommodate for the flame's shape.
Now the tricky part, you'll have to temporarily copy the first key to the end (so you can animate your way back to the start) this is for reference for your onion skin, delete it once you're done these inbetween drawings. As shown in the drawings above, break off the flame, have it shrink and follow the small bubble disappearing, the base of your fire grows as your new bubble rises and expands, but don't go bigger than your original drawing, that's what will make the cycle smooth.
So here's a quick rough I did.
One you remove your bubble guide layer it looks like this.
Pouring up like smoke or water.
Keep it very simple.
This way once you do a few of these you'll master it, then you go to more complex shapes, longer cycles and dual shapes that simply applies the same theory to a core shape and an outer shape.
Shown below is one of hundreds of very useful reference video you can find online.
Only 8 years ago, footage like this was nearly impossible to find anywhere, YouTube, Vimeo, Dailymotion and many other free video-sharing websites has made this type of reference material accessible to all of us. Take advantage of this, before starting a brand new FX animation, take an hour to collect videos and carefully study them.
Free software and plugins like DownloadHelper, Ripzor, and iSquint allows you to download and/or convert these Online movie files to save, collect and view on your computer.
The best one to use for ripping reference from YouTube is ClipConverter.
For a comprehensive guide on how to download from Youtube, check out this article by Jared Clarke.
I could post these all day, but in the end only practice and experimentation in Flash will allow you to figure out the shapes, forms and spacing of your fire effects. Ultimately these videos are only reference to get inspired on how to design your fire, learn how it behaves, and discover more about its timing and the many shapes it can inhabit. So lets get started.
There's 3 types of fire.
1) When it has a wide and stable base and the flames converge/compress inwards as the tips of the flames rise up and leave the base while they dissipate. Not much contrast in the shape, 80% of the volume is in the core of the barely-moving fire base. Like this...
2) When the fire acts like it's shooting outwards, lots of contrast in the shape, you can imagine a bubble inflating and being pushed out and upwards (or at an angle). Build up, pours out, dissipates, the base re-inflates and the cycle continues. Like this...
3) When it acts like a seaweed, whipping back and forth, rising/dissipating upwards, as it dances side to side, sort of like how smoke fumes ripple upwards while shrinking at the tip.
Here's how to do this sort of fire.
For me the toughest part of drawing out a fire cycle is the first and last drawings. Everything is based upon this structured/chaotic shape that you create, the length, width, scale, proportions thiese forms take decide the characteristics and personality and function your fire has to serve.
As you can see the core (base foundation in the form of a ball) doesn't really move, it's pouring out the fire upwards and side-to-side simultaneously, as the shapes rise you decide on a point that it can break off, as it it continues to rise at a steady rate the pieces that break off shrink and dissipate and pop away.
It all start with a single drawing and you build up from there. Where you choose to have chunks break off and shrink away as it moves off is up to you, sort of how you can randomly decide which parts of a puff of smoke to isolate and break apart from the main shape to have it dissipate as it drifts away. Notice the C to S curve pattern, same as any wave principle, just applied to the shape of fire.
Then you add more little bits from every chunk that breaks off and shrinks as it rises upwards, then copy the first frame to the end, and temporarily have your onion skin on to make sure the little bits hook-up to make the cycle complete.
Shown below is an alternative (combining versions 1 and 3) with an inner shape animated inside, usually I'd suggest having this inner shape always in your fire animation - the norm is yellow interior and orange outer shape with yellow-colored outlines (or for far shots, no outlines at all).
Fire can be tricky, but always remember the shape of fire is basically S-curves morphing into C-curves morphing back into S-curves.
See this short flame-thrower cycle on 2s, the same principle applies...
I hope you're enjoying a tutorial so far. If you need a fire animation for commercial usage we've created a library with 1200 animation, including 100 different fire animations.
I could post these all day, but in the end only practice and experimentation in Flash will allow you to figure out the shapes, forms and spacing of your fire effects. Ultimately these videos are only reference to get inspired on how to design your fire, learn how it behaves, and discover more about its timing and the many shapes it can inhabit. So lets get started.
There's 3 types of fire.
1) When it has a wide and stable base and the flames converge/compress inwards as the tips of the flames rise up and leave the base while they dissipate. Not much contrast in the shape, 80% of the volume is in the core of the barely-moving fire base. Like this...
2) When the fire acts like it's shooting outwards, lots of contrast in the shape, you can imagine a bubble inflating and being pushed out and upwards (or at an angle). Build up, pours out, dissipates, the base re-inflates and the cycle continues. Like this...
3) When it acts like a seaweed, whipping back and forth, rising/dissipating upwards, as it dances side to side, sort of like how smoke fumes ripple upwards while shrinking at the tip.
Here's how to do this sort of fire.
For me the toughest part of drawing out a fire cycle is the first and last drawings. Everything is based upon this structured/chaotic shape that you create, the length, width, scale, proportions thiese forms take decide the characteristics and personality and function your fire has to serve.
As you can see the core (base foundation in the form of a ball) doesn't really move, it's pouring out the fire upwards and side-to-side simultaneously, as the shapes rise you decide on a point that it can break off, as it it continues to rise at a steady rate the pieces that break off shrink and dissipate and pop away.
It all start with a single drawing and you build up from there. Where you choose to have chunks break off and shrink away as it moves off is up to you, sort of how you can randomly decide which parts of a puff of smoke to isolate and break apart from the main shape to have it dissipate as it drifts away. Notice the C to S curve pattern, same as any wave principle, just applied to the shape of fire.
Then you add more little bits from every chunk that breaks off and shrinks as it rises upwards, then copy the first frame to the end, and temporarily have your onion skin on to make sure the little bits hook-up to make the cycle complete.
Shown below is an alternative (combining versions 1 and 3) with an inner shape animated inside, usually I'd suggest having this inner shape always in your fire animation - the norm is yellow interior and orange outer shape with yellow-colored outlines (or for far shots, no outlines at all).
Fire can be tricky, but always remember the shape of fire is basically S-curves morphing into C-curves morphing back into S-curves.
See this short flame-thrower cycle on 2s, the same principle applies...
I hope you're enjoying a tutorial so far. If you need a fire animation for commercial usage we've created a library with 1200 animation, including 100 different fire animations.
or other products from us. Ok, let's continue.
Notice how the flickering parts reverse direction. Otherwise it's behaving the same way as a normal campfire, but it's actively pushing outwards, like water pouring out where it bulges out and pinches inwards at a steady stream.
Even torch fire (thick/rounded base with a thin/tall tip) follows the same rules, just less exaggerated. The smaller the flames, the less outlandish they should be, but always building up, breaking off, and rising upwards. Notice how there's hashmarks on this one. This helps in keeping track of the different parts of the flame, other wise you can paint yourself in a corner when it comes to figuring out how to make the flame cycle, similar to rising smoke fumes, keeping track of all the main parts is vital for when you're figuring out how to make the animation loop in on itself.
Here's another approach to take for building and animating simple 2D fire animation:
I find the following theory (or a simpler version of it) to be a good way to start. So beginning to imagine a bubble rising - enlarge and expand this bubble upwards, draw it out in flash, straight-ahead, just with the onion-skin ON to see the previous frame - keep it simple.
Once you've done it, take the art on frame 1 and place it on the second to last frame, then the second frame's art and place it on the last frame, that way you make a complete cycle. Then delete the first two drawings.
Should look like this:
Then space it out (with a blank key between each one, and with the onion skin on inbetween your own work.
Now on a layer on top, start to make a shape (any shape) for your fire design but start on the frame with frame that has the largest bubble (should be on frame 1 now that you've trimmed the first couple frames).
As you go frame by frame, make your flame follow the bubble, keeping a base at the bottom, preventing it from moving. But it can shrink, like blowing soap bubbles.
With each frame I only see (onion skin) the frame before and as I just have the flame go with the flow, the tips point the opposite direction from the previous frame (just to add life to it).
Now when the looping bubble emerging from the base now has to accommodate for the flame's shape.
Now the tricky part, you'll have to temporarily copy the first key to the end (so you can animate your way back to the start) this is for reference for your onion skin, delete it once you're done these inbetween drawings. As shown in the drawings above, break off the flame, have it shrink and follow the small bubble disappearing, the base of your fire grows as your new bubble rises and expands, but don't go bigger than your original drawing, that's what will make the cycle smooth.
So here's a quick rough I did.
One you remove your bubble guide layer it looks like this.
Pouring up like smoke or water.
Keep it very simple.
This way once you do a few of these you'll master it, then you go to more complex shapes, longer cycles and dual shapes that simply applies the same theory to a core shape and an outer shape.