Jointed Characters in Flash: The Wolfman

Time for a Flash tutorial to show how to make a jointed character using nested symbols. Anti-Valentine’s day flick “The Wolfman” was released this past weekend and I gotta say it was pretty fun. Our canine friend will assist us in this endeavor.

Here is the imagery we’re going to animate. Start in Photoshop and make sure you Right click this layer in the Layers Panel and duplicate so we have a spare image we’ll need later.

The next thing we need to do is clone away some of the Wolfman because as his arms move, there needs to be a background behind them, obviously. With the Opacity and Flow set at 35%, Hold Alt with the Clone Stamp Tool and take a sample of the background. Paint in the arms and legs to fade them away.

Here’s the arm cloned away using the fog in the background.

Go up to File>Save for Web and save the finished background for later use.

Go back to the uncloned file to cut out some of the body parts we’re going to use later in Flash. We’re still in Photoshop though, so use the Polygonal Lasso Tool to trace around the torso and head of the Wolfman.

Ctrl+C (Copy)and Ctrl+V (Paste) and now you have the torso sitting in its own layer. Do the same thing with the upper and lower arm pieces.

Marquee select each individual piece and go to the top menu: Image>Crop. And File>Save As… a PNG file format. I’m suggesting png because they support transparency and shake hands with Flash well.

Now it’s time to open Flash. At the bottom check out the Properties. You can bump up the Framerate to 30. This will make the animation much smoother.

Double click “Layer 1” and rename it to “background”. Press Ctrl+R to import the background image file you saved earlier. Now click the New Layer button on the left and name it “Wolfman”. This is where we’re going to build our character.

Ctrl+R to import the main body torso png file to the stage.

Press F8 to “Convert to Symbol”. Name it something like “main_body”. This is the symbol that’s going to house all the rest of the body parts.

Ok now on the stage, double click on the main_body symbol. We’re going to be “inside it”. This is where we’re going to build the arms. We’re building them inside because we want the arms to move along with the main_body if we decide to move the whole figure around. Ctrl+R and import the upper right arm. F8 to convert it to a symbol. I named it right_arm_root because it’s going to be the shoulder joint that roots the rest of the arm. At this point we’re a symbol inside a symbol. right_arm_root is inside main_body. Double click the right_arm_root now and go inside this one!

In attempt to clarify this we’re going to make 2 layers inside right_arm_root. To go outside a level click that arrow that’s pointing to the left beside the symbol names.

1 for the upper arm, and another for the forearm. For posterity go ahead and make the upper arm a new symbol called right_arm_top.

Create a new layer then Ctrl+R import the right forearm hand and turn it into a symbol.

Click on the free transform tool. This will allow you to rotate and scale objects. It should also show you the anchor point of the symbol that’s selected. It should be a white dot in the middle of the symbol. If you rotate the forearm in it’s current position, it will just spin like a top. But if you drag the anchor towards the elbow, the forearm should rotate properly at the elbow.

Go to the timeline and click around the 60 mark. Hold shift and click below it and you’ll have both layers selected at the 60. Press F6 to add a keyframe and it will drop keys on both layer timelines.

Now go to the 30 mark and hit F6 for another keyframe on the forearm timeline. This is where we’re going to animate. With the Free Transform, rotate the arm inwards.

Click anywhere in between 1 and 30 and right-click for the drop down menu to “Create Motion Tween”. Do the same thing in between the 30 and the 60.

Go to the top menu and navigate File>Publish Preview and know the Wolfman should be doing the robot.

Click the arrow that’s pointing left to get out of the current symbol. Instead of manipulating the forearm you should be clicking on the entire armroot. Make some keyframes from 1-60 the same way you did the forearm. But instead of rotating, this time, nudge the arm up a few pixels at the 30 mark.

This should simulate a shoulder shrug. You’ll notice that due to our symbol hierarchy that the entire arm shrugs up with the shoulder as it animates.

Now repeat the entire right arm process with the left arm! Ah the joys of animation.

Now back all the out of the symbol until you get to the top of the stage. No matter where you put the top level wolfman symbol the animations inside it should be ok. You can animate him left, right, spinning or even his opacity. In this case I just animated a slight up and down to make it look like he’s breathing, ready to chomp you down.

Now you should be able to make a jointed character from nested symbols.

By Mark Rivera

Mark is an animator and ad designer for WebProNews. He has a passion for illustration and 3D art.

Leave a comment