2D Animation in Flash – Part 4: Animation Preplanning and Animation

[Part four in multi-part series about "Link's Prize," a 2D animation done in Flash. See the bottom of the post for the rest of the series.]

Previous: Drawing the Backgrounds

Now the fun [hard] part: Doing the animation.

Materials used:

pencil, paper, Flash MX+, wacom tablet

Outline:

-Getting Organized
-Preplanning
-Getting into Flash
-Animation!
-The Rough Version
-The Nicer Version
-Secondary Action

Getting Organized

With the animatic complete and the backgrounds in, the next big chunk was the animation. By far, this process takes longer than any of the others, as you can imagine. So let's get started.

The very first thing I did was to make a list of the shots and decide which shots are the most important. You want to animate those first.

What makes a scene important? It could be that the shot is the climax of an emotional sequence, or a money shot, some shot whose raison d'etre is to impress your audience with your animation skillz. It could be those shots that made you want to make this animation in the first place. Basically it's any scene that needs to look GOOD.

Now this is an important point. Not every scene needs 100% of your efforts. Before I did this project, I would usually approach each project by doing scene 1 (make background, color it, animate) and then scene 2, scene 3 ... etc. I did this with the Majora's Mask animation, and I lost steam around shot 6 or so. By animating the most important scenes first, you can put all your fire and energy into them, and leave those less important shots for when you're racing to finish.

For this animation, I decided that the most important shots were Four: "Link turns over and opens eyes," Five: "Link gets up and puts on his shoes," and Seven: "Link washes face." Those were the most important because the purpose of making this short was to show Link being cute, and those were the cutest shots. :) So, for this tutorial, I'll be talking about the first shot I animated, scene Four. Here we go.

Preplanning

Here's what happens in the shot: Link rolls over lazily and then opens his eyes.

I started by roughing out the shot on paper. I knew that he would somehow push up on the blanket, and turn at the same time. I tried to imagine how one does that, and did a very simple six-pose drawing of the action:



I was having a hard time with it. I didn't quite get what was happening with the arms while one is turning in bed. So, the next thing of course is to try it out. I went to my bed, covered myself with a blanket and tossed and turned like someone dreaming about Freddy Cougar. It was fun. I tried to pay attention to what my hands were doing. How my body was responding. How can one turn using the least amount of energy possible. Having a sense of it in my mind, I went back and redrew the thumbnails.



I picked up on several things by doing this. (long description)--> First, imagine you're on your side, lying in bed, facing left. You start to turn onto your back, and swing your left leg in an arc to the right that places it past your butt. You start to roll onto your back, planting your feet and having the knees turn upward. You lift the blanket with your right arm to prevent the blanket from constricting your rising knees. Having turned onto your back, you put the weight on your shoulders and feet, and lift your butt up and over to the left (rolling has somewhat put you way over to the right). Then you release your feet and continue rolling until you are on the other side. To finish the roll completely, you lift your upper-body up with your hands and butt planted and plop down such that you're face is facing the sheets (not straight out).

That's a very complicated description. But these are the kind of details that you need to think about when animating. What are the forces acting on the character? Where is the weight distributed? You don't need to describe it in words (like butchered attempt above) but have a sense in your mind and somehow translate that into thumbnail drawings.

Remember, the more thumbnails you make, and the more effort you put into them, the better your animation will be. You want to have a clear idea of what the actions are before you go into Flash, otherwise you'll spend a lot of frustrating hours fixing and reworking instead of animating. Not fun. (Not that it's totally avoidable, by the way. Sometimes hours of reworking aren't all bad.)

Still, it wasn't working quite right, so I went back to bed and tried again. Here was the final round of thumbnails.



One of the new points I learned was that, as your rolling, you're not rolling in place, rotisserie-style, but actually displacing. You're head mostly stays in the same place, while you're legs and butt are rolling away in an arc, like moving a compass. That's why you occasionally stop, pick yourself up, and adjust your position before continue rolling.

With all these details in mind, I finally decided I was ready to start animating.

Sidenote: To video or not to video?

In preparing to do a shot, I recommend video taping yourself with your digital camera or something and then watching it for insights. However, I find sometimes that doing that can be very distracting. You shouldn't be rotoscoping, or trying to get the animation to be exactly like a video. You want it to be a caricature of real life, something believable, without dipping into the uncanny valley.

So, I generally, I don't video unless the action is really complicated, or an animation is not going well and I need a boost in a different direction. That's my preference. If I was working for a studio, then I'd probably make a video for each shot I was working on, since each shot you make has to be top-notch. But if I'm making my own thing, and just trying to make something feel cohesive, I don't think I have the patience for recording and analyzing video of myself for every shot. That's just my preference.

Getting into Flash

Ultimately, you want to be able to take your thumbnails and put them directly, as is, into Flash. Then fill in the gaps. Simple as that (but never really).

So this is how I do it. I work in Flash MX. I have Flash 8, but for some reason, I think that the stylus works better in Flash MX (Is it just me? Does anyone else have this problem?!?). So I animate in Flash MX and compile the whole thing in Flash 8. It's kind of annoying, but that's what I do.

So, I have the scene open in Flash MX. The size of the movie is set to 720x480 pixels, and the frame rate to 24 fps. Below is the general look of my workspace:



Some notes about my workspace: In order to see the character clearly, I turn the background into a movieclip and set it to a low alpha (using the properties bar). Also, you may notice the obscenely unorganized mess of scenes I have on the right. That exists because every time I think I'm going to make a major change to my animation, I duplicate the scene and work on the duplicate.

Animation!

When I animate, I generally animate two times. The first time is a very rough version, where the character is represented by basic shapes, and the second time is the final look, a clean drawing of the character. Here's an example of the rough and final version of one frame:



In the first round, you are focused on making the animation smooth, and getting the timely just right. In the second round, you're making the character look good.

The rough version

I draw with the Brush tool. Flash users know that the size of the brush tool, unlike the pen tool, varies according to the amount you are zoomed in. This is very important. So, for the rough version, I work at 100%. For the nicer version, I zoom in. Sometimes I'll work at 150%, or sometimes 400%. It depends on the size of the character in the shot.

So, with the stage set to 100%, I make a blank keyframe at frame one. In frame one, I draw my first thumbnail sketch. And then in frame 3, I draw my second. And frame 5, my third. I copy directly from the pencil sketches into Flash, skipping each frame. (You don't have to skip a frame, I just do it because I know most frames, in the end, will be at least one frame apart.) The timeline looks something like this:



Onion-skinning is the feature that allows you to see frames before and after the one you're working on. Have it on as your working. Being able to see the previous shots is the bread and butter of doing animation. However, especially in this stage, where you're putting in the really important poses, don't feel like you have to copy the last drawing really closely. You're keyframing, so the poses are going to look dramatically different from each other, as they should.

Once you have copied all your drawings into Flash, play the animation. When you first play it, it's going to look very rough, and too fast. Remember, the more keyframes you put in, the better it will look. Picking the right points to make a keyframe is difficult to judge - a tutorial on that to come - but in general, if you have a 200 frame animation, with a lot of action, and you only put 5 keyframes, it's not going to look right.

So, the next thing is to adjust the timing and pacing of the action. Basically, that means spread the frames out, spacing out the frames so that the action doesn't feel too slow or too fast. It's hard to tell whether the timing is right until you put in the inbetweens, but for the time being try to space them out as best you can.

Here's an example of what I mean. See how the frames are all spaced out? How much you space them out will depend on the relationship between the drawings in those frames.


Ok, you have an animation, in essence. Now, the best thing you can do is make this part look and feel as best as you can. This can save lots of work later. If you notice the head is getting increasingly bigger throughout the shot, then fix it NOW. Those kinds of things will be a real pain in the butt later, believe you me. If you're not sure if it feels right just because there are too few keyframes, then do some inbetweening. It's only recently that I've been trying not to do the entire animation twice, only the keyframes; however, before that I would make the complete animation, inbetweens and all in rough first before going to the nicer version. There's nothing wrong with that, it just takes longer.

The Nicer Version

Ok, say that's done. Then, make a separate layer. This is going to be your "nice" layer. Lock and put the "rough" layer in outline mode. Now zoom in. How much you zoom in depends on how big the character is in your shot. You want to zoom in at least 150%, if not more if possible. The reason for this is that zooming in forces the brush to be smaller, and small, fine lines (even if they're messy) look better at 100% than big, chunky ones. Also, remember to write down somewhere off stage what zoom in percentage you used, so you can maintain a consistent line thickness.

So this is what it will look like. (Sorry this is not Scene Four ... I actually deleted the exact rough version I copied the nicer version onto. Whoops!) I was zoomed in at 249%. The current, in-progress nice drawing is in black. The rough version I'm tracing over is in red outline. You can see the previous keyframe in faded black.


So zoom in, and on the "nice" layer, draw a nice version of the character using the rough version as a guide. Do this for all your keyframes. As you work, it's a good idea to use the [,] and [.] keys to quickly "flip" through your frames and see if the animation is flowing or not. I constantly have my fingers on those frames as I'm drawing. I sometimes get in the bad habit of just wanting to race through the drawings and not watch it until I'm done. Don't do that. Before you know it, the character's head has tripled in size from how it started. That's really annoying. It's easier to catch it and correct it as you're working, not at the end.

Once you've finished all the keys, now you're ready to inbetween. So, as I mentioned before, you basically want to have the animation "on twos" which just means that every second frame is unique.

So, say you have a keyframe on frame 1, and another on frame seven., like this:


That means you're going to have two inbetweens. So you can go ahead and make those both blank keyframes.


You'll only want to work on "ones" (where every frame is unique) if A. the motion is too fast to be read on twos or B. you're masochistic. This is what each frame being unique would look like:


So, make blank keyframes in between the keyframes and start filling in the gaps. Where do you draw the inbetween? That's a good question, and one a bit beyond the scope of this article. I'll be sure to talk lots more about inbetweening and things like that in future posts, but in this series, I'm just going to talk about the general process of putting an animation together.

So, let's say you went ahead and filled in those inbetweens and have a long sequence of frames. Of course, it never ends with the last inbetween done. I do a lot of editing after that, especially with those darn reshaping heads.

Secondary Action

You might notice in the picture way back up that I only have drawn Link's body. His character is the most important, so that's the action I focus all my attention on. But after that, there's still more things going on, like his blanket and his pillow. Because the movements depend heavily on the movement of the main character, I don't draw them until after I've animated the main character. Such actions are called Secondary Actions. Examples include animal tails and long hair.

I actually didn't animate these secondary actions until I had finished the character animation for all the other important scenes. I really really wanted to make sure those were done before spending time fiddling with unimportant details like pillows. So it wasn't until all those other scenes were done that I came back and added the blanket and pillow animations.

Put these secondary items on separate layers. But, you don't want to get carried away by separating everything. I once did an animation where I drew the arms of the character on a separate layer. I think it somehow took away from interaction of the arm's weight on the body and the arms ended up looking like they were just tacked on spagetti strings, flopping this way and that.

Generally, I do Link's hair on a separate layer. In the case of shot four, the head movement was so subtle that I didn't think I needed to. You can always start drawing the hair with the rest of the body and switch to a different layer if it's getting too much to keep track of.

In general, that's it, but ...

That's a bit of a whirlwind tour of the process I use to animate. As for technique, spacing, timing and other things like that, I can recommend many books on the subject, and I'll be talking plenty on the subject here in the near future, but for this series, I'm focusing on the practical matter of making the animation.

Animation is a complex art and every time I attempt any project, big or small, I learn a ton. So please stayed tuned for more!

Absolutely, positively, send me questions if you have any. I really have no idea what people are interested in, so if you want me to go into detail about some topic, please comment, or shoot me an email, or anything! I'd like to make posts that people will be interested in. Thank you!

Next: Painting the Backgrounds

Part 1: Idea and Storyboards
Part 2: Making an Animatic
Part 3: Drawing the Backgrounds
Part 4: Animation Preplanning and Animating
Part 5: Painting the Backgrounds
Part 6: Coloring the Animations