New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Animating a track shot

From: Animation Tips and Tricks with Flash Professional

Video: Animating a track shot

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.

Animating a track shot

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.

Show transcript

This video is part of

Image for Animation Tips and Tricks with Flash Professional
Animation Tips and Tricks with Flash Professional

46 video lessons · 13225 viewers

Dermot O' Connor
Author

 
Expand all | Collapse all
  1. 6m 35s
    1. Welcome
      1m 4s
    2. Using the exercise files
      51s
    3. Common keystrokes and shortcuts used in this course
      4m 40s
  2. 1h 24m
    1. Understanding video versus SWF
      2m 30s
    2. Overview of shortcuts, extensions, and setup
      6m 27s
    3. Understanding linear and radial gradients
      2m 39s
    4. Overlapping and animating the colors
      3m 53s
    5. Lighting a scene
      10m 24s
    6. Creating lens flares
      10m 40s
    7. Animating ripples
      7m 2s
    8. Creating a gradient globe
      11m 41s
    9. Creating a gradient bottle
      10m 26s
    10. Applying gradients to a character's eye
      10m 2s
    11. Applying gradients to a character's skull
      8m 49s
  3. 56m 53s
    1. Tweening a circle to a square
      10m 9s
    2. Using thumbnails
      4m 39s
    3. Animating a magic carpet jump
      10m 12s
    4. Setting up a magic carpet walk cycle
      7m 41s
    5. Animating a magic carpet walk cycle
      9m 33s
    6. Shape tweening hair
      3m 50s
    7. Intro to overlapping hair
      1m 57s
    8. Animating overlapping hair
      8m 52s
  4. 1h 8m
    1. Animating waves
      8m 7s
    2. Animating clouds
      7m 48s
    3. Animating a flame
      11m 38s
    4. Animating an explosion
      9m 1s
    5. Adding in-betweens to the explosion
      4m 36s
    6. Adding explosion clusters
      6m 43s
    7. Optimizing the explosion
      7m 30s
    8. Animating smoke with particles
      12m 45s
  5. 32m 18s
    1. Introduction to staggers
      1m 5s
    2. Animating a simple stagger
      5m 8s
    3. Animating a diving board
      6m 15s
    4. Animating a tremor
      5m 56s
    5. Animating a scream
      7m 12s
    6. Refining the scream
      6m 42s
  6. 47m 49s
    1. Introduction to Virtual Camera
      5m 4s
    2. Animating parallax
      6m 9s
    3. Animating a crane shot
      6m 26s
    4. Animating a zoom and rotate shot
      9m 30s
    5. Animating a track shot
      11m 0s
    6. Lighting a 3D shot
      9m 40s
  7. 19m 48s
    1. Animating a cross dissolve
      6m 10s
    2. Animating a wipe
      3m 34s
    3. Animating a fadeout
      10m 4s
  8. 20s
    1. Goodbye
      20s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.