How to animate fire
How to animate fire
How to Animate Fire in Flash?
Flash allows different users to follow their own styles of animation because not every object can be animated using modern methods so such objects need to be animated in traditional ways. For example water fountain, fire, etc needs to be drawn frame by frame to give the actual world touch to these things hence, in this case, each frame can be drawn with a different drawing and these all frames are visited in a sequential manner at a certain rate to animate fire or water.
Fire Animation
Fire animation is really useful and it is used in almost every movie and also widely used in many animation projects. Animating a realistic fire is important to give an appealing effect to the scene so we will learn to animate it frame by frame. Follow the below steps to animate fire.
Step 1: Open a new project in Adobe Flash.
Step 2: Colour the stage Black.
Step 3: Using the line tool draw a basic shape of fire and fill it with yellow color.
Step 4: Add two new layers using Add new layer button on the timeline.
Step 5: Make one more shape of fire smaller than the first one and fill dark yellow color on layer 2.
Step 6: Add an oval using the Oval tool on the third layer and color it orange.
Step 7: Now place it to give the middle part of the fire.
Step 8: Add keyframes at frames 5, 9, 11, and 16 on the third layer which has an oval shape.
Step 9: Now change the oval shape at each keyframe a little as shown in the figure, so layer third is complete.
Step 10: Now add keyframes at frames 3, 5, 7, 9, 11, 13, 15, 17 on layer 2.
Step 11: At each keyframe change fire as shown in figures.
Step 12: Now add keyframes at frames 3, 5, 7, 9, 11, 13, 15, 17 on layer 1.
Step 13: At each keyframe change fire by selecting the fire at layer 2 and scaling it down using the free transform tool because fire figures are the same on layer 2 and layer 1, the only difference is in size and dark yellow color.
Step 14: Press the run button to see the animation.
Congratulations your fire animation is ready now you can press Ctrl + Enter to see the final output of the animation.
How to Create Animated Fire in After Effects
Hey everyone, this is Owen with Motion Array and in this tutorial, I’ll be showing you how to create this animated fire in After Effects. Alright, let’s get to it!
Part 1: Learn How to Create Animated Fire in After Effects
I’ll start in this composition where I already have the log and background done. If you’d like to see how I made this grainy texture you can check out our tutorial on how to create grainy texture in After Effects.
a=thisComp.layer(“Wiggle CNTRL”).effect(“Amp 1”)(“Slider”);
a2=thisComp.layer(“Wiggle CNTRL”).effect(“Amp 2”)(“Slider”);
f=thisComp.layer(“Wiggle CNTRL”).effect(“Frequency”)(“Slider”);
w=wiggle(f,a);
w2=wiggle(f,a2);
[w[0],w[1]]
This is creating two different wiggle expressions so that the vertical and horizontal wiggle can be different from each other.
The last step is completely optional but it adds a nice analog feel.
Part 2: 5 Animated Fire Templates You Can Download & Use Today!
1. Fire Loops
Use this amazing pack of 10 cool looking and dynamically animated fire loop elements to enhance the look and feel of your clips. They’re so easy to use and each one comes with its own individual color controller.
2. Fire Elements
Create intense-looking videos with these awesome effects! A perfect pack of energetically animated 24 explosively designed and animated fire elements is just what you need in your arsenal.
3. Fire Shots Hand Drawn
If you are looking for versatile hand-drawn fire effects, look no further than this great pack! These uniquely animated 2D cartoon fire elements can be quickly styled to match your branding.
4. Muzzle Flash Pack
Add an additional flash effect to your gunshots and all your weapons scenes. It is very easy to use and edit this set of muzzle flashes to match all your projects.
5. Flash FX Fire Elements
Check out these ready-to-use fire elements to quickly enhance the look and feel of your cartoons, gaming promos, and even flaming logo animations!
If you liked this tutorial, we’ve got lots of other tutorials for Adobe Premiere Pro, After Effects, and filmmaking in general! If you’ve got any questions or want to see another future article topics, leave us a comment down below.
How to Animate Fire
Transcript
When you’re creating a stop-motion animation, it’s fund to give yourself challenges. One particular challenge I really enjoy is the animation of fire. This is something you can do in many, many different ways.
We’re going to find one fire trick right now. I am going to share it with you. We have our camera pointed down. We’re going to be working flat against this table here that’s covered with black paper.
What we have are paper cut-outs of flames. We have three different colors of paper. In the back we have cut-out of gel, orange lighting gel, or acetate, which gives you a nice little shine to it.
Sometimes you can use only paper or only gel. You can do it 3-dimensional. Some people use wax and light it from within. But this fire trick is very, very simple. It is something you can try at home, and we’ll show you how it works right now.
We have our fire positioned just under the camera right in the center there. We’re going to feature the fire in this animation. We have our fire positioned just so, and I will take a picture. We’re going to take another set.
We’re going to move our first fire out and match up our second fire. It does not have to be perfectly matched up and because it’s a different cut-out, it won’t perfectly match up. You want that slightly-off look in your overlay. Then you take your next picture.
We’ll move that fire set-up out of the way, and we’ll go into our third fire set-up. Again, place it without necessarily matching it completely up because they’re different. Take that picture, and we’ll go back to our first fire.
Now, I could do this all day. I love it, but we’re going to cheat a little bit in this case. We’re going to cut-and-paste our frames to repeat the six pictures that we’ve just shot.
We’re going to stop motion, click here, get all of those frames together, copy them, and paste them. Repeat it a couple of times there. When we play it through, we’ll see our fire’s a-burning.
That is the basics of animating fire, a very simple approach to it. I encourage you to try this, and then try some of your own methods for fire animation. Heat it up.
How to animate 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.
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.
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.
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.
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.
How to Animate a Firefly using Flash?
Animations are really helpful in nearly every field like education, advertisements, entertainment, or for making some complex tasks easy to understand hence we will learn to animate fireflies in a flash because flash is a very effective tool in making animations.
Animating a Firefly
Firefly animations are used in night scenes in many projects, these are also used to show the charismatic effect of the night so to animate these we need a vector image of firefly so use a copyright-free image and a background image. Here is the step by step guide for making fireflies
Step 1: Open Adobe flash and create a new project.
Step 2: Import background image and firefly image on the stage.
Step 3: Convert the firefly to a symbol.
Step 4: Double click to enter inside the symbol and color the lower part as yellow.
Step 5: Double click to come to the main stage and convert the image to a movie clip by pressing F8 and choosing the movie clip option.
Step 6: Now enter inside the movie clip symbol and place the different parts of the firefly on different layers.
Step 7: Insert a frame at frame 125 on all layers.
Step 8: Insert a keyframe at frame 30 at layer_2 and remove the yellow color in the tail of the firefly.
Step 9: Insert a keyframe at frame 60 at layer_2 and fill the yellow color in the tail of the firefly.
Step 10: Now select the middle frame and apply classic tween.
Step 11: Double click to come out to the main stage.
Step 12: Insert a frame at frame 125 on both layers.
Step 13: Now to run the animation click on the run button.
Here is the output video of the firefly animation.