julianna kunstler logo
Flash walk

 

GALLERY

STEPS

In this project you are going to draw a character and you will make it walk.
Something like this:

 

Start with a new project (ActionScript2).

I am going to explain the steps by animating a mannequin.

Draw each body part on a separate layer.

I started with a head.

Make sure you name the layers.

Then, on a separate layer, I added the body.

On a new layer I added the upper part of an arm.

On the next layer - the rest of the arm.

I am not going to add another arm. You know why?
Because I am going to use symbols.

New layer - upper part of leg

New layer - the rest of the leg.

That's it. I am not drawing the other leg.

 

 

 

Next step is to convert all body parts into symbols.

Select a layer. By selecting a layer or a keyframe you automatically select everything that's on this layer at this time.

 

 

Convert to Symbol (F8)

In a popup window type the name of the body part.

Choose Graphic type.

Click OK.

Open Library palette. Your first symbol should be there.

Repeat the steps with the rest of the body parts.

Convert them all into Graphic symbols.

The next step is to convert the entire character into a symbol. And, yes, the mannequin symbol will be consisting of multiple body part symbols.

Here is what you do:

Shift-select all layers. This will select all of the parts.

Convert to Symbol (F8)

... and STOP !!!!

For Symbol type choose: Movie Clip

Click OK.

Movie Clip symbol is a symbol that can have animated parts. While these parts are animated (ex. arms and legs are moving) - you can animate the symbol on the stage (ex. move from right end of stage to the left).

So this is what we are going to do next:

We are going to animate the Movie Clip symbol's parts.

... but first, look at the timeline.

After you converted the multiple Graphic symbols into a single Movie Clip symbol - you have only one object on the stage (Movie Clip symbol). One object requires one layer.

Go ahead and delete all empty layers now.

 

 

 

Next.

To animate parts of a symbol, you need to get into the symbol's timeline. Yes, each symbol has its own timeline in addition to the main timeline.

To get there, all you have to do is to go to the Library and double-click on the Movie Clip symbol.

You are right there!!!!!

Now...

You cannot animate multiple objects on a single layer.

Next step is to distribute all body parts to separate layers.

Click on frame 1 to select all content.

Then go to Modify > Timeline > Distribute to Layers.

Now each body part (each Graphic symbol) is on a separate layer. Each layer is named after this particular body part.

The top layer is empty now. Just delete it.

Before we animate, we need to add 4 more layers below the body layer:

1. another arm top
2. another arm_and_hand
3. another leg top
4. another leg_and_foot

Drag the corresponding Graphic symbols from the Library. Now my mannequin has two arms and legs.

Use Free Transform tool to position the arms and legs as if your character is walking.

While you are working with Free Transform tool - click on each moveable body part (arms and legs).
In the center of each symbol, when selected, you should see a white circle. This is a rotation point.

Grab the rotation point and move it to where the joint would be (usually upper left or right corner of the bounding box)

Select frame 10 at all layers.

Press F6 (insert keyframes)

Select frame 20 at all layers.

Press F6 (insert keyframes)

Your timeline should look like this.

Every time you insert a keyframe - it copies the content of the previous keyframe.

The reason we have 3 keyframes per layer is to animate a complete movement:

Start point - End movement - back to Start point

So "start point" (fr.1) and "back to start" (fr.20) should be the same. When movie plays - it loops.

Frame 10 - "end movement" - this is where we are going to make changes

I am going to start with a left arm.

Click on frame 10, upper part of the left arm layer.

Click with a Free transform tool on the left arm (top part) to select it. See my rotation point?

Rotate this symbol to the opposite direction.

Go to the bottom part of the left arm layer, frame 10.

Move and adjust the bottom part of the arm.

Use Motion Tweening for these animations.

Your timeline should look like mine.

 

 

 

Control > Test Movie

Repeat the animation steps with the other arm (swing it in the opposite direction)

Same steps with the legs.

... the other leg too...

Compare the timelines.

The only two static layers I have are the head and body layers.

 

Your Movie Clip symbol is now ready for walking!!!

 

Control > Test Movie

Exit the Movie Clip timeline.

To return back to the mail timeline - click on "Scene 1" - just below the layers.

Frame 1 - move your character all the way to the right (outside the stage)

Add a keyframe. I added mine at frame 100. But that depends on how fast you want your character to cross the stage.

At frame 100 I moved my mannequen all the way to the left (outside the stage).

Tween: Motion

 

Save.

Control > Test Movie.

You are done!!!!!

.
...