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.
No comments:
Post a Comment