In this tutorial we’ll see how we can create a caricature, split it into different layers then arrange the pieces properly as graphic symbols. Finally we’ll look at how easily we can smoothly animate the caricature by using motion tweens. This is a lengthy tutorial, so let’s get started!

Final Result

Let’s take a quick look at the effect we’re aiming to achieve with this tut:

Step 1:

Begin with the caricature design. I designed a very simple caricature, though I still kept it stylized. The best way to brainstorm is through scribbling. I made a rough sketch and scanned the image.

Step 2:

Now open Flash and begin a new flash file. Make the stage size: 720px X 576px, Frame Rate: 25 fps and Background Color: White. This settings are such because we’re making the animation at broadcast level.

Step 3:

Import the scanned image to the default layer by going to File > Import > Import to Stage.

Step 4:

Now scale the image to fit to the stage. Name the layer containing the image "Ref image" and lock it.

Step 5:

Make a new layer. Draw the caricature’s shape piece by piece, following the Ref image underneath. If you want, you can further beautify and stylize your drawing, more so than the rough sketch.

Step 6:

Draw each part of the caricature on a different layer and keep naming them. Drawing body parts in separate layers will give scope for more detailed animation by animating individual parts. Naming them properly will help you find the desired layer easily. It’s also very important for projects where many people work on the same file.

Step 7:

Having drawn the face and torso it appears that this whole part would act as a single body-part (of course! How else should a fat man move?). Now in the Timeline, select the frame of the top layer, then hold "shift" and select the frame in bottom layer. In doing this, you’ll select all the frames of all layers. Now right-click on the selected area of timeline. Many options will appear. Select "Copy Frames".

Step 8:

Now press "Ctrl+F8" or go to Insert > Create New Symbol. This will open up a dialog box. Type "body n face" as name and select symbol type as Graphic. Now click OK.

Step 9:

A symbol will appear in the library and instantly the timeline view will shift into the empty Graphic symbol, instead of the whole scene. Again right-click on the first frame of the empty layer and select "Paste Frames" from the options. All copied frames will appear inside the symbol maintaining their layer order and layer names.

Step 10:

Now come back to the scene view, by clicking on "Scene 1" in the Edit bar.

Step 11:

Create a new layer on top of all existing layers, then drag and drop the symbol onto that layer. Now view the layer in outline mode. Align the symbol in the same position as it’s viewed through the other layers.

Step 12:

Rename the layer to match the symbol name and delete the other layers which have already been copied into the symbol. This way, the layers in timeline do not pile up and it creates a proper hierarchy.

Step 13:

Draw the hand by referring to the image. Make it in two layers at first. In one, make the hand up to wrist. In the second layer, make rest of the hand (suited part). Just make sure that these two layers are overlapping. This will help while animating these.

Step 14:

Now, think of how our arm moves while we walk; it bends at the elbow. So we also need to break the hand part from elbow. Create a new layer. Select and right-click on the frame where you’ve drawn. Copy that frame. Create a new layer and paste the frame on that new layer.

Step 15:

Now lock all layers apart from the uppermost. Drag your mouse cursor from the lower side of the screen and select the lower portion of the shape (just be sure that selection covers slightly less than the imaginary elbow region). This extra area will be for overlapping. Now press "delete" and delete the selection. The remaining part makes up the upper hand.

Step 16:

Select the shape and then select Modify > Convert to Symbol or press "F8". In the dialog box type "up hand" as name and select symbol type as Graphic. Now click OK. This creates the upper hand. Converting shapes to symbols is extremely important for using them in motion-tween. Rename the layer same as the symbol, then double-click the symbol, go inside it and you’ll find the layer inside. It will have the default name of "Layer 1", so rename it.

Step 17:

Lock the "up hand" layer and switch to outline mode. Unlock the layer below. Drag your mouse cursor from upper side of the screen and select the upper portion of the shape, ensuring that selection covers a small area of the upper layer, visible as outline. Again, delete the selection.

Step 18:

Convert the shape to a Graphic symbol and name it "low hand". Npw perform all renaming processes as you have previously. Make it a habit to rename symbols and layers accordingly. Once finished, revert "up hand" layer to its normal view mode.

Step 19:

Lock other layers and then make the wrist piece a symbol. Name it "wrist".

Step 20:

Make a new layer and draw the leg area (not including the shoe), overlapping the body and shoe areas.

Step 21:

In another new layer, draw the shoe.

Step 22:

Divide the leg layer into two parts, overlapping the knee region, as you did for the hand. Convert all parts into symbols and name them "low leg" and "up leg". Also rename the layers.

Step 23:

Divide the shoe by splitting it vertically in two parts, one towards the heel, another towards the toe. Make them symbols as well. Name them "shoe heel" and "shoe toe".

Step 24:

Now arrange the layers by pulling the leg and shoe layers down below the "body n face" layer. Switch visibility on for all layers. See? Your caricature is ready, though he looks a bit out of proportion.

Step 25:

This is the last point at which you can still modify your design. Squeeze it a bit horizontally and scale the shoe and legs however you want. Finally when you are done, right-click the "ref image" layer and select "guide". "Ref image" will no longer render when you preview or export the movie. You can even switch off the visibility if you want.

Step 26:

Now it’s time for positioning the pivots. We know our hands, legs and body move around some fixed joints in our skeleton. Those points are found by our shoulders, knees, elbows, hips and neck. So even in this caricature you need to recreate those joint positions to give the caricature natural movement.

Step 27:

Select the transform tool and then one by one, select every symbol in scene view. The default pivot position will be center, so move the pivot (the circle) to the proper pivot area of the caricature. For guidance, see the image below.

Step 28:

Before you start animation, some more nesting will be necessary. It looks like there are too many layers to animate and they’ll be difficult to handle all at once. Select "wrist", "low hand" and "up hand" together (Ctrl + Click), then right-click on the frame and "Copy Frame". Make a new symbol, name it "right hand" and put the layers into that. Create a new layer and place this new symbol properly, renaming the layer accordingly. Delete the old layers.

Step 29:

Repeat the same process, this time making a symbol "right leg", combining "up leg" and "low leg". The layers "shoe heel" and "shoe toe" should also be put inside this symbol, but just skip it for now. You’ll find there’s been a mistake..

Step 30:

Now you’ve found the mistake! No problem. Select the layers and choose "Copy frame". From the library, double-click on the "right leg" symbol to bring the symbol view up. Create a new layer at the top, right-click on the frame and then click on "Paste frames". That’s it! The error has been rectified, proving that this arrangement is easily alterable at any time. Finally, delete the extra shoe layers from scene view.

Step 31:

You have a right leg, but also need a left leg. Select the symbol "right leg", right-click, then from the options select "Duplicate". When the dialog box appears, name the duplicate "left leg".

Step 32:

Create a layer under "right leg", drag & drop the new symbol and place it properly.

Step 33:

Similarly, create the left hand of the caricature and place the layer at the bottom. Visually, the left hand will be behind everything. To place the symbol accurately, switch the layer visibility to outline mode.

Step 34:

Before you start to animate, you’ll have to keep in mind the major poses of walking. See the figure below; those are key poses, also known as "extremes". First you need to make key frames with those poses, then by refining the in-between frames the result will be achieved.

Step 35:

You need a ground plane reference to see whether the foot is properly touching the ground. So take a new layer underneath of all layers. Draw a horizontal line and place that just below the foot. Lock the layer.

Step 36:

Double-click the caricature’s right leg to go inside the "right leg" symbol. Now position the leg by rotating and moving (not scaling) the leg parts. Make it look like the image below. One additional tip here: naturally, if our right leg moves forward, our right hand comes backward.

Step 37:

Now return to the scene and enter the "left leg" symbol. Pose the leg as desired.

Step 38:

Similarly, pose the right hand.

Step 39:

Pose the left hand. Here, as it’s at the back of everything, it’ll be necessary to switch to outline mode.

Step 40:

The first key pose is done. You’ll have to make three more key poses to complete the walk cycle. Let’s decide that the interval (time gap) between every two key poses is 8 frames. The next key pose should therefore appear at frame 9. Drag-select all the layers at frame 9. Then press "F6" to make a key frame for "right leg".

Step 41:

Now pose the "right leg" for the second key pose. Then pose all other parts one by one, just as you did for the first key pose. Once finished, you’re done with the second key pose!

Step 42:

You won’t be able to see the new key pose in scene view, as the main (parent) layers have only one frame. Let’s extend it till frame 32. The logic behind this is clear; eight frames for each pose (4 X 8 = 32). Then on frame 9, you can see the pose. Drag-select all keyframes at frame 32 and press "F5". This will create a frame (not keyframe) and extend the animation upto frame 32.

Step 43:

Pose the caricature on frame 17 and frame 25. Create keyframes at frame 33, then copy the frames from frame 1 and paste them there. We want the animation to be looped and after frame 32, frame 1 should come back again. That’s it. Your keypose animation is done. See it yourself by pressing "Ctrl + Enter".

Step 44:

The animation is not at all smooth. We need a smooth animation. So again, enter each main symbol where you’ve put keyframes and animated them. Drag-select all the frames. Open properties tab and change the Tween type from "none" to "motion". All frames will turn light purple and arrows pointing from keyframe to keyframe. Do this for all parts.

Step 45:

Press "Ctrl + Enter" and check the preview. Now you can see that the caricature is walking smoothly, but there are lots of errors. Joints are not following each other, so each moving part is almost floating independently. Mind you, they’re not far away from their proper positions. Now we need to fix those things step by step.

Step 46:

Let’s sort that out then. This process is called "in-between". Put a keyframe between two keyframes, more specially where the parts are too far away from each other. Sometimes you never need to use in-between, as the parts move exactly as you prefer them to. In some cases, you may need to tweak almost every frame.

Let’s check the "right leg’s" tween. At frame 5, the parts are really far away from each other. Press "F6", selecting all the frames. Now keep tweaking, till the pose is as it should be. Make sure that you’ve overlapped joints nicely so that bare edges are not visible.

Step 47:

Scrub through the animation. There are still many frames where the edges come out of joint. Make keyframes, tweak and fix those. Do this for each part. This may take some time and patience will be needed. Once it’s done, preview the animation.

Step 48:

Now the hand and leg movements are correct, but the body seems stiff. You also need to give some movement to the body and the same should apply to the hands. Otherwise the shoulder won’t be in place. Select layers "body n face" and "right hand", copy frames, make a new symbol "body movement" and paste those inside that. Now put the result in place of the two layers, as you did many times earlier. We’re excluding "left hand" because that layer is rarely visible.

Step 49:

Create keyframes on the same frames as the keyposes. Place the pivot of this new symbol at the same place as you did for the torso. Before you start animating, remember that when we stretch our legs forward our torso also leans forward. When we take one leg up from ground, our body bends backward. This is how we balance while walking.

Step 50:

Pose the torso by rotating the symbol, then add motion tween to the frames. One additional tip here: you can make use of the transform tab to view, set and alter the rotation value.

Step 51:

Check the preview and tweak values if necessary.

Step 52:

To further fine tune the animation, strech the torso down a little and move it up a little in other poses (leg-up position). This will add more dynamics to the walk. Check the preview; your loopable animation is ready.

Step 53:

Now select all caricature layers, make them a single symbol and therefore also a single layer. Name them "Mr. Smart".

Step 54:

Hide the "roadline" layer and make it a guide. Design a background to make the scene look more attractive; I’ve created a simple background in my animation file.

Step 55:

Currently, Mr. Smart is walking, but doesn’t move from one place to another. Even that can also be easily done. At the first frame, move and position the caricature to the left, outside of the stage. Extend the animation duration to frame 96. At frame 96, press "F6" and make it a keyframe. At this frame move the caricature horizontally to the right side, again off the stage. Add motion-tween to the layer.

Step 56:

Check the preview of the final animation!

Thanks for following this tutorial, I hope you learned something valuable!