Designing and animating characters in Flash – Part 2: 2.5D animation

Additional Requirements

Note: If you are still using Macromedia Flash Professional 8, you can refer to the previous version of this article.

This article reveals a truly killer animation technique in Adobe Flash CS4 Professional that allows you to create convincing 3D effects. The cool thing about this strategy is you never have to 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.

Figure 1 shows the identifying logo on my website, mudbubble.com, which I pick apart in this article to show how it works as an example of 2.5D animation.

I love this 2.5D technique because it solves a problem I've had with relying on tweens alone to create 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 much more than simply moving objects around the Stage.

But what if you could push the familiar tweening method to add more realism to your character? What if you could harness its simplicity and make it work in new ways that go far beyond the normal usage? What if you learned everything there is to know about tweening, and then went back to the first 10% of that knowledge and took a left turn? This article shows you where that turn could take you.

As showed you in the example in Part 1, I used the Distribute to Layers command to help organize my layers on the Timeline. Flash placed each symbol on its own layer and named each layer based on its symbol name (see Figure 2).

The option to Show all Layers as outlines it turned on so that you can see how each part of the character's body is separated. This is important because motion tweens require you to place only one symbol per layer during the tween. If you try to put two different symbols on the same layer within the same motion tween, the tween will break.

Clicking the Outline icon immediately to the left of Frame 1 causes all of the artwork to appear as outlines, which can be helpful as you are aligning and animating the pieces (see Figure 3).

At this point in the process, I extend the length of each layer by inserting a number of frames. First, select the desired end frame number and drag your cursor down across all layers to select the same frame vertically. Press the F5 key (to insert frames) and Flash will insert the frames that extend to the frame number of your selection (see Figure 4).

Now that the Timeline is set up and there's a character on Stage that is ready to be animated, let's move on to the next goal—using the Timeline to add motion spans and create animations to bring the character to life. I also describe how to use the Transform tool to squash and skew various parts of the character to add subtle movements.

This example uses the new motion model in Flash CS4 to animate the character. (If you are unfamiliar with how the new motion tweens work, you should read Motion migration guide for Flash CS4 Professional by John Mayhew and Jen deHaan.) The "body" layer happens to be the only layer I will not be applying a motion tween to, so for now I'll temporarily move this layer the bottom of the Timeline. The advantage of doing this will become clear in the next step.

I don't want this animation to start on Frame 1 because I want to add a short delay before the animation starts playing. I'm going to choose Frame 10 to start my 2.5D effect and my next step is to insert a keyframe on each layer in this new starting frame. The quickest way to do this is to click Frame 10 in the top layer and drag the cursor down across all layers, highlighting this frame along the way. You can insert a keyframe by right-clicking (Windows) or Control-clicking (Mac) on the highlighted frames and selecting the option to "Insert Keyframe" from the context menu. Alternatively, you can press the F6 key (see Figure 5).

Tip: If you use Mac OS X and the "F" keys do not seem to function correctly in Flash, go to the System Preferences and click the Keyboard & Mouse settings. Make sure the box is checked next to the "Use all F1, F2, etc. keys as standard function keys" setting (see Figure 6).

While the new keyframes are still highlighted, right-click or Control-click them again and select the option to Create Motion Tween from the context menu that appears. Flash will apply a new Motion span across all the layers starting on this frame.

Now that the motion spans are in place, let the fun begin!

Because the new motion tween is object-based, you no longer have to manually insert keyframes in the Timeline. Position the playhead to a new frame (I chose Frame 30) and begin by moving the objects around on the Stage. Flash CS4 automatically creates the appropriate keyframes for you.

The most important part of the 2.5D 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 that this character is being built from a variety of 3D objects in space. If the character were truly turning his head in a 3D space, items in the foreground would travel in the opposite direction from items in the background. To help you imagine this, picture the earth spinning on its axis in space. A point on the surface (say, at the equator) travels in one direction while a point on the opposide side of the earth travels in the opposite direction.

Follow my lead. I started the movement 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 (see Figure 7). Don't worry about making things 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 looks until you apply the motion tweens.

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 the nose slightly downwards as I moved it from right to left. Don't forget to scale it up a bit, since it is also coming closer towards the viewer (see Figure 8).

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 (see Figure 9).

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 nudged it a little to the right. I did this because when someone turns to face you in a similar manner, you see more flesh to the right of the left eye. Also, since this head shape is farther back from the facial features, it should move slightly to the right a few pixels.

Don't exaggerate 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 (see Figure 10).

Next I rotated the brim of the hat towards the right side of the character's head. Remember, objects farther back move in the opposite direction as objects in the foreground (see Figure 11).

I used the arrow keys to nudge the brim over to the right so it would appear to be even farther behind the character's neck.

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 (see Figure 12).

I skewed the ear a bit as well as I moved it upward and to the left (see Figure 13).

Don't forget the hair. I designed the hair in this boy character as three individual symbols in order to edit each one 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 subtle ways. You can push the envelope only so far. Less is often more (see Figure 14).

At this point, it might be a good idea to play the animation in the Timeline. Either press Enter and let Flash play the animation or scrub the Timeline by dragging the frame marker back and forth to see the animation play.

Not too shabby, is it? You clearly can see his head turn as if it were a 3D object. Remember that most human characters have two ears. To make the character's second ear come around the right side of his head, create a new layer below all the other layers. Copy the existing ear and paste it into this new layer in a blank keyframe midway between the motion tweens (around Frame 20). Then select Modify > Transform > Flip Horizontal to flip it. Since we're using the new Flash CS4 Motion Tween feature, right-click (Windows) or Command-click (Mac) the ear symbol on the Stage and select the option to Create Motion Tween.

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 as you need to see (see Figure 15).

Next, position the frame indicator on Frame 50 (or whatever frame number represents the end of your tweened animation). With the ear symbol still selected, nudge it a few pixels by pressing the arrow key. Flash will create a keyframe for you on this frame, which you'll need to complete the animation of this ear. Go back to the start of the tween for this ear (Frame 20) and position the ear so it is behind the head and just out of view.

Now when you play the animation, as the head gets halfway through the animation, the ear will start to appear from behind the head and ultimately pop into view. This extra detail really helps imply the illusion of 3D space (see Figure 16).

Figure 16. Final animated effect of the ear revealing itself during the head-turn.

You may want to animate the head returning to its original position as it exists in Frame 10. Flash CS4 makes this task very easy. Hold down the Ctrl key (Windows) or the Command key (Mac) and select all of the keyframes in Frame 20 by dragging vertically. While these keyframes are selected, hold down the Alt key (Windows) or the Option key (Mac) and drag these keyframes to Frame 50. You will notice that by holding down the Alt or Option key (depending on your platform), Flash automatically duplicates these keyframes.

As an extra bonus, since the motion tween was already applied to these frames, the second half of the animation is already complete. Just play the movie or scrub the Timeline to see the character's head turn and then return to its original position (see Figure 17).

Feel free to scrub the Timeline and make adjustments to your symbols if something doesn't feel quite right. The amount of tweaking you do 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, due to the amount of objects I used in his design.

In this section, I add one more finishing touch to the head-turn. As you know, motion tweens can look pretty mechanical due to their fixed rate of speed. Thanks to the new Motion Editor, you can add some easing to make the transition softer and more natural. The trick is how to ease in and out inside a single tween span.

The first step is to create a custom tween curve. Open the Motion Editor (Window > Motion Editor) and expand the Eases property row. Click the Plus (+) symbol and select "Custom" from the menu (see Figure 18).

Click the row containing the new custom curve to expand it. Notice that the curve starts on the same frame number as the motion span in the main Timeline. In this example, it is Frame 10.

Since the first half of the animation starts at Frame 10 and ends at Frame 30, you'll need to add a keyframe in the Motion Editor on Frame 30. You also need to add a keyframe to the very end of the animation, which is Frame 50. To add a keyframe in the Motion Editor, position the playhead on the desired frame number and click the Add or Remove Keyframe button. Do this on Frame 30 (see Figure 19) and then repeat this procedure to add a keyframe on Frame 50.

To create a custom ease-in and ease-out curve between frames 10–20, drag the control points. The curve's control points act just like typical Bezier controls, similar to how you edit strokes with the Subselection tool or the Pen tool. To ease-in and-out, edit the curve so it looks like the example shown in Figure 20.

The next step is to apply this custom ease to the properties of the animation. Since the animation is a combination of basic motion (position) and transformations (skewing and scaling), click each of these properties in the Motion Editor and use the Ease drop-down menu to select the Custom ease you just created (see Figure 21). Repeat this process for each property to which you want to apply the Custom ease curve. In this example, it includes both the Basic motion and Transformation properties.

The last step is to copy and paste the custom curve to all of the other motion tween spans in the Timeline. In the Motion Editor, right-click (Windows) or Command-click (Mac) the area containing the custom curve and select the option to Copy Curve from the context menu. In the Timeline, select an existing Motion Tween span.

Go back to the Motion Editor and create a new custom curve, right-click (or Command-click) the area containing the curve and select the option to Paste Curve. Don't forget to apply the curve to the Basic motion and Transformation properties using their respective drop-down menus.

To apply this curve to the rest of the animation, repeat this copy and paste procedure for the remaining motion spans.

In the last section of this article, I describe how to apply filters to the character to add shadows and give the illusion of depth. Filters can be also used to great advantage to further create the 2.5D animation effect.

Flash CS4 offers some cool filters, such as Drop Shadow, Blur, Glow, Bevel, Gradient Glow, Gradient Bevel, and Adjust Color that you can apply to any movie clip instance. (Read more about filters in the Graphic Effects Learning Guide for Flash.)

Let's add a drop shadow to the character to incorporate some additional realism and depth. The first thing to do is place your character in a movie clip symbol because filters can be applied only to movie clips. In the Timeline, drag to select all of the frames across all the layers.

Hint: Start by selecting Frame 1 in the upper left corner and then drag diagonally to select the last frame on the bottom layer.

Choose Edit > Timeline > Copy Frames to copy the entire Timeline to the Clipboard. (You could also right-click [Windows] or Control-click [Mac] anywhere within the highlighted frames and select the option to Copy Frames from the context menu.) Now hold that thought until the next step.

Open the Library (Window > Library) and use the Options menu in the upper right corner to select New Symbol (see Figure 22).

In the New Symbol dialog box, select Movie Clip as the type of new symbol and click OK.

After making this selection, Flash displays the Edit mode for this new symbol. Select the first frame of the Timeline and choose Edit > Timeline > Paste Frames (or press Ctrl+Alt+V [Windows] or Command+Option+V [Mac]) to paste your selection. Alternatively, you can right-click Frame 1 and select the option to Paste Frames from the context menu (see Figure 23).

Return to the Stage and create a new layer. Locate the new movie clip symbol you just created in the Library and drag it to the Stage on this new layer (see Figure 24).

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

There are two kinds of shadows that 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 the effect of a shadow cast on the ground. For a more realistic shadow effect, you'll need to add a few simple steps.

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

Select the duplicate instance and, in the Filters tab of the Property inspector, select Drop Shadow from the Add Filter menu in the lower left corner (see Figure 25).

Next, adjust the strength level to around 45% and select the option to Hide Object. This setting hides the movie clip object but reveals the Drop Shadow Filter properties. You can make further adjustments by setting the Quality to Low, Medium, or High. Finally, you can modify the amount of blur, color, angle, or distance of the blur effect from the original graphic (see Figure 26).

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 (see Figure 27).

Test the movie to see the effect come to life. When combining looping animations with several other looping animations, you can achieve some sophisticated visual results (see Figure 28).

Where to go from here

Be sure to hone your animation skills further by visiting the Animation Learning Guide for Flash, which explains how to use all of these animation types in Flash CS4 Professional, including the improved way of creating and editing motion tweens using the timeline and Motion Editor.

Control the display and expressiveness of impressive graphic effects features in Flash to enhance the look and feel of your projects by visiting the Graphic Effects Learning Guide for Flash.