Flash Tricks

FLA's for Sale

2008-12-09T22:47:00.000-08:00

So my tutorials haven't been coming out as soon as I hoped, and part of the reason is that it's hard to dedicate the time needed to make a good tutorial for you when there's not much in it for me.

So I'm going to try something here. The tutorials will always be free, but if you'd like, you can buy the FLA file so that you can really see what it is I'm doing (right now, the files are only available for CS3 and up, but if you're interested in older versions, let me know).

Each file is 3 bucks, through PayPal, and then I'll e-mail you a .zip of the file you purchased. The price seems pretty reasonable, and honestly the best way I've found to learn Flash is to look at the files of people who know what they're doing.

The tutorials with FLA's available so far are

The Walk Cycle Tutorial

The Water Cycle Tutorial

Using Symbols to Animate Traditionally

Perspective in Flash

The Dolly Shot Tutorials (different FLA's are included for part 1 and 2)

The Looping Pan and Multiplane Pan Tutorials (different FLA's are included for the pan and the multiplane pan)

Tutorials Coming Soon

2008-08-20T11:11:00.000-07:00

After working with beginner animators in Malaysia for six months, I have a bunch of ideas for tutorials. There's stuff to cover regarding basic Flash workflow tricks, creating Flash friendly characters, setting up your scene in Flash to animate, approaches to animating a Flash character, effectively using embedded symbols and the list goes on and on.

I can cover these in any order so if you have a preference, post a comment. Also if there's something you'd like to be covered, let me know.

Water Cycle Tutorial

2007-12-21T17:39:00.000-08:00

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.

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.

Using Symbols to Clean Up Traditional Animation in Flash

2007-11-17T12:09:00.001-08:00

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.

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.
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.

Walk Cycles: The Right Way.

2007-10-27T19:25:00.001-07:00

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.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.

Combining Flash and Illustrator

2007-08-24T08:41:00.001-07:00

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.

A few links

2007-08-12T23:24:00.000-07:00

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.

Adding Horizontal and Veritcal Movement to Your Dolly Shot

2007-07-16T17:11:00.001-07:00

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.

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.

Multiplaning Dolly Shots

2007-07-10T00:39:00.000-07:00

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.

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.

Easing Tweens

2007-05-29T10:02:00.000-07:00

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

Perspective in Flash

2007-05-25T14:54:00.000-07:00

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.

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.

Editting Audio in Flash

2007-05-25T08:14:00.000-07:00

A question that pops up pretty consistently on the Cold Hard Flash message board is how to edit audio clips in Flash. Lets say you have a 4 minute song you're making an animation for and you'd like to chop the audio into a bunch of sections so that you can split the video up between multiple Flash files.

The best way is to use an audio editing program, but if you're like me and don't own one, here's a work around.

First, and foremost, import your audio.

Find what frame where you'd like to break the audio, create a new layer, and put a blank keyframe at that point.
Go back to frame one. Copy the first frame of the audio and paste it into the new layer
As you can see on the new layer, the audio now ends where you'd like it to begin.
Select the audio in the new layer, bring up your properties panel and click Edit
This will bring up the Edit Envelope dialogue box. Click on the zoom out icon until you see a vertical gray line running through the levels.
That gray line shows you where your piece of audio ends, which just so happens to be that blank keyframe we made earlier, so that gray line is also showing you where you want your audio to begin.

In between the left and right channel levels, there is a small gray bar that you can drag around. That bar tells flash where to start playing a piece of audio. So just drag the bar to the gray line.
Hit okay. Now back on the stage grab the newly edited piece of audio and have it start at the blank key frame you created earlier.
As you can see, we are close but not quite. Here comes the annoying part. First, in order to see the audio better, right click on each layer, choose properties and under the layer height pull down, select 300.
And if you want to be really picky (which I do), select large frames under the timeline's drop down menu.
Now go back in and refine the starting point of your new audio clip. As you can see on mine, the new clip starts a bit early so I need to push back the starting point.

Since these are small adjustments you are going to want to be zoomed in pretty tight in the audio Edit Envelope. Navigating the Edit Envelopes timeline and zooming in can be really annoying. Here's how you can find your starting point and easily zoom in on it.

First zoom out wide and scroll so that the starting point is all the way to the left on the timeline's visible section, and then zoom in. While zooming in with the Edit Envelope, the frame on the left stays put.
Now adjust your staring point. You want see the edit take place on the stage's timeline until you hit okay (very annoying), so this will probably take a few tries to get it right. You won't get it perfect but with a little patience you can get really really close.
Collapse your layer heights, zoom out on the timeline and you're good to go
When you hit play it won't sound perfect, you'll get a slight tinny echo, but for timing purposes and lipsync you'll be fine. You can go and copy that new piece of audio and place it in a new document.

Multiplaning Looping Panning Backgrounds

2007-05-23T08:14:00.000-07:00

This tutorial is a continuation of the previous lesson on creating looping panning backgrounds.

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 looping background pan and the multiplaning looping background pan.

So we left off with this

But that's not impressive enough for you. The kids love that 3D stuff, so lets give them some multiplaning action.

The loop we've already made will be the back most, slowest moving plane in our pan. Everything else will move faster. So when making a multiplane shot, make sure the first loop you make is your farthest back (the sky, or in this case, the wall.)

Now lets take a look at the two symbols we've made so far
background_pan contains the motion tween that makes the background move
background is the drawing that is the background.

What we need to do now is make duplicates of both these symbols to hold some new drawing. First thing I'll multiplane are paw prints running over the ground. So copy the instance of background_pan that starts on frame 51 and paste it in place on a new layer.
Now duplicate the symbol background_pan and call it footstep_pan.

Enter footstep_pan, duplicate background and call it footstep. You probably have sync and snap on, so when duplicating background you'll have to do it on the first frame on the timeline, but when we go inside footstep you'll want to do it on your middle frame. Also DO NOT ALTER THE TIMING OF THE MOTION TWEEN.

Go inside footstep, make a new layer to draw in, delete the background layer, unlock the mask and turn the mask to outline (this way you can see your boundaries but it doesn't cover what you're drawing). On your new layer make your new drawing. In my case, I'm making footprints. As you can see I made sure they were flush with the boundaries of the mask.

Now let's go back to the stage and play this.

As you can see we have a few problems. The footsteps appear only half the time, and more importantly, there's no multiplaning. What kind of multiplaning tutorial is this?

Let's fix the multiplane problem first. And it's such a simple fix. On the stage select footstep_pan, hit ctrl+alt+s to bring up the Scale/Rotate dialogue box, and scale it up somewhat. The amount you scale this symbol up determines the increased speed of this plane's movement. If you want a subtle multiplane, scale it up a bit. If you want a big increase in speed, scale it up a lot. The footsteps should be subtle so I'm only scaling it up a bit (the screenshot says 105%, but I eventually settled on 110). Also it's important when scaling the _pan symbols to either use the scale/rotate dialogue box, or make sure that it's scaling relative to the symbol's center point.

Now that we have the footsteps moving faster, let's fix the problem of it only appearing half the time. Select footstep_pan copy it and paste it in place on a new layer, then select the new instance and put its starting frame on 1.

Now let's check it out.

It's working, but there are a few problems. First of all, it's super subtle, but that's okay we'll do more impressive stuff in a bit. And second, sometimes you want objects to multiplane that don't run the course of the entire screen. Maybe you want to add something like a piece of cheese.

Cheese? What a great idea, let's do that. Copy the footprint_pan instance that starts on frame 51, paste it in place on a new layer. Duplicate footprint_pan and call it cheese_pan. Enter cheese_pan, duplicate footprint and call it cheese. Enter cheese, delete out the footprint drawing and draw a piece of cheese.

Now go back out to the stage. Now your cheese is moving at the same speed as the footprints. To fix that just scale the cheese up some more using the scale/rotate dialogue box. You probably won't like the verticle placement that happens when you scale-up the symbol, so just adjust that placement to something you like. ONLY MOVE THE SYMBOL TO ADJUST VERTICLE PLACEMENT, DO NOT MOVE THE SYMBOL LEFT OR RIGHT (this will make sense in a bit).

Now here is what we have

Getting better, but let's say you want more than one piece of cheese, and you want to adjust the starting spot for the piece of cheese that is already there. To change the starting spot, just change which frame cheese_pan starts looping on. To add another piece of cheese, just copy cheese_pan, paste it in place on a new layer and adjust the starting frame. My two instances here start on frame 80 and 45.

And here's what that looks like

For the sake of this tutorial I'm going to do a bit more mutliplaning, but in order to do that, I think I need more ground to play with and less wall showing. That's an easy fix, just select everything and move it up a bit. Then select just the footprint_pan instances and move those down, and then select the cheese_pan instances and move those down even more.

Now that we have more ground to play with, lets add some more cheese, this time between the wall and the footprints. Easy enough, just copy an instance of cheese_pan and scale it to a size that is somewhere between the scale of the wall (100 %) and the footprints (110%), and then vertically place the new cheese between the wall and the footprints. To tell what percentage your symbols are scaled, bring up the transform dialogue box (ctrl+t). Once you have the placement for the cheese correct, you can add more cheese on that plane by copying it, pasting it in place and changing the starting frames. In the screenshot bellow I also added another piece of cheese closer in the forground using the same technique (except I scaled the cheese_pan instance larger instead of smaller).

And here it is playing

A thoroughly ridiculous background, but you get the point. And of course you don't have to be limited to cheese, you can keep making more duplicates for other objects like chairs, or whatever your little heart desires. I decided this long, fermented dairy loving hallway needed some illumination, so I also added some lightbulbs comming in from off screen. It's a little stupid since realistically speaking these lightbulbs are way too low, and the forground lightbulbs are actually closer to the ground than the background bulbs, but what do you want from me, I was making this up as I went along. Normally I would have figured out my horizon line to determine the verticle placement and height for all the objects before doing any of this.

But enough excuses, here it is, my final multiplane.

And remember, 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 looping background pan and the multiplaning looping background pan.

Looping Background Pans

2007-05-22T21:00:00.000-07:00

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 looping background pan and the multiplaning looping background pan.

Last year I was working on a show that had a lot of panning backgrounds. I would spend a lot of time making sure backgrounds would pan and loop correctly, so I decided to come up with a method that would work every time. Using my technique it's very easy to make those Hanna Barbara-esq looping backgrounds. Also, this technique is a good start to making multiplaning pans like this

But let's start simple.

Step 1: Create a paint square (with no stroke) that is larger than the stage. The square you make is almost (but not quite yet) the size of the background drawing you'll end up making, so keep that in mind. You might want something pretty wide, but to make things easier here, I'm making one that is just barely wider than the stage.

Step 2: Align this piece of paint to the center of the stage both horizontally and vertically. You can do this through the Align panel which you can bring up through the hotkey ctrl+k.

Step 3: Symbolize the paint. This symbol will be your background drawing, so call it something clever. I called mine background.

Step 4: Symbolize the background symbol. This new symbol will contain the motion tween that makes the background pan. I named this symbol background_pan.

Step 5: Enter the symbol background_pan. Then copy and paste-in-place the symbol background twice. Place the first new instance butting up directly on the original instance's left side. Place the second instance butting up on the original instances right side. Only move these instances horizontally, and you might want to turn snapping on, to make sure these symbols are actually touching each other.
Step 6: Create a new keyframe farther down the timeline. YOU MUST PICK AN EVEN KEYFRAME NUMBER. The frame number you pick will determine the speed of your background tween. A low keyframe number like 60 will create a very fast background pan. A high keyframe number like 700 will create a very slow pan. For now just guess, you can mess around with it later. I'm choosing 100 because it makes the math easier (there is a little math later on, stop crying).

Step 7: Do you want the background to move left or right? Now is the time to decide. I want my background to move from right to left so on frame 1 I deleted each instance of background except for the right most one. On frame 100 I deleted every instance except the leftmost one. In the screen shot below I am on frame one and have onion skinned the whole timeline.

Step 8: Motion tween the two keyframes. No easing! Here you will get an idea of your pan's speed. Now is the time to make adjustments to the timing by changing the frame number of the second key frame, but remember YOU MUST PICK AN EVEN NUMBER. I'm stubborn so I'm sticking with 100.

Step 9: Big step! Exit background_pan. Now that you're on the stage, make the file's timeline longer than the pan length inside background_pan (you can't show off a background looping if you don't hold on it long enough). Then copy background_pan and paste it in place on a new layer. Then change the starting frame for the new instance following this simple formula: Length of pan divided by two, plus one. Or if you want to look fancy, L/2 + 1. My pan is 100 frames long, 100 divided by two is 50, and adding one to that gives me 51, so my starting frame is 51. Now you see why I told you it's important to pick an even number for your panning length.

Step 10: Make sure both symbols are set to loop and hit play. It almost works! But there's a problem, there is a gap between the two background instances. I honestly have no idea why this happens, but it does. The length of your pan will effect how much of a gap there is. If your pan is fast the gap will be bigger, if your pan is slower, the gap will be smaller. To fix this problem we're going to go into the background symbol and stretch it, but the amount we stretch it will be determined by the speed of your pan, so make sure you like your speed before going any farther.

Step 11: Go inside the background_pan instance whose start frame you adjusted. Go to that new starting frame inside the symbol (But if you're good and are using Enter Graphic at Current Frame you're already right there). Make a keyframe, so that you can now enter the symbol background at that position.
Step 12: Now we stretch the paint. But there's a problem. Normally if you select the paint, hit q to enable free transform, and try to stretch the paint, it only stretches in one direction
Step 13: But if you hold ALT while stretching the paint, it will now stretch from the center, which is what we want.

Step 14: Zoom in really close to one edge and stretch the paint while holding down ALT. You'll notice that the other instance of the background is adjusting as well, this is because you're holding alt so both sides are moving. Stretch the paint so that the instance your adjusting is just touching the tinted instance still outside on the stage.

Step 15: Great! Now we have the exact size the background needs to be, so go and draw your background on a new layer that's above the paint square.

Step 16: There are a couple things you'll notice looking at my background drawing. First of all, it's not a good drawing. That's my fault, I wasn't trying too hard. Second, a bunch of the horizontal lines overshoot the background image size we've established. That'll be an easy fix we'll take care of in a bit. The bigger problem is with the table I've drawn. To place the table where I want it to be, it now WAY overshoots the background boundary. To fix this, just cut out the overshooting part of the table and paste it in-bounds on the other side of the background.

Step 17: To fix the other overshooting lines, take the paint square, bring that layer on top and convert it to a mask

Step 18: Go out to the stage and enjoy your looping background. Here's a swf of mine.

As I said, this technique can also be altered a bit to create mutliplaning pans like this one.

If people are interested I can go into the next steps you'd need to take in order to make the multiplane work.

And remember, 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 looping background pan and the multiplaning looping background pan.