Click to edit Master title style

Introduction of
Animation
Chapter 1

1
Click to edit Master title style

What is Animation
Chapter 1.1

2 2
Click
What to edit Master title style
is Animation

Animation is a method of
photographing successive
drawings, models, or even
puppets, to create an illusion of
movement in a sequence.
Because our eyes can only retain
an image for approx. 1/10 of a
second, when multiple images
appear in fast succession, the
brain blends them into a single
moving image
3 3
Click to edit Master title style
First Animation

COHL: FANTASMAGORIE
(1908)
Between February and May 1908,
Cohl created Fantasmagorie,
considered the first fully animated
film ever made.

4 4
Click to edit Master title style

Types of Animation
Chapter 1.2

5 5
Click
Typesto
ofedit Master title style
Animation
While the history of animation began much earlier, this article is concerned with
the development of the medium after the emergence of celluloid film in 1888, as
produced for theatrical screenings, television and (non-interactive) home
entertainment.
Between 1895 and 1920, during the rise of the cinematic industry, several
different animation techniques were re-invented or newly developed, including
stop-motion with objects, puppets, clay or cutouts, and drawn or painted
animation. Hand-drawn animation, mostly animation painted on cels, was the
dominant technique throughout most of the 20th century and became known as
traditional animation.

6 6
Click
Typesto
ofedit Master title style
animation
Stop Motion -an animation technique in which a camera is repeatedly
stopped and started, frame-by-frame, in order to give inanimate objects and
figures the impression of movement.

Claymation is an animation technique

using movable clay characters and stop-
motion recording. It's a film style often
seen in children's films and cartoons. It's
a meticulous process, with some
feature-length films taking months - or
even years - to shoot.

7 7
Click
Typesto
ofedit Master title style
Animation

Cutout - is a form of stop-motion animation using

flat characters, props and backgrounds cut from
materials such as paper, card, stiff fabric or
photographs. The props would be cut out and
used as puppets for stop motion.
Traditional Animation (or classical animation, cel
animation, hand-drawn animation, or 2D
animation) is an animation technique in which
each frame is drawn by hand. The technique was
the dominant form of animation in cinema until
computer animation.

8 8
Click
Typesto
ofedit Master title style
Animation
Motion Graphics involves creating graphics and
moving them in time and space to achieve an intended
goal or tell a story. The motion graphic elements are
placed in a sequence of frames to create an illusion of
motion. Unlike other forms of animation, animated
motion graphics primarily use graphics and type.

2D animation is the art of creating movement in a two-

dimensional space. This includes characters, creatures,
FX, and backgrounds. The illusion of movement is
created when individual drawings are sequenced
together over time.

9 9
Click
What to edit Master title style
is Animation

3D animation - refers to the

process of taking digital objects
and making them come to life by
creating the illusion that they're
moving through a three-
dimensional space. These
computer-generated objects
appear on a two-dimensional
screen, but they're crafted to
mimic the principles of a 3D world

1010
Click to edit Master title style

Adobe Animate
Chapter 1.2

1111
Click
AdobetoAnimate
edit Master title style
Adobe Animate (formerly Adobe Flash Professional, Macromedia Flash, and
FutureSplash Animator) is a multimedia authoring and computer animation
program developed by Adobe Inc.
Animate is used to design vector graphics and animation for television series,
online animation, websites, web applications, rich web applications, game
development, commercials, and other interactive projects. The program also
offers support for raster graphics, rich text, audio video embedding, and
ActionScript 3.0 scripting. Animations may be published for HTML5, WebGL,
Scalable Vector Graphics (SVG) animation and spritesheets, and legacy Flash
Player (SWF) and Adobe AIR formats.The developed projects also extend to
applications for Android, iOS, Windows Desktop and MacOS.

1212
Click to edit Master
Understanding title
Document style
Types and Creating a new document
Animate is an animation and
multimedia authoring tool that
creates media for multiple
platforms and playback
technologies. Knowing where
your final animation will play
determines what type of
document you’ll choose when
you create a new file.

1313
Click to to
Getting edit Master
know thetitle style
workspace
The Animate work area includes the command menus at the top of the screen and a variety of tools and panels for editing and adding
elements to your movie. You can create all the objects for your animation in Animate, or you can import elements you’ve created in
Adobe Illustrator CC, Adobe Photoshop CC, Adobe After Effects CC, or other compatible applications. By default, Animate displays the
menu bar, Timeline panel, Stage, Tools panel, Properties panel, Edit bar, and a few other panels. As you work in Animate, you can open,
close, group, ungroup, dock, undock,
Properties

Workspace
Switcher
Tool Panel

Stage

Layer

1414
Timeline Panel
Click to edit
Choosing Master
a new title style
Workspace
Animate also provides a few preset panel arrangements (“workspaces”) that may
better suit the needs of particular users. Use the Window > Workspaces
submenu to choose a different workspace or to save a new one. The same
functionality is provided by the workspace switcher at the right end of the
Application bar

1. Click the workspace switcher and choose a new

workspace. The various panels are rearranged and
resized according to their importance in the chosen
workspace. For example, the Animator and Designer
workspaces put the Timeline panel at the top of the
work area for easy and frequent access.

2. If you have moved some of the panels around and

want to return to one of the prearranged
workspaces, choose Window > Workspaces > Reset
[preset name] and click OK in the confirmation dialog
box.

3. To return to the default workspace, choose Window

> Workspaces > Essentials. In this Classroom in a
Book, we’ll be using the Essentials workspace.

1515
Click
Abouttothe
edit Master title style
Stage
The big white rectangle in the middle of your screen is called the Stage. As with a theater
stage, the Stage in Animate is the area that viewers see when a movie is playing. It
contains the text, images, and video that appear on the screen. Move elements on and off
the Stage to place them in and out of view. You can use the rulers (View > Rulers) or grids
(View > Grid > Show Grid) to help you position items on the Stage. Other positioning aids
include guides (pulled from the top or side rulers; View > Guides) or the Align panel and
other tools you’ll learn about in later lessons in this book.
By default, you’ll see the gray area off
the Stage where you can place
elements that won’t be visible to your
audience. The gray area is called the
pasteboard. To see only the Stage,
choose View > Magnification > Clip To
Stage to select the option. For now,
leave Clip To Stage deselected,
allowing the pasteboard to remain in
view. You can also click the Clip Content
Outside The Stage button to crop the
graphic elements that fall beyond the
Stage area to see how your audience Stage with clip content
will view your final project. Default Stage
outside the stage selected
1616
Click to edit
Changing theMaster
Stage title style
Properties
Now you’ll change the
color of the Stage. The
Stage color, along with
document properties
such as the Stage
dimensions and frame
rate, is available in the
Properties panel, which
is the vertical panel just
to the right of the Stage

1717
Click to edit Master
Understanding title Panel
Timeline style
The Timeline panel contains playback controls for your animation as well as the
timeline itself, which displays the sequence of events in the animation in linear
form through time. An Animate movie measures time in frames, just as in a
filmstrip.
Frame Rate Auto Insert Edit Multiple
Current Frame Onion Skins
Keyframe Frames

Show Layer As Lock / Unlock Elapsed Time

Outline Layer (Seconds)

Show/Hide 1818
Layer
Click
AddingtoLayer
edit Master title style

A new Animate document contains only one layer, but you can add
as many layers as you need. Objects in the top layers will overlap
objects in the bottom layers.

1919
Click to edit
Inserting Master title style
Frames
So far, you have a background photo and another overlapping photo on the Stage, but your entire animation exists for
only a single frame, which is only a fraction of a second. To create more time on the timeline and make this animation
run for a longer duration, you must add additional frames.

1. Select frame 30 in the background layer. Use the Resize Timeline View slider at the upper right corner of the Timeline
panel to expand the timeline frames to make it easier to identify frame 30

2. Animate adds frames in the background layer up to the selected frame, frame 30.

2020
Click to edit
Creating Master title style
a Keyframe
A keyframe indicates a change in content on the Stage. Keyframes are indicated on the timeline as a
circle. An empty circle means there is nothing in that particular layer at that particular time. A filled-in black
circle means there is something in that layer at that time

1. Select frame 24 on the photo2 layer. The frame number of a selected frame is displayed
above the left end of the timeline.

2121
Click to edit
Creating Master title style
a Keyframe
2. A new keyframe, indicated by an empty circle, appears in the photo2 layer in frame 24.

3. Select the new keyframe at frame 24 in the photo2 layer

4. The empty circle at frame 24 becomes filled, indicating that there is now content in the
photo2 layer

2222
 Creating a Keyframe
Click to edit Master title style
3. Understanding frames and
keyframes is essential for mastering
Animate. Be sure you understand
how the photo2 layer contains 48
frames with two keyframes—an
empty keyframe at frame 1 and a
filled keyframe at frame 24.

Photo 2 layer is Photo 2 layer is

empty in frame empty in frame
1-23 24-30 2323
Click
Movingto aedit Master title style
Keyframe
If you want to appear later or earlier in time, you need to move the keyframe in which it appears
closer to or farther from the right on the timeline. You can easily move any keyframe by simply
dragging it to a new position.

2424
Click to edit Master title style

Thank You

25