In this animation tutorial, I recommend using the Graphic behavior. This enables you to scrub the Timeline to see your animation play while inside the Flash authoring environment. Scrubbing refers to moving the playhead back and forth manually to play back the contents of the Timeline. Movie clip symbols do not play beyond Frame 1 of their contents unless you test your Flash movie (Ctrl+Enter) or export your movie as a SWF file.

Cleaning Up Your Sketches
Every good design usually starts with the time-tested pencil and paper. I've had some of my most creative moments during long and boring management seminars and sometimes a doodle on a cocktail napkin can be the inspiration for a great character. Fact is, you never know when or where you'll be inspired, so keep a pencil in your back pocket or behind your ear at all times.

You can sketch in Flash using any of the tools I already discussed. If you have drawings on paper you'd like to use as the basis for a Flash character, you'll need a scanner to scan and save them as graphics files. Most scanners come with software that will make this process easy. Some of the more widely used graphic formats that Flash can import are PNG, GIF, JPEG, TGA, and TIFF.

After you import your sketch into Flash, think about how to break it apart into individual pieces. This is the hard part. This is a very conceptual process that depends ultimately on your style of animation and the style of your character.

Form follows function, if I may borrow a phrase from Volkswagen, and this is crucial to your characters' design. You must visualize how you think your character might move, which ultimately dictates its overall design.

This character was made entirely with the Oval and Rectangle tools. Notice how I used the original sketch as a reference, making subtle changes and adjustments as I fine-tuned the image, tracing it with the Flash drawing tools.

After creating a blank keyframe (F7) next to your sketch, you can turn on the Onion Skin feature to see a ghost of your sketch. You can use any of the drawing tools to draw, using the onion-skinned sketch as your guide. I used the Oval tool to create the head of the boy character. When creating body parts and various accessories for your character, try to imagine and then draw the entire shape. You must visualize your character as if it is truly a 3D object existing in space. Even though this is a two-dimensional format, thinking like a 3D artist can help you visualize how certain parts will be attached to others.

When you finish drawing an object of your character, copy and paste it to a new layer (Figure 3). I like to select it and convert it to a symbol at this time. You can also name your layers.

Saving Time Placing Symbols on Layers
I always convert my objects to symbols and name them with a simple yet descriptive naming convention. For example, head1, eye1, mouth_wide, and so on. However, I do not create names for my layers at this time because there's a much easier and faster way. After all my symbols are created and named appropriately, I simply select them all (Ctrl+A) and copy (Ctrl+C) them. I now create a new layer and paste them in place (Ctrl+Shift+V). This places them all on one layer, yet still as separate symbols. Delete all your other layers so you end up with just the one layer containing all of your character symbols (Figure 4).

The next step is the coolest part. Select all again and then right-click over your character and select Distribute to Layers.

Voilá! Flash has not only placed each symbol on its own layer but has named each layer based on their symbol names! Nice, huh?

Saving Time Through Good Document Management
If you want to edit the name of a layer, double-click the layer name and type in a new one. Giving layers a descriptive name based on the kind of object it contains is good practice in terms of Timeline and file management. This is especially important when working with more than one artist - and even more so when working within team environments.

Since Flash MX (version 6), you've had the option to create layer folders. A layer folder is simply a new layer that acts like a folder to hold other layers. They can be expanded and collapsed. This is extremely useful when dealing with multiple layers for several characters. You can create a layer folder for each character and place ll layers inside these folders, giving you the option to collapse them all except for the character you are working on. This prevents endlessly scrolling through the Timeline and is a huge timesaver.

Another way to manage your Flash document is building an organized library. As I mentioned earlier, when you create or convert something to a symbol, it automatically becomes an object in the library of your movie. To open the library select Window > Library or press Ctrl+L. The library gives you a variety of information and options for each symbol contained in it. You can select each one by clicking a symbol name and view a thumbnail in the library preview window.

If the symbol contains an animation within it, you also see a Stop and Play button in the upper right corner of the preview window. These buttons enable you to preview the animation within this preview window.

The upper right corner of the library contains a pop-up menu with several options. You can create a new symbol, folder, font, or video. You can also rename a symbol, move symbols to folders, duplicate or delete a symbol, or edit and obtain the properties of a symbol.

Introducing "2.5D"
Just because tweening in Flash is easy does not mean you can always rely on it for creating convincing animations. Don't get me wrong: Tweening can be a great timesaver and can get the job done, as long as the job doesn't require anything more than simple objects moving around the Stage.

But what if you could push the tweening method to give more realism to your character? What if you could harness its simplicity and make it work in ways not too many other Flash users have thought of? What if you have learned everything there is to know about tweening, go back to the first 10% of that knowledge, and take a left turn? Where would that take you?

In this lesson, I'm going to reveal a truly killer Flash animation technique that will actually create what some consider a convincing 3D effect. The cool thing is you never leave the Flash environment; you remain in the 2D realm. You are now in a dimensional limbo. If it's still 2D but looks like 3D, then what exactly is it?

Welcome to the world of 2.5D animation.

Yup, 2.5D animation. I made that name up. I don't claim to have invented this technique but so far the name, two-and-a-half D, may be mine.

I have turned on the outlines feature so you can see how each part of the character's body has been separated (Figure 5). This is very important because motion tweens require only one symbol per layer during the tween. If you try to have two different symbols on the same layer within the same motion tween, the tween will break.

I have even taken the time to name each layer. Although this is not necessary, it does help to have layer names because, as your Timeline grows, you eventually start to scroll the Timeline more and more. It is also important when working in team environments where file sharing is common. You can never be too organized.

After your Timeline is set up, you can begin to apply motion tweens to your character. For this example, I animated only the symbols that make up the character's head, so I made sure all other layers were locked to avoid making changes to the wrong layer or layers.

Turning Heads - Part 1
First I created my keyframes where I wanted the head to start and stop turning. Click and drag vertically from the top to the bottom layer and convert to keyframes (F6). Do this twice, keeping about 15 to 20 frames in between keyframes. In my example, I made keyframes on frames 15 and 30.

Keeping the playhead on the frame at which I wanted the character's head turn to stop, I edited each of the symbols on the Stage using the Free Transform tool.

Follow my lead. I started with one of the eyes. You need to imagine the eyes wrapping around a sphere (the head). If this were truly a 3D object, one eye would get bigger as it comes closer towards you. It also wouldn't be as egg-shaped, so making it wider is also a good idea. Because my character's eye consists of three different symbols, I scaled them all at once by holding down the Shift key and selecting all three symbols. Then I used the Free Transform tool to scale them at the same time. Don't worry about being perfect at this point. You can always fine-tune your animation later. This is almost blind work, as you won't know exactly how it will look until you apply the motion tweens (Figure 6).

Let's move on to the nose. Because the character is turning towards us, everything closest to us should move from right to left. If it were truly a 3D object, the nose would be sticking straight out from the head. To make this a little more convincing, I turned it slightly downwards as I moved the nose from right to left. Don't forget to scale it up a bit as it is also coming closer towards the viewer.

Next I moved the other eye over while scaling it larger and making it less of an oval shape and more circular. I also moved over both eyebrows and rotated them slightly while scaling them up.

At this point I applied motion tweens to each of the layers where I made these edits. It's time to reveal what I have actually done and determine whether it needs further adjustments.

Don't worry, there's almost always a lot of tweaking to get this effect just right.

View the file mudbubble_boy.swf to see the final animated effect.

Not a bad start, is it? With a few simple edits with the Free Transform tool, you can start to see the effect come to life. It's not perfect but at this point it doesn't have to be. You can continue to tweak the amount of scaling, positioning, and skewing of your elements until you achieve the desired effect.

Turning Heads - Part 2
Next I address the remaining assets of the character's head to further emphasize his head turning.

The most important part of this illusion is convincing the viewer that this flat, 2D object has volume and mass. You also need to trick the user's eye into perceiving depth in the animation. You need to imagine this character as being built from a variety of 3D objects in space. If the character were truly turning his head in a 3D space, what is in the foreground would travel in the opposite direction from what is in the background. To help you imagine this, picture the earth spinning on its axis in space. The earth essentially spins counter-clockwise. This means the surface closest to us travels from right to left. The surface farthest from us travels from left to right. Let me apply this to my character's head.