Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
This next section is a little trickier. We're taking the principles covered in the last two, where we did waves and the cloud, and we're now applying them to a flame, like you might see in a candle flame or a fireplace. So let's take a look at this; double-click on the flame image. This is the outer Timeline, where I have motion tweened the internal animation. That's shape tweening, so this allows me to undulate the shape up and down. Let's go inside and see exactly how it was done. I will resize the Timeline.
So I am going to hide the upper tear animations for now, and just show you the main layer. If we look at in outline, get rid of that gradient, you'll get a better idea of what's going on. So what I have done is animated a fairly simple shape, just a little oval with a couple of points in the top, and then made some variations of that shape. So this one, obviously it's a little more extreme, and bobs back down again to a shape that's kind of a variant of the first. And then we have simple modifications of that. And I've used shape hints on these, and I will activate shape hints so that you can see the process. Let's see if I can zoom in without losing them; no.
So, activate again, and then remove the new one. The new hint is in red, so let's get rid of that. So let's see here. As you can see, the transition from keyframe 1 to keyframe 2; I have locked these left and right points with an A and a B hint, and I have got a C and a D hint moving up. Now, if I show you the next one, the confusion element is going to kick in, because you're seeing the hints from the second key to the third key overlaid on top of the previous. So I am going to delete them temporarily. I will hit Remove All Hints, and now you can just see the first two.
This is basically the process; A and B move to A and B a little higher. That keeps the overall form the same. C and D move just a little bit up. And as you can see, this curve here consists of two little lines, and by using shape hints I can coax it to looking like it's tweened into one single, smooth line there. Let me hide the hints, and you can watch that. So that's what gives us the illusion of a flame; it's a plasma.
It really has a very liquid feel to it. It's dynamic, and it can drastically change from one shape to another, and that's what we're trying to capture with this. The other thing that I did in here -- let me go back in for a second -- to really finish off the illusion of the dynamic flame, is I added all these extra layers, which you can see: tear 1, 3, in two different sections, and they're breaking off all these little triangular shapes up at the top. And that's also helping your eye -- it sells this illusion that there is an upward momentum from the flame.
So a lot to cover here. I cannot, obviously, walk through this entire process. There is simply too much going on. But I will show you the general principles of how this was created, and I think you will be able to figure out, based on that, exactly how you can use this system to make fire effects of your own. So I am going to frame in a little bit, make a rectangle, select the little white thing with the red line through it, so that you don't have a line around it. Let's make a vertical rectangle, hit F8, and we'll call it flamenew.
Now we double-click on that, and we will work in here. What I am going to do is shape the first frame, so let's just click on the point. If you have snapping on, just make sure you switch that off so you can have a finer control. I am going to keep this much simpler than the one that you just saw. I am going to keep a flat ground, and we are going to work with just the top part. And maybe let's put in one more little bump. So if you haven't done this before, keep your shapes fairly simple. You want to get comfortable with the basic principles of the procedure, and don't feel like you have to go in with your very first shape tween fire and have 400 points. You can certainly do that, but for now keep it simple.
So that's our first frame. Let's make two more. We want to get, like, a really nice balance. If you remember from the first two sections when we did the water and the cloud, I only used a single keyframe, and then I duplicated that to the final point, and then we did all of the intermediate animation by varying the shape hints. It might be possible to do that here, but we will get a much, much nicer illusion if we can use more than one state, and then shape tween between them.
So let's move on the second keyframe. I am going to move it up, and maybe change some of these curves. Changing the curve, or trying to blend two curves into one; that's really going to go a long way to creating the effect of liquid action. So now you see, if we go from one to the other, clearly we are not looking at a static block of wood. And the other thing to be trying to sell is this vertical movement. The flame is moving up all the time. No part of that flame should look like it's moving in the down position, unless it's tearing off and reacting. Like from here to here, yes; it's going to snap back into a lower state. But again, there's always that permanent upward drive from the flame, and we are trying to sell that.
So I am going to bring this part down, and this part up, so now when we go from that to that, it will feel like a recoil. And I'll try to do a different shape here. Let's see what that looks like. So now we have three fairly different graphical shapes as I scrub through the Timeline. I am not quite 100% happy with this one, in the third one, so let's pull that down a little. Okay, let's see how that looks when we activate shape tweening. Just select the Timeline, right-click, and Create Shape Tween. Okay, not too bad.
I am going to hit Play. So we get a nice little undulation dancing. Now, that vertical upward thrust that I was telling you about, we're obviously losing some of that hereabouts, but that's why we need to add a few things. We need to add these little triangular shapes that are tearing off somewhere up here, so that as one part recoils downwards, which is happening let's say here, from this point to that point. Perfect! Add another little triangular wedge ripping off, so I'll do that.
First, make a new layer, empty keyframe, use the Eyedropper, make sure you have the same color selected so it matches. I am going to use the Rectangle tool and just drop in a little shape there. Now, that's a square by default, but you can select and pull the point, and now we have a triangle. So when we go from here to, let's see, from this high point -- I would actually have this triangle break off the one after that, so we reach the high point of that point here, and then when it snaps back, that's where the tear is going to happen. So let's push that tear down a little bit.
And it doesn't have to be too big; something like that. And I'm going to have that move up. And I think we can just F6 to make a new keyframe. Hold down the Shift key and the Arrow key to push it up in some big chunks. And you could maybe even change the shape of it, and lengthen it out a little bit. And when that's done, right-click and Create Shape Tween. And if you get really weird behavior, you can add hints to that.
So that will give you something of an idea as to how we can create these little triangular tears. Each tear, I think ideally, should have its own layer, and I would also add a blank frame following it. And once you are happy with this, you can take these, and hold down the Alt, Option key, and drag them. You can lengthen it and add more tears that overlap along here, which is how I did the original in the Exercise file. Let's have a look at this. And so, as you can see, the tear looks really nice.
And it's just a question of adding more tears. Be careful that the timing of all the tears can be a little bit different. They don't all have to be 2, 3, 4, 5 frames in duration. Some could be 4, some could be 6, roughly the same, but slight differences in spacing. Slight differences in timing are always good to give this a more natural feel. If you want to get a little braver with the shape tweening, because I think we got a little bit lucky with this one, it was really nice the way these shapes tweened into one another. What I would also do would be maybe add some shape hints if you think you want to Control+Shift+H to add more hints from this one. Let's put this down here. Oops, I think it was A, B, left, and right.
What happens, for example, if I add a hint here, and then if I move it to there? Oops! See, this one completely wrecked the animation, so maybe I will move it here. And now we get a very different feel. And I will remind you again, back up your file before you start throwing hints around the place, because they do have the ability to crash Flash. And it's nice to set up your scene, save it, and then start applying the hints. So I could apply, and make sure that you always activate the level that you are actually applying the hints to, Control +Shift+H. Let's put a D Hint here.
What happens, for example, if I put it to there? So it's breaking up that almost too smooth tween that we were getting by default, from here to here is the same keyframes as from this block here. So let's see the difference. This is the animation between the two states with the hints making it a little more erratic, and this is the animation without hints. As you can see, this is almost too clean. Well, it is too clean. By breaking up the animation, by adding some hints, and putting a little bit of chaos into the animation, we have made it look a lot better.
And so once I do something like that, then I would obviously like to copy it. So one way of doing it would be to repeat my original process, and copy and paste, so we have the same action happen twice. I could even break up the second section if I want to have, like, different variations, and see if that works. So each one of these transitions would be unique, which also helps to make your cycle less obvious. You might find that you're going to have a multitude of hints overlapping. As I said earlier, that can be confusing. So you might want to make new layers, and have each of these steps in your cycle -- I am just Alt clicking and dragging now, and removing the lower ones; clear keyframe.
You might want to do something like this so that each one of the blocks of the action have their own Timeline. And that would actually enable you to clearly see -- and let me just delete these. This is really going to enable you to have more visual control over the different hinting steps. It does create more layers on your Timeline, but it dose clean up the process of doing these processes. So that I think covers how I would treat a fire animation.
And I think what we can do is this; if we wanted to cycle this, it would be pretty easy. Let's do that. And so what you will be doing will be generating discrete blocks that keep your Timeline clean. It helps your brain to keep track of all the different things that are going on. So let's just play this one more time; I am going to zoom out. There we go. And we can probably get rid of that little block at the end. There is no reason for that. So play around with this. Have fun with it, I hope. Anything that saves you from having to draw these erratic plasma and liquid effects by hand is a very good thing in my book.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.