Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
In this course, author Dermot O' Connor introduces a variety of real-world issues that animators commonly encounter and offers practical solutions to them in Flash. The course covers how to apply gradients to create subtle texture and light characters, reducing the flat look of most cartoons; how to simulate natural phenomenon such as wind, fire, and clouds; how to mimic 3D space; and how to add fades and transitions to create custom cuts between scenes. The course also includes a look at staggers, which can be used to create camera shake, tremor effects, and extreme character reactions.
In this section, I am going to show you how to create a fake 3D camera tracking shot, so it's as if we are dollying through the scene, and we are seeing the object move towards us at a greater speed. So to give you an idea about what we are not trying to do here, is the simplest kind of the camera move that you'll see, where we have a static background image, and we simply make it bigger. We tween between that and the large one. The effect that we are going to be doing is a little more sophisticated, and that will be something like this. If you look carefully, you'll see that the distances between the boxes are increasing as we move physically into the shot.
That's what it feels like. So this is still technically a zoom shot. It's doing the same thing as the first shot; the big difference is we are also adding motion tweening to the objects in the scene, and they're pulling apart like this, relative to one another. And that's creating this effect of space, and that can be used for all kinds of purposes. It's not just cool to look at it; it's visually dramatic as well. So, what I am going to do is we are going to recreate this almost from scratch so that you can see the process, and just really how simple the physical process is.
The hard part is just getting the positions right, and that's going to come down to your comfort level with perspective. So first step was just to rough in a perspective background, and that's here. I am going to switch that to outline so that we can see the other layers on top of it a little more easily. After that I made a very rough and crude perspective guide layer using the Line tool; this chap. And I drew in the horizon line, and some simple lines to block out the room, and some guidelines on the ground. That's basically the first step, and then create the simple background, and the extremely simple shapes, and as you can see, that's it.
So that said, let's make some new layers. Of course, by the way, I do have a frame just to show me the edge of the screen. So let's View>Pasteboard, or View> Workarea in the older versions of Flash. So there's our frame; that shows us what's on the edge of the Stage, so as we work we can see you know where the falloff is. So I am going to make some new layers; six of them in total. Let's call the bottom one bg, background, new. And these will be duplicates, really, of the box layers.
So let's go back to our rough drawing. And again, I will go to outline mode, and we'll start drawing our new background. I am going to zoom out a little bit, and using the Line tool I am going to just draw in some very quick lines. The beauty of overlapping the lines is, as you can see, they already join perfectly here. So then all I have to do is Shift+ Click to select the ones I don't want. Hit Delete or Control+X to get rid of them, and I will close off the rest of the background image.
I am giving myself a lot of extra room to play with here; probably more than we really need, but it's always best to have a little bit of padding on the side of your image. Now I am going to click on the fill color, and pick some colors to fill this thing with. And use the Paint Bucket tool, or K. I like to pick my colors from the color palette using this setting; there's different settings for picking colors here. I like to use this fellow. It seems to be, for me I find, user-friendly. So I am going to just pick some variations.
A nice dark one for the back of the scene, and a lighter one for this side, and some kind of reddish, brownish color for the ground. Now we need to get rid of the lines, so just pick one of the lines over here, double-click, and it will magically select everything. Hit Delete or Control+X, and they are gone. I am going to repeat this process to draw in the crates; and I think I probably put this fellow on the wrong level. We should draw from front to back, and 1 would be the top layer.
So I just clicked and dragged him to the right one. Once you finish your crate, put it in outline and padlock it. And then you can't go wrong, and then we move down a layer. I think it's logical to draw all the boxes on the left side, because they will be more directly connected with one another. So let's outline that, padlock, and now we'll switch to the right side. Don't worry about where these lines overlap. We will be getting rid of all of the lines pretty soon. So outline, padlock.
Once you develop a method like this, and you apply it consistently, it will reduce the number of mistakes you make. It's very easy to forget what level you are working on and do a bunch of drawings in the wrong layer. So this saves us a little bit of effort that way. Now that they're all done, and they are all on different layers, which you can see by switching to outline mode, we can fill them in. So I am going to pick the Fill tool, and let's change our color selection here; I'll pick one of the browns. And I am going to pick some light colored browns to paint in the front of the crates, and I am going to slightly change it for the ones behind so that we can tell them apart.
Then I will go really dark for these sides, here. Great! So, now to get rid of the lines, you can double-click, and hit Delete or Control+X. Oops! I accidentally clicked, so double-click again to go back in if you accidentally leave the scene that you are working in. There we go! Let's see that with the background. Not too bad; it looks good. So I'm going to turn these into symbols now. So select the keyframe on the Timeline rather, and hit F8, and we will call this box 1, and the next one would be box 2, box 3, box 4, and box 5.
So they correspond with the layer numbers here. So what we are going to do next will be basically move these along these little tracks. The vanishing point is here, and any number of lines can expand from the vanishing point. And not just on the floor, of course, but they can also radiate along the upper level as well. So you can use these lines to position the corners of the boxes, and not just where they contact the ground, but at their upper levels as well. So let me just lock that for a moment. I can hide the reference layer now.
So let's switch on our background again, and we can see our boxes. Ah! One more thing: currently the pivots of the boxes really won't help us very much. So select the Free Transform tool, and drag this little center circle to the corner where they contact the ground, and that way it will be much easier when we begin resizing these things. That's it! So now we are now ready to scale them up. So let's hit the backend of the 1, 2, 3, 4, 5 layers; keyframe them.
They're all selected, so holding down the Shift key and drag. I am going to uniformly scale them all, although we are going to size them individually soon enough. So let's go back and forth. I am going to use the Comma key on the Period key on the keyboard to toggle. The thing is to watch these lines. This line here is very close to the crate, so that should not change really. So we can just use the arrow keys to nudge these, to hold their position. This fellow here should be on this line here. So I am going to pull him in a bit, and this crate.
As the object closest to us, it should be really moving past our ears as we enter the scene, and ultimately we will be completely behind this. So the spaces between these two boxes should be opening up by now, and the other thing that should be happing is this should be getting much bigger relative to this. So it's a question of matching the relative scales. If you get confused, very simple; just go into your perspective layer, and I am going to just make a new line, make a black. And let's go into outline mode anymore, and draw the line from there to there, and just keep going.
If we switch off all the layers except this one and this one, we can use that line as a guide to see, have we gone too far. And I think we might have a little bit here. So I am going to bring that back in a bit using Free Transform. And we are faking things; I'll be quite honest with you. This is a big cheat. So you are never going to get it completely perfect. The trick is to get it close enough where you go, okay, I buy it. So I am going to put the perspective layer back on, and outline that, and then check this guy. And again we have an imaginary line going from the vanishing points to here.
So I think he should be getting a little bit bigger. I can tell just by eyeballing that. I think this box is getting a little too big too; I am going to pull him back in a bit. If you're into 3D, you can probably set up a reference shot, and just block out the basic geometries, and do Google SketchUp or something. I have done that before where I've had real trouble scenes, but often I find I can just put something together pretty well here. I am going to move this over just a little bit. Okay, the other thing to watch is the relative positions of these boxes.
On the first frame, this corner of this box, if you follow this line, moves to about this point on the adjacent cube. So if we follow this, clearly, he has moved to the wrong speed. That's not good. So I am just going to click and drag so that he tries to maintain the same position. And I think we can make him a little larger. He's following his little line here back and forth. That's fine. This background cube is slipping. He is there; he is slipping forward a little. So let's move him over, and we are seeing more of the gap, notice too; this little area here is expanding.
So I think now if we activate classic tweening you begin to see the effect. It's not perfect, but it's getting fairly close. So let's go outside again and see what that looks like with the zoom attached. Because, don't forget, this outer symbol is also zooming in. You remember from the previous section how we were nesting the different camera moves. So we have our 3D move nested inside one symbol, and our zoom move in another, and that's physically moving us into the space. And the internal animation on that Timeline is what's selling us the distances changing between the boxes.
So let me go to View>Pasteboard, or View> Workarea in the older versions of Flash, and I am going to look at this without the space around it. Getting there. Certainly much more interesting to the eye than the dead zoom. That's quite boring by comparison. So that's it. That's the initial part of this process. Next, I am going to show you how to fine-tune this, and add some details that will really make it feel a little more interesting.
There are currently no FAQs about Animation Tips and Tricks with Flash Professional.
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.