TUTORIAL: Walking Animation in Flash

As CGA students, most of you have probably encountered a Flash animation while surfing
the web. It might have been a flashy ad banner, an interactive game, the layout of a slick
website, or a quirky animation that a friend emailed to you. It is obvious that the Internet
industry has embraced Flash as a powerful tool.
Because of its easy usability, novice users could make a decent Flash animation without
extensive training. Unfortunately, most of these users do not know basic animation
techniques. With this tutorial, you will quickly learn how to create above-average
animations using Flash and your knowledge of the animation principles.
To fully understand the animation methods of Flash, we will be animating a figure doing
a walk cycle.
Table of Contents
Intro
Required Skills & Materials
Animation In Flash
Storyboarding
Designing Movable Parts
Hierarchies & Pivot Points
Animating Keyframes
Setting Keyframes
Positioning Parts
Motion Tweening
Testing & Tweaking
Final Steps
Flash In Other Areas
Appendix
Shortcut Keys
Links
1
Philet Designs Co.
1
2
2
3
4
6
7-8
7
8
8
9
9
10
11
11
11
Eliphelet Garcia
ENG 204
Technical Manual
Required Skills & Materials
To fully understand the material in this tutorial, you need to have taken
the GPH 213 course or have had experience using Flash. Knowing basic
animation principles is helpful but not needed.
The software used in this tutorial is Macromedia Flash MX Professional 2004.
You may use other versions such as Macromedia Flash MX. However, minor
will be different as shown fromthe tutorial.
The hardware requirements for the software is:
For Windows computers:
600 MHz Intel PentiumIII processor or equivalent
Windows 98 SE (4.10.2222 A), Windows 2000, or Windows XP
128 MB RAM (256 MB recommended)
347 MB available disk space
For Macintosh computers
500 MHz PowerPC G3 processor
Mac OS X 10.2.8 and later, 10.3.4, 10.4
128 MB RAM (256 MB recommended)
280 MB available disk space
As with any other graphics software, it is recommended to have higher
specifications than the ones listed above.
Animation in Flash
There are three different ways to animate in Flash. The first is called Frame by
Frame Animation which mimics traditional hand cel drawing. In this way, you
manually create or manipulate the images on every frame. This is tedious and
requires a lot of hard work, but you get the most control.
The second is called Shape Tween. This takes a shape on one keyframe and morphs
it into the shape on the next keyframe. You get the least amount of control but the
results are interesting.
The third is called Motion Tween. This requires the graphics to be converted into
Symbols: Movie Clip, Button, or Graphic. Symbols can be animated by using
the Transformation Tools in the ToolBox. Graphic properties such as Brightness,
Tint, or Alpha (transparency) can also be animated.
2
Philet Designs Co.
We are going to use the Motion Tween method in this exercise. A walking figure has
interconnected limbs that can easily be animated using the transformation tools, i.e.,
the Move and Rotate tools. Motion tweening will only require us to fill in the main
keyframes. Tweening will fill in the in-between frames.
Frames of Walk Cycle Animation
Heres a look at our animation. The frames below have nine keyframes and in-
between frames
Storyboarding
Before touching the computer, what you first want to do is prepare a storyboard of
your animation. For this animation, the important thing is to draw the main keyframes
of the walking figure. We are going to do a walk cycle. This covers all the different
positions a body will take when taking two steps. In a cycle, it is important to have
the first frame be the same as the last frame.
Quick Storyboard Sketch
3
Philet Designs Co.
Designing Movable Parts
Fromstoryboarding, we now know the keyframes we have to do. The next step is to
create the body parts of our walking figure in Flash.
- Start a new document in Flash.
We are going to separate the body parts in different layers for better
organization.
Note: Feel free to use any tools to make the body parts. Dont restrict yourself
to the drawing tools in Flash. For example, an imported image of a head
would be fine.
- Using the Circle tool, draw a
round shape for the head.
- Rename the layer head
- Select the circle by selecting the
layer. This will ensure that all
parts in that layer
are selected.
- Right-click and Convert to Symbol
- Name it head and choose the
Graphic option.
- Press OK.
Converting an element into a symbol allows that element to use Flashs animation
features.
4
Philet Designs Co.
Do the same for the other parts: body, left upper arm, right upper arm, left lower
arm, right upper arm, left thigh, right thigh, left leg, right leg.
Remember to add a new layer for each body part and convert to a Graphic
symbol.
5
Philet Designs Co.
Hierarchies & Pivot Points
Your Timeline should look like this.
Once you have finished all the parts, you have to
rearrange the layers into their proper positions. For
example, the right limbs have to be on one side of
the body and head.
Next, we have to move the pivot points of the body
parts in their proper positions. This will ensure that
the body parts will move correctly during the
animation.
- Click on the Free TransformTool and select a
body part. The circle in the middle is the pivot
point.
- Figure out the pivot point of each body part. For
example, the lower armwill have its pivot point
The white
circle is the
pivot point.
Drag it to
move it
around.
Move the pivot points
in their proper places
as shown in the left
image.
6
Philet Designs Co.
Move the pivot points
in their proper places
as shown in the left
image.
Now its time to arrange the body parts into the first
position fromthe storyboard. Use the Free TransformTool
for this.
After you have the first position done, put a guide to
indicate the ground and the center of the figure.
To add a guide, click View,
Rulers to show the ruler. From
the top ruler, click and drag
down to get a guide line.
Now that we have our first position set up, we can start the animation process.
We need to change our figure to its second position, i.e., the second keyframe.
Animating Keyframes
First keyframe
- First, set the second keyframe at the 10
th
frame. To do this, go on the Timeline and
select and drag the boxes on the 10
th
column. Be sure to select all the layers.
- Right-click and choose Insert Keyframe.
You now have ten frames of animation.
Now for some movement
Setting Keyframes
7
Philet Designs Co.
Positioning Parts
With the second keyframe set, we can
now change our figures position. First,
select the number 10 on the Timeline
to indicate that you are now working
on the 10
th
frame.
As before, use the Free TransformTool
to move the body parts. DO NOT move
the pivot points. Make sure that the
feet are aligned with the ground and
the center of the body is aligned with
the center guide.
Second keyframe
Motion Tweening
With the second position set,
we can now add tweening.
Tweening will fill in the in-
between frames fromthe
first keyframe to the second
keyframe.
To do this, on the Timeline:
- Select and drag a place
in the middle of the
keyframes. Be sure to select
all layers.
- Right-click and choose
Create Motion Tween. The
space between the
keyframes should turn blue
and have an arrow in them.
- Drag the time slider
between the keyframes to
make sure that the frames
are correctly animated.
8
Philet Designs Co.
Testing & Tweaking
- Do the same for each keyframe.
- Press ENTER to let the animation run and see if there are any tweaks you can
do to improve it.
1 2 3 4 5 6 7 8
1st - 8th keyframes
Here are the keyframes from1 - 8.
Final Steps
For the last keyframe, you do not need to move the positions manually. Since we are
making a walk cycle, it is important that the first and last frame of the animation are
exactly the same.
- Go back to the
first frame, select
the first keyframe
of all layers.
- Right-click and
Copy Frames.
- Now go to the end
of the frames, at
the 80
th
frame,
select and drag al
layers in this
frame.
- Right-Click, Paste
Frames.
- Add the tweening
by selecting the
middle frames
between the 70
th
and 80
th
frames,
Right-Click, Create
Motion Tween.
Finished production should look like this
9
Philet Designs Co.
10
To check your animation, hold down CTRL + ENTER to see the shockwave file of your
animation.
To make the speed of your animation faster, click the white space of the document. The
Properties section is located at the bottompart of the window. The Frame Rate indicates
the amount of frames per second. The higher the number, the faster the speed of the
animation.
Flash In Other Areas
Besides animation, Flash software can be used in different ways.
Interactive websites use Flash to create a slick and modern look. Having a Flash-based
website leaves a professional impression on a viewer.
Flash is also used on games and short films that are found on numerous entertainment
websites. It is most extensively used as ad banners. They are easy to make and the file size
is small.
As you can see, Flash is a powerful tool in animation as well as in other parts of the
Internet. Companies that are web-based or have websites require employees to have
Flash experience. It is also a good way to practice your animation skills.
Philet Designs Co.
11
Appendix A - Shortcut Keys
Commands Keys
Convert to Symbol F8
Keyframe F6
Clear Keyframe Shift+F6
Blank Keyframe F7
Play Enter
Test Movie Ctrl+Enter
Transform Ctrl+T
Toggle Rulers On/ Off Ctrl+Alt+Shift+R
Toggle Show Guides On/ Off Ctrl+;
Appendix B - Links
Flash Kit (www.flashkit.com) - Extensive site that has tutorials and .fla files.
moock.org(www.moock.org/ webdesign/ flash) - Good site for actionscripting.
philetg.tripod.com- Authors website that includes flash animations.
Macromedia Flash(www.macromedia.com/ software/ flash) - Macromedias website
for Flash. Includes updates, tutorials, forum.
Philet Designs Co.