Midterm Exam Lecture Reviewer: DCIT 26

Animate CC Interface

Collapse panels: At the

top of Panels area on the
right side of the screen is
an icon that looks like a
double arrow. Click it, and
the panels will collapse
and become icons. Keyframes
 The two points are called keyframes; any
movement or changes can only occur between
keyframes.

Open and close There are two types of keyframes: those with stuff in
drawers: Click an them indicated by the solid dot and those with
icon, and the nothing are called blank keyframes which are shown
contents of that as frames with a hollow dot.
panel will fly out.
Click it again, and
it will slide back.
These panels that
fly out and
slide back are
called drawers.

Document Preferences:
To access preferences,
select Edit ➤ Preferences
(Windows) or Animate
CC. This will open the
Animate CC Preferences
dialog box. Click General,
and the window will
change to show you the
general preferences for
Animate CC
The Panels in the Animate CC Interface
The Panels in the Animate CC Interface
Tools: These allow you to create, select, and manipulate
text and graphics placed on the stage.
View: These allow you to pan across the stage or to zoom
in on specific areas of the stage.
Colors: These tools allow you to select and change fill,
stroke, and gradient colors.
Options: This is a context-sensitive area of the panel. In
many ways, it is not unlike the Properties panel. It will
change depending on which tool you have selected.

Timeline
 The length of your timeline will determine when
animations start and end, and the number of
frames between those two points will determine
the duration of the animation.
Frames
 If you unroll a spool of movie film, you will see
that it is composed of a series of individual still
images. Each image is called a frame.
1 BSIT 3-1 REVIEWER BY: PALLON
 Midterm Exam Lecture Reviewer: DCIT 26
What is Animation?
 Animation is the capturing of sequential, static
images—drawings or photos of inanimate objects—
and playing them in rapid succession to mimic real
world motion. The process of designing, drawing,
making layouts and preparation of photographic
sequences which are integrated in the multimedia
and gaming products.
Common Instances of Animation
Explainer videos
 One of the most popular uses of animation in
modern business, animated explainer videos add
playfulness to otherwise dull, unamusing
instructional videos.
Loading pages
 Loading page animations not only mitigate the
damage of loading times, and the risk of your user
bouncing, they also provide the opportunity to show
off your brand personality or make your user laugh.
Transitions
 Animated transitions—swipes, wipes, gradient fades,
shrinking, etc.—play on the biology of the human eye
to make visual changes as seamless as possible,
adding the site or app’s overall immersion.
Microinteractions
 Motion graphics have plenty of UX benefits. If you’re
having trouble with your interface design, adding
some animated microinteractions could fill in the
cracks of your UX.
Social media videos
 The heart of animation is to entertain and tell a story,
so sometimes you should make animated videos just
for their own sake.
Ads
 Advertisements, too, benefit from the attention
animation attracts. Especially banner ads, which need
as much magnetism as they can get to counteract
banner blindness.
Animated logos
 Responsive and animated logos—logos that change
depending on how and where they’re used—have
been proven more effective than static ones.
Types of Animation
Traditional animation
 Each frame is created individually, and then run
sequentially for the illusion of movement.
2d Vector-Based Animation
 More advanced software lends its support to
traditional animation. The principle is the same,
but Flash and other vector-based animation
tools generate many of the individual frames
based on the animators’ input.
2 BSIT 3-1 REVIEWER BY: PALLON
3D animation (CGI)
 CGI animation is said to be closer to puppetry
and traditional animation—the animators focus
more on controlling the movements and leave
the visuals up to the computer.
3D animation is often used for full-length movies,
interactive advertisements, commercials, and other
marketing materials.
Stop Motion
 Individual frames are captured by manipulating
and photographing real objects; most commonly
known as claymation, but it can be used with
more than just clay, as you can see below.
Rotoscope animation
 Involves taking live-action footage and tracing
over it with a rotoscope tool—similar to
traditional animation styles that involve tracing
photographs onto glass panels.
Animation for designers: Digitizing the 12 Disney
Commandments
Squash and stretch
 This effect can be exaggerated for comic effect,
or maintained realistically for more life-like
animations.
Anticipation
 For web design, this means extra emphasis on
the pre-animation state.
Staging
 This principle is borrowed from theater: staging
is where the actors are placed on stage for
maximum effect.
Straight-ahead vs. pose-to-pose
 This principle refers to the method used for
animation—starting with the initial pose and
creating sequential, vs. creating the key poses
throughout the sequence and then “filling in”
the frames in between them.
Follow through and overlapping action
 These refer to two different, but related,
principles for capturing realism.
Slow in and slow out
 This refers to a technical aspect of animation.
Arc
 In an attempt to create more natural
movement, animate motion in an arc trajectory.
Secondary action
 This principle is a little more complex than the
others because it involves striking a balance.
 Midterm Exam Lecture Reviewer: DCIT 26

Timing Button symbols

 As we said above, adding frames to your
animation slows it down, removing them speeds
it up.
Exaggeration
 Even the most realistic animations are still
fantasy… and that’s precisely why we love them.
Animation allows artists to exaggerate real life
for effect—just look at any Tom & Jerry cartoon.
Solid drawing
 Drawing its name from solid geometry, solid
drawing means accounting for three
dimensional space.
Appeal
 More of a artistic concern than a technical one,
you want to give the subjects of your animation
an appeal to make them worth watching.
What is Symbol?
 Is a graphic, button, or movie clip that you
create once in the Animate authoring
environment or by using the SimpleButton (AS
3.0) and MovieClip classes.
 A symbol can include artwork that you import
from another application.
 A symbol is a reusable image, animation,
graphic, movie clip, sound file, font or button
that resides in the library.
Symbol Types
Graphic symbols
 Are reusable static images that are used mainly
to create animations.
 Any drawn vector/plain text/imported bitmap
(photo), or combinations of these, can be
converted into a single controllable object,
called a graphic symbol.
 Have only one frame in their timeline.
Movieclip symbols
 Are reusable pieces of flash animation -
consisting of one or more graphic/button
symbols - thus they are flash movies within your
flash movie. They have their own non-restricted
Timeline (any number of layers and frames - just
like the main timeline) that plays independent of
the main movie's Timeline.
 Add interactivity to the movie and respond to
mouse clicks, key press or rollovers/rollout and
other actions.
 Used for creating interactive buttons, they have
a timeline limited to four frames, which are
referred to as states.
AUDIO IN ANIMATE
What is Sound?
 Sound is a series of compression waves that
moves through air or other materials. These
sound waves are created by the vibration of
some object, like a radio loudspeaker. The
waves are detected when they cause a detector
to vibrate. Your eardrum vibrates from sound
waves to allow you to sense them. Sound has
the standard characteristics of any waveform.
Supported Sound File Formats
Adobe Soundbooth
 Is a digital audio editor by Adobe Systems for
Mac OSX and Windows XP and Vista.
WAVE Format
 The WAVE (waveform) format is developed by
IBM and Microsoft.
 It is supported by all computers running
Windows, and by all the most popular web
browsers.
AIFF Format
 AIFF (Audio Interchange File Format) is a file
format used by Macintosh computers and
Silicon Graphics Incorporated to store and
transmit high-quality audio data, such as music.
EA IFF 85 file
 Consists of a number of chunks of data. A chunk
is buliding block of AIFF file consists of some
header information
AIFF file
 Is a collection of a number of different types of
chunks.
There are two general types of chunks which are
important to form an AIFF file chunk:
Common Chunk: Contains important parameters
describing the sampled sound, such as it’s length and
sample rate.
Sound Data Chunk: Contains the actual audio
samples.

3 BSIT 3-1 REVIEWER BY: PALLON

 Midterm Exam Lecture Reviewer: DCIT 26

MP3 Format (MPEG) What is Adobe Animate?

 Is one of the most popular sound formats for  Is used to design vector graphics and animation
music recording. The MP3 encoding system for television programs, online video, websites,
combines good compression (small files) with web applications, rich internet applications, and
high quality. video games.
Sound Designer II Format
 A digital audio software application developed Adobe Animate Tools and Functions
by Digidesign in the late 1980’s. Navigating Workspaces
Sun AU Sound Format  This is called the Bouncing Ball Workspace.
 An .AU file is an Audacity audio block file. Files
with the .au file extension are audio files stored
in a file format used by Audacity, a sound editor
software.
FLAC Sound Format
 FLAC(Free Lossless Audio Codec) is a lossless
compression audio coding format developed by
Xiph.Org Foundation.

STREAMINFO: Contains the information about the

whole stream.
APPLICATION: This is used by third-party applications Timeline
for identification.  Organizes and controls a document's content
PADDING: It is used to reserve space for metadata if over time in layers and frames.
the metadata will be edited after encoding. When
the metadata is edited, the
padding is replaced by the actual metadata.
SEEKTABLE: An optional table to store seek points.
VORBIS_COMMENT: Used to store human-readable
key/value pairs. Toolbar
CUESHEET: Used to store cue sheet information.  By right clicking on any of the tools that have a
PICTURE: Used to store pictures. triangle in their bottom left corner, you have
FRAME: The audio data is composed of one or more more tool options.
audio frames.
FRAME_HEADER: Contains the basic information
about the stream.
SUBFRAME: To decrease the complexity, individual
subframes are coded separately within a frame (one Selection Tool
frame per channel).  This allows you to click on things throughout the
FRAME_FOOTER: Contains the CRC of the complete workspace. It also allows you to reshape a line or
frame. shape outline.

Subselection Tool
OGG Sound Format
 This tool is similar to the Selection Tool in that it
 An Ogg Vorbis Compressed Audio File that is allows you to select and move objects on the canvas,
saved with the .ogg extension. however, this tool allows you to select anchor points.

Free Transform Tool

 This tool will put a transform box around
anything you select with it. Click once to select
an object, or click and drag to select a square
area.

4 BSIT 3-1 REVIEWER BY: PALLON

 Midterm Exam Lecture Reviewer: DCIT 26

Gradient Transform Tool Paint Bucket Tool

 This allows you to freely edit the gradient of a  Allows you to fill in complete shapes with color.
shape (if you’ve applied a gradient to the shape).
Ink Bottle Tool
Lasso Tool  Allows you to change the ​ stroke ​ color of an
 This allows you to free-hand a selection and object.
then drag it wherever you’d like.
Eyedropper tool
Polygon Tool  Is used in conjunction with the ​ Paint Bucket
 Polygon Tool gives us a straight line in order to tool. ​
cut an object.
Asset Warp Tool ​
Magic Wand Tool  Used when you want to create motion in an
 Selects the Object According to similar Color. object, and is therefore valuable during the
actual animation process.
Classic Brush tool
 Is like a real Brush. Means you can color , Create Hand Tool
Any object.  Allows you to drag and move your stage around.

Rectangle Tool Rotation Tool

 When we want any object . So mostly use  Use to rotate your stage.
rectangle tool.
Zoom Tool
Rectangle Primitive Tool  Allows you to zoom in on the scene.
 The close cousin of the Oval Primitive tool is the
Rectangle Primitive tool, which gives you control Pencil Tool
over corner radii on rectangles and squares.  Is used for Drawing , Creating Objects.

Oval Tool Bone Tool

 Oval tool is for circle . Means whenever we need
to have a circle we can use oval tool.
Oval Primitive Tool
 Oval Primitive Tool comes with points and by
these points we can give any shape to circle.
PolyStar Tool
 PolyStar Tool is a star object. Which comes with
corners.
 gives flexibility to any object.
Bind Tool
 The Bind Tool is grouped along with the Bone
Tool. Clicking upon either tool within the toolbar
and holding the click for a few seconds will allow
you to choose either tool.

Line Tool
 This tool allows you to draw lines.

Pen Tool
 Allows you to draw lines and shapes by creating
points.

Text Tool
 Allows you to create text boxes.
 We use Text Tool of Adobe Animate In Order to
Show text.

5 BSIT 3-1 REVIEWER BY: PALLON

 Midterm Exam Lecture Reviewer: DCIT 26

6 BSIT 3-1 REVIEWER BY: PALLON