SENIOR HIGH SCHOOL

Technical-Vocational
Livelihood
Information and Communications
Technology - Animation 12
Quarter 4 – Module 6:
Produce Walking Cycle Using
Frame By Frame

Technology and Livelihood Education – Grade 12

Alternative Delivery Mode
Quarter 4 - Module 6:
First Edition, 2021

Republic Act 8293 section 176 states that: No copyright shall subsist in any work of the
Government of the Republic of the Philippines. However, prior approval of the government
agency or office wherein the work is created shall be necessary for exploitation of such work
for profit. Such agency of office may, among other things. Impose as a condition the payment
of royalties.

Borrowed materials (i.e., songs, stories, poems, photos, brand names, trademarks, etc.)
included in this book are owned by their respective copyright holders. Every effort has been
exerted to locate and seek permission to use these materials from their respective copyright
owners. The publisher and authors do not represent nor claim ownership over them.

Published by the Department of Education

Secretary:Leonor Magtolis Briones
Undersecretary: Diosdado M. San Antonio

DEVELOPMENT TEAM OF THE MODULE

Writers : Victor M. Sinangote

Editor : Jose Garry R. Napoles
Reviewer :
Illustrator :
Artist :
Management Team:
Schools Division Superintendent : Marilyn S. Andales
Assistant Schools Div. Superintendent : Anelito A. Bongcawil
: Fay C. Luarez
: Lorenzo M. Dizon
Chief Education Supervisor, CID : Mary Ann P. Flores
Education Program Supervisor, LRMDS : Isaiash T. Wagas
Education Program Supervisor, TLE : Jose Garry R. Napoles

Department of Education – Regional Office 7

DepED-Division of Cebu Province
Office Address :Sudlon, Lahug Cebu City
Telephone Nos. : (032) 255-6405
Email address : cebu.province@deped.gov.ph
 SENIOR HIGH SCHOOL

Technical-Vocational
Livelihood
Information and Communications
Technology - Animation 12
Quarter 4 – Module 6:
Produce Walking Cycle Using
Frame By Frame
 WHAT I NEED TO KNOW

Good day, dear learner!

This module is solely prepared for you to access and to acquire lessons befitted in
your grade level. The exercises, drills and assessments are carefully made to suit your
level of understanding. Indeed, this learning resource is for you to fully comprehend the
Identify requirements for in-between drawings in actual scene folders
(cartoon, regular) needed in Animation . Independently, you are going to go
through this module following its proper sequence. Although you are going to do it
alone, this is a guided lesson and instructions/directions on how to do every activity is
plotted for your convenience.

Using this learning resource, you are ought to Producing Clean-up and In-
between Drawings needed in Animation as inculcated in the K- 12 Most
Essential Learning Competencies.

At the end of this module, you are expected to achieve the following objectives for this
session:
 recognize the concepts used in producing walking cycle animation:
 apply the concepts used in producing walking cycle animation: and
 show interest on performing the given activity.
 WHAT I KNOW

Multiple Choice:
Directions: Read the questions properly and write the letter of the correct answer on a
separate sheet of paper.
___1. Used in selecting, moving and modifying objects.
A. Arrow tool C. Free-transform tool
B. Sub-selection tool D. Pen tool
___2. Used to draw circles and oval shapes.
A. Oval tool C. Pen tool
B. Lasso tool D. Crop tool
___3. Used to add fill colors in an object.
A. Eyedropper tool C. Ink bottle tool
B. Lasso tool D. Paint bucket tool
___4. Use to transform gradient fills.
A. Pen tool C. Fill-transform tool
B. Sub-selection tool D. Free transform tool
___5. Used to view particular area of an image at high magnification.
A. Fill-transform tool C. Paint bucket tool
B. Zoom tool D. Free-transform tool
___6. Tool used to create or add text.
A. Layer C. Oval tool
B. Text tool D. Pen tool
___7. Use to create brush like strokes.
A. Line tool C. Brush tool
B. Pen tool D. Gradient tool
___8. Used to change the stroke color of an object.
A. Ink bottle tool C. brush tool
B. Paint bucket tool D. eyedropper tool
___9. Used to draw paths as straight line or smooth flowing curves.
A. Line tool C. Pen tool
B. Pencil tool D. Oval tool
___10. Used to resized or rotate objects.
A. fill-transform tool C. free-transform tool
B. hand tool D. lasso tool

WHAT’S IN

Directions: Answer the items below. Please be guided with the given criteria for
grading. Write your answers on the space provided.
 Criteria:
Content : 2 pts. each
Relevance : 2 pts. each
Spelling and Grammar: 1 pt. each

1. Compare 2D from 3D animation.

________________________________________________________________
________________________________________________________________
__________________________________________________________.
2. What are the hardware requirements for 2D animation?
________________________________________________________________
________________________________________________________________
__________________________________________________________.

WHAT’S NEW

.
What was once done with pencils, cells, and paint by a team of dozens of
animators can now be accomplished by a single person with a powerful enough home
computer and the right software.
The term "computer animation" broadly covers a wide variety of genres and
applications, though the simplest way to break it down is into the categories of 2D and
3D animation. "2D", short for "two-dimensional", is sometimes also called "vector
animation", and is typically done in programs like Macromedia Flash. The most familiar
form of 2D animation are traditional cartoons, which are progressing more and more
into the digital realm.

WHAT IS IT
Produce Walking Cycle Animation
Terminologies:

2D Animation is created on a computer using bitmap images, or it can

be created and edited using 2D vector graphics. 2D animation can be used for many
different things, like video games, advertisements or creating an animated film.

Cel Animation - (traditional animation) is based on a series of frames or

cels in which the object is redrawn in each consecutive cel to depict motion. Cel
comes from the word celluloid (a transparent sheet material) which was first used to
draw the images and place them on a stationary background.

Digital Animation – It is a paperless version of traditional animation,

where drawings are drawn straight out the computer.
 Path Animation - Path Based animation is the simplest form of
animation and the easiest to learn. It moves an object along a predetermined path on
the screen. The path could be a straight line or it could include any number of curves.
Often the object does not change, although it might be resized or reshaped.

Stop Motion Animation - although this can be classified also as 3D

animation, Stop Motion Animation can work with 2d objects, such as illustration and
photos.

Sand Animation - sand is moved around on a back- or front lighted

piece of glass to create each frame for an animated film. This creates an interesting
effect when animated because of the light contrast.

Cut-out Animation, is made by cut pieces of paper card fabric etc. They
are placed under glass and then a frame is taken and cut out is moved slightly and
again a new frame is taken.

Rotoscoping is made by tracing over live video to create realistic

movement. Each frame is traced over individually then the reel footage is removed
leaving you with just the traced drawing.

Cinemagraphs are still photographs in the form of animated GIF where

the animator chooses the part where to animate.

Basic Process of 2D Animation

The difference between 2D and 3D animation is the appearance of depth. 2D
animation is a flat animation and all the actions happen in the x-y axes. 3D animation
includes an extra dimension and that is the z axis. 2D animation uses onion tool kits
while 3D animation requires digital modeling.

Walk Cycle 2D

In animation, a walk cycle is a series of frames or illustrations drawn in

sequence that loop to create an animation of a walking character. The walk cycle is
looped over and over, thus having to avoid animating each step again.

Creating a Walk Cycle

Walk cycles can be broken up into 4 key frames, namely Forward Contact
Point, Passing Pose1, Back Contact Point and Passing Pose 2. Frames that are
drawn between these key poses (traditionally known as in-betweens/In-betweening)
are either hand-drawn or using computer software to interpolate them.
Disclaimer: The pictures are used to put emphasis and to show concrete examples for deeper understanding of the
lesson. Department of Education-Cebu Province does not claim or own the presented pictures. Link for
sources are found in the reference part of the module.

Besides the apparent move of the legs, many more details are necessary for a
convincing walk cycle, like animation timing, movement of the arms, head and torsion
of the whole body.

There exist many techniques to create walk cycles. Traditionally walk-cycles are
hand drawn but over time with the introduction of new technologies for new mediums,
walk cycles can be made in pixel art, 2D computer graphics, 3D computer graphics,
stop motion method, cut-out animation or using techniques like rotoscoping.

Software for 2D Animation

The Pencil software is a studio application designed to resemble the traditional

flipbook style animation. It is simple to uses as its user interface offers only the tools a
beginning animator needs to start creating basic animations on their own.

Adobe Flash is the most widely used software for animations and motion
graphics on the web.

Synfig is a free, open source program for 2D animators that offers a powerful
suite of tools that can be used to make anything from quick motion graphics to cinema
quality animation.
 Toon Boom Studio is an all in one animation application for beginners that is
actually designed to teach you the fundamentals of 2D animation as you work.

Creatoon is a free and powerful piece of animation software.

Animate encourages artists to draw in an environment that feels natural with

most digital drawing tablets, and simulates an entire animation studio within a small,
easy to use application. This animation suite provides advanced features like
interactive camera tools that drastically cut down on the time and effort needed to
achieve that perfect studio quality aesthetic.

Frame by Frame Walking Cycle Animation

Steps to follow in walking cycle animation;

1. Download a Side pose character from the Internet. Open Adobe Flash CS6
( Note: Adobe Flash welcome screen will appear) Select ActionScript 3.0/
ActionScript 2.0 under The Create New Section.

2. A blank page will appear-Click on File>Import>Import to Stage. Select the

downloaded side pose character image and Click on Open button-(Image will
appear on the Stage)

3. If the Image happens to be larger than the Stage, scale it by selecting and
clicking on Modify>Transform>Scale and Rotate(Note: The size of the image
can be increased or decreased by giving % percentage value greater than or
less than 100. Type the percentage in Scale field and Click on Ok.
Or Select the Free Transform Tool from the Tool Panel, then Click on the image
and rescale it by corner. (Note: Keep the Shift Key pressed while dragging the
mouse to maintain the image ratio.)

4. Place the image in the Center of Stage. Lock layer 1 by Clicking on Lock icon
on the same layer. Insert a New Layer by Clicking on New layer icon present at
the bottom-left of the Timeline or by right clicking on the layer. Rename the
layer 2 to ‘Head’ by double clicking on it.

5. Now trace the character by using the Drawing Tools >Select the Line Tool from
the Tool Panel. (Note: Deactivate the Object drawing option by clicking on its
icon, which is present at the bottom of the Tool Panel. Similarity Activate the
Snap to Object option by clicking on it.

6. Use Ctrl ++ key combination for Zoom In and Ctrl+- key combination for Zoom
out.

7. Trace the Head by drawing lines on the base image. After drawing the line,
Click on Selection Tool. (Note: Make sure the line is not selected.) Move the
pointer on the line. When the pointer changes to arrow with curve symbol then
 Click and drag the line to draw a curve. Release the mouse button after the
curve is made. Similarly, curve all the lines of ‘Head’.

8. Draw the Eye using Oval Tool or Line Tool. Select the Oval Tool from the Oval
Tools Panel. Click and drag it over the eye.
Note: After tracing the Head make sure that all lines should be joined or
connected.

9. Now, choose any color from the color palette and fill it using the Paint Bucket
Tool.(Note: If you want to choose the same color from the image, Select
Eyedropper Tool from the Tools Panel and drag the mouse on the color which
you want to pick and Click on it.

10. Change the stroke color: Select the Ink Bucket Tool from the Tools Panel and
select any color from the stroke color palette and fill color in it by clicking on it.
Now, select the first keyframe of layer ‘Head’ then Click on Modify>Group
option.
Note: The shortcut key for group is Ctrl + G.
Lock the layer ‘Head’ by clicking on Lock icon on the same layer.

11. Insert a New Layer and rename it to ‘Upper Body’. Now, trace the ‘Upper Body’
by using Line Tool and fill color in it. Select the first keyframe of layer ‘Upper
Body’ then Click on Modify>Group option. Lock the ‘Upper Body’ layer and Hide
it by Clicking on the White dot which is present on the same layer.

12. Similarly, trace both the ‘Hands’ on different layers. Insert a New Layer and
rename it to ‘Left Hand’. Trace the ‘Left Hand’ and fill color in it. Now convert it
into a group by clicking on Modify>Group option. Select the ‘Left Hand’ and
copy it by clicking on it.

13. Insert a New Layer and rename it to ‘Right Hand’ and Paste the copied object,
Modify it according to the image. Lock and Hide both the hands layer.

14. Now Insert a New Layer and rename it ‘Left Leg’. Trace the ‘Left Leg’ and
divide it into three parts like 1st from waist to knee, 2nd from knee to ankle and
3rd for foot. Fill the colors accordingly.

15. Convert first part from waist to knee into the group by selecting it. After tracing
the first part, Select Modify>Group and trace the second part. After tracing the
2nd part, click on Scene 1 option present on the top left corner of the stage.
Similarly, trace the 3rd part of the leg.
Note: Make sure that all divided parts should be in the same layer.
16. Right click on the 2nd part(knee to ankle) and Select Arrange>Send to Back by
right clicking on it. Select the layer and Click Edit>Copy. Now Insert a New
Layer and rename it as ‘Right Leg’ and click on Edit>Paste in Place.
Note: The pasted object will appear on the same position. Adjust its position by
using Arrow Keys.

17. Arrange the following layers in top to bottom order;

Head Layer on top; Then Left Hand Layer; Upper Body Layer; Left Leg Layer,
Right Leg Layer; Right Hand Layer. Now Click on Lock icon to unlock the
Locked Layers. Similarly click on Red Cross icon to unhide the layers. Delete
the layer 1(Image Layer) by right clicking on it.

18. Now we will make walk cycle of this character. Activate the Ruler by clicking on
View>Rulers(Note: Rulers will appear on the top and left side of the stage.)
Drag two rulers guide from the Horizontal Rulers, place them on top and bottom
of the character.

19. Now select the ‘Left Leg’ layer and click on Free Transform Tool( Note: Eight
channels will appear around the leg with a pivot point.)Change the pivot point
position on top center of the ‘Left leg’. Move the mouse pointer on the bottom
right channel. (Note: The pointer shape changes to rotation handle. Drag the
rotation handle to the right side.

20. Now Select the ‘Right Leg’ layer and click on Free Transform Tool. Change the
pivot point position on top center of the right leg. Move the mouse pointer on
bottom right channel. (Note: The pointer shape changes to rotation handle.)
Drag the rotation handle to the Left-side. Select all the layers by using Shift
Key. Move the character to the bottom guide by using Arrow Keys.

21. Insert 50 Frames to each layer by right clicking>Insert Frame. Click on the
Frame 50 of the top layer. Keep the Shift Key pressed and click on 50 th Frame
of the bottom layer. Right click on the Selected Frame>Insert Frame. Similarity,
select all the frames on 11th frame of the layers. Insert keyframe by right clicking
on the selected frames.

22. Change the position of the character on the inserted keyframe as Passing
Position by using pivot point. Select all the layers by using Shift Key. Touch the
character to the top and bottom guide line by using Arrow Keys. Insert New
Keyframes in all layers on Frame 6. Now Click on Onion Skin button present at
the bottom of the Timeline. Increase the markers range by clicking and dragging
the marker on the Timeline Header to view multiple frames at once.

23. Set the in-between position of character on Frame 6. After setting up the in-
between position Deactivate the Onion Skin option by clicking on Onion Skin
button. Similarly, insert keyframe on Frame 26 by right clicking on frame. And
position the character again as Contact Position.
Note: Repeat the above steps on Frame 16 and Frame 21.
 24. Activate the Onion Skin option and adjust the in-between position. Similarly
draw the second step of walk using Onion Skin Tool till the Frame 46. On the
Frame 46 make the movement just one step back to the Contact Position.

25. Now animate both hands in the similar manner. Rotate the Hands with the
angle of legs, ‘Right Leg’ with Left Hand and Left Leg with Right Hand. Click on
the Left Hand.

26. Position the Transformation Point at the joint of shoulder. Rotate the hand using
bottom rotation handle with the angle of leg as mentioned above.

27. Select the Right Hand on the same frame and rotate it with the Left Leg angle.
Similarly, rotate the hands on all the keyframes. Preview the animation by
clicking the Control>Test Movie>Test

WHAT’S MORE
Directions: Arrange the jumbled letters to form group of words:
Category : Software for 2D Animation.
1. CERATOON
2. IMTEANA
3. NOOB MOOT
4. ODABE LASHF
5. FIGSYN

WHAT I HAVE LEARNED

Directions: Complete the paragraph below. Write the appropriate words on a

separate sheet.
Criteria:
Content : 2 pts. each
Relevance : 2 pts. each
Spelling and Grammar : 1 pt. each

I learned that __________________________________________________________

_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
 WHAT I CAN DO

Directions: Draw the poses of a walk cycle, as shown in the figure below write your
answer on a sheet of paper.

Criteria:
Creativity : 4 pts.
Workmanship : 4 pts.
Timeliness : 2 pts.

Disclaimer: The pictures are used to put emphasis and to show concrete examples for deeper understanding
of the lesson. Department of Education-Cebu Province does not claim or own the presented
pictures. Link for sources are found in the reference part of the module.

1. Create contact position.

2. Create down position.
3. Create passing position.
 ASSESSMENT
Matching Type:
Directions: Match Column A with Column B. Write the letter of the correct answer on a
sheet of paper.

Column A Column B
1. Adobe Flash A. use to design vector graphics and animation
2. Synfig B. an open source program that make anything from
3. Toon Boom quick motion graphics to cinema quality animation
4. Creatoon C. is an easy to use application that will help you create
5. Animate nice 2D animations in cut-out style
D. widely used software for animations and motion
graphics
E. is an all in one animation application for beginners
F. resemble flipbook style animation
Identification:
Directions: Give what is being asked. Choose the letter of the correct answer on a
sheet of paper.

Disclaimer: The pictures are used to put emphasis and to show concrete examples for deeper understanding
of the lesson. Department of Education-Cebu Province does not claim or own the presented
pictures. Link for sources are found in the reference part of the module.

1. What kind of animation technique is used to create ‘The Simpson’

A. Cel Animation B. Stop Motion C. Computer (CGI) D. None of these
2. You can only create stop motion animation with a video camera
A. True B. False C. None of these
3. CGI stands for
A. Computer Graphic Image C. Computer Graphic Interface
B. Computer Generated Imagery D. None of these
4. Shortcut key for adding keyframe
A. F5 B. F6 C. F7 D. F8
5. The shortcut key for group
A. Ctrl + N B. Ctrl + D C. Ctrl + G D. Ctrl+ Z
 ADDITIONAL ACTIVITIES
Directions: Create a clean-up pose(realistic) of a walk cycle as shown in the figure
below.
Write the answer on a sheet of paper.

Criteria:
Creativity : 4 pts.
Workmanship : 4 pts.
Timeliness : 2 pts.

Disclaimer: The pictures are used to put emphasis and to show concrete examples for deeper understanding
of the lesson. Department of Education-Cebu Province does not claim or own the presented
pictures. Link for sources are found in the reference part of the module.

What I Know What’s More Assessment

1.A 1.CREATOON Matching Type:
2.A 2.ANIMATE 1.D
3.D 3.TOON BOOM 2.B
4.C 4.ADOBE FLASH 3.E
5.B 5.SYNFIG 4.C
6.B 5.A
7.C What I Have Learned Identification:
8.A (Answers may Vary) 1.A
9.C 2.B
10.C What I Can Do 3.B
What’s In (Answers may Vary) 4.B
( Answer May Vary) 5.C

Additional Activities
REFERENCES

Online Sources

 https://www.angryanimator.com/word/2010/11/26/tutorial-2-walk-cycle/
 http://www.idleworm.com/animation/how_to.shtml
 https://isaartwork.files.wordpress.com/2013/11/wlk08.gif
 https://www.google.com/search?
q=the+simpsons&hl=en&source=lnms&tbm=isch&sa=X&ved=2ahUKEwju
xeqc_KTwAhV1wosBHdq5CmwQ_AUoAXoECAEQAw&biw=1280&bih=6
10#imgrc=xywIqYIua8onYM

For inquiries or feedback, please write or call:

Department of Education: DepEd-Cebu Province
Office Address: IPHO Bldg., Sudlon, Lahug, Cebu City
Telefax: (032) 255-6405
Email Address : cebu.province@deped.gov.ph;
depedcebuprovince@yahoo.com
Website : www.depedcebuprovine.com