walking animation in flash

7/30/2019 Walking Animation in Flash

http://slidepdf.com/reader/full/walking-animation-in-flash 1/11

TUTORIAL: Walking Animation in Flash

As CGA students, most of you have probably encountered a Flash animation while surfingthe web. It might have been a flashy ad banner, an interactive game, the layout of a slickwebsite, or a quirky animation that a friend emailed to you. It is obvious that the Interneindustry has embraced Flash as a powerful tool.

Because of its easy usability, novice users could make a decent Flash animation withoutextensive training. Unfortunately, most of these users do not know basic animationtechniques. With this tutorial, you will quickly learn how to create above-averageanimations using Flash and your knowledge of the animation principles

To fully understand the animation methods of Flash, we will be animating a figure doinga walk cycle.

Table of Contents

IntroRequired Skills & MaterialsAnimation In Flash

StoryboardingDesigning Movable PartsHierarchies & Pivot Points

Animating KeyframesSetting KeyframesPositioning PartsMotion Tweening

Testing & TweakingFinal Steps

Flash In Other Areas

AppendixShortcut KeysLinks

1Philet Designs Co.

122

346

7-878899

10

111111

Eliphelet GarciaENG 204

Technical Manua



Required Skills & Materials

To fully understand the material in this tutorial, you need to have takenthe GPH 213 course or have had experience using Flash. Knowing basicanimation 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, minorwill 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 XP128 MB RAM (256 MB recommended)347 MB available disk space

For Macintosh computers500 MHz PowerPC G3 processorMac OS X 10.2.8 and later, 10.3.4, 10.4128 MB RAM (256 MB recommended)280 MB available disk space

As with any other graphics software, it is recommended to have higherspecifications than the ones listed above.

Animation in Flash There are three different ways to animate in Flash. The first is called Frame byFrame Animationwhich mimics traditional hand cel drawing. In this way, youmanually create or manipulate the images onevery frame. This is tedious andrequires 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 theresults are interesting.

The third is called Motion Tween. This requires the graphics to be converted intoSymbols: Movie Clip, Button, or Graphic. Symbols can be animated by usingthe Transformation Tools in the ToolBox. Graphic properties such as Brightness,

Tint, or Alpha (transparency) can also be animated.2Philet Designs Co.



We are going to use the Motion Tween method in this exercise. A walking figure hasinterconnected 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 mainkeyframes. Tweening will fill in the “in-between” frames.

Frames of Walk Cycle Animation

Here’s a look at our animation. The frames below have nine keyframes and in-between frames

StoryboardingBefore 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 keyframesof the walking figure. We are going to do a walk cycle. This covers all the differentpositions a body will take when taking two steps. In a cycle, it is important to havethe first frame be the same as the last frame.

Quick Storyboard Sketch

3Philet Designs Co.



Designing Movable PartsFromstoryboarding, we now know the keyframes we have to do. The next step is tocreate 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 betterorganization.

Note: Feel free to use any tools to make the body parts. Don’t restrict yourself to the drawing tools in Flash. For example, an imported image of a headwould be fine.

- Using the Circle tool, draw a

round shape for the head.- Rename the layer “head”

- Select the circle by selecting thelayer. This will ensure that allparts in that layerare 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 Flash’s animationfeatures.

4Philet Designs Co.



Do the same for the other parts: body, left upper arm, right upper arm, left lowerarm, 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.

5Philet Designs Co.



Hierarchies & Pivot Points

Your Timeline should look like this.

Once you have finished all the parts, you have torearrange the layers into their proper positions. Forexample, 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 thatthe body parts will move correctly during theanimation.

- Click on the Free TransformTool and select abody part. The circle in the middle is the pivotpoint.

- Figure out the pivot point of each body part. Forexample, the lower armwill have its pivot point

The whitecircle is thepivot point.Drag it tomove itaround.

Move the pivot pointsin their proper placesas shown in the leftimage.

6Philet Designs Co.



Now it’s time to arrange the body parts into the firstposition fromthe storyboard. Use the Free TransformToolfor this.After you have the first position done, put a guide toindicate the ground and the center of the figure.

To add a guide, click View,Rulers to show the ruler. Fromthe top ruler, click and dragdown 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 10th

frame. To do this, go on the Timeline andselect and drag the boxes on the 10th

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

7Philet Designs Co.



Positioning Parts

With the second keyframe set, we cannow change our figure’s position. First,select the number 10 on the Timelineto indicate that you are now workingon the 10th frame.

As before, use the Free TransformToolto move the body parts. DO NOT movethe pivot points. Make sure that thefeet are aligned with the ground andthe center of the body is aligned withthe center guide.

Second keyframe

Motion Tweening

With the second position set,we can now add tweening.

Tweening will fill in the in-between frames fromthefirst keyframe to the secondkeyframe.

To do this, on the Timeline:- Select and drag a placein the middle of thekeyframes. Be sure to selectall layers.

- Right-click and chooseCreate Motion Tween. Thespace between thekeyframes should turn blueand have an arrow in them.

- Drag the time sliderbetween the keyframes tomake sure that the framesare correctly animated.

8Philet 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 cando to improve it.

1 2 3 4 5 6 7 8

1st - 8th keyframes

Here are the keyframes from1 - 8.

Final StepsFor the last keyframe, you do not need to move the positions manually. Since we aremaking a walk cycle, it is important that the first and last frame of the animation areexactly the same.

- Go back to thefirst frame, selectthe first keyframe

of all layers.- Right-click andCopy Frames.

- Now go to the endof the frames, atthe 80th frame,select and drag allayers in thisframe.

- Right-Click, PasteFrames.

- Add the tweeningby selecting the

middle framesbetween the 70th

and 80th frames,Right-Click, CreateMotion Tween.

Finished production should look like this

9Philet Designs Co.



10

To check your animation, hold down CTRL + ENTER to see the shockwave file of youranimation.

To make the speed of your animation faster, click the white space of the document. TheProperties 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 theanimation.

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-basedwebsite leaves a professional impression on a viewer.Flash is also used on games and short films that are found on numerous entertainmenwebsites. It is most extensively used as ad banners. They are easy to make and the file sizeis small.As you can see, Flash is a powerful tool in animation as well as in other parts of theInternet. Companies that are web-based or have websites require employees to haveFlash experience. It is also a good way to practice your animation skills.

Philet Designs Co.



1

Appendix A - Shortcut Keys

Commands KeysConvert to Symbol F8

Keyframe F6Clear Keyframe Shift+F6Blank Keyframe F7Play 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- Author’s website that includes flash animations.Macromedia Flash(www.macromedia.com/software/ flash) - Macromedia’s websitefor Flash. Includes updates, tutorials, forum.

Philet Designs Co.

walking animation in flash

Documents