Monday, July 16, 2007

Adding Horizontal and Veritcal Movement to Your Dolly Shot

This is a continuation of my last tutorial covering multiplaning dolly shots.

Update: I am now offering this tutorial's FLA for 3 dollars through PayPal. Currently it's only available for Flash CS3 and up, but if there's demand I can make it for other versions as well. The FLA includes both the standard dolly shot example and the dolly shot with added vertical and horizontal movement.




E-mail address you'd like to receive .ZIP file (844 kb)




One quick note. For this tutorial, we're going back one step from the last example. In the last tutorial I nested all the motion tweens into one symbol. For this tutorial, I broke them out of that overall symbol, so the stage looks like this


And it plays like this








Let's say you're not happy with a simple push in. What if you want the camera to also track left and right, up and down? It's actually not that hard, and in fact, the best thing you could have done was to first create the dolly in. When you make a keyframe in Flash, that key holds information about the symbols horizontal and vertical placement, as well as its scale and rotation. If you want to make a complex move that effects many of these aspects, but you want these aspects to move independently of each other, you need to make different motion tweens to effect each aspect. And you do that by nesting motion tweens.

So what we have on the stage here are motion tweens that effect each of these symbol's scale. I next want to effect the horizontal position of each symbol, but in order to not mess with the scaling of each symbol, I use the Pringle to nest each tween into a new symbol, leaving me with a stage that looks like this.

Now when I key horizontal movements on these new symbols, it doesn't affect the nested motion tweens that control scaling.

So I want the camera to start off more to the left, then move to the right, and then back to the left, with the framing ending on the boy's face favoring his right eye. To do this, first I make keyframes on all layers at frame 1, frame 40 and frame 60. Next I adjust their horizontal placement, keeping in mind that the closer to the foreground an element is, the more it should move.

To keep all of my units of movement the same, I turn off the work area, and view the stage at one hundred percent. At frame 1 I make the following layer adjustments
  • super_fg: Move Right 160 (shift+right arrow 16 times)
  • fg: Right 120
  • boy: Right 80
  • bg: Right 40
  • extreme_bg: Right 20
At frame 40, this is what I do:
  • super_fg: Left 80
  • fg: Left 60
  • boy: Left 40
  • bg: Left 20
  • extreme_bg: Left 10
And Frame 60
  • super_fg: Right 320
  • fg: Right 270
  • boy: Right 180
  • bg: Right 90
  • extreme_bg: Right 40
Here's the screen shot
And here's what that looks like






The left and right movement is a little jerky so using the first easing technique in my easing tutorial, I add a key at frame 20, put an ease in 100 at frame 1, an ease out 100 at frame 20, and an ease in 100 at frame 40.

Here's what that looks like.








Now we have horizontal movement. To add vertical movement, we do the same thing all over again. First, use the Pringle to nest each motion tween in its own symbol.


Then figure out what you want your vertical motion to be like. I decided that while the camera is moving to the right (frame 1-40), I want it to bounce up and then down, and while the camera moves to the left (frames 40-60), I want it to move up. That means the camera is down at frame 1, up at frame 20, down at frame 40 and up at frame 60. So the first thing to do is key out all the layers at those frames, and then adjust their positions accordingly. I'll spare you the boring details of how much I moved each layer up or down, but here's what the timeline looks like.


And here's how it plays.









Almost there, next I smooth it out by adding some more keyframes and easing.


Let's see how it looks.










Now that I see it done, I decide I could tweak the horizontal movement a bit. I think the camera should start more to the left. I also think the movement to the right is a bit extreme, and since I like the final position of the head, that means moving the horizontal position at frame 40, over to the left as well. These changes are easy to do, I just go one level into each symbol (this is the level that controls horizontal placement) and adjust the left/right movement accordingly.








And, one last adjustment. With all this movement, I now think the two forground elements move off screen too quickly. Again, this is an easy fix, I simply go deep into each of those nested symbols until I get to the one controlling the scaling tween and then size down the last keyframe a bit so that they don't grow so large. And here it is, the final shot.








And once more, I am now offering this tutorial's FLA for 3 dollars through PayPal. Currently it's only available for Flash CS3 and up, but if there's demand I can make it for other versions as well. The FLA includes both the standard dolly shot example and the dolly shot with added vertical and horizontal movement.




E-mail address you'd like to receive .ZIP file (844 kb)



Tuesday, July 10, 2007

Multiplaning Dolly Shots

This tutorial will show how to create an effective multiplaning dolly shot.

Update: I am now offering this tutorial's FLA for 3 dollars through PayPal. Currently it's only available for Flash CS3 and up, but if there's demand I can make it for other versions as well. The FLA includes both the standard dolly shot example and the dolly shot with added vertical and horizontal movement.




E-mail address you'd like to receive .ZIP file (844 kb)





First, here's a silly drawing I made.


As you can see from the timeline, the image has five separate layers. Here you can see how they stack together. The drawing on each layer is a symbol.








I'd like the camera to dolly up right to the boy's face. I've seen a lot of flash animations that end up with something like this.








Okay, this is somewhat of an exaggeration, but you get the point. Things are sliding around in unnatural ways. To avoid this, first establish the point where the camera is moving toward. I want to move in on the boy's face, so I bring up my rulers (ctrl-alt-shift-R) and drop guides that cross at the boy's nose.


Next turn on snapping and move the center point of each symbol to the point where the guides intersect. This is the key to natural looking multiplaning dolly shots. By putting the center point of each symbol in the same location, and then scaling each symbol up while keeping the center point stationary, you get movement that looks three dimensional.


I think I want the zoom to last 1 second, so add keyframes for each layer at frame 30.


Now to start zooming in correctly. Since the distance the camera will move is based entirely on the boy, keep his layer visible and turn the others off. Now at frame 30, select him, hit Q to bring up the free transform, and scale him up while holding shift. Holding shift does two very important things, it keeps his proportions the same, and also scales him up while keeping his center point stationary.

Now that his zoomed in size is correct, we need to figure out how much he has been scaled. Bring up the transform dialogue box (ctrl-T) and select the boy's symbol at frame 1 and frame 30. At frame 1 he is 100%, and at frame 30 he is 1061.3%.

So now I know that the layers in front of the boy have to scale more than 1061.3 percent, and the layers behind him must scale less. I don't know what the right amounts are, so I'm just going to guess. Here were my original choices

extreme fg 1750%
fg 1300%
boy 1061.3%
bg 700%
extreme bg 550%

To implement these numbers, go to frame 30, select the symbol you want to scale, hit ctrl-alt-S to bring up the scale/rotate dialogue box, and type in the value you want to scale the symbol. Scaling using the dialogue box, just like scaling holding down shift, keeps the symbol's center point stationary.

I then add the motion tweens, in order to create the camera move, and do the ease-in 100, ease out 100 trick to make the camera move smooth.



And here's what that looks like









Multiplaning shots don't usually work well with extremely fast camera moves, so I'm going to extend the camera move to be 2 seconds long, and I'm going to change the easing to only be ease in 100, in order to simulate the rules of perspective which state that things increase in size faster the closer they are to you.

And here we are








Better, but now I can see the scaling values I chose need some work. Messing around with it for a while I end up with

extreme fg 3308.7%
fg 1228.5%
boy 1061.3%
bg 607.7%
extreme bg 385%

And here's what that looks like







We're almost there. One last problem. I don't like the final framing on the dolly-in. I'd rather have it center more on his right eye.

Easy fix. First we need to embed the camera move into it's own symbol using the Pringle, (named by Eric Pringle who popularized this technique). Rather than explain the method myself, I'll link to his tutorial.

After you have your dolly move inside it's own symbol, go to the last frame of the move, create a key frame, adjust the composition to your liking, and add a motion tween.

And check it out








Whoah, we got a weird curveball effect going on here. I think it's pretty cool and would probably keep it as is, but let me show you how to fix it. What's happening here is that the symbol holding all the embedded motion tweens has no easing on it, while the embedded motion tweens are all eased in 100. To straighten out the zoom, add an ease in 100 to the overall symbol.


And here it is.







A final note. Flash's easing capabilities aren't great for creating convincing extreme perspective shots like the one I tried to make here. The shot is pretty effective up to a point, but for the last 10 frames or so, there's a decrease in the objects rate of scaling up, whereas in reality this rate would be increasing constantly .

The best fix is to create these camera moves in After Effects, but if you're only using Flash the best technique I've found for these shots is to zoom in much farther (and for a longer period of time) than the shot calls for, cut out those slow end frames in editing, and hopefully the good frames you're left with give you the amount of zooming you wanted.

And once more, I am now offering this tutorial's FLA for 3 dollars through PayPal. Currently it's only available for Flash CS3 and up, but if there's demand I can make it for other versions as well. The FLA includes both the standard dolly shot example and the dolly shot with added vertical and horizontal movement.




E-mail address you'd like to receive .ZIP file (844 kb)