Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this section we're going to cover natural phenomena, like water effects, or flames, smoke, that kind of thing. Kind of different from what you might be used to doing with characters. And one of the issues that you deal with when you do natural effects like these is you tend to need a lot of in between frames to make these look nice; to make them sell. I'm going to zoom in on this a little bit, so you can have a better idea of what we're looking at. And if you follow any one of the points on this wave cycle, you'll see that they are shifting and blending or morphing one into the other.
And that's really what gives the feeling for liquid. So let's have a look at how this was done. Let's zoom out for a second, and I'm going to double-click on this. If you want to see the entire Stage right now, this is all grayed out, and we've just framed in on the main area. So what I'm going to do is enable that. So let's go View>Pasteboard. If you're using an older version of Flash, it used to be called View>Work Area, or Workspace. They changed the naming convention with some of the later versions, so just keep that in mind, because that might throw you.
So now we can access the entire area that Flash has available for us. So you can see that I've got the wave going a little bit beyond the Stage there. I'm going to double-click on this. Let's have a look at how this was done. And amazingly, it's just done with two keyframes. I didn't have to worry about doing several hundred intermediate frames down here; just two. And even better, the first frame and the last frame are the same frame. What I'll do is I'm going to reconstruct this internal symbol entirely from scratch so you can see how it was done.
So I'm going to go into the symbol. And essentially to follow along, all you will you need to do is to create a long rectangle. I'm going to hide the lower layer, actually I'll just make a new one to match the size. So let's select a color. I'll pick this bright blue here. I don't want an outline around this. If you click this little red triangle here that will mean there's no color on the inside. Oops! There we go. That's what you want to see. And let's select the Rectangle tool on here. I'm going to make a rectangle. Let's put it into outline mode, and then just hide the lower layer; we don't really need that right now.
And guide it out if you don't want to see it anymore. So essentially all you need right now is a little blue rectangle. So let's frame in on with the Zoom tool, and selecting the Selection tool, and select off of here. So let me just make sure all my snaps are off. Snap to Grid is not needed for this. So okay, now we can start pulling these points. Hold down your Alt or Option key, and let's just make an interesting little graphical shape.
Now pull these points to whatever kind of wave shape you think you want. I was actually pretty subtle and understated with the one I did for the Exercise file. I think you can probably get away with pushing these a little more. A nice selection of curves: S curves, and C curves, and so on. So there we go. At the end, say 60 frames later, you can make this as long as you like or as short as you like, and now we activate Create Shape Tween. So I hit F6 at Frame 60. If by accident you who select Create Classic Tween, meaning motion tween, or the other different kinds of tweens, hit Control+Z and reapply the shape tween.
Now that we have this done, the animation will be created using shape hints. So let's go Modify>Shape>Add Shape Hint. And I'm just going to make four of them for now. And I'm going to use these, Control+ Shift+H, to pin down four corners. And as I've said many times in this course, when you start applying shape hints, I always like to back up my file, because maybe one time in a thousand they will cause a crash.
It's a really great tool to have, but it does have its issues. Now those of the four: A, B, C, D; they are the same on each. And now we're going to make some of the animation happen. So I'm going to make one more first, E, and I'm going to pop E down, let's say on this point. Now we scrub ahead to the end of the Timeline, and I'm going to push E all the way to there. Pick any point. I'm just picking arbitrarily here. Different points will have different results. And now we have -- wow! That's fairly hectic looking. Let's just play it. One thing that's happening here that I don't want to happen is we're seeing, if you follow this lump here, he seems to be kind of a little too concrete.
It's not giving me the kind of nice, curvy animation that I want, but that's okay. Let's just pull the E point back a little bit, and now let's play it. That's a lot nicer. So as you can see, we just overdid it a little bit. I'm going to move my mouse so you can follow along; this point here. That's eye catching; a little too much I think. So I'm going to pull the E point. Let's see what this looks like. That's a little better. This point now here, I'm going to track along with it, this feels a little static to me.
This is fun part; obviously it's not quite as predictable as you might like, but you get the results simply by playing around. That's nice, and the difference between one and the other is just a few pixels on the position of the shape hint. The one thing you will notice here is that the corners of the A, and the corner of the B, they do start showing themselves as being pretty stiff. And that's why I've made the waves so that they are well off the Stage.
You may not be able to see, but here is the Stage at the left side, and here is the end of the Stage at the right side. So anything to the left and the right of those points will not be seen by the audience. And let's move out, and as you can see that's the same symbol. I've got it nested inside a symbol because that allows me to apply motion tweens to the external symbol. So I can hit F6 now, and if I wanted to, I could move this up and down and motion tween that, or left and right. I could put it on a guide, and add yet another layer of motion to try to sell more realism.
But in this case it wasn't necessary. So I always do that, as well, with the animation that I do. When I do the shape tweening, I never do the shape tweening on the outer Timeline, which would be this one here, because it's nice to have it tucked away safely inside a symbol, or even two symbols, so that I can have it contained and have access to the motion tweening tools. And so now if we look at the outside you'll see I've put another layer. It's the same scene, so basically we have in the Properties panel, you will see it's called Waves cycle.
The one beneath it; it's the same scene. This is set to loop on Frame 1. Second one is set to loop on Frame 30, and that gives us a nice little overlapping action. So they are not both doing the same thing at the same time. I could add as many of these layers as I like; if I wanted to, I could animate different layers for that matter. But this is just to give you an idea about what we can do here. I Alt+Clicked and dragged to copy that layer, and I'm going to go into the Color Effect>Brightness and make it a little darker so we can see that.
And I'm going to click on that layer, and make it Loop from Frame 50 in the Properties panel. And now when we hit Play we have three layers of waves. So again, like I said, you can right- click on these layers, you could duplicate that symbol, make a new layer. You would have to duplicate all the inner layers as well. And you could change the timing by moving the keyframes. You could change the animation now that you're working in a copy inside a copy. You could make this one completely different from the other one simply by moving the shape hints around, and create some pretty nice effects.
It's popping there, because I've kind of broke it, but you get the general idea. I'm going to delete that now. So this technique, we'll be applying throughout the course, and to do other effects which will be equally as usable to you as this is.
Get unlimited access to all courses for just $25/month.Become a member
107 Video lessons · 36748 Viewers
100 Video lessons · 7349 Viewers
94 Video lessons · 25729 Viewers
147 Video lessons · 5411 Viewers
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.