By Chris Georgenes
6 July 2009
6 July 2009
A basic understanding of the Adobe Flash CS4 Professional authoring environment and prior experience drawing and developing animated characters is recommended. If you are not familiar with the different Flash drawing tools, read Part 1 of this series. There you'll learn about the effective use of symbols and document management best practices.
- design_characters_flcs4.zip (376 KB)
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.
Figure 1. Isn't he oh-so-cute?
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).
Figure 2. Each symbol in the Timeline exists in its own layer.
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).
Figure 3. Character displayed with the outlines setting enabled.
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).
Figure 4. Timeline as it appears after extending the frames.
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).
Figure 5. Timeline as it appears after I inserted keyframes on Frame 10 across all of the top layers.
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).
Figure 6. In Mac OS X, you can set the System Preferences to allow the "F" function keys to work with the Flash CS4 authoring environment.
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.
Figure 7. Press and hold Shift to select multiple eye symbols.
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).
Figure 8. Modify the nose.
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).
Figure 9. Modify the other eye.
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).
Figure 10. Turn the character's head.
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).
Figure 11. Rotate the brim of the hat.
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).
Figure 12. Adjust the hat to make it slightly thinner.
I skewed the ear a bit as well as I moved it upward and to the left (see Figure 13).
Figure 13. Skew the ear.
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).
Figure 14. Skew the hair towards the character's eyes.
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).
Figure 15. Position the second ear and create a motion tween.
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).
Figure 17. Completed Timeline contains the new Flash CS4 motion tween spans.
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).
Figure 18. Motion Editor with the Custom ease selected.