Animate an Acrobatic Spy Using the Flash Timeline

The key to animation, like many things, is a logical approach and good workflow. In this tut, Hasier takes you through planning, sketching and refining your animation to give you the movement you're looking for.

Final Animation Preview

During this tutorial we will be creating the following animation:

Overview

This tutorial will be divided into 4 parts. In each part we will go over the different stages in creating an animation from start to finish. These are the tutorial parts and their contents:

Before Animating
- Drawing the character
- Planning the animation
The Rough Animation
- Sketching in Flash
- Key drawings and timing
- Inbetweens
The Clean Animation
- Clean drawings
- Optimization
- Coloring the character
Finishing Touches
- Adding the background
- Masking
- Creating a shadow

Part I: Before Animating

In the first part of this tutorial, we will go over the things you need to know before starting to animate. Do not overlook these things; planning your animation before jumping straight into Flash will save you a lot of time later on.

Step 1: Getting to Know Your Character

The very first step in creating an animation is, of course, deciding what you want to animate. In this tutorial, we will be animating this:

He's a simple spy character I made up some time ago. Because he's so simple, it's easy to animate him. If this is your first time attempting to animate, I suggest you give my spy a go before moving on to more complex characters.

So, grab a piece of paper and draw the spy a few times. Frame-by-frame animation means drawing the same thing over and over again, so you should feel comfortable drawing your character. Here's how I draw him:

Step 2: Key Drawings

Once you know your character inside out, it's time to start thinking about bringing him to life. Animations are planned through key frames (also called thumbnails). In this tutorial I will refer to them as key drawings so as to not confuse them with Flash's keyframes. So, what is a key drawing? Key drawings are the drawings that tell the story and define the movement in an animation. In other words, they are a way to summarize the animation in a few drawings. The example below shows how a slight difference in a key drawing can have a big impact on the final animation:

A key drawing must be planned at the start and end of a movement and every time a change in direction or rhythm occurs in the animation. So, take another look at the final animation and sketch the key drawings keeping in mind these pointers. They should look something like this:

Part II: The Rough Animation

When you have gotten the hang of drawing your character and have planned out the animation, it's time to move on to Flash.

Step 3

Start by opening a new Flash document. The default 12 fps is too low for an animation, so for this tutorial we'll be using 15 fps.

Step 4

Name the current layer "BG". Select a light color and sketch the basic background of the scene, in our case, a room. Don't draw anything fancy, just the elements needed to create the rough animation: walls, floor, and the window.

To sketch in Flash I usually choose a large brush size with pressure sensitivity on and bring the smoothing down to around 10. This gives me more freedom to sketch, as I can vary the stroke thickness as much as I want and have more control over sharp angles because of the low smoothing. I suggest you use the same settings as me. Don't worry if your strokes look jagged; we can fix that at the end.

Step 5

Now we're going to recreate the key drawings we made previously. Create a new layer and name it something like "Spy". In the first frame, sketch the first key drawing you planned before. Again, just draw the basic shapes. It should look something like this:

Step 6

Insert a blank keyframe (F7) in the "Spy" layer. Turn on onion skinning so that you can see the previous frame. With the first drawing as a guide, draw the second key drawing.

Step7

Repeat the same process for the rest of the key drawings. When you're done, you should have five keyframes with five different key drawings.

Step8

We now arrive at the most important (and probably the most difficult) step in creating an animation: timing; calculating the time between our key drawings. What we do now will determine the whole animation, so it is important that it is done right.

Select the first frame in the "Spy" layer and add a few blank keyframes (F7) between the first and second key drawings. Do the same with the rest keyframes. This is what your timeline should look like:

Step 9

Test the movie (Ctrl+Enter). As you can see, the timing is all wrong, so go back into the .fla to fix it. If the timing between two key drawings is too short, add more blank keyframes between them; if the timing is too long, delete some keyframes.

After tweaking it a bit, test the movie to see if it looks better than before. If it still doesn't look right apply some more changes. It's hard to picture the animation with only five keyframes, so don't worry if it's not perfect at this stage; we can tweak the timing again later. So far, this is my result:

Step 10

The core of our animation is now complete, but there is still a lot of work to be done. Firstly, we need to add more keyframes to make the animation seem smooth. The drawings that appear between key drawings to complete the animation are appropriately called inbetweens. Drawing inbetweens is quite easy, as we've already done most of the work when we made the key drawings.

Select a keyframe between the first two key drawings and turn on onion skinning. With two drawings as a reference, draw the spy halfway between the key drawings in the current frame.

Step 11

Repeat the process. Draw a new keyframe between each of the key drawings. You should have nine keyframes.

Step 12

Test the movie. If the timing still doesn't look right, now is the time to change it. As I said before, timing is the most important part in animation, so take your time to make sure it's right. After tweaking keyframes, the animation should look like this:

Step 13

There is little more to explain. Keep adding inbetweens between inbetweens to smooth out the animation until there are no more blank keyframes left. Test your movie to see if anything needs to be fixed. This was my result up to this stage:

Part III: The Clean Animation

The rough animation is now done. In this part of the tutorial we'll work on drawing the clean version of our character.

Step 14

Create a new folder and name it "rough". Turn the "BG" and "Spy" layers into guide layers so they will not be shown when the movie is published. Lock both layers and put them in the folder. Create a new layer and name it "Spy" again. In this layer we are going to draw the clean version of our character.

Change the fill color to black and set the brush settings as described in Step 4. Now take out the drawings you made at the beginning. Use them as a reference to draw the spy over the rough drawing.

Step 15

Do the same thing for all of the keyframes. You can use onion skinning to use the previous frame as a reference.

Step 16

Things are definitely looking much cleaner, but they are still not clean enough. Take a close look at the clean drawings. You'll notice the strokes are jagged. We could leave them as is for this animation, but if we were working on a larger project, we would need to optimize them. Optimizing is a method Flash uses to refine a shape by reducing the amount of curves needed to define the shape.

To optimize the strokes in the animation, select the drawings from all the frames (with "Edit multiple frames" turned on) and click Modify > Shape > Optimize (Crt+Alt+Shift+C). The Optimize Curves dialogue box will open up. You can adjust the amount of smoothing with the slider. Check the "Use multiple passes" box. This will smooth the shape over and over until no further smoothing can be achieved without affecting the shape. When you click OK, message will come up showing the percentage of the curve reduction.

Step 17

Turn off "edit multiple frames" and take a look at your drawings. They are much smoother now, but chances are the optimization has altered (at least slightly) the shapes. You can edit them with the Free Transform Tool (Q). Make sure all drawings are closed and have no gaps.

Step 18

It's now time to give the spy some color. So grab the Paint Bucket (K) and fill him in! I used #000033 for the head, #010243 for the body, and #FFFFFF for the eyes.

Note: If you click with the Paint Bucket inside the drawing and nothing happens, it means your drawing has a gap somewhere. Find it and close it with the Free Transform Tool.

Part IV: Finishing Touches

The animation is complete, but there are some improvements still left to do. What I explain here are mere suggestions which you do not have to follow word by word, and I will therefore not spend much time on each one.

Step 19: A Clean Background

Now that we've colored the spy we need an equally colorful background. The purpose of this tutorial, however, was to show the process of animation, so creating the background is beyond the scope of this tut. But for those who are curious, here's a quick summery of how it was made:

I recreated the room in Swift3D, a program designed to incorporate 3D elements in Flash. I exported the scene as vectors and opened it in Flash. Lastly, I made some changes to the color and added a yellow glow for the lamp.

You can create your background directly in Flash or any other way want. If you want to use mine, you'll find it in the source files.

Step 20: Masking

As you have probably already noticed, there's a small problem that we need to fix. Because the "Spy" layer is on top of the "BG" layer, we can see the spy when he's supposed to be behind the wall in the first frames. To cover the part of his body that should not be shown we'll use a layer mask.

Create a new layer, turn it into a mask layer, and appropriately name it "Mask". Make the "Spy" layer masked. If you've been able to follow along this tutorial, you probably know Flash well enough to be familiar with layer masks, but I'll go over them quickly:

A mask layer contains a filled shape which allows a linked (masked) layer to be seen through it; all empty areas in the mask layer will become invisible in the masked layer.

Our mask must cover the entire spy (in all the frames where part of his body should be hidden) except for the part that sticks out of the window. They say a picture is worth a thousand words, so take a look below:

Note: If you lock both the mask layer and the masked layer, you will see the mask's effect.

Step 21: The Shadow

The last touch I added to the animation was a soft shadow beneath the spy. Create a black circle in a new layer. Transform it so that it looks like the spy's shadow.

Convert it into a movie clip and animate it so that is follows the wall and ground below the spy (as I said before, I won't get into details; you should be able to do this on your own). The animated shadow should look like this:

Step 22: Filters

To make the shadow look like a shadow, lower its alpha to 25% in the Movie Clip Property Inspector. To make it seem soft, add a blur filter in the filters tab with the parameters shown below.

Conclusion

Congratulations! Test your movie, sit back, and relax. You can now call yourself an animator. But keep in mind this is just the beginning! Look around you! There are infinite things to animate! Create your own characters, explore new techniques, develop your own style, and most importantly: have fun animating!

Other References

There are many books on traditional animation which I suggest you take a look at. Three books that stand out are:

If you are interested in Flash animation, you should head to biteycastle.com and check out Adam Phillips's award-winning animations as well as his Bitey Castle Academy.