Topic : Animation

Learning Outcomes
• The learner who is familiar with animation,
will learn more about animation.

• Basic knowledge about animation software-

Adobe Flash
 Animation
• Animation word originated from 'anime' (which means life)
• It is the rapid display of a sequence of images of 2-D or 3-D
artwork or model positions in order to create an illusion of
movement
• It is an optical illusion of motion due to the phenomenon of
persistence of vision.
 Animation

History of Animation https://youtu.be/mbpLpxi9rJY

Example of a jumping ball
 This animation is moving at 10 frames per second(FPS)

Source: http://en.wikipedia.org/wiki/Animation
 Some other Example of a Animation

5 Types of Animation
https://youtu.be/NZbrdCAsYqU
 Types of Animation
• 2D Animation
• 3D Animation
• Photo Realistic Animation
• Cell-Shaded Animation
• Motion Capture
• Sand Animation
• Flip Book
YouTube Video Links for above types of animation is given in
“03 YouTube Links.docx ”

How to make a Flipbook https://youtu.be/Un-BdBSOGKY

Activity
Thaumatrope
 Animation Softwares
Adobe Flash CS Adobe Flash Professional CS software is a powerful
authoring environment for creating animation and
multimedia content. Design immersive interactive
experiences that present consistently across
desktops and devices.
Alice Its a Free and Open Source Software which creates
animation using ready made objects.

Alice is free and open source, so you may download it from

http://www.alice.org/get-alice/alice-3/

It has got step by step tutorials also.

 History of Flash
• Future Splash Animator (April 10, 1996): initial version of Flash with basic editing
tools and a timeline.
• Macromedia Flash 1 (November 1996)
• Macromedia Flash 2 (June 1997)
• Macromedia Flash 3 (May 31, 1998)
• Macromedia Flash 4 (June 15, 1999)
• Macromedia Flash 5 (August 24, 2000)
• Macromedia Flash MX (as version 6, March 15, 2002)
• Macromedia Flash MX 2004 (as version 7, Sept 9, 2003)
• Macromedia Flash 8 (13 September, 2005)
• Adobe Flash CS3 Professional (as version 9, April 16, 2007)
• Adobe Flash CS4 Professional (as version 10, Oct 15, 2008)
• Adobe Flash CS5 Professional (as version 11, April 2010)
• Adobe Flash Professional CS5.5
• ...
12 Principles of Animation https://youtu.be/uDqjIdI4bF4
You need to have a computer with the following minimum
configuration:

• Intel Pentium 4, Centrino, Xeon, or Core Duo processor or

equivalent.
• 2 GB of RAM (2 GB recommended).
• 2.5 GB available disk space.
• Microsoft Windows XP with Service Pack 3 or higher;
Windows Vista with Service Pack 1, Windows 7.
• QuickTime 7.x or higher; DirectX version 9.0c or higher.

This slide is for information only. Not to be learnt from exam point.
 Adobe Flash Professional CS5.5

Introduction to Adobe Flash CS5.5 https://youtu.be/gGcyHxgXtlY

What is Flash?
It is an authoring tool that allows you to change anything from a
simple animation to a complex interactive web application. It
uses vector graphics, which means that the graphics can be
scaled to any size without losing clarity/quality

Source: http://www.w3schools.com/flash
This site has got tutorial also.
• How to start Adobe Flash?
Ans. Click on Start> All Programs>
Adobe Design Premium CS5.5 >Adobe
Flash Professional CS5.5

• How to make the workspace, default?

Ans. Click on windows> workspace
layout> default
SCREEN SHOT OF ADOBE FLASH CS5.5
Adobe Flash Professional CS5.5

USER INTERFACE
 Some Important Definition
Stage : It is the rectangular canvas that defines the visible area during
playback. We arrange graphics, videos, buttons & other elements on the
Stage while authoring projects.
The default settings are:

Size:
550 Px(Width) X 400 Px(Height)

Ruler Units: Pixels

BG Colour: White
Frame Rate: 24 fps
Auto-Save: in 10 Min
Movie : A flash file is also known as movie
Frame : Basic unit that defines the length of time in a movie.
Timeline : It controls the timing that specifies when elements in the movie
appear on the Stage.
The playhead begins at Frame 1 and moves from left to right as the movie
proceeds through the frames.
Layer : Invisible sheets on stage used to separate and organize content in a
movie.
Property Inspector: It displays contextual information about the attributes of
any selected object; you can edit these options to adjust an object's settings.
It is also called as Property Window.
Library Panel: It contains media elements and symbols that are
stored for a project.
Use of library : this panel is to used to manage and organize the
project's elements. When you publish a SWF file, only the Library
items you actually use are included in the published file; you don't
have to "clean out" unused elements that weren't used because
they won't increase the published SWF file's size (although they
do increase the size of the master FLA file).
Authoring : Creating & Editing a flash movie file

.fla : the extension of a saved flash file.

.swf : the extension of a published flash file. We publish flash file in order to
run the file independently. SWF stands for ShockWave File.

Tweening: The process of creating the frames between first frame and the last
frame of any animation.
 Tweened Animation Frame by Frame Animation

Tweened Animation: We design Frame by Frame Animation: In

only the first and last frame and this the contents of the stage is
rest of the frames are created by changed in every frame.
Flash.
Adobe Flash Professional
CS5.5
TOOLBAR
 Selection (V) Rectangle (R)

Sub-Selection (A) Pencil (Y)

Free Transform (Q) Brush (B)

3D Rotation (W) Deco(U)

Lasso (L) Bone(M)

Pen (P) Paint Bucket(K)

Text (T) Eye Dropper(I)

Line (N) Eraser (E)

 Hand (H)
Zoom (Z)

Stroke Colour

Fill Colour

Black & White

Swap Colour

Object Drawing (J)

Snap to Object
Explanation of some tools can be seen from these
YouTube links:

• Adobe Flash Tools : Flash Tools: Gradient Transform Tool

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

• Adobe Flash CS6 Tutorial | Flash's Brush Tool

https://www.youtube.com/watch?v=m-WGuqD-PwM
 Shortcut Key to Make tools visible : Ctrl+F2

Selection (V): used to select objects by clicking them or by clicking outside

and dragging a rectangle around what you want to select. When selecting
shapes on the stage, double-click to select both the fill and the stroke.
Lasso (L): is another selection tool that can be used to select more precisely
than the Arrow tool. Simply draw a shape as you would with any other
drawing tool; make sure you close the shape before releasing the mouse or
odd selections may be made.
Line (N): It is used to draw straight lines from point to point on the stage.
Text (T): It is used to manually create text fields on the stage.
Pencil (Y): The pencil tool is lot like drawing with real pencil. Stroke Weight
and the line quality can be adjusted through property inspector.
Rectangle (R): It is used to draw rectangular shapes.
Free Transform (Q): This tool is used to manipulate objects on the stage
through the use of several small boxes, called handles, which appear around
the object when object is selected with this tool. It can be used to size,
rotate, and skew the selected object by clicking and dragging.
Pen (P): The pen tool is used to draw precise paths, straight lines and curved
lines.
Oval (O): The Oval tool is used to draw circular shapes. Holding the Shift key
will draw a circle.
Polystar: The PolyStar tool is used to draw multisided polygons or
multipoint stars. No. of sides can be adjusted using the Property Inspector.
Sub Selection (A): works similarly to the Arrow tool, except the Subselection
tool is designed to specifically select vector points.
Gradient Transform (F): The Gradient Transform tool is used to adjust
gradients or bitmap fills in shapes on the stage
Paint Brush (B): It is like the Pencil Tool, only the line quality is a bit more like
using paint rather than lead or ink.
Ink Bottle (S): The Ink Bottle tool is designed to help make adjustments to
line segments on the stage through stroke properties.
Paint Bucket (K): The Paint Bucket tool is used to change fill settings of shapes
on the stage.
Eye Dropper (I): The Eyedropper tool is used to snag properties of either
strokes or fills. As you hover over a line or fill of a shape, a small icon will
appear with an eyedropper to indicate which you are working with. When
you've made your selection, the tool will automatically change to either the
Paint Bucket (for fills) or the Ink Bottle tool (for strokes).
Eraser (E): The Eraser tool is used to erase both fills & strokes.
Hand (H): It is used for moving the view of the stage
Bone Tool: Adobe Flash CS4 Professional & above includes a new Bone tool
that enables you to link symbols together quickly and easily in a
parent/child relationship commonly referred to as inverse kinematics. The
entire bone structure is also referred to as an armature. You can apply a
armature to a series of movie clip symbols or to a raw vector shape that can
then be manipulated across time by dragging the armature to a new pose.
Zoom (M , Z): Used to zoom in. For Zoom out press Alt key and then click on
the stage.

Black and White: Instantly change the stroke color to white (#FFFFFF) and the
fill color to black (#000000).

No Color: Set the selected color (either fill or stroke) to not be created when
drawn.

Swap Colors: Swap the current colors of the fill and stroke.
Steps to create a Motion Tween Animation
1.Draw an object and convert it to a symbol.
2.Insert a keyFrame on 40th Frame or any other frame in timeline.
3.Right Click on timeline and select Create Motion Tween
4.Move the symbol to a new position.
5.Change the motion path as you want.
6.Play your file.
Steps to create a Shape Tween Animation
1. Draw an object on first Frame.
2. Insert a keyFrame on 40th Frame or any other frame in timeline.
3. Modify the object using sub-selection or free-transform tool.
4. Right Click on timeline and select Create Shape Tween
5. Play your file.
Steps to create a Classic Tween Animation
6. Draw an object and convert it to a symbol.
7. Insert a keyFrame on 40th Frame or any other frame in timeline. Move
the object to a new position.
8. Right Click on timeline and select Create Classic Tween
9. Play your file.
YouTube links for Class on 23 April
2020
1. History of Animation

https://youtu.be/mbpLpxi9rJY

2. 5 Types of Animation

https://youtu.be/NZbrdCAsYqU

3. How to make a Flipbook https://youtu.be/Un-BdBSOGKY

4. 12 Principles of Animation https://youtu.be/uDqjIdI4bF4

5. Introduction to Adobe Flash CS5.5 https://youtu.be/gGcyHxgXtlY

Stay Home & Stay
Safe
And also
Keep Learning