Module 3:

2D Animation

1
 INTRODUCTIO
N
This module covers the Concept and Principles of Animation.

LESSON 1: PRINCIPLES OF ANIMATION

INTENDED LEARNING

At the end of the lesson, the students should be able to:

 Understand the basic principles of animation
 Learn the concept of animation
 Differentiate the types of animation and file types

DEFINITION OF

 Animation- is a method in which figures are manipulated to appear as moving image

traditional animation, images are drawn or painted by hand on transparent celluloid
sheets to be photographed and exhibited on film.
 Technique- a way of carrying out a particular task, especially the execution or execution
or performance of an artistic work or a scientific procedure.

DISCUSSIO

What is Animation?

Animation is a method in which figures are manipulated to appear as moving images.

In traditional animation, images are drawn or painted by hand on transparent celluloid
sheets to be photographed and exhibited on film. Today, most animations are made
with computer-generated imagery (CGI). Computer animation can be very detailed 3D
animation, while 2D computer animation can be used for stylistic reasons, low bandwidth or
faster real-time renderings. Other common animation methods apply a stop motion technique
to two and three-dimensional objects like paper cutouts, puppets or clay figures.

Twelve Basic Principles of Animation

1. Squash and stretch

The purpose of squash and stretch is to give a sense of weight and flexibility to drawn objects. It
can be applied to simple objects, like a bouncing ball, or more complex constructions, like the
musculature of a human face. Taken to an extreme, a figure stretched or squashed to an
exaggerated degree can have a comical effect. In realistic animation, however, the most
important aspect of this principle is that an object's volume does not change when squashed or

2
stretched. If the length of a ball is stretched vertically, its width (in three dimensions, also its
depth) needs to contract correspondingly horizontally.

2. Anticipation

Anticipation is used to prepare the audience for an action, and to make the action appear more
realistic. A dancer jumping off the floor has to bend the knees first; a golfer making a swing has
to swing the club back first. The technique can also be used for less physical actions, such as a
character looking off-screen to anticipate someone's arrival, or attention focusing on an object
that a character is about to pick up.

3. Staging

This principle is akin to staging, as it is known in theatre and film. Its purpose is to direct the
audience's attention, and make it clear what is of greatest importance in a scene; Johnston and
Thomas defined it as "the presentation of any idea so that it is completely and unmistakably
clear", whether that idea is an action, a personality, an expression, or a mood. This can be done
by various means, such as the placement of a character in the frame, the use of light and
shadow, or the angle and position of the camera. The essence of this principle is keeping focus
on what is relevant, and avoiding unnecessary detail.

4. Straight ahead action and pose to pose

These are two different approaches to the drawing process. Straight ahead action scenes are
animated frame by frame from beginning to end, while "pose to pose" involves starting with
drawing a few key frames, and then filling in the intervals later. "Straight ahead action" creates a
more fluid, dynamic illusion of movement, and is better for producing realistic action sequences.
On the other hand, it is hard to maintain proportions and to create exact, convincing poses along
the way. "Pose to pose" works better for dramatic or emotional scenes, where composition and
relation to the surroundings are of greater importance. A combination of the two techniques is
often used.

In computer animation - Computer animation removes the problems of proportion

related to "straight ahead action" drawing; however, "pose to pose" is still used for computer
animation, because of the advantages it brings in composition. The use of computers facilitates
this method and can fill in the missing sequences in between poses automatically. It is still
important to oversee this process and apply the other principles.

5. Follow through and overlapping action

Follow through and overlapping action is a general heading for two closely related techniques
which help to render movement more realistically, and help to give the impression that
characters follow the laws of physics, including the principle of inertia. "Follow through" means
that loosely tied parts of a body should continue moving after the character has stopped and the
parts should keep moving beyond the point where the character stopped only to be
subsequently "pulled back" towards the center of mass or exhibiting various degrees
of oscillation damping. "Overlapping action" is the tendency for parts of the body to move at
different rates (an arm will move on different timing of the head and so on). A third, related
technique is "drag", where a character starts to move and parts of them take a few frames to
catch up. These parts can be inanimate objects like clothing or the antenna on a car, or parts of
the body, such as arms or hair. On the human body, the torso is the core, with arms, legs, head
and hair appendices that normally follow the torso's movement. Body parts with much tissue,
such as large stomachs and breasts, or the loose skin on a dog, are more prone to independent
movement than bonier body parts. Again, exaggerated use of the technique can produce a

3
comical effect, while more realistic animation must time the actions exactly, to produce a
convincing result.
The "moving hold" animates between two very similar positions; even characters sitting still, or
hardly moving, can display some sort of movement, such as breathing, or very slightly changing
position. This prevents the drawing from becoming "dead".

6. Slow in and slow out

The movement of objects in the real world, such as the human body, animals, vehicles, etc. needs
time to accelerate and slow down. For this reason, more pictures are drawn near
the beginning and end of an action, creating a slow in and slow out effect in order to achieve
more realistic movements. This concept emphasizes the object's extreme poses. Inversely, fewer
pictures are drawn within the middle of the animation to emphasize faster action. This principle
applies to characters moving between two extreme poses, such as sitting down and standing up,
but also for inanimate, moving objects, like the bouncing ball in the above illustration.

7. Arc

Most natural action tends to follow an arched trajectory, and animation should adhere to this
principle by following implied "arcs" for greater realism. This technique can be applied to a
moving limb by rotating a joint, or a thrown object moving along a parabolic trajectory. The
exception is mechanical movement, which typically moves in straight lines.
As an object's speed or momentum increases, arcs tend to flatten out in moving ahead and
broaden in turns. In baseball, a fastball would tend to move in a straighter line than other
pitches; while a figure skater moving at top speed would be unable to turn as sharply as a
slower skater, and would need to cover more ground to complete the turn.
An object in motion that moves out of its natural arc for no apparent reason will appear erratic
rather than fluid. For example, when animating a pointing finger, the animator should be certain
that in all drawings in between the two extreme poses, the fingertip follows a logical arc from
one extreme to the next. Traditional animators tend to draw the arc in lightly on the paper for
reference, to be erased later.

8. Secondary Action

Adding secondary actions to the main action gives a scene more life, and can help to support the
main action. A person walking can simultaneously swing their arms or keep them in their pockets,
speak or whistle, or express emotions through facial expressions. The important thing about
secondary actions is that they emphasize, rather than take attention away from the main action. If
the latter is the case, those actions are better left out. For example, during a dramatic movement,
facial expressions will often go unnoticed. In these cases, it is better to include them at the beginning
and the end of the movement, rather than during.

9. Timing

Timing refers to the number of drawings or frames for a given action, which translates to the
speed of the action on film. On a purely physical level, correct timing makes objects appear to
obey the laws of physics. For instance, an object's weight determines how it reacts to an
impetus, like a push; as a lightweight object will react faster than a heavily weighted one. Timing
is critical for establishing a character's mood, emotion, and reaction. It can also be a device to
communicate aspects of a character's personality.

4
 10. Exaggeration

Exaggeration is an effect especially useful for animation, as animated motions that strive for a
perfect imitation of reality can look static and dull. The level of exaggeration depends on whether
one seeks realism or a particular style, like a caricature or the style of a specific artist. The classical
definition of exaggeration, employed by Disney, was to remain true to reality, just presenting it in a
wilder, more extreme form. Other forms of exaggeration can involve the supernatural or surreal,
alterations in the physical features of a character; or elements in the storyline itself. It is important
to employ a certain level of restraint when using exaggeration. If a scene contains several elements,
there should be a balance in how those elements are exaggerated in relation to each other, to avoid
confusing or overawing the viewer.

11. Solid Drawing

The principle of solid drawing means taking into account forms in three-dimensional space, or
giving them volume and weight. The animator needs to be a skilled artist and has to understand
the basics of three-dimensional shapes, anatomy, weight, balance, light and shadow, etc. For the
classical animator, this involved taking art classes and doing sketches from life. One thing in
particular that Johnston and Thomas warned against was creating "twins": characters whose
left and right sides mirrored each other, and looked lifeless.

In computer animation- Modern-day computer animators draw less because of the

facilities computers give them, yet their work benefits greatly from a basic
understanding of animation principles, and their additions to basic computer animation.

12. Appeal

Appeal in a cartoon character corresponds to what would be called charisma in an actor. A

character who is appealing is not necessarily sympathetic; villains or monsters can also be
appealing; the important thing is that the viewer feels the character is real and
interesting. There are several tricks for making a character connect better with the audience; for
likable characters, a symmetrical or particularly baby-like face tends to be effective. A
complicated or hard to read face will lack appeal or 'captivation' in the composition of the pose
or character design.

A common process in animation generating intermediate frames between two images,

called key frames, to give the appearance that the first image evolves smoothly into the second
image is called “Tweening”.
Inbetweening or Tweening in general is a short form for in between-ing or filling in the spaces
in between two frames in an animation.
So, in Flash or Animate, there's mostly two types. Motion tweening and Shape tweening.
Motion tweening is for when an object is in motion and you're adding that tween to tweak the
generated motion.
For example…

5
The red frames are main frames and the blue are tweenies.
So… basically, motion tweening is also used. But motion is mostly for objects rather than
drawings. You got to select and make the drawing an object before you motion tween it.
However, you can classic tween a drawing.
However, Shape tweening is where the shape changes. Again… mostly applicable to the
drawings.
And that's the basic difference.

Types of Animation

1. Cel (Celluloid) Animation

This is the original hand-drawn cel animation where the artist literally has to draw thousands of
images on special paper and have them photographed, frame by frame. Before the digital
revolution, traditional animation was the norm of the industry, including Disney.

Traditional animation is a great skill to have in your arsenal, especially if you particularly enjoy
traditional media: color pencils, glass painting, water colors. The main drawback to traditional

6
animation is that it’s a very lengthy process. However, don’t let the old-world flavor of this style
put you off, as there’s plenty of inspiration to draw upon within this style of animation: take a
look at A-ha’s music video “Take on Me” and the breathtaking Aleksandr Petrov film “The Old
Man and the Sea,” based on the Hemingway tale.

2. 2D animation

This is vector-based animation, and has two distinct advantages: it is cheap and easy to access.
You need a basic understanding of key frames and know how to use Adobe Animate CC.

3. 3D Animation

3D animation and visual

effects are, quite simply, the
way of the future. 3D
animation operates on
different principles, and is
more akin to puppetry than
traditional animation. For
this, you need to learn how to
digitally model a character,
sculpt it perfectly and give it a
skeleton that you can move
and manipulate.
You’ll have to pose the model
at certain frames, and then let
the computer do the
rendering.

Why is 3D animation so important to understand? Those who want to break into the industry
frankly must master the ins and outs of 3D animation. CGI has become the norm for all
blockbuster animated movies and in certain live-action sequences which requires a lot of VFX,
because of its attention-to-detail and realism. This is why NYFA focuses on 3D animation and
VFX, offering aspiring animators the training they need to develop professional skills.

7
 4. Motion Graphics

This visual effect technique involves moving graphic elements such as text or logos, mostly
using software such as After Effects.

Works Best For: Those working in the advertising industry or doing multimedia projects, or
even designing the opening of film titles.

5. Stop Motion

Stop motion is like traditional animation, except instead of drawing, you have clay models and a
set that you have to carefully manipulate to produce animation. Stop motion can also be done
with puppets, cut-outs, silhouettes and even action figures. In the past, stop motion was used as
a form of special effects for live-action films, and has largely been replaced by 3D animation and
visual effects work. However, there are filmmakers — like Tim Burton — who work almost
exclusively with stop-motion.
For aspiring animators, stop motion can be a wonderful medium to make art, on your own
terms. Stop motion has its own flavor, which can’t quite be reproduced in any other medium,
and is extremely labor intensive — much like cel animation. Understanding stop motion can
also unlock a deeper appreciation for 3D animation and visual effects.

File Format for Animation

Animation Formats: Which ones and why?

The format used for the animation is entirely based around how complex the animation is,
where the animation is designed to be used; such as a webpage, and how large the file is for the

8
animation. Different formats for animations include, animated GIFs, Dynamic HTML such as
Java, Shockwave and Flash.

 Dynamic HTML
-Is a type of HTML, which is used alongside client scripting languages, such as Java
Script. It can be used to create simple animations such as a button- and drop-down
menus. Although a massive downside to using Dynamic HTML is since there are various
types of browsers such as Google Chrome and FireFox, information is displayed
differently meaning Dynamic HTML may not always be effective.

 Flash
-Flash allows users to create animations frame by frame, including using certain
materials such as bitmaps and scripting such as in ActionScript. Flash is also useful for
animations since it can include the use of sound and video. It is also possible to create a
website using Flash, however since the entire website uses flash it may require high
internet speeds in order to load. Flash also needs a Flash player installed onto the
computer in order to show content, although most computers already tend to have this
installed. Flash files (FLA) have to be converted into SWF format before they can be used
on the internet. The SWF format was originally composed to store animations in,
including sounds, however it can also be used for other purposes such as website
building and process forms.

 Shockwave
-Shockwave is used more for 3D graphics and streaming videos. It is designed to work
with a Director application, which can then compile various types of assets into a
multimedia product, on a much larger scale then Flash.

 Animated GIFs
-GIF images which are animated normally have various images combined into a single
GIF file. Applications, such as GIF89A, cycle through the various images in the GIF file in
order to create an animation. While GIFs have a limited amount of flexibility and less
amount of control compared to other formats, although since it is supported by almost
every single web browser, it has become extremely popular. GIF files also tend to be
smaller than other animation files. 

Comparison: Animated GIFs and Flash

ANIMATED GIF

Advantages:
Smaller File size compared to Flash
Ability to have Transparent backgrounds
More easily accessible on the Internet

Disadvantages:
Only has a maximum of 256 colors
Quality of photographic images can be poor
Dithering reduces the amount the file size can compressed
FLASH

Advantages:
Ability to include sound within file
Bigger flexibility compared to GIF

9
Can be more complex

Disadvantages:
Larger file size
Can’t be seen unless a Flash Player is installed
Can take longer to load up on webpages

Refer to this link for PICSART LAYER TUTORIAL:

https://www.youtube.com/watch?v=Khr9pIeKzVI

Refer to this link to understand more about 12 Principles of Animation:

https://www.youtube.com/watch?v=uDqjIdI4bF4

10
 LEARNING TASKS

ESSAY:

1. Why is it important to understand the principles and concept of animation? If you will
become an animator someday, what anime would you like to participate in? and Why?
(20 Points)

- Forming the basis of all animation work, these principles are relevant for a number
of different fields. Your characters, objects, and the world in which they live need to
appeal to the viewer. This includes having an easy-to-read design, solid drawing, and
a personality. There is no formula for getting this right, but it starts with strong
character development and being able to tell your story through the art of
animation.

Being an animator is an incredible career, where you can have the opportunity to
give life to images and ideas in fields as diverse as law, healthcare, film, education,
television, and gaming. If someday I will become an animator, I always wish to be
part of fruits basket animator team.

The anime Fruits Basket is a delightful to watch. All the characters are relatable,
funny, and cute. The art style and character designs are impeccable. It has rib-
tickling slapstick humor and a dash of romance to keep the plot going. The
animation is more mature, and it brings a different feel to the story. I loved the
anime so I also dreamt that someday I will be part of the team behind its animation.

2. Create a table comparing ANIMATED GIF and FLASH. (10 Points)

ANIMATED GIF FLASH
 GIF file stores each frame as a  Flash stores the images in the ad
separate image only once
 raster art  use vector art
 can’t contain sound and video  can contain sound and video
 don't require an added browser  require an added browser plugin
plugin or player or player
 limited by their palette  offers more color options
 compatible with older devices  incompatible with some older
devices
 image quality is bad  image quality is good

11
 LEARNING TASKS

Please install PicsArt Animator, and explore its feature.

You can refer to this link for the short tutorial.

https://www.youtube.com/watch?v=rTanzuX4agE

1. Clock Animation (20 points)

2. Water Balloon Animation (20 points)
3. Hot Air Balloon Flying Animation (20 points)

Be creative, Fill it with some colors and save it as GIF. Send your outputs to my email
[email protected]

RESOURCES/REFEREN

1. Twelve Basic Principles of Animation, retrieve from-

https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation
2. What is animation, retrieve from- https://www.indiaeducation.net/animation/what-is-
animation.html/
3. 5 Types of Animation, retrieve from- https://www.nyfa.edu/student-resources/5-types-
of-animation-finding-inspiration-in-all-styles/
4. File Format for Animation, retrieve from- https://fileformatforanimation.weebly.com/

12
13