You are on page 1of 29

ANIMATION NCII – Animation 12a

Governor Pack Road, Baguio City, Philippines 2600


Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 6 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

Introduction to in-betweening

Objectives: At the end of this lesson, students shall be able to:


1) Explain the relevance of in-betweening as a process in the animation workflow;
2) Understand how a time charts works and interpret the time chart correctly into the in-
betweening process;
3) Explain the difference between animating thirds and animating favors;
4) Understand other concepts necessary in in-betweening; and
5) Explain the process of producing in-between drawings.

Introduction to In-betweening
 In-betweening
o Also spelled as inbetweening; also known as tweening (used in digital animation)
o Process of drawing rough intermediate frames between keyframes
 Keyframe – main frames; defines the start and end points of an action, cut, or scene
 The differences between the in-betweens are very few and subtle
o Gives the illusion of smooth movement
 In-betweener
o Persons in-charge of drawing the in-betweens
o For every keyframe / senior animator, there is usually a team of in-betweeners with them
 Usually an in-betweener would be assigned to only one keyframe animator
 However, it is also possible for an in-betweener to create multiple characters
 Similarly to the reason of creating departments, this is to ensure consistency with the
modeling of each character
o Creates most of the population of the production studio
o In smaller animation studios, it is expected for the in-betweener to also do their own clean-up
 Qualities of an in-betweener
o Understanding of how movement works
 The main job of the in-betweener is to turn the illustrations (in the form of keyframes) into
movement
 The movement from one keyframe to another must be as seamless as possible so that it
looks natural to the naked eye
 Enough emphasis (usually using squash and stretch) is necessary to make sure that the
movements are visible, even if it only passes
 Any unnatural movement will stick out from the entire animation
o Understanding of physics regarding movement
 To further deliver the movement created in the in-betweens, some real-life ideas need to
be lifted up to make the action convincing
 The rules surrounding movement and action in the real-world is also the basis for creating
movement in animation
 Some concepts needed for movement are:
- Laws of motion
- Speed / velocity in its relation to distance
- Acceleration
- Gravity and resistance
- Tension
- Free fall
- Projectile motion
- Force

Page 1 of 29
ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 6 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

o Observational skills
 A lot of movement in animation is lifted off in real life
 As an in-betweener, observing surroundings allows one to understand how the movement
works in real life
 Observing the surroundings also allows one to see the nuances between movement, to
make a character more unique and interesting through their movements and gestures
o Good illustration is a secondary skill
 In-between frames tend to have a lot of distortions
- Detail found in keyframes, if present in in-betweens, is not seen by the human eye as it
moves quickly
 Any detail in the in-between makes the action more unnatural
- The human eye tends to perceive fast motion as blurs
- In the illustration of a falling ball below, the animation utilizing 24 fps and 30 fps has
some blur within the ball, but there is little to no blur in the animation utilizing 60 fps

 Most in-betweens tend to include variations on squash / stretch, and animation blurs,
which hide the detail that would have been present
 However, the ability to draw the character according to modeling (despite its distortions) is
still necessary to maintain consistency within the action
- Seeing examples from the ‘quality meme’ gives us an idea of the results of ignoring
modeling entirely when doing in-betweening:

Image reference: https://i0.kym-cdn.com/photos/images/original/000/326/563/731.gif and


https://www.deviantart.com/princessshirahoshi/art/Sasuke-Uchiha-Gif-2-259784567
 Skills in in-betweening
o Translation of timing charts into action
o Incorporation of the twelve principles of animation
o Incorporation of different timing methods to appropriate actions
o Incorporation of concepts in in-betweening
o Quality control and record keeping

Page 2 of 29
ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 6 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

Measurements in Animation
 Frame v. Drawing v. Feet
o Frame
 Shot of the drawing
 Measurement for the animation speed
 Dictated by how the video is rendered
- When rendered in 24 fps, but there are only 12 drawings done per second, then that
would mean that one drawing is exposed for 1/12 of a second
1 2 3 5 4 6 7 8 9 10 11 12
Number of drawings in the second
1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 9 10 10 11 11 12 12
How the drawings would be rendered in the frame rate
- When rendered in 24 fps, but there are 60 drawings done per second, then the
rendering tool would skip / morph some frames to fit only the 24 fps requirement
0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 1 1 2 2 2 2 2 2 2 2 2 2 3
1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0
3 3 3 3 3 3 3 3 3 4 4 4 4 4 4 4 4 4 4 5 5 5 5 5 5 5 5 5 5 6
1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0
Number of drawings in the second
01 04 06 09 11 14 16 19 21 24 26 29 31 34 36 39 41 44 46 49 51 54 56 59
How the drawings would be rendered with the given frame rate

 Frame rate – how many frames are exposed in a given time; expressed in frames per
second (fps)
 Examples:
- 24 fps – standard frame rate in an animation

Image reference: https://i.pinimg.com/originals/67/d7/02/


67d7028ace171a87d8687ca427dd510d.gif
- 30 fps – standard frame rate in live-action videos and video games

Image reference: https://pa1.narvii.com/6687/


abe83950d56ec228ef24eabccf29d1abc3c19a4e_hq.gif

Page 3 of 29
ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 6 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

- 60 fps – emerging standard frame rate for video games and 3D animation

Image reference: https://i.imgur.com/d2wjxJA.gif


- 10,000 fps – usual frame rate base to record detailed slow motion shots (which is then
played back to around 30 fps)

Image reference: https://hips.hearstapps.com/autoweek/assets/s3fs-public/crash1.gif


o Drawing
 Actual number of images where there is keyframing / in-betweening
 Better seen when animating between different methods (1s, 2s, 3s, and 4s)
o Foot / Footage
 Earlier measurement of productivity
 Consists of a specific number of frames
o Unit measurements for animation
 Frame rate = 24 fps
 1 foot = 16 frames (1s and 2s)
 1 foot = 16 drawings (1s)
 1 foot = 8 drawings (2s)
 1 second = 1.51 feet
 1 second = 24 drawings (1s)
 1 second = 12 drawings (2s)
o Converting frames into feet and seconds
Frames Feet Seconds
1 0.0625 0.041
2 0.125 0.083
3 0.187 0.125
4 0.25 0.167
5 0.3117 0.209
6 0.37 0.251
7 0.4363 0.293
8 0.50 0.335
9 0.561 0.377
Page 4 of 29
ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 6 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

10 0.62 0.419
11 0.6857 0.461
12 0.75 0.503
13 0.8103 0.545
14 0.87 0.587
15 0.935 0.629
16 1.00 0.671

 Methods of Timing
o This is how many drawings are to be used to be able to create one second
o It is possible to have more than one method of timing within two keyframes
 Akira (1988) is one prominent example of an animation that tends to experiment with their
use of timings. An example of how this is used is that the first bike (red) is animated in 1s,
meanwhile the two other bikes are animated in 2s, which are alternating each other. Learn
more: https://www.youtube.com/watch?v=2ltgr21jMag

o Properly referred to in the industry as “animating in <1s, 2s, 3s>”


o Animating in 4s and beyond is possible, but does not relay proper action

Image reference: https://i.imgur.com/skZU3Xj.gif


o Factors in determining the method of timing to be used:
 Speed
 Fluidity of movement
 Impact of sequence
 Overall preference of the animation studio / animation director / client
 Project restraints
o Ones - 1s
 Utilizes 24 drawings per second
 Creates the smoothest animation amongst all other methods of timing
 Is also recommended for high-paced scenes
 Mostly seen in older Disney films
Page 5 of 29
ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 6 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

 Examples:
- Earlier Disney animations are drawn in ones, because that was the only standard
available. One prominent example is Steamboat Willie (1928). Image reference:
https://media1.giphy.com/media/SFK0oEtuU9eGRuRrPz/giphy.gif

- Akira (1988) is known for mainly animating in 1s, which was not common in the
Japanese animation industry. Image reference: https://i.pinimg.com/originals/9a/6c/
48/9a6c48d8b658d3db73742bd20f6449b5.gif

o Twos - 2s
 Utilizes 12 drawings per second
 Most common method of timing
 Gives a less coherent movement than when animating in 1s, but is still of good quality
 Uses other techniques to bridge gaps, prominently by animation smears / blurs
 Most TV cartoons use this method, done prominently by post-war cartoons like Looney
Toons
 Examples:
- A character from the Looney Tunes is shooting his guns animated in 2s; some of the
frames in this character used smears to indicate faster movement. Image reference:
https://media1.tenor.com/images/7b7b0245718efc1b1775822c6476fbca/tenor.gif

Page 6 of 29
ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 6 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

- Without smears, the pace of a movement seems slower. When the characters from
Adventure Time (2010) jump, there is an evidence of stretch, but there are no blurs
present, making the jump seem slower. Image reference: https://media4.giphy.com/
media/fvfJvamWdlNCQVvDbT/giphy.gif

o Threes – 3s
 Utilizes 8 drawings per second
 Mostly used in Japanese animation
 May have:
- Slow and drawn out actions
- Long slow pans of static environment
- Close-ups of a barely moving character
- Easy to draw recycled key frames
 Caused by high demand but lower budgets
 Examples:
- This iconic transformation from Dragon Ball Z (1989) is a quick animation, but some of
the movements (like the rocks and the aura surrounding the character) tends to be
slower than what would have been expected. Image reference:
https://media0.giphy.com/media/GRSnxyhJnPsaQy9YLn/giphy.gif

- This iconic attack sequence from JoJo’s Bizarre Adventure (2014) essentially utilizes a few
frames (less than 8) in a loop to create the illusion of fast, consistent movement. Image
reference: https://i.kym-cdn.com/photos/images/newsfeed/000/974/103/afd.gif

Page 7 of 29
ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 6 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

Time Charts / Timing Charts


 Introduction
o Time chart
 Indicates the number of in-betweens vis-à-vis two keyframes
 Also indicates the spacing between the different in-betweens, indicating their speed
against one another
 Written / dictated by the keyframe / senior animator
 Can be used as an alternative or in relation with the exposure sheet
o Used to determine:
 Number of in-betweens
 Method of timing (1s, 2s, 3s, etc.)
 Type of timing (thirds, favors, combination)
 Speed (less drawings – faster action; more drawings – slower action)
 Break up a more complicated action
 Methods of Writing
o Method of writing the time chart depends from studio to studio
o Note: In the illustrations, the one highlighted in green is the one to be used in the succeeding
lessons
o Reading orientation
 Determines the position of the first and last keyframes and how it shall be read
 Top to bottom or bottom to top; left to right or right to left

o Line drawing
 Drawn with either a straight or curvy line
 Usually unimportant, but using a curved line can determine the spacing if using thirds

o Frame label
 Labeled with a number only, or a number with a letter (showcasing the shot label – letter)

Page 8 of 29
ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 6 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

o Method of timing
 Numbers are written in multiples to determine their method of timing
 The lowest keyframe number should be 1 or A1
- 1s – 1, 2, 3, etc…
- 2s – 1, 3, 5, etc… (odd numbers)
- 3s – 1, 4, 7, etc…

o Distancing of frames
 Adding curved lines indicate what frames are of the same distance

 Parts
Keyframes / Extremes Breakdown In-betweens
Main frames of a certain Specialized in-between Intermediate frames between
action Usually the middlemost in- the two keyframes
between Ones that need animating
Can be used as a keyframe
when breaking down time
chart further

 Favors v. Thirds – Introduction


o Determines the spacing between the in-betweens from one another
o Two main types of timing charts: favors and thirds
o Timing charts may be written at a combination

Page 9 of 29
ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 6 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

Thirds
 Keyframes and in-betweens are spaced evenly amongst each other
 Even spacing means constant speed

 Sample applications:
o Walk cycle (Image reference: https://media.giphy.com/media/sQFvbQOqrFtkc/giphy.gif )

o Run cycle (Image reference: https://i.pinimg.com/originals/ef/6f/05/


ef6f0513d22c8d55378c01f4866d7c8a.gif )

o Mechanical movements (Image reference: https://i.gifer.com/7gG6.gif)

Page 10 of 29
ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 6 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

o Aroma / smoke (Image reference: https://steamuserimages-a.akamaihd.net/ugc/


967597981808923281/21403BD399906CDC52705400D3B67DDF429AEE2F/)

o Wave principle (Image reference: https://cdna.artstation.com/p/assets/images/


images/010/145/998/original/shaquille-crosse-cat-tail-animation-shaquille-crosse.gif )

o Whip principle (Image reference: https://i.pinimg.com/originals/8a/e2/28/


8ae22890d0af14d85eeda148ae424e72.gif)

o Body movements at a constant speed – batting eyelashes (Image reference: https://thumbs.


gfycat.com/CreativeFrenchFlee-size_restricted.gif)

Page 11 of 29
ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 6 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

o Body movements at a constant speed – skip cycle (Image reference: https://thumbs.gfycat.


com/UnevenTenseFoxhound-size_restricted.gif)

Favors
 In-betweens are unevenly spaced between each other
 Most organic (human) motions would follow the favors type of timing
 Helps exaggerate portions of the action, making it more dynamic
 Shows:
Acceleration (slow out) Deceleration (slow in) Slow in and slow out
More drawings at the More drawings at the end More drawings at the
beginning Fast at the beginning, beginning and end, fewer
Faster as time passes by becomes slower as the action drawings at the middle
ends Slow beginning and end,
faster speed at the middle

 Sample applications:
o Head turns (Image reference: https://thumbs.gfycat.com/WickedEvilHartebeest-
size_restricted.gif)

Page 12 of 29
ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 6 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

o Facial expressions change (Image reference: https://media4.giphy.com/media/


3o6ZtiyLHyzcIKnzdC/source.gif)

o Jump cycle (Image reference: https://www.animatorisland.com/wp-content/uploads/2017/


06/jumpropegif.gif)

o Most human actions – hitting a baseball (Image reference: https://media1.tenor.com/images/


a458f875ac6668a267cd9474e4d7e20a/tenor.gif?itemid=8071704 )
 The actual swing starts slower, and then gets faster

o Not using favors – hitting a baseball (Image reference: https://i.gifer.com/N5bx.gif )

Page 13 of 29
ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 6 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

o Action sequences – used to add texture (Image reference: https://64.media.tumblr.com/


ebb9a45e9d974186e1162f9b832227f0/tumblr_mxypk2gWPq1sx6pteo3_r1_500.gif)

Concepts in In-betweening
 Parts of an action
o Each action has a breakdown of steps
o This shall allow better staging and exaggeration for the main action
o Other steps within the action utilizes other principles of animation
o Steps (using a jump cycle as an example):

 Starting position / neutral (red)


- The first keyframe of the action
- Tends to have the least amount of kinetic energy
 Anticipation / antic (yellow)
- Preparation before the take
- If the take is a squash, then the anticipation is a stretch
- If the take is a stretch, then the anticipation is a squash (not common)
 Take (green)
- Also known as the main action
- Usually utilizes the most kinetic energy in the action, as such tends to be the most
explosive
 Overshoot (blue)
- Hyperextension of the action
- Usually a stretch
- Allows recovery from a high-energy take
- Without overshoot, the action seems to have less weight and impact

Page 14 of 29
ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 6 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

Image reference: https://64.media.tumblr.com/024f718add7b7d8b1ee598203456c53a/


tumblr_plmko1ToeM1ryqzjgo8_500.gifv
 Settle (purple)
- Also known as the end keyframe
- Shows that the action is finished
- Action is back to a non-moving state
- It is also possible that the settle pose is similar / the same as that of the starting position
(especially when the animation is on loop)
 Cycle animation
o Cycle – a series of events that repeat in the same order
o An animation that is a cycle use the same actions to advance movement
 One can use limited frames to create movement ‘in a loop’
 The same frames are used to do an action forever
o Usual characteristics:
 Starting position and settle are usually the same pose
 Character / object does not usually move horizontally, only vertically
 If character moves vertically, it is usually within a circle / loop
o Phénakisticope
 Earlier variations of animation
 The pictures are arranged in sequential order are evenly spaced around a disc
 Disc is then rotated rapidly to see movements of cycles

Image reference: https://i.gifer.com/7sZw.gif


o Examples:
 Walk cycle
 Run cycle
 Jump cycle (non-moving)
 Skip cycle
 Wave principle
Page 15 of 29
ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 6 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

 Separation
o Animation technique that divides the object to moving and non-moving objects
o Advantages:
 Easier and more consistent modelling
 Faster animation production
o Steps (using blinking as an example; image reference: http://fanaru.com/k-on/image/60317-k-
on-ritsu-blink-blink.gif)
 Analyze the action (blinking) by determining moving and non-moving parts

 Moving: eyes, eyebrows (in green rectangles); Non-moving: everything else

 Draw everything that is moving first

 Line test / use flipping or rolling techniques to the moving parts first to confirm fluidity of
movement
 Draw the non-moving parts as one drawing in a separate paper

Page 16 of 29
ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 6 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

 Trace the non-moving drawing on top moving drawings

o Sample applications of separation:


 Subtle facial expression change (Image reference: https://i.imgur.com/of7ezy9.gif)

 Unexaggerated talking (Image reference: https://giffiles.alphacoders.com/174/174625.gif)


- This is usually seen in Japanese animation, or more human-looking characters

 Dancing (Image reference: https://64.media.tumblr.com/


0860732d5421b2f03db050503c3f2154/tumblr_mti4b9vHrU1qd5qeyo1_500.gif)
- Main body is the same, but the positioning may differ

Page 17 of 29
ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 6 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

 Flowing / blowing hair (Image reference: https://pa1.narvii.com/


6740/7781717a85515c0a41565de848745cec2ae7095d_hq.gif)

 Imaginary drawings
o Technique in animation that imagines a non-existing drawing in between two existing ones
o Mostly applicable when drawing in 2s or 3s
o Helps make the action feel smoother
 Offset
o Used with overlapping action
o When an object changes direction, parts of the main body will start to turn first before the
others
o Exaggerates the change in direction
o How It Works (using a twirling ballerina as an example; image reference:
https://i.pinimg.com/originals/ac/b6/eb/acb6eb2981eaf87e984ac302416d7628.gif):
 Analyze the example by dividing how her body twists; check in what view (front, side, front
¾, etc.) each portion of her body is in

 It can be divided into three parts: the head, torso, and legs

Page 18 of 29
ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 6 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

 Check the type of timing or method of timing that is used for each
- Head: in favors, slower periods of turning
- Torso: in thirds
- Legs: in favors, faster periods of turning

 First pose (in views):


- All head, torso, and right leg is facing front
- Left leg is facing towards the left, to be used as a pivot point
 Second pose (in views):
- Head: side view, facing towards the right
- Hair: right side, still going towards the back
- Torso: back view
- Left leg: ¾ view back, facing towards the left

 Third pose:
- Head: ¾ view front, facing towards the right
- Torso: ¾ view back, facing towards the right
- Left leg: side view, facing towards the right

Page 19 of 29
ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 6 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

 Drag
o Used for secondary actions
o Effect when a soft material trails behind the rest of the character
 Examples: hair, flesh, cloth, etc.
o If the main action does not move, then the drag does not occur
o Drag is used in relation to follow through and overlapping action
o Sample examples of drag:
 Hair movement (Image reference: https://media1.tenor.com/images/
3edd5d6b7070644a5ba085d2905390ba/tenor.gif)
 The hair moves upwards since the motion is going downwards

 Clothing movement (Image reference: https://mrwgifs.com/wp-content/uploads/2013/04/


Prince-Phillip-King-Hubert-Dancing-In-Sleeping-Beauty-Reaction-Gif.gif)
- Notice the tip of the cape, it creates a small twirl at the tip before moving towards the
direction of the character

 Flesh movement (Image reference: https://theloveofponder.files.wordpress.com/2019/


05/img_0268.gif)
- The movement of the tail is delayed compared to that of the main body, but it still
follows the same path of action

Page 20 of 29
ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 6 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

 Animation blurs
o Also known as animation smears, smears, or blurs
o Animation technique where in-betweens are shown as a quick blur of an image
o Indicates very quick movement when animating in 2s and 3s

Image reference: https://i.pinimg.com/originals/59/ea/3f/59ea3fcbe29a98081ae4a5f4235f9ac1.gif


o Examples:
 Simple smear – hyperextension of parts of the character / object with fast movement

 Squash and stretch – squash / stretch from the normal proportions

 Action / speed lines – adding lines of varying thickness

Page 21 of 29
ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 6 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

 Action style – type of action line; draws thicker lines distorting the main drawing

 Multiple exposure – drawing the object / parts of the character multiple times around the
path of action

 Combination – speed lines and multiple exposure

 Combination – simple smear, speed lines, and multiple exposure (most common)

Page 22 of 29
ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 6 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

Process of In-betweening (Thirds)


 Example used: rolling baseball from left to right in a constant speed

 Make sure that you have your keyframes (properly labeled), timing chart, non-photo pencil, and
other necessary materials

 Determine how many in-betweens are necessary

 Determine the path of action between the first and last keyframe
o Draw a line to clearly represent the path of action
o Take note of the direction (left to right) and spin (clockwise) of the ball

Page 23 of 29
ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 6 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

 Divide the spacing of the created path of action equally based on the number of in-betweens

 Determine the middlemost frame (3); draw at the middlemost part of the path of action created
o It is always good practice to start with the middlemost frame first
o Take note of the change in the detail; it should reflect the middlemost point of the roll

 Focus on the first half; draw the remaining in-between (2) by drawing it at the middle of 1 and 3;
take note of the detailing again

 Focus now on the second half; draw the remaining in-between (4) by drawing it at the middle of
3 and 5; take note of the detailing again

Page 24 of 29
ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 6 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

Process of In-betweening (Favors)


 Example used: circle pendulum swinging from left to right

 Make sure that you have your keyframes (properly labeled), timing chart, non-photo pencil, and
other necessary materials

 Determine how many in-betweens are necessary

 Determine the path of action between the first and last keyframe
o Draw a line to clearly represent the path of action
o Take note of the distance of the string

Page 25 of 29
ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 6 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

 Determine the breakdown / middlemost in-between first (4), and then draw that one at the
middlemost part of the path of action created

 Turn the breakdown frame (4) into a new keyframe, therefore using 1 and 4 as the new keyframes
(with 4 as a temporary keyframe only)

 Find the middlemost in-between of the two keyframes (3), and then draw that one at the
middlemost part of the path of action limited to the two keyframes only

 Turn the created in-between (3) into a new keyframe, therefore using 1 and 3 (temporarily) as the
new keyframes

Page 26 of 29
ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 6 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

 Find the middlemost in-between of the two keyframes (2), and then draw that one at the
middlemost part of the path of action limited to the two keyframes

 Now that all of the drawings at the first half of the time chart are drawn, it is time to turn to the
bottom half

 Assign the breakdown frame (4) and the last keyframe (7) as the new keyframes

 Find the middlemost in-between of the two keyframes (5), and then draw and then draw that one
at the middlemost part of the path of action limited to the two keyframes only

Page 27 of 29
ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 6 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

 Turn the created in-between (5) into a new keyframe, therefore using 5 (temporarily) and 7 as the
new keyframes

 Find the middlemost in-between of the two keyframes (6), and then draw that one at the
middlemost part of the path of action limited to the two keyframes

References:
 Blaise, A. (2015 April 27). Animation Lesson – Overlapping Animation and Drag [Video].
Retrieved from https://www.youtube.com/watch?v=i0i36AlJciI
 Chew, J. (3 October 2019). What are Ones, Twos, and Threes in Animation?, Lifewire. Retrieved
from https://www.lifewire.com/what-are-ones-twos-and-threes-4057778
 Cinerrific!. (12 August 2015). InBetweening - How to do proper in betweening [Video].
Retrieved from https://www.youtube.com/watch?v=fZRqTU2aZ9U
 Riki, J.K. (2014). How Fast Should You Animate?, Animator Island. Retrieved from
https://www.animatorisland.com/how-fast-should-you-animate/?v=a25496ebf095
 Williams, Richard (2002). The Animator's Survival Kit. Faber & Faber; 2nd edition.
 Winder, C. & Dowlatabadi, Z. (2013). Producing Animation. Taylor & Francis: London.

ACTIVITY 6: Self-check 4
Instructions: Please read and understand the module before taking this quiz. Read and analyze the
questions. Choose the BEST answer. (20 items, 20 pts.)
1. In creating an animation in 2s using 24 fps as the frame rate, how many drawings are needed?
A. 8 B. 12 C. 24 D. 30
2. What is the standard frame rate for an animation?
A. 12 B. 24 C. 30 D. 60
3. What is the method of timing most commonly used in modern Western animation?
A. 1s B. 2s C. 3s D. 4s
4. Which of the following actions is best animated in 1s?
A. Crying B. Fighting C. Talking D. Walking
5. Which of the following actions is best animated in 2s?
A. Crying B. Fighting C. Talking D. Walking
Page 28 of 29
ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 6 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

6. Which of the following actions is best animated in 3s?


A. Crying B. Fighting C. Talking D. Walking
7. In the time chart, what are the frames that do not need to be drawn by the in-betweener?
A. Breakdown B. Frame C. In-between D. Keyframe
8. Which of the following does the time chart not give information to?
A. Favors or thirds animation C. Number of frames
B. Method of timing D. Special instructions
9. Which of the following is not an important aspect when interpreting the time chart?
A. Direction B. Frame label C. Parts D. Spacing
10. Which of the following actions is best animated using thirds?
A. Ball tossed up B. Falling ball C. Falling leaf D. Leaf tossed up
11. Which of the following actions is best animated using favors?
A. Coffee aroma B. Robot arm C. Sprinting D. Talking
12. Which of the following parts of the action has the most potential energy?
A. Anticipation B. Overshoot C. Settle D. Take
13. Which of the following parts of the action is most likely to use the principle of squash only?
A. Anticipation B. Overshoot C. Settle D. Take
14. Which of the following actions does not need the use of animation blurs?
A. Blinking B. Head turn C. Sprinting D. Waving hands
15. Which of the following actions does not need the use of separation?
A. Full-body turn B. Head turn C. Kick D. Punch
16. Which of the following concepts of in-betweening is not readily seen in the final output?
A. Drag C. Offset
B. Imaginary drawing D. Separation
17. Which of the following concepts of in-betweening utilizes tracing as one of its crucial steps?
A. Drag C. Offset
B. Imaginary drawing D. Separation
18. Which of the following concepts of in-betweening is used to accentuate different parts of the
body when turning?
A. Drag C. Offset
B. Imaginary drawing D. Separation
19. Which of the following concepts of in-betweening can be utilized when doing follow-through and
overlapping actions?
A. Drag C. Offset
B. Imaginary drawing D. Separation
20. What principle of animation is a term that could be used for the process of doing the in-
betweening process?
A. Arc B. Pose-to-pose C. Staging D. Straight ahead

How to Submit:
 For those with Canvas accounts, answer “WW1: Self-Check 4” under “Week 6 – Introduction to
In-betweening”.
 For those without Canvas accounts, answer “6 – Self-Check 4” as a Google Form.
 For printed modules, place answers on a ¼ sheet of paper with the CAPITAL LETTERS only.
Submission Channels:
 Canvas K-12 LMS (Quizzes)
 Google Forms
 Submission of printed modules in Gate 2

Page 29 of 29

You might also like