Animation in multimedia

1. Animation

2. Definition
• Animation is a method by which still 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, many
animations are made with computer-generated imagery (CGI). Computer
animation can be very detailed 3D animation, while 2D computer animation (which
may have the look of traditional 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.

3. Principle of Animations.
There are 12 major principles for an effective and easy to communicate animation.

4. 1. Squash and Stretch:
This principle works over the physical properties that are expected to change in
any process. Ensuring proper squash and stretch makes our animation more
convincing. For Example: When we drop a ball from height, there is a change
in its physical property. When the ball touches the surface, it bends slightly
which should be depicted in animation properly.

5. 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

6. 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.

7. 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 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.

8. 5.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

9. 6.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 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".

10. 7. 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

11. 8. 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.

12. 9.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

13. 10.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: a lightweight object will react faster than a heavy 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.

14. 11.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

15. 12.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.[

16. 13.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.

17. 3D Effect
• By giving 3D effects we can make our animation more convincing and
effective. In 3D Effect, we convert our object in a 3-dimensional plane i.e.,
X-Y-Z plane which improves the realism of the object. For Example, a
square can give a 2D effect but cube can give a 3D effect which appears
more realistic.

18. Animation Techniques
• animation is popular among kids and can also see traces of animation in
some educational videos as well. Nowadays by animation, the animator
creates such type of visualization which are not played in reality, also we can
create those scenes which are beyond thinking.

19. • it is important to discuss some techniques which were used by the people when
animation word was created and till now some techniques also built by which
anyone can animate and creates its own animation. People can also practice there
thinking limitations on this platform because if they do so they know their inner
skills as well.
• Now some of the important techniques which evolved from past till now discuss
below:

20. Traditional Animation or Classical 2D
Animation
• In this animation, every picture for a scene is created by hand if anyone loves
to paint then traditional animation is very interesting for those people. In this
animation, an individual draw painting in a sheet or paper and also the
pictures that create a scene will be created by the hand and frame them
together to create a proper scene.

21. Digital 2D Animation
• This animation technique is widely used in the market to form a better
animation with digital technologies. It does not include to draw the painting
by hand but we can draw them by computer also and arrange those pictures
in a fixed manner and play them to create a proper scene.

22. Digital 3D Animation
• If anyone is interested in making an unreal character in the real-world than
this animation technique is awesome to work with. 3D animation is very
popular in the animation industry from this technique anyone can create any
type of unreal short film to an unreal film in a real way. Those models which
are created by this technique is highly realistic

23. Puppetry Animation
• Animation is created using puppets instead of objects. Indian traditional
‘KATPUTLI’ is basically a better example of this animation in 90s puppets
are used in many small towns to organize a short pictures and scenes to
entertain the audiences. Those puppets are hung with thread and those
threads were controlled by any person who played these characters and
creates a film or scene. Also in the circus, we can find these animation
technique.

24. Clay Animation or claymation
• If anyone is interested in clay art than this technique of creating animation is
better for those. In this animation, a clay structure is formed and these clay
arts are used to create an animation. There are also many types of clay art
such as oil clay art, dry clay art, etc.

25. Cut-Out Animation
• Cut-out animation is one of the oldest animations of all time and this was
the initial form of animation which was evolved in the industry of
animation. The first cut-out animation was created by LotteReiniger in 1926
and it was named “The Adventures of Prince Achmed”

26. Sand Animation
• This animation is used by those who loved to play with sand this was very
laughable but it is true because this technique is used among those who do
not irritate with sand. This technique is a little bit tough for beginners but as
we familiar with this technique than we love to create those pictures by own.
As we see in realities show like ‘Indias Got Talent’ various sand animation
artists will come and perform there.

27. Paint on glass Animation
• This animation is somewhat typical to create because the painting will be
created on glass and as we know anything or liquid can not settle on glass but
after this technique, the painting created will be so soothing and fresh
because of its surface(i.e., glass). Slow drying paints are used on glass and in
place of glass some times turpentine is also used by the animators.

28. Eraser Animation
• As the name suggests, the sketches which are created by this technique is full
black and white because the pictures are created through pencils and these
sketches can be erased as well. Many popular charcoal eraser films have been
created using this technique and one famous animator is William Kentridge.

29. Pinscreen Animation
• Alexandre Alexeieff and Claire Parker invented the pinscreen animation
technique in the 1930s. The pictures will create through many pins that are
pinned on a plan with vertical alignment. Pinscreen animation makes use of
a screen filled with movable pins, which can be moved in or out by pressing
an object onto the screen.

30. Flipflop Animation
• When computers are not introduced to people there would some parts where
animation is applicable. Painters and artists carry a small diary that is filled
with some similar sketches and when the diary flipped up it creates some
movement which is known as flip flop animation. Flipbook animation is one
of the oldest but fascinating kinds of animation.

31. DIFFERENT TYPES OF ANIMATION
FORMATS
• PNG or Portable Network Graphic was created two decades ago to support image
files. In the early 2000s, PNG started to support animation. PNG files have high bit
depths, and allow 1, 2, 4, 8, 16, 24 and 32-bit images. A license for PNG is free and
open stand as it was developed and it is still supported by World Wide Web
Consortium. PNG files allow full alpha channel transparency, which makes it
possible to change the background. Moreover, due to built-in gamma correction, a
user can see a PNG file the way it was intended to be seen by choosing the gamma
level for the monitor.
• At the same time, PNG format is not good for large images as the large size will
affect the load speed of the page. Also, not all web browsers can support PNG
format.

32. JPG
• JPG stands for Joint Photographic Experts Group. And this is the best
format for photos of high quality. JPG file is the most used graphic format
in the world. When dropping the size of a JPG file, the quality of an image is
not lost. That is why this format is often used in the design and the
photography industry.
• JPG files do not support transparency. It is also not the best format for logos
and icons as it can create a bigger file size for small resolution images.

33. GIF
• GIF stands for Graphics Interchange Format. It was created in 1989, and
back then it was the first format for animations. GIF is suitable for logos and
icons with few colors. GIFs support transparency and are suitable for tiny
animations.
• The main disadvantage of this format is a big size file, that is usually bigger
than an SVG, a PNG or a JPEG one.

34. SVG Animation
• SVG animation is an open 2D XML-based standard vector graphic. This
type of animation has become very popular worldwide, and various
companies and businesses have been slowly integrating this into their
websites.
• SVG animation or Scalable Vector Graphics Animation was first launched in
1999 by the World Wide Web Consortium and developers of Synchronized
Multimedia Integration Language. In 2001 SVG animation became a
recommendation from W3C. During the 2000s and also at the beginning of
2010s many web browsers started to support and integrate SVG animations.

35. Advantages of SVG Animation
• Fast Page Load
There is no need for an HTTP request to load an SVG animation. This allows
your web page with an animation to get loaded faster. The faster your page
loads, the better SEO ranking you can get. The User Experience (UX) of the
page with an SVG animation also looks better than without it. Icons have been
often used in interfaces as they are “universal” pictographic representations of
computer functionality and processing.

36. Text-based Format
• SVG is a text-based format that can be created in HTML or in CSS. The text
you include in the code is indexed by search engines. That means potentially
you can improve your SEO rankings with this animation.

37. Scalability
• Being a text-based format, an SVG image does not depend on a resolution at
all. Moreover, you can see an SVG animation from any device. And the
quality of an image will be the same. You can use an SVG animated image in
different sizes within the same website. There is no need to create many
copies of the same image that comes in different sizes. When using any other
format such as PNG, you will have to create many copies of the same image.

38. Small Size and Quality
• The size of your SVG-animated file is defined by colors, layers, effects,
gradients and other elements it has in the code. Any SVG-animated file can
easily be compressed without losing its

39. Easy Changes
If you ever need to make any changes in an SVG-animated image, you can do
it fast and easy. All you need to do is to change the properties of an image in
the code itself such as background, transparency, borders or any others.

40. Conclusion
• Depending on the purpose that you have, different types of animation
formats can be used. SVG animation has become quite popular due to such
properties as fast page load, text-based format, its scalability, small sizes and
high quality together with easy changes, that can be made anytime.