Friday, December 21, 2007

Water Cycle Tutorial

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 the more complex water cycle shown in the swf bellow.




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





Here is a swf of the type of water animation this tutorial covers.







And as a special treat, I made this lesson a video tutorial.

CLICK HERE TO WATCH!


It's my first video tutorial, so any feedback on what I could do better in the future would be appreciated.

Saturday, November 17, 2007

Using Symbols to Clean Up Traditional Animation in Flash

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 the final line work for the example bellow so you can see exactly how I used the symbol to draw the heads.




E-mail address you'd like to receive .ZIP file (2.1 meg)




There are no rules for how you animate in Flash. Most people limit their drawings and just move stuff around because it's fast and easy to get something moving. I'm not going to go into this subject further, I've already written about it here.

But you can use Flash to do completely traditional hand drawn animation. My favorite example is Mr. Coo. And if you're too lazy to follow that link, PLEASE at least watch this YouTube Clip.




Okay, on to the tutorial. While you can traditionally animate in Flash, you can also use symbols to make the process of cleaning up your work easier. But first let me make one thing clear, when you're roughing out your animation, DON'T USE SYMBOLS. Your main concern should be movement, so draw rough and loose on the stage. You do need to be thinking about overall proportions (or else clean up will be hell), but not get stuck on small things like the exact placement of the nostrils.

Here's an example of some rough animation I was given to clean up.








This was all just paint on the stage. No Symbols. I don't actually know who animated this, but they did all the hard work for me. The only part that was going to take some time was cleaning up the head. It's rotating a lot, and moving around all over the screen, meaning if I'm cleaning up the head on frame 25, it'd be really hard for me to compare it with the head I've already drawn on frame 21, or frame 5 etc etc.

If only there was some way to keep the head stationary...But wait, there is!

You do your clean up of the head inside a symbol, then out on the stage, you go to the next frame, move the symbol to the new head's position, rotate and scale the symbol so that the axis and size of the old head matches the axis and size of the new head you're about to draw, go inside the symbol, and clean it up that way. Now when you want to check your head proportions and masses, your old head is right there, making it much easier to keep your heads consistent.

Here are a few shots of my clean up frames, with the head symbol selected, so you can see how I moved the symbol around.



And here's a screen grab of me inside the head symbol. As you can see, I also put a quick trace of the 3/4 model head on a guide layer in the symbol, so that I could reference it for proportions as I was drawing my new heads. For those of you who don't know, you can put anything you want on a guide layer because it won't show up once you're outside of the symbol.

Also the drawing is on a few layers, because I animated his whiskers separate from the rest of his head, and for the last few frames there are three layers because I animated his hair separate from the head and whiskers.


So here is what the head symbol looks like all by itself. (I've slowed it down to 15 frames per second so you can actually see the drawings).









Now you'll notice I didn't actually keep the head sizes consistent inside the symbol. I would have liked to, but our clean up technique required a really thin line weight, so massively scaling up and down the head symbol to keep everything the same size would have resulted in inconsistencies in line thicknesses between frames.

And here is the final cleaned up animation. It's not perfect, I had a day to clean this whole thing so I was moving really quickly and made some bad choices in terms of how far the head should rotate in each frame. And the hair is a bit of a mess, I didn't have time to figure out a good flow for it. Also the final linework wasn't actually red, I just made it that way so that it would stand out a bit more from the background, since the line weight is so thin.








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 the final line work so you can see exactly how I used the symbol to draw the heads.




E-mail address you'd like to receive .ZIP file (2.1 meg)




A quick note. I did this clean up for the studio Dancing Diablo, for a Bronx Zoo commercial. My friend Dan Forgione animated most of the spots, and they came out really great. After being animated in Flash, each frame was exported as a PNG and colored in Painter. Reginald Butler was the lead painter and also did an amazing job.

If you want to see some finished shots, Dan put a bunch on his reel here.

And while we're giving credit, they were directed by Dancing Diablo CEO/ Creative Director, Beatriz Helena Ramos, produced by Joellen Marlow, and commissioned by the advertising agency Deutsch, Inc.

Saturday, October 27, 2007

Walk Cycles: The Right Way.

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 the walk cycle symbol, the leg sketch layers and the elf walk cycle that I show at the bottom of this tutorial.




E-mail address you'd like to receive .ZIP file (1.8 meg)



Before we begin, a quick note. This tutorial isn't about walk cycle theory. I'm assuming you already know that part. If you don't, go buy Richard Williams's Animator's Survival Kit. My goal is to show you ways to use Flash that make it easier to create a good cycle, in regards to solid foot placement and consistent speed--two things that I've seen lacking in many Flash animated walk cycles.

There are two ways to approach a walk cycle.

You can draw it with your character standing in place, or with the character moving across the screen (or page, but this is a flash tutorial, so I'll stick with screen).

Making a walk cycle with character staying in place is a TERRIBLE way to do a walk cycle. It might look okay when it's on that invisible treadmill, but if you want the character to move across the screen, either the feet are going to slide on the ground (a huge pet peeve of mine), or, if you plant the feet, the movement of the character will be jerky. I worked with a guy who spent a loooong time making his walk cycle "perfect" but once he got the character off that treadmill, and tried planting the feet, it was a disaster. And I've certainly been guilty of this mistake myself. Here is my first walk cycle I ever did in my life (for an introduction to Flash class in college). The design is so ugly that I'm only showing you the ugly hips and legs.

Here is the walk cycle on the treadmill.








And here is it moving across the screen, with his feet planted.








Yuck. When you walk you have a consistent speed, but this guy's pace is all over the place.

The right way to animate a walk cycle is to have the character moving in space. Working this way, it's easy to keep the feet planted and the speed consistent. But a lot of people avoid this method because it's hard to keep a character's volumes consistent when it's moving through space.

But using Flash, I came up with a way to combine the two techniques, and get the best of both worlds. For simplicity's sake, I'm going to do a super boring, torso and legs only, Richard Williams walk cycle, but once you get this technique down, you can alter it and get interesting walks from it as well.

First, draw your torso and head.

Now make this drawing a symbol (I called mine Walkcycle because I'm original), and put the head and torso on separate layers. Also make this symbol as long as your walk cycle will be. Mine repeats the first pose at frame 17, so I make mine 17 frames long.

Go back out to the stage. Move your symbol over to the left. Decide how far your character will go in two steps, and key out that length at the frame number where your loop repeats (frame 17 for me). Then create a motion tween, and make sure there is NO EASING on the tween.

The motion tween gives us perfectly equal spacing for each frame of our walk. Now for my cycle, I'm going to start with the two contact poses. The first contact pose happens on frame 1 and frame 17. The second contact pose happens on frame 9. So go to frame 9 and add a keyframe. Then remove the motion tweens.

Now we need to worry about the legs, so make a new layer underneath your torso layer, and label it Sketch. We'll be doing rough drawings on this layer.

I start by drawing the legs for the first contact pose on the sketch layer. This pose is the same as the pose for frame 17, so I copy the frame, paste it on frame 17, and line it up with the torso there.

Now move to frame 9, and sketch out your contact pose there. Since we've already sketched the first and third contact, it's very easy to see where the feet go for the second contact. If you find that your second contact pose is more compact or wide than you like, just go alter the first pose, and that should fix your problem.

Now our breakdown poses are on frame 5 and 13. In a standard walk this is our pass position, where the back leg now becomes the front leg. The first thing we want to get is the horizontal position for this pose, so motion tween your symbol, and add keyframes at frame 5 and 13. Then remove the motion tween.

We bounce when we walk, so we need some vertical motion as well. To do this, go inside your walk cycle symbol and move the head and torso up a bit at frames 5 and 13. Also, make sure to rekey your head and torsos at frame 9 and 17 to their original height.

Go back out on the stage, and, on the sketch layer, draw your legs for the pass position.

And now you should have an animation like this








Not the most exciting walk, but you get the idea. Next comes the inbetweens. Let's start with the the up positions on frames 7 and 15. Make your motion tweens, key out the walk cycle symbol at frames 7 and 15. Remove the tweens, go inside the walk cycle symbol and adjust the torso and head to be at their highest position. Then go out on the stage and sketch your legs.

Then do the same thing for the down position at frames 3 and 11.

And let's see what we got here.








Okay so now we have the right leg positions for our walk. But chances are, your leg volumes are inconsistent (mine sure are). To fix this, we do our leg clean ups INSIDE the walk symbol. This way we use our original sketch as reference for the correct foot position, but when when we're inside the symbol, our torso isn't moving, so it much easier to compare the volumes of each leg. This is basically the Flash version of a traditional animation technique, which was explained really well by the disgustingly young and talented Matt Williames on his blog Hand Drawn Nomad Zone. (working professionally for Warner Brothers at age 14????)

So go inside your walk cycle symbol, and create two new layers, one for each leg. Then at frame one, go inside your symbol and draw your cleaned up leg. Move to frame 3 on the stage, go inside the symbol and clean up those legs etc etc. I cleaned up one leg at a time, and worked straight ahead. This helped me keep track of things like the spot where the leg connects to the hip, and the angle of the thighs and shins. I would also start the clean drawing with the rough visible, but then turn off the rough to finish the clean drawing on it's own.



When you're done, you'll have a walk that moves through space, but also one that can be stationary, if you keep the symbol stationary. Here's my "final". For yours, I would recommend at least adding arms and a head bounce. And if you're really good, you'll also redraw the torso and hips so that they twist in space and don't look like the super lame stiff animation that gives Flash it's bad reputation.








Now you probably want more than two steps out of your cycle. To do this, on the stage, copy your frames, and on a new layer paste them starting on frame 17. Then using the edit multiple frames option, move these newly pasted frames so that they start where the bottom layer stops.

Now move the top layer frames down into the bottom layer. Then go inside the walk cycle symbol, copy all the frames, and paste them starting at frame 17, so that now your walk cycle is 33 frames long. Then go back out to the stage, select all your frames, right click and select Synchronize Symbols.
And you can keep doing this as long as you want, to make any length walk cycle you desire. Here's my walk cycle moving across the whole stage.







Again, this walk cycle is REALLY boring, I know. But you can do more interesting ones using the same basic technique. Here's one I did last year.








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 the walk cycle symbol, the leg sketch layers and the elf walk cycle.




E-mail address you'd like to receive .ZIP file (1.8 meg)



Friday, August 24, 2007

Combining Flash and Illustrator

Here's a great tutorial on combining Flash and Illustrator using custom brushes.

Also, something is wrong with my server, so none of the swf examples in my tutorials are playing right now. Hopefully this will be fixed soon.

Sunday, August 12, 2007

A few links

I haven't had Internet access at home for the past three weeks, so I didn't make any new tutorials. I've got a couple planned out, now I just need to make them happen.

In the mean time, here are some links to Flash tutorials I've found useful.

Dave E. Phillips made two great (and related) tutorials, one on Staggered Timing and the other on Simple Vibrations. You should check out the rest of his blog too, he's really good.

If you ever made something in Flash thinking it would only be on the web, and later find out that it has to have TV safe colors, Stephen M. Levinson made a PDF showing an ingenious trick to make your colors NTSC safe.

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)



Tuesday, May 29, 2007

Easing Tweens

This tutorial will cover two ways to make Flash's motion tweens feel more natural. If you've worked in Flash you've probably figured out the first technique. The second is a slight alteration that I figured out myself and haven't seen anywhere else.

Also, before I go any further, if you have Flash 8 or above, you might not need these tricks since Flash allows you greater control of your tweens. But if you're like me and hate, hate, hate Flash 8, then keep reading.

For simplicity's sake, I'll show these techniques by tweening a circle. So I'm moving the circle from left to right over the course of 61 frames.



And here's what that looks like.








It's a little robotic. Instead of accelerating at the beginning and decelerating at the end, the circle moves at a constant speed the whole time. That's not how things work in the real world.

To fix that, let me first explain why I made the end keyframe at frame 61 instead of a more natural number like 60. This is because, in order to make the tween feel more natural, the first step is to put a midpoint keyframe that is equal distance from the beginning and end keyframes. If your first frame is an odd number, then in order to create an equidistant midpoint, your last frame must also be an odd number (and if your first frame is an even number, then your last frame also needs to be even). In my case, the the midpoint is at frame 31. If you're interested, to mathematically find your midpoint, just add the frame numbers of the beginning and end of your tween and divide by two.

After setting your midpoint, go to the first frame, and adjust the tween to ease in 100. Let me also point out that it is hugely important to keyframe your midpoint BEFORE doing any of the easing. If you were to put the ease in 100 on the first frame and then set the midpoint keyframe, the circle wouldn't be in the right spot at that frame and the tween would look very jerky.


After setting the ease in, go to the midpoint frame and set the tween to ease out 100.

Let's check it out.








That's more natural. But let's see if we can do it one better. The problem with this technique is that the speed of your tween is constantly changing. It's speeding up all the way to the midpoint and slowing down from the midpoint to the end frame. This can be very distracting for really long tweens like slow camera pans.

Here's how you get a tween to speed up, maintain that speed and then slow down. Using the same circle set up, I've cleared all my keyframes and removed all the easing. Then I created a new layer above my tween.


I'm basically using this new layer as a ruler to measure distances on my timeline.

So the first measurement to make is when you want your tween to reach it's full speed. Here again it's important to pick a frame number that will allow you to make an equidistant midpoint keyframe. I'm picking frame 15. So the first thing to do is put a blank keyframe on the new layer at frame 15.

Next, determine where the midpoint is between those two blank keyframes. For me it's frame 8.

Now select those keyframes, hold down alt, and drag them to the end of your timeline. Now you have the same measurements at the end of your timeline as you made for the beginning.

Next, on the tween layer, put keyframes at the two midpoints you measured out.

Then drag those keyframes to the two measured end points.

Now ease in 100 for the first section

And ease out 100 for the last section.

Let's see what that looks like








For a small movement like the one above, this technique might be a bit overkill, but for really long camera pans, like the second shot in this video, they're much more useful. Also, you'll probably have to play with the length of your easing in and out and find a timing and distance that feels natural. If I was to redo this one, I'd probably make the easing last 21 frames.

And now to compare the three tweens.

Nothing






1st technique






2nd technique





Friday, May 25, 2007

Perspective in Flash

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 the building bellow with vanishing points and the final line work for the siege tower example bellow with vanishing points.




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




This tutorial will cover a quick way to set up vanishing points and perspective lines in Flash. I'm not going to cover perspective concepts, if you don't know perspective already I suggest buying Creative Perspective for Artists and Illustrators by Ernest W. Watson. It's the best book I've ever seen on perspective (and I've seen a lot of them). He explains the concepts of perspective, but more importantly he then shows how the great golden age illustrators used perspective or broke the rules of perspective to get the best image possible. Perspective is a tool, a useful one to understand and utilize, but if you are a slave to it you'll go crazy making some pretty bland drawings.

First, sketch out your drawing. This is the most important step and the computer can't do a damn thing to help you. If you don't have solid drawing skills, you're not going to get too far. There's nothing I can say here that will help you get better at this except learn perspective and practice.

When drawing at this stage, I'm not concerned with details like windows, I'm concerned with the overall shapes and the placement and angles of lines. As you can see, this will be three point persepective drawing.
So now, let's find our vanishing points. The hardest ones to find here will be the two on the horizon line, so I'm going to find those first. Lock your sketch layer, create a new layer, select the line tool and draw straight lines that follow what you think are the two most important and correct lines you've sketched that are heading to Vanishing Point 1 (VP1). It helps if these lines are somewhat far apart from another. Where ever these two lines cross, that's where VP1 is.

How annoying. VP1 is very far away from the drawing. It's even outside Flash's work area. That's not a problem. Delete the perspective layer and symbolize your sketch drawing.
Now make a new keyframe of your background and scale it down. In the screenshot below I scaled the background image 50 percent, but VP1 ended up being so far away I had to scale it down even more later.

Now enter your background layer and draw the perspective lines on a new layer again. You don't have to get them to cross, just get them accurate to your drawing.

Then select one line, hit q to bring up free transform, and scale it up (while holding shift, in order to keep the scaling proportional).
And do the same for the other line, scaling it until it intersects the first
VP1 is at the intersection of those two lines. VP2 will be on the same horizon line as VP1, and since there's no dutching of the camera in this drawing, the horizon line is horizontal. To drop in the horizon line, bring up the Ruler (ctrl+alt+shift+r), and drop a horizontal line that runs through VP1.



Then pick the most important line in your drawing that goes to VP2, and draw it as a perspective line that intersects the horizon line. VP2 is the intersection of those two lines.

Now we have the two horizon line vanishing points, but what a pain it would be to constantly draw lines running from the VP's to where we'd like them on our drawing. Thankfully there's an easy work around.

Start with VP1. Delete out the sections of the perspective lines that overshoot the vanishing point. Then select one of the lines, make it a group and move the group's center point to where the vanishing point is.
Now when you want to make more lines running to VP1, just copy that group, paste it in place and rotate it. If the line needs to be longer, just hit q, and scale it up while holding down shift. The group will scale up but keep the center point right where it is.

Next do the same thing for VP2, and follow all the same steps to find the position of VP3.
Now exit the symbol, go back to frame 1 on the stage (that has the background at the correct size), enter that instance of the background symbol, and keep copying, pasting in place, and rotating lines to figure out the correct perspective.
As you can see, for the center building my initial sketch was pretty decent, but the top antenna part needs a good amount of fixing. Also those foreground buildings that frame the main building are WAY off in terms of perspective, but even if I was to finish this drawing (which I'm not), I probably would not make them perspectively correct because then the composition would be awkward. The trick with perspective is knowing when to use it and when to ignore it.

Here's an example of a Flash background I did a while ago using this exact same technique to figure out the perspective lines. You'll also noticed that I cheated the perspective on the vertical lines of the foreground element (it's a castle wall). I tilted the wall in more than it actually would in order to make it feel like it was at odds with the seige tower.
And lucky you, I actually kept some of my perspective lines as guide layers.

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 the building example with vanishing points and the final line work for the siege tower example with vanishing points.




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