ANIMATION

Animation is the rapid display of a sequence of images 2-D or 3-D artwork or model
positions in order to create an illusion of movement. It is optical illusion of motion due to
the phenomenon of persistence of vision, and can be created and demonstrated in a
number of ways.

TYPES OF ANIMATION

Traditional Animation – was accomplished using hand-drawn sequence of images

which were slightly different from one another then copied onto acetate sheets called
cels.
A cel, short for celluloid, is a transparent sheet on which objects are drawn or
painted for traditional, hand-drawn animation.

Full Animation – movies created using traditional animation are the movies Beauty and
the Beast, Iron Giant, Aladdin and Lion King.

Limited Animation – is a technique that uses less sophisticated and detailed drawings
for animation; the most popular example is SpongeBob Squarepants.

Live-action and Animation – is a technique used in the movie Space Jam and
Spongebob Squarepants Movie which combines the elements of live-action and cartoon
animation.

Stop Motion – is an animation technique wherein objects are photographed one frame
at a time by changing their location or action close to the previous one or small increments
and then played sequentially to create the illusion of motion.

Computer Animation – or CGI (Computer Generated Imagery) animation is the

technique of creating animation or moving images with the use of computers.

Motion Capture – is used to generate computer generated characters by recording live-

action artists wearing suits that allow computer image manipulation to create another
character such as the case in Avatar.

Photo Realistic Animation – is a term used for computer animation that tries to resemble
life skin, plants, animals, sceneries and others such as those used in the movies Kung
Fu Panda and Ice Age.

Cel-shaded Animation – is used to emulate the classic cel technique using computers
for 3D environment and action for characters. The method was used to create the movies
like The Legend of Zelda: Wind Waker.
ADOBE FLASH PROFESSIONAL CS6

Flash animations are created using Adobe Flash in .SWF Formats. Multimedia is
a combination of text, animated graphics, video, and sound delivered to you via some
electronic means.
Adobe Flash Professional CS6 is an authoring tool that you can use to create
games, applications, and other content that responds to user interaction. Flash projects
can include simple animations, video content, complex user interfaces, applications, and
everything in between. In general, individual projects created with Flash Professional are
called applications (or SWF applications), even though they might only contain basic
animation. You can make media-rich applications by including pictures, sound, video, and
special effects.
SWF is a file extension for a Shockwave Flash file format created by Macromedia
and now owned by Adobe. SWF stands for Small Web Format. SWF files can contain
video and vector based animations and sound and are designed for efficient delivery over
the web.

ADOBE FLASH PROFESSIONAL APPLICATIONS

1. Film and Animation – Adobe Flash is one of the common animation programs
for low cost 2D television and commercial animation.
2. Websites – Flash was widely installed on desktop computers, and was
commonly used to display interactive webpages, online games, and to playback
video and audio content online.
3. Rich Internet Applications (RIAs) – combination of visual and programming
capabilities of Flash to produce interactive experiences and applications for the
Web.
4. Video Games – Flash video games are popular on the internet, with portals like
Unity dedicated to hosting of Flash-based games. Popular games developed with
Flash include Angry Birds, Clash of Clans, Farmville, AdventureQuest and
Machinarium.

ADOBE FLASH CS6 USER INTERFACE

1. Properties Panel – It allows you to view and edit properties such as background
color, frame rate, size and information of the current object you are working on.
2. Tools Panel – It contains the tools that allow you to create, select, edit and
modify object.
3. Library Panel – It allows you to store and organize symbols created in Flash
including imported files, graphics, files and video clips.
4. Pasteboard – This is the gray area where you can place elements that you are
working on which will not be visible to the audience. 5. Stage – This area
contains the texts, images, videos and other elements that will appear on the
screen or viewers will see when a movie is playing.
5. Menu Bar – It shows the commands such as File, Edit, View, Insert, Modify,
Text,Commands, Control, Debug, Window and Help.
6. Timeline – It contains frames, layers and scenes that allow you to manage your
movie.
TIMELINE

On a timeline you have frames and keyframes.

A frame is simply an intermediary between keyframes, there is no change in the amount
of objects on the stage during a normal frame.
Keyframes are major changes in the state of the stage.
You use them to add a new object or end/begin an animation.

LIBRARY PANEL
Individual items in the library are stored as symbols. What makes symbols powerful
is that you can reuse them as many times as necessary. Simply drag and drop a copy
(an instance) from the Library panel onto the stage anywhere in your movie. Most
importantly, each instance remains linked to the original in your library. Any changes
made to the original (or master) symbol automatically update any instances of the same
symbol used throughout the movie.
Symbols are broken down into three main categories: graphics, buttons, and movie
clips.
The Library panel is the main storage location for all your symbols, and much like
any library, it has essential organizational tools that make managing your symbols easy.

FLASH PROFESSIONAL TOOLS (With keyboard shortcuts)

——— (V) Selection

——— (A) Subselection
——— (Q) Free Transform
——— (W) 3D Rotation
——— (L) Lasso
——— (P) Pen
——— (T) Text
——— (N) Line
——— (R) Rectangle
——— (Y) Pencil
——— (B) Brush
——— (U) Deco
——— (M) Bone
——— (K) Paint Bucket
——— (I) Eyedropper
——— (E) Eraser
——— (H) Hand
——— (Z) Zoom
FLASH PRO CS6 KEYBOARD SHORTCUTS
FUNCTION KEYBOARD
SHORTCUTS
TIMELINE
Insert Frame F5
Delete Frame Shift+F5
Insert Keyframe F6
Clear Keyframe Shift+F6
Insert Blank Keyframe F7
Play Enter
Rewind Shift+Comma(,)
Step Forward One Frame Period(.)
Step Backward One Frame Comma(,)
SYMBOLS AND SHAPES
Convert to Symbol F8
Create New Symbol Ctrl+F8
Break Apart Ctrl+B
Group Ctrl+G
Ungroup Ctrl+Shift+G
Bring Forward Ctrl + Up Arrow
Bring to Front Ctrl+Shift+Up Arrow
Send Backward Ctrl+Down Arrow
Send to Back Ctrl+Shift+Down Arrow
Distribute to Layers Ctrl+Shift+D
Paste in Place Ctrl+Shift+V
PANELS
Library F9
Properties Ctrl+F3
Transform Ctrl+T
Hide All Panels F4
OTHERS
Test Movie Ctrl+Enter
Import to Stage Ctrl+R

STEPS IN CREATING ANIMATION IN FLASH

1. Prepare the Animation Stage

Create a canvas document and set the stage and document properties to prepare
your animation project. Access a vector image from Adobe Stock (or any other stock
photo provider) to use as the background to the animation.
2. Create the Scene
Add layers to the composition and use drawing tools, such as the Rectangle,
Pen, and Brush tools to finish drawing the background scene.

3. Import and Prepare the Character

Create a new layer for the character. Then, import the character, drawn in
Illustrator, from the Library panel. Create movie clip symbols and separate the layers to
prepare all parts of the character for animation.
4. Animate the character
Learn the difference between frames and keyframes and motion tweens and
shape tweens. Then, apply these concepts to apply looping animation to the different
parts of the character to create the appearance of realistic movement.
5. Add Animation to the Main Timeline
Animate the character across the main timeline and fine-tune its path.
6. Publish Your Project
7. Share Your Work

FLASH TWEENS
A tween in Flash Professional is basically an animation command. It allows the
animator to animate an object without drawing all of the individual frames of a traditional
animation. There are three types of tweens in Flash CS6; Motion Tween, Shape Tween
and Motion Tween.
Classic Tween – is used when making objects fade-in and out; or move across a
scene. Classic tweens are also used to change the size of an object.
Shape Tween – is used when a color needs to slowly transition to another or when a
shape turns into another shape. Shape tweening can also create some interesting effects
when a drawing is turned into a shape, text, or another drawing.
Motion Tween – allow for motion of an object by controlling where an object is in on the
stage at a particular frame. Motion tweens can be used to create motion over a curved
line as well.

WORK WITH ILLUSTRATOR .AI FILES IN FLASH PROFESSIONAL

You can move Illustrator artwork into the Flash Professional editing environment.
You can copy and paste artwork, save files in SWF format, or export artwork directly to
Flash. In addition, Illustrator provides support for Flash dynamic text and movie clip
symbols.

Pasting Illustrator Artwork

When you paste Illustrator artwork in Flash, the following attributes are preserved:
• Paths and shapes
• Scalability
• Stroke weights
• Gradient definitions
• Text (including OpenType fonts)
• Linked Images
• Symbols
• Blending modes

12 PRINCIPLES OF ANIMATION

Developed by Frank Thomas and Ollie Johnston based on the work of Disney
Studio animators from the 1930s.

The purpose of the 12 principles was to produce an illusion of characters adhering

to the basic laws of physics, but also dealing with emotional timing and character appeal
of performance.

1. Squash and Stretch

The most important principle is “squash and stretch,” the purpose of which 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.

2. Anticipation

Anticipation is used to prepare the audience for an action, and to make the action
appear more realistic, eg. dancer jumping off the floor has to bend his knees first; a golfer
making a swing has to swing the club back first.

3. Staging

The mise-en-scene should clearly communicate the attitude, mood, reaction or

idea of the character as it relates to the story and continuity of the narrative. Long,
medium, or close up shots, and camera angles also helps tell the story.

4. Pose to Pose

“Pose to Pose” is planned out and charted with key drawings done at intervals
throughout the scene. Size, volumes, and proportions are controlled this way, as is the
action. (“Straight ahead animation” starts at the first drawing and works drawing to
drawing to the end of a scene -- does not have the same spontaneity and freshness.
 5. Follow Through and Overlapping Action

When the main body of the character stops all other parts continue to catch up to
the main mass of the character, such as arms, long hair, clothing, coat tails or a dress,
floppy ears or a long tail (these follow the path of action). Nothing stops all at once.

6. Slow-Out and Slow-In

As action starts, we have more drawings near the starting pose, one or two in the
middle, and more drawings near the next pose. Fewer drawings make the action faster
and more drawings make the action slower.

7. Arcs

All actions, with few exceptions (such as the animation of a mechanical device),
follow an arc or slightly circular path. This is especially true of the human figure and the
action of animals. Arcs give animation a more natural action and better flow.

8. Secondary Action

This action adds to and enriches the main action and adds more dimension to the
character animation, supplementing and/or re-enforcing the main action. Example: A
character is angrily walking toward another character. The walk is forceful, aggressive,
and forward leaning.

9. Timing

Expertise in timing comes best with experience and personal experimentation,

using the trial and error method in refining technique. The basics are: more drawings
between poses slow and smooth the action. Fewer drawings make the action faster and
crisper.

10. Exaggeration

Exaggeration is a caricature of facial features, expressions, poses, attitudes and

actions. Action traced from live action film can be accurate, but stiff and mechanical. In
feature animation, a character must move more broadly to look natural.

11. Solid Drawing

The basic principles of drawing form, weight, volume solidity and the illusion of 3D
apply to animation as it does to art drawings. One draws in the classical sense, using
pencil sketches and drawings for reproduction of life. These are then transformed into
color and movement giving the characters the illusion of 3D and 4D life; 3D being
perspective and staging in space. 4D dimension is movement in time.
 12. Appeal

A live performer has charisma. An animated character has appeal. Appealing

animation does not mean just being cute and cuddly. All characters have to have appeal
whether they are heroic, villainous, comic or cute.

FILE FORMATS OF ADOBE FLASH PRO CS6

File Formats Flash Pro CS6 Can Open

File format Filename extensions

Adobe Flash authoring File FLA

ActionScript File AS

Flash XML File XML

Compiled Flash file SWF

ActionScript Communication File ASC

Flash JavaScript File JSFL

Graphic File Formats Flash Pro CS6 Can Import

File Format Filename extensions

Adobe Illustrator (version 10 or earlier) AI

Adobe Photoshop PSD

AutoCAD 10 DXF DXF

Bitmap BMP, DIB

Enhanced Windows Metafile (Windows EMF

only)

FutureSplash Player SPL

GIF and animated GIF GIF

JPEG JPG, JPEG

PNG, including Fireworks PNG files PNG

Flash Player 6/7 SWF

Windows Metafile WMF

Adobe XML Graphic File FXG

Audio File Formats Flash Pro CS6 Can Import

File format Filename extensions

Adobe Soundbooth ASND

Wave (Windows only) WAV

Audio Interchange File Format (Mac OS AIFF

only)

MP3 MP3
Video File Formats Flash Pro CS6 Can Import

File format Filename extensions

QuickTime Movie MOV, QT

Video for Windows AVI

MPEG MPG, M1V, M2P, M2T, M2TS,

MTS, TOD, MPE, MPEG

Digital Video DV, DVI

Video for Adobe Flash FLV, F4V

3GPP/3GPP2 for Mobile Devices 3GP, 3GPP, 3GP2, 3GPP2, 3P2

MPEG-4 MP4, M4V, AVC