In FLASH

Ride Like The Wind

General Stickman Tutorial

Contents

• Introduction
• Setting up your workspace
• Drawing your stickman - Tween
• Animating your stickman - Tween
• Additional effects

Introduction Top

In this tutorial I'll share some of my personal techniques for both drawing and working with stickmen, and some general tips when working in Flash.  Also included is how to tween your character and when and why to work with frame by frame animation. Whenever there's a hotkey available I'll be sure to write these out as they speed up your workflow significantly. I used Windows and Flash CS3 for this tutorial, so if you're an OS X user you'd have to find the hotkeys on your own.

Setting up your workspace Top

Start Flash and make a new document (Ctrl+N). Set your document properties to your preferred ones. I have my default properties as specified below.

By upping the default frame rate from 12 to 23.96 you will be able to have a smoother result while tweening, and still be able to do double framing, more on that later. You may wonder why I use 23.96 fps and not 24. That is because whenever the playtime of a movie gets above a specific amount of minutes, sound synchronizing issues may arise. This is a known bug in any current Flash version but will be fixed by this custom frame rate.

Drawing your stickman - Tween Top

In this first example we'll make a shape tween friendly stickman. Final result here. I assume you know what tweens are. If not, you may want to look it up before trying this. Use the line tool (N) and draw the first leg in the empty layer. Be sure to set the thickness to 20. By holding (G) on your keyboard while you draw, you can temporarily disable the snap function. This can be very useful.

When done, select the leg by double clicking it with the selection tool (V), and convert it to a graphic symbol (F8 or Modify > Convert to Symbol).

Edit the new symbol by double clicking it on the main stage, or double click it inside your library. While inside the symbol, rename your layer Leg02, and then make five new layers and name as the specific body parts they will contain:

In each layer, draw that individual part of the body. To make sure the points snap as where they should since the line tool may not always be perfect, you can draw the line just right to where it should be, and then use the selection tool (V) to manually drag it to place.

You can adjust the line by using the selection tool. To manually add joints to a straight line, you can with the selection tool in use, hold down ctrl on your keyboard, and then click-drag the mouse a bit to where the new joint should be. You may follow your own choice of style, but my stickmen always have a joint for a knee, and a joint where the foot starts. Your progress of drawing the stickman could look something like this:

To make the fingers, make two additional layers for each hand, and draw the fingers using the line tool with 6 in thickness. I usually start out with the thumb and then just draw the other fingers in my desired posture. It's just lines on the end of the arm, but gives a fairly good illusion of a hand. Go to the other new layer and draw that hand as well. Remember that you can use multiple lines to create a finger, just make it look good. Name these new layers Fingers01 and Fingers02.

 

Animating your stickman - Tween Top

Now it's time to actually animate the character! To do this, we'll need to set which limbs should be either motion tweens or shape tweens. Click and hold the mouse at the very top frame, and drag the mouse down to select both layers' frames. A handy technique to select multiple layers' frames.

With the frames highlighted, right click and choose "Create Motion Tween". Do the same for the head, creating tweeens will work when selecting single frames as well. The remaining layers should be set to shape tween. Instead of drag selecting, you can click and then hold shift and click again on a frame below to make the selection. When done – drag select down from top to bottom on frame 5 in the timeline, and press (F6) to make these frames key-frames.

Any limb moved on this frame will make the animation go from the original pose to your new desired one. Let's play around with it. I make two new poses – at frame 5 our character will prepare for the punch, and on frame 10 the arm is reached out to the final pose.

Press (Enter) to watch your animation. The first thing you most probably will notice is how many of the limbs seems to flip in an undesired way. This is because Flash does not know how you want your shape tween to behave. To solve this you will have to add something called Shape Hints. Just like the name suggests, they are small hints placed on your tween, a limb from our character in this case, to make it act in a way you prefer. To add a shape hint, go to the very first frame in the timeline and select the limb by double clicking it, then hit (Ctrl+Shift+H) on your keyboard. A small red dot labeled "a" should appear. If not, restart Flash and try again - Shape hints have been buggy in every Flash version I've used since Flash 5. Once you get them appear they should work fine though.

Place the red dot in the edge of your limb by dragging it there, make sure you have snap enabled. Using the comma and dot keys (,.) on your keyboard, make your way forward in the timeline to frame 5, the pose has changed and your shape hint will need to follow. Drag it to the same edge of the limb in the new pose. Play your animation (Enter) and you'll notice the limb will no longer flip. Now apply hints to all the flipping limbs and your animation should be final. Yellow hints are successfully placed hints. These hints will appear green in the final frame of the tween. Once you're happy with your stick animation, return to the main stage by double clicking anywhere outside the stick, or click the "Scene 1"  link right under your timeline.

Additional effects Top

Sometimes adding additional animation on the main stage is necessary. For example if we had made a walking loop, you'd have to tween the stickman across the main stage for him to actually move or he'd just be there sliding his feet. In this case we don't need to add any main stage animation - but there's still some adjustments to make. First off, you probably want to shrink your stick making him fit on your stage. Hit your stick with the selection tool (V) to select him, and then use the free transform tool (Q) - drag in any of the bounding box's corner to shrink the stick. Holding shift meanwhile will make you scale uniformly.

Now, make sure you add sufficient frames on the main stage's timeline. Our character's animation have a total of 10 frames, click frame 10 on the timeline, and hit (F5) to make an empty frame. Press (Enter) to test.

You might want to add some effects to your character, like lightning effects. I always do this on my characters to give them some appearance of depth. Copy your stick figure(Ctrl+C) and make a new layer on your main timeline.

Drag the new layer so it is underneath your original one and paste in place (Ctrl+Shift+V). Name your layers "Man" and "Man Tint", then lock your top (Man) layer. Select your stickfigure, a fast way is just to hit (Ctrl+A), which will select everything unlocked on stage - in this case just our stickman. Now, nudge your stick using the arrow keys on your keyboard just a small bit up and to the left. I hit up and left two times each at original zoom(100%). Now make sure your character is selected, and in the properties panel locate the "Color:" rolldown menu, and select Tint.

You can play around with the settings, they will vary depending on your scene. I choosed white with a 50% alpha applied. Your stick man should now have some lightning effects! You could also choose to add a dynamic shadow. To do so, create yet another layer and name it "Man Shadow". Paste your stickman in it yet again and scale him (Q) by dragging the top-middle square down below your character. Make sure to hold (Alt), and the stick figure will scale based on the bottom axis.

This will flip your symbol and give the shadow effect. Next up is to simply tint the shadow in your desired color, usually something dark. Keep in mind a recommendation of mine - if you choose a pure black and apply alpha on it, your shadow will get some (usually) undesired effects. This is because your overlapping limbs inside the graphics symbol. It can be avoided by converting every lines to fills and copy paste them into the same layer, then repeated on every frame of the character animation - a slow and tedious process.

That's it for the tweening part. Read on below for frame by frame animation on sticks. (Coming soon).

By Oscar Johansson Sep 09 - 2009