Because the head symbol itself is simply a flat oval shape, all I really needed to do is skew it a little bit. I also chose to nudge it a little to the right. I did this because when someone turns to face you, you see more flesh to the right of the left eye. Also, because this head shape is farther back from the facial features, it should move slightly to the right a few pixels. Don't over-exaggerate some of these movements. This is an effect best executed with many subtle movements rather than a few major changes. It's the sum of its parts that make up the whole because several subtle animations complete the overall dramatic effect.

Next I rotated the brim towards the right side of the character's head. Remember, objects farther back move in the opposite direction to objects in the foreground.

I also used the arrow keys to nudge the brim over to the right so it appears to be behind the character's neck even more.

The same principle applies to his hat. I skewed the hat to make it thinner while moving it over to the right a few pixels.

The ear got skewed a bit as well as it moved upward and to the left.

Don't forget the hair. I designed the hair as three individual symbols so they could be edited independently. As the head turns towards the viewer, I skewed them down towards the character's eyes and made them shorter as if they were pointing towards the viewer a little more. This is cheating the perspective a bit and can be difficult to achieve. There is a limit to how far you can skew and scale a symbol. Remember, this effect is better when used sparingly and in a subtle way. You can only push the envelope so far. Less is more.

Next I added some motion tweens to the rest of the layers to which I made edits. If you followed my lead so far, play back the results.

Not too shabby, is it? You clearly can see his head turn as if it were a 3D object. Remember that most characters, if human, have two ears. To have the character's second ear coming around the right side of his head, create a new layer below all other layers. Copy the existing ear and paste it to this new layer in a blank keyframe midway between the motion tweens (around Frame 22). Then select Modify > Transform > Flip Horizontal to flip it. Position the ear on the right side behind the head so it's sticking out about half way. This is about as much of the ear you need to see.

Add a second keyframe on Frame 30 (where all the other keyframes reside).

Go back to the ear's first keyframe and reposition the ear almost completely behind the head. I have converted some of the other layers to outlines so you can see the ear's new position.

Now just apply a motion tween. Play back your animation to see the ear reveal itself as the head "turns" towards you. This small detail adds an enormous amount of realism to the head turn as it helps create the illusion of the head being a rounded sphere (this requires Flash Player 8).

Feel free to scrub the Timeline and make adjustments to your symbols if something doesn't feel quite right. This depends on how much of a perfectionist you are as well as on the complexity of your character. The boy character in this example is fairly complex, given the amount of objects I used in his design.

Custom Ease In/Ease Out Panel (Flash Professional 8 Only)

I'd like to add one more finishing touch to the head turn. As you know, motion tweens can look pretty static due to their constant rate of speed. They can look pretty jerky in their initial state. Thanks to a new feature in Flash Professional 8, however, you can add some "easing in and easing out" to make the transition softer. The trick is how to ease in and out inside of a single tween.

The first step is to apply the motion tween. You can do this in one of two ways:

• Right-click the frames in between the two keyframes. From the pop-up menu, select Create Motion Tween.
• Select all layers with the selection tool by clicking and dragging, highlighting them all in black. From the Tween drop-down menu in the Property inspector, select Motion.

Clicking this button opens the new Custom Ease In/Ease Out panel.

With the new Custom Ease In/Ease Out panel you have a lot more control over easing than you did with previous versions. The Custom Ease In/Ease Out panel displays a graph that represents the degree of motion over time. The horizontal axis represents the frames, while the vertical axis represents the percentage of change to the object.

The graph's curve dictates the rate of change of the object. When the curve is horizontal (no slope), the velocity is zero; when the curve is vertical, you don't have any easing or delay to the objects' movement.

If you select the Use One Setting for All Properties check box, the current curve is applied to all properties (Position, Rotation, Scale, Color, Filters). If you deselect this check box, you can apply a separate curve to each of the properties, as follows:

• Position: Specifies custom ease settings for the position of an animated object on the Stage.
• Rotation: Specifies custom ease settings for the rotation of an animated object. For example, you can fine-tune how quickly or slowly an animated character turns around to face the user on the Stage.
• Scale: Specifies custom ease settings for the scale of an animated object. For example, you can customize the scale of an object more easily so it appears to be moving away from the viewer, then coming closer, and then moving away again.
• Color: Specifies custom ease settings for color transitions applied to an animated object.
• Filters: Specifies custom ease settings for filters applied to an animated object. For example, you can control the ease setting of a drop shadow that simulates a change in the direction of a light source.
• Play and Stop buttons: Lets you preview an animation on the Stage using all the current velocity curves defined in the Custom Ease In/Ease Out dialog box.
• Reset button: Lets you reset the velocity curve to the default, linear state.

Using frame indicators (represented by square handles), you click where you want an object to ease in or ease out (accelerate or decelerate). Clicking the handle of a control point (the square handles) selects that control point, and displays the tangent points (hollow circles) on either side of it. You can use the mouse or the keyboard's keys to drag the control or tangent points to new positions.

Tip: By default, the control points snap to a grid. You can temporarily turn this off by holding down the X key while dragging the control point.

Clicking on the curve away from any control points creates a new control point to the curve. Clicking anywhere away from the curve and control points deselects the control point that is currently selected.

To make an animation start gradually and end gradually (Figure 7). I highly recommend experimenting by creating and editing control points and tangents and playing back your animation using the Stop and Play buttons in the lower left corner of the panel. It won't be long before you have a good feel for the relationship between the curve and its effect on the animation.

Now play back your animation. Notice how the head-turn eases in and then out as it approaches its end (Figure 8). To animate the head turning back again to its original position, you only need to copy frames from Frame 1 and paste them after the tween you just created. Repeat the same procedure by adding a motion tween, and for easing in and out and you have a character that can turn its head back and forth in a cool way.

Applying Filters
Yes, the impossible is now possible in Flash. Flash 8 introduces graphic filters and blend modes, which the Flash community has accepted with open arms. You can now apply effects such as Drop Shadow, Blur, Glow, Bevel, Gradient Glow, Gradient Bevel, and Adjust Color to any movie clip instance. So have fun with your character by applying a drop shadow.

The first thing to do is place your character in a movie clip symbol. In the Timeline, click and drag to select all frames across all layers. (Hint: start on Frame 1 in the upper left corner and drag diagonally to the last frame on the bottom layer.) This highlights your frames and layers in black. Select Edit > Timeline > Copy Frames (or press Ctrl+At+C) to copy the entire Timeline to the Clipboard. (You could also right-click anywhere on your highlighted frames and select Copy Frames from the context menu.) Now hold that thought until the next step.

Open your Library (Ctrl+L) and from the upper right drop-down menu, select New Symbol > and then select Movie Clip behavior and click OK. You are now in Edit mode for this new symbol. Select the first frame of the Timeline and select to Edit > Timeline > Paste Frames (or press Ctrl+Alt+V) to paste your selection. (You could also right-click over Ctrl+Alt+Frame 1 and select Paste Frames from the context menu.)

Return to the main Stage and create a new layer. Locate the movie clip symbol you just created in the Library and drag it to the Stage on this new layer.

Delete all other layers that contain your original character. At this point your Timeline should have one layer and one movie clip symbol containing your character animation.

There are two kinds of shadows you can create. A standard drop shadow creates a shadow below the instance that is slightly offset from the original. This type of effect is often very flat and similar to a shadow cast against a wall or any other flat surface. It is not very convincing if you are trying to achieve a shadow cast on the ground. For a more realistic shadow effect, you need to add a few simple steps.

Duplicate the movie clip instance and place it behind the original instance. (You can keep the duplicate on the same layer and arrange it behind the original instance, or paste it to a new layer below the original.)

Select the duplicate instance and, in the Filters tab of the Property inspector, select Drop Shadow from the Plus (+) menu. Next, adjust the strength level to around 45% and select Hide Object. This hides the movie clip object but reveals the Drop Shadow Filter properties. You can make further adjustments by setting Quality to Low, Medium, or High, or modifying the amount of blur, color, angle, or distance of the blur effect from the original graphic.

To prevent this effect from looking too much like a drop shadow against a flat wall behind the original object, use the Free Transform tool to skew the filtered movie clip instance. This technique requires some trial and error before you can apply it successfully. Squash and skew the instance until it looks as if the shadow is cast on a floor. You may need to reposition the instance to make this look right.

Test the movie and see the effect come to life.

When combining looping animations with several other looping animations, you can achieve some sophisticated visual results, (this requires Flash Player 8).

In this sample you can see how the drop shadow effect adds an exciting dimension to the animation. This animation is a series of movie clips containing looping animations of the boy and dog characters. In a future article I will explain how small animated loops can yield a lot of mileage to your movies.

I hope this article has helped you sharpen your Flash design and animation skills. There are several more animation techniques that you can achieve with Flash, such as full animation (often referred to as frame-by-frame), shape tweens, and image sequences from video or 3D animation programs. There are also a number of cool plug-ins available from other designers and animators that can help speed up your Flash workflow. Look for future articles that explore these techniques and tools.