Flash Animation

Lecture 3 Excerpt

Now that you have a feel for 2.5D animation, check out this video tutorial:

Running Time: 6:45 Read the Transcript

Walk the Walk
Developing a Walkcycle

Let's face it—as an animator you are eventually going to be faced with the task of making somebody—or something—walk. For whatever reason, newcomers to animation regard walkcycles as being extremely difficult. Why? I won't lie to you, they are. Well, in an anatomically accurate way, they can be very challenging.

As an animator, you will find it nearly impossible to avoid the walkcycle, so it may be best to face your fear head-on right now. You just might learn that walkcycles aren't all that difficult to accomplish. There are several ways to make the task of animating a walkcycle very difficult or relatively easy. Let's examine the easy way.

First, design your character in a three-fourths view. At this angle, the character is simply easier to animate, especially a walkcycle. Let's also keep it simple by not introducing an anatomically accurate walkcycle that studies how the shoulders and hips oppose each other and move in relationship with the arms and legs. This is a straightforward, walkcycle animation that helps explain the basic principle behind this technique, with a few very helpful tips added for good measure.

If your character has two legs and two arms, congratulations, you've already cut the amount of work in half. I'll show you what I mean...

Rather than worrying about how both legs will move, let's concentrate on just one leg for now. In fact, turn all other layers off (for now) so the only thing on your stage is one leg of your character.

For this example, I chose my "Mudbubble Boy" character because his leg is made up of three different symbols—an upper thigh, a lower leg, and a sneaker. This is a straightforward setup with enough flexibility for a simple walkcycle. The animation technique for this walkcycle is frame-by-frame animation.

This technique was chosen because it allows me more control over the position of each leg symbol. Classic tweening could be used as well here, but often it becomes more difficult keeping each separate symbol aligned with each other throughout the tweens.

The animation technique for the "Mudbubble Boy" walkcycle is frame-by-frame animation.

Frame-by-Frame Animation

Why do frame-by-frame animation when it clearly takes longer than tweening? Sometimes, a character must move in ways that tweening won't solve. An animation may need something more involved, more advanced, something that requires every frame to literally be re-drawn by hand. Sound crazy? Consider the fact that this is how traditional animation has been made since animation was invented. Computer animation and Flash are simply tools that makes the whole process a lot easier, faster, and more accessible.

You can choose to add to your character's walkcycle animation by adding some motion to its head and body. Although this is not necessary, it comes down to personal preference and your individual animation style.

Let's take a look at why I chose frame-by-frame animation for Mudbubble Boy, starting with the feet. In the image below, look at the four keyframes used. In the first, the foot is flat on the ground. In the second, only the toe is on the ground. In the third keyframe, notice the leg is completely off the ground and in its most rearward position. Finally, in the fourth keyframe, the leg is in its most forward position off the ground.

Four walking feet

I used the Free Transform tool to rotate each leg symbol until they were in the desired positions.

The leg is rotated. Notice the center of rotation if near the top of the leg.

Notice that I didn't use the same sneaker for every frame. Depending on the position of the leg, I duplicated the original symbol, gave it a new name, and edited its shape to reflect the new position. This is the type of detail I love to add to my animations and I really feel, as subtle as it may be, it adds a lot to the overall look and feel of the character's movements.

Right-click (Control-click on a Mac) to quickly duplicate a selected symbol.

Below are the four different sneakers I created for the "Mudbubble Boy" walkcycle. You may want to create more or less depending on your preferred level of detail:

Here, all the feet touch the ground at the same level, no matter what walking position they are in.

Use a horizontal guide as reference for where the sneaker will come in contact with the ground or floor. This will help you keep the foot on a level plane and prevent it from "drifting" out of alignment with the rest of the body.

Now you are ready to animate your "in-between" keyframes. Turn on the Onion Skin feature and adjust the playhead brackets so you can use your established leg positions as references.

Adjustable brackets indicate the beginning and end of the Onion Skin.

Create keyframes across all layers that contain your leg symbols. Use the Free Transform tool to rotate and move each leg symbol into an intermediate position relative to the keyframes you already created.

Notice the angle of the box around the foot used for rotation.

The more frames you insert between movements, the slower the animation will be.

The Free Transform tool is used here to rotate the leg.

Fewer frames between keyframes will create a quicker animation.

Feel free to experiment with the amount of frames between each of your leg positions. You can have more frames for when the foot is sliding back along the ground (so it travels slower) and fewer frames while the leg is off the ground (so it travels quicker), returning it quickly to its initial position. This can create the illusion that the character is heavy, or perhaps carrying something heavy. Or you can you do the opposite and have the foot slide quickly across the ground and slower when off the heel.

Play back your animation constantly so you can get real-time visual feedback as to your process. This type of animation work is trial-and-error and depends on your personal animation style to get the walkcycle to look and feel good to you. Don't get frustrated, it simply takes practice!

Sometimes, it helps to not think of the leg as an actual body-part leg. Try to imagine it's not a leg at all, but some kind of mechanical assembly like a basic pulley or lever system. This thought process can make animating less daunting—and a lot more fun.

Take a look at the leg simulation animation that follows. This SWF contains an example of a walkcycle experiment. I made it to show how a walkcycle can be thought of in mechanical terms. It was a fun experiment because it removed the negative stigma often associated with the level of difficulty in animating a walkcycle.

Click here to see an example of a walkcycle.

Once you are finished creating enough keyframes and leg positions, and you are satisfied with the movement of your leg, we can now move on to the other leg. Remember when I said you were halfway done? Well, you are!

Since you already animated one leg, there is no reason to start from scratch with the second leg (unless the other leg is designed differently). So therefore, delete the other leg entirely from the stage. Seriously, go ahead and delete it. We don't need it anymore. Trust me.

Select all the frames and layers of your leg animation. Right-click (PC) or Control-click (Mac) over the highlighted area and select "Copy Frames."

Create a new layer or use the empty layer that your old leg symbol was in and "Paste Frames" (Ctrl+Alt+V on a PC, Command+Option+V on a Mac). "Paste Frames" contains your animated leg.

You should now have the same animated leg duplicated in your timeline.

The only problem is, both legs are now moving in the same direction at the same time. You can solve this problem by selecting the first half of the frames and layers that you just pasted.

Select the first half.

Now, click and drag the entire section of highlighted frames down the timeline and place them after the latter half of the animation. Click and drag the entire range of frames and layers to the left until they start on frame 1.

Then eliminate the residual frames by selecting them and removing them.

Removing the frames

Play back your animation to see your character walk!

That's great—but we're not done with the legs just yet. Turn on Edit Multiple Frames.

Edit Multiple Frames is to the right of the Onion Skin Outlines button.

Lock all layers except for the layers containing the leg behind the front leg. Move the playhead markers so that they span the entire length of your timeline. Click on the stage and Select All (Ctrl/Command+A). Use the Selection tool and click once on any of the selected leg symbols.

All the layers here are locked except for the layer that contains the one leg behind the front leg.

Using the Properties Inspector, apply a Tint to the leg symbols using black with approximately 30 percent strength.

Tint gives the illusion the back leg is in shadow and pushes it back away from the front leg.

With Edit Multiple Frames still turned on, nudge the entire back leg animation up and to the right with the arrow keys. This will create some space between the legs and return the perspective to the original view. When you are done, remember to turn off Edit Multiple Frames.

Next, you can animate the arms. Convert all layers into outlines except for the arm/hand layers. This is just to help make things less complicated, visually.

Convert all layers into outlines.

Animating the Arm

The process of animating the arm and hands is pretty straightforward. You can continue to use frame-by-frame animation or tweens depending on your needs.

If you study yourself walking around, you'll notice how your arms move relative to your legs. Apply this knowledge to your animation so it emulates what you have study from real life.

As we did with the leg animations, just animate one of your character's arms and then copy and paste its frames into a new layer to achieve the second arm. Highlight the first half of the arm/hand animation, then click and drag the entire section of highlighted frames down the timeline and place them after the latter half of the animation. Move the group of frames back into place so that the animation starts again on frame one, and remove the residual frames that are left behind. Exactly like the legs!

Turn on Edit Multiple Frames again to apply the same Tint to your arm/hand animation and use the arrow keys to nudge it into its appropriate position.

Feel free to add more motion to your character than this.

Click here to view a walking "Mudbubble Boy."

Now that you've read about frame-by-frame animation, check out the following video tutorial on editing multiple frames:

Running Time: 3:15 Read the Transcript

More on Walkcycle Animation

Remember Jimmy from Lesson One?

Jimmy is an interactive Flash character featured at Global Protection Corp: www.globalprotection.com.

As you can see, Jimmy is made of rubber. At least, he's supposed to represent a character made of rubber, a condom. This posed a challenge in the way his body would react to the effects of gravity.

If you visit the site, you'll notice that Jimmy is an integral part of the site, featured on almost every page. You may also notice that most of the time he is walking in place on a treadmill. Knowing that his walkcycle was going to be the primary animation on the site, I realized that spending the extra effort to get the walkcycle just right was very important. The more time spent here the better, as I knew this specific animation would be re-used over and over for each section of the site.

So where do you start when you need to animate a rubber condom walking on a treadmill? Ahhh, welcome to the wonderful world of animation. You just never know what kinds of images you will be asked to create.

Brush Tool and Onion Skin

As you've learned from Mudbubble Boy, before you run you must walk. And before you create a walkcycle—sketch it first.

Let's use Jimmy as an example. I used the Brush tool and onion skinning to roughly sketch each frame of the cycle. I knew that Jimmy's body needed to have the same physical characteristics as rubber.

I first had to envision how much flexibility he would need. Once I had a pretty good idea as how his body would react when running, I quickly sketched each frame in Flash. With Onion Skin, I was able to use the previous frame as a reference guide as I drew each new position.

Click here or on the image for the animation of my preliminary sketches.

You can see how I started with the basic shape of Jimmy's body. Keeping it simple initially is always a good idea. I broke Jimmy down into two basic shapes, his tubular body and the little nub at the top. I envisioned this nub to have a bit more weight than it normally would have for exaggeration purposes to emphasize the flexibility of the character.

Next I drew reference lines for where the face would be on the surface of the body. I used horizontal and vertical lines that intersected between where the eyes would be.

Click here or on the image for the animation with reference lines.

Below is the finished animated sketch of Jimmy's walkcycle. Notice I used different colors to represent different parts of his body. This is simply a visual aid that helps me discern between different sections of his body.

Click here or on the image for the final animated sketch.

The most popular question I am asked by other animators is how I get my walkcycles to be so smooth. The answer is simply trial and error and a lot of walking in place in my own studio and in front of a mirror so I can study my own movements. I often draw several leg and foot positions and frequently play back my animation to test the movement. It almost always comes down to editing each leg and foot position and its timing. Sometimes it requires deleting frames from certain positions and adding additional leg positions in other areas to get the overall movement correct. I have included two reference images below that show a typical walkcycle and runcycle. I highly recommend importing these into Flash and using them as guides to animate your character with.

The next step, once I was happy with the sketched-out walkcycle, was to start the clean-up process. For this character I used the Brush tool to draw the black outlines, and then used the Paint Bucket tool for the fills. Onion Skin was used a lot here so I could use previous and future frames for reference. I spent a lot of time on this part of the animation as well. I really wanted the animation to be convincing, especially knowing that it was going to be the focal point of the site, repeated over and over.

I took a lot of care turning my sketch into the real character drawing.

As a finishing touch, I added some small speed lines to a couple of frames when Jimmy's nub whips from side to side. This helps exaggerate the nub's movement and makes for an even more convincing animation.

Ready for the final walkcycle animation?

Click here or on the image to see Jimmy's finished walkcycle.

To ensure a smooth looping walkcycle, make sure you have no unnecessary frames in your walkcycle timeline. Most importantly, copy the first frames of your walkcycle and paste them into the frame just after the last frame of your walkcycle. This way you can use the last keyframes as reference when positioning your final body parts. Just remember to delete the last "reference" keyframes you copied from frame 1 when you are finished. If you don't delete them, the animation will appear to stutter for a moment every time the playhead hits the last frame and first frame back-to-back while it's looping.

Walking Around

For the Global Protection Web site, Jimmy's walkcycle was placed into a Movie Clip symbol so he could be dynamically controlled depending on the user's input. Jimmy does a lot of walking throughout all sections of the Web site. Making Jimmy walk across the stage is now a piece of cake. Since his walkcycle is inside a symbol as a loop, all we need to do is tween the symbol.

If your character does not need to be controlled via ActionScript, then a Graphic symbol will be fine for this lesson. As you know, the Graphic behavior allows for the symbol to play in sync with the main timeline while in the Flash authoring environment. Movie Clip symbols are dynamic and will only play beyond their first frame when testing the movie and after they have been exported as a SWF file.

Once your walkcycle is complete, a simple classic tween on the symbol will move your character across the stage and loop the walking motion.

Drag an instance of the symbol containing the walkcycle loop to the stage. Create a second keyframe anywhere down the timeline as shown above.

Now simply select the instance in your second keyframe and use the arrow key to move him over to the other side of the stage (hold down Shift to advance 10 pixels at a time instead of just one). Then right-click (or Command-click on a Mac) over your frames and apply a classic tween.

Applying this tween is no different than the basic circle tween from Lesson Two, just with a more complex symbol.

With your tween in place, watch your character walk across the stage. What we did here was simply animate a movie. Instead of trying to keep all layers and keyframes on the main timeline (copying all frames, and pasting them continuously, while nudging the character from one side to the other) we took advantage of Flash's ability to "nest" animations and saved ourselves a lot of trouble.

Most likely you will have to increase or decrease the number of frames in the tween if your character's feet appear to be slipping. But with some minor adjustments to the number of frames, you'll soon find the appropriate length for your tween so that the feet look like they are truly gripping the surface.

If you like, try scaling down the walkcycle instance in your first keyframe to make it appear to be farther away in the distance. As you playback the animation your character will walk and scale larger as it reaches its end position. This effect can be further enhanced if you apply a little "easing in" to the first keyframe so the character starts slowly and gradually increases speed.

Click here or on the image for the final walk animation.

Exercise 3 Excerpt

Don't be intimidated by the process. Just dive in and allow yourself to make mistakes. Most of my own learning has come from failed attempts (or what you might call initial designs that needed to be reworked).

2.5D Effect

Spend some time reviewing the lesson steps for my boy animation if you run into any trouble moving into 2.5D. Here are the basic steps:

	Convert all parts of your character to symbols and distribute them to individual layers (you should have this part done already). Create additional keyframes and begin to "wrap" facial objects around the head. Add new objects as necessary if other features will "show" when the head turns (like the second ear in my example). Apply classic tweens and tweak your symbols with the Free Transform tool. Apply easing in and out.

Don't worry if your character's head position is not 3/4 view like my boy character. You can still create the 2.5D effect with a straight view as well. In fact, it's often better to start with this view.

You can create a new FLA file for this exercise. I highly recommend creating additional copies of your file in case one becomes corrupt or inadvertently deleted. At the start of each day, the first thing I do after opening my project file is to do a "Save As" with a new name. I will always name the file the same but add the date to the end of it. For example: "myFlashFile_082509.fla" is the file I edited on August 25th, 2009. In the event this file becomes corrupt or accidentally deleted, I can always open up the previous version and continue working again.

Of course nothing beats daily back-ups to either a back-up hard drive or CD. The last thing I do at the end of the work day is to back up everything to my dedicated external hard drive. This is especially important when creating client projects.

Watch my final 2.5D animation again if you need inspiration.

Walkcycle Animation

This, I admit, is not easy to do. Walkcycles come in a variety of forms and styles. Some are full motion frame-by-frame animations that take a very long time to master, as others are simple 3-5 frame animations that are choppy and crude at best. This does not mean one is better than the other. It depends on the style of the artist. Rocky & Bullwinkle used what is referred to as "limited animation." Limited animation is defined as is a process of making animated cartoons that does not follow a realistic approach. Click here for more information about limited animation.

1. Try to imagine how your character would walk. Picture it in your head. Study a friend's walk if you need to, and sketch it on paper. Animators commonly study real-life motion to learn how certain things move and react to gravity.

2. Apply this knowledge to your character by creating an "animatic" of your walkcycle. Loosely sketch your walkcycle while playing it back frequently to get a feel for what works and what doesn't. You can decide how limited or how realistic your walkcycle will be. Keep in mind, if the overall style of your character is simple (limited), then a very realistic walkcycle may not look right. If your character has realistic features, then limited walk cycle won't look right either. The style of animation should match the style in which you designed your character.

3. After creating your walkcycle, make the entire cycle a Graphic symbol and create a tween of the symbol "walking" across the stage.

Exercise 6 Excerpt

Project Brief: Your Movie, Part II

For the final exercise, you will start by polishing your animatic.

Using your storyboard as your guide, bring all of your existing character assets into your Flash file. Do this by selecting all frames across all layers (click and drag, highlighting them all in black) and going to Edit > Timeline > Copy Frames. Or right-click (Ctrl-click on a Mac) over the selected frames and select "Copy Frames." Then, open your new Flash document and select the first frame. Go to Edit > Timeline > Paste Frames or right-click over frame 1 and select "Paste Frames." You may need to create backgrounds, props, and various other graphics as well. Here are some tips for these additional components:

	Make all of your props and graphics into Graphic symbols. Keep the drawing style of your other elements consistent with your character design. Remember to make the background much larger than the stage if you will be panning and/or zooming the "camera." Make a back-up of your file frequently. I have seen too many wonderful Flash movies become lost due to a system crash or other technical mishaps.

Remember, you now have several animation techniques you can use in your movie. You also have learned lots of cool workflow tips and tricks that professional animators use. Try to include at least one of the techniques from Lesson Six in your final movie.

Here are some general steps I follow when finalizing an animation:

	1. "Block" in your entire animation first. The term blocking refers to building each shot in a general fashion by adding the main components such as backgrounds and characters. 2. Next, add all your character animation such as gestures and walkcycles. 3. Then add the details, such as blinks and lip syncing (if any). 4. Any additional visual effects should be added at this time.

Throughout the process, I frequently play back the animation as I work, getting a real-time feel for its pacing and rhythm.

So now you've got my favorite tips and some good experience under your belt—time to make that movie. Good luck!