6 Adobe Animate - Introduction

Topics Covered
•Adobe Animate •Starting Adobe Animate •Components of Adobe Animate Window •Setup a new
Animate Stage •Test an Animate movie •Saving the Animate file •Opening the Animate file •Closing the
Animate file

Adobe Animate
Adobe Animate, formerly known as Adobe Flash Professional, is a
multimedia authoring and computer animation program developed
by Adobe Systems. Most of the features and working of Adobe
Animate are similar to Adobe Flash Professional.
Animate is specifically designed to create vector graphics,
animations, games, and web page components. Animate is also
used to make a video over the Internet. In Animate, you can insert

P
an image and add animations to that image. When you run that
animation, it is called playing a movie.

FEATURES OF ADOBE ANIMATE

PM
Create Illustrations and Other Artwork: Animate has many drawing tools that allow you to
create vector graphics. Vector graphics are composed of lines, curves, and polygons. Conversely,
bitmaps are made up of pixels. The main benefit of using vector graphics in Animate projects is
that they are smaller in size, and can be downloaded at a very fast speed over the Internet.
Work with Symbols and Instances: Symbols are objects in Animate that you can re-use. These
objects can be graphics, buttons, movie clips, sounds, and videos. Copies of symbols that are
used in an Animate movie are called instances.
Create Animation: There are many ways to animate in Adobe Animate. You can create

IT PLANET - 6 (GIGABYTE)
animations by using a frame-by-frame or motion tweening method.
Layers: Layers are the keys to work with graphic objects and animation. You can draw, erase,
add, or remove instances on one layer without affecting another layer. You can also hide layers
(make them invisible) and lock layers (make them un-editable).

PLAYBACK PLATFORM
The Playback Platform is the technology that your final or published files use to play.
Adobe Flash is an animation creation tool for Flash Platform. The Flash Player plug-in allows
users to view Flash file in their browsers. Nearly all current web browsers support Flash.
Adobe Animate has flexibility with output formats and ensures that your content can be viewed 81
anywhere on any device without the need for plug-ins. Regardless of the playback environment,
all document types are saved as FLA or XFL (Animate) files.
 Starting Adobe Animate
Like any other program, you can start Animate using the Start button.
1. Click on Start button to open Start menu.
A list of all installed Apps appears on the left of Start menu.
2. Scroll down and click on Adobe Animate.
Adobe Animate opens the welcome screen in front of you.

Animate gives you quick

access to your recent
files. You can open any
recently used file by
3 clicking on it.
3. Type in the desired
dimensions and Frame
rate.
4. Click on the Platform
type you want to create.
In this example, we have

P 4
5
selected ActionScript 3.0
that targets the Flash Player.
ActionScript 3.0 is the latest
version of Animate scripting
language, which is similar to
PM
JavaScript.
5. Click on Create.

A blank document appears in the

Animate as the specified dimensions.
PM PUBLISHERS PVT. LTD.

Different Platform type

! HTML5 Canvas document type is used to create animated assets that play back in a modern browser
using HTML5 and JavaScript.
82 ! ActionScript 3.0 is a document type that targets the Flash Player.
! AIR for Android and AIR for iOS are documents configured for playback as apps on an Android or an
Apple mobile device.
! AIR for Desktop are documents for playback as stand-alone programs on Windows or Mac desktop
computers.
Components of Adobe Animate Window
The Animate program window has a number of components with which you must familiarize
yourself, before working on graphics and movies.

File NameTab Properties Tab Workspace Menu

Menu Bar

Library Tab

Current Scene

Tools Panel
Stage

Work
Area
Timeline

P
PM
Menu Bar: Menu bar is a special toolbar that displays the Animate menu names.
File Name Tab: This tab shows the name of current file. If two or more files are open, you can
switch from one file to the other by clicking a tab.
Tools Panel: It has basic tools for creating and working with vector graphics.
Current Scene: It shows the name of the scene on which you are currently working.
Stage: The big white rectangle in the middle of your screen is called the Stage. It contains the
text, images, and video that appear on the screen.

IT PLANET - 6 (GIGABYTE)
Work Area: The area surrounding the stage is called Work Area.
Properties Tab: It is used to view and edit properties of the current object.
Library Tab: It is used to organize and select symbols to add to your movie.
Workspace Menu: It allows you to switch between workspaces and to create new ones.
Timeline: It is used to design the timing for the sequence of the movies. In this part, frames are
highlighted and you can choose them to play the movie.

COMPONENTS OF ANIMATE TIMELINE

The Animate Timeline is located below the Stage. It contains the frames, layers, and scenes that
make up a movie. You can use the Timeline to organize and control your movies. Layers are a
83
representation of depth in workspace, while frames are a representation of time. Frames can be
used for building an animation over time.
 Add/Remove Layer Buttons Frame Indicator Timeline Buttons

Playhead

Layers

Frames Frames Numbers

$ Layers: Layers are used to organize the artwork in your document. You can have numerous
layers stacked on top of one another. Newer layers are listed first. Each layer can contain a
different image that appears on the Stage, and you can draw and edit objects on one layer
without affecting objects on another layer.
$ Add/Remove Layer Buttons: Above the layers, there are buttons for adding and deleting
layers.
$ Frames: Frames are the little rectangles on the Timeline. They enable you to control what
appears in animation sequences. Length of time in an animation is divided into frames.
$ Frame Indicator: Animate indicates the selected frame number, the current frame rate (how
many frames play per second), and the time that has elapsed so far in the movie.
$ Frame Numbers: Frames appear in a chronological order in the Timeline, and each frame has
P
PM
a number.
$ Playhead: The Playhead, also called the Current Frame Indicator, marks the current frame
displayed on the Stage.
$ Timeline Buttons: These buttons contain play/stop, start & end , loop on/off, and onion skin
which are used for controlling frames, layers, and movies.
UNDERSTANDING THE DRAWING TOOLS IN TOOLS PANEL
The Tools Panel is packed with tools that you can use to create and work with graphic objects.
PM PUBLISHERS PVT. LTD.

ol rm
to fo r
io
n
a ns h p l or hi
te
i fie
c t ow Tr le s e ra
l e r r e o ng ta
r B ru ttl W Co W od
Se A e Bo r ke & M
Fr ol Lass xt ct
a
ly
S
in
t e
as
e
se
t d
ck ls
o r
to Te Re Po Pa on In
k
Er As an tro a o
B H S Bl To

n e r r l or
tio on cil et pp lo Co
ec ti l sh ck dr
o
er
a o
ap
l ta Pe
n
Lin
e
Ov
a
Pe
n
Br
u u th om lC
Se Ro nt
B
Ey
e
W
id
Ca
m Zo Fil Sw
b i
Su ol 3D Pa
84 to

By default, the Tools Panel appears on the far-right side of the program window, but you can
even drag it to far left side of the window.
Setup a New Animate Stage
When you first open a new document in Animate, it is a good idea to set up your stage size,
format rate, background color, and ActionScript version first. Stage is the on-screen area where
you can view the contents of a frame and draw graphic objects.
CHANGING YOUR ACTIONSCRIPT VERSION AND FLASH PLAYER VERSION
Publish Panel of the document
2 appears in the Properties tab.
1. Click on Publish Settings.
3
The Publish Settings dialog box
1 appears.
2. Click the Target menu, and
select player in which you want
to run your animation.
3. Click the Script menu, and
select ActionScript 3.0.
4. Click on OK.
4
Your Publish settings are stored in

CHANGING JPEG IMAGE QUALITY

P your Animate document.

Publish Panel of the document

appears in the Properties tab.
PM
1. Click on Publish Settings.
2
1 The Publish Settings dialog box
appears.
2. Click and drag the slider to set
your default JPEG quality.
You can always increase or
decrease the JPEG quality for
better image fidelity, or smaller file
sizes, respectively.
3

IT PLANET - 6 (GIGABYTE)
3. Click on OK. Your Publish
settings are stored in your Animate
document.
CHANGING THE FRAME RATE
Properties Panel of the
document appears below the
Publish settings.
If Properties tab doesn’t appear,
open it by clicking on Window and
then Properties.
1. Click the number in the FPS
1
field (frames per second).
2
2. Type a new frame rate in the 85
FPS field.
This example shows a frame rate
of 30.
 CHANGING THE STAGE SIZE
1. Click on Advance Settings in
the Properties settings.
The Document Settings dialog box
2
appears.
2. Select the measuring unit (e.g.,
3 Pixels) from the Units list box.
3. Type the height and width
dimensions of Stage size you
want for your Animate movie.
4
4. Click on OK.
Your Animate movie is now set to
1 your desired dimensions.

CHANGING THE BACKGROUND COLOR

Properties Panel of the document
appears below the Publish settings.
If Properties tab doesn’t appear,

P 1
open it by clicking on Window and
then Properties.
1. Click on the white box of Stage.
A set of color swatches appears.
PM
2. Click on any one of the colors
to select a new background
2
color.

Your background color changes to

the color you select.
PM PUBLISHERS PVT. LTD.

Test an Animate Movie

You can test your Animate movies at any time during design and development. You can preview
your animation in the development phase to check whether everything is going right or not.

TEST USING TEST COMMAND

1. Click on Control in the Menu bar.
2. Click on Test. You can also press Ctrl + Enter keys. Your Animate movie plays in a test window.
TEST WITH PUBLISH PREVIEW
86
1. Click on Control in the Menu bar.
2. Click on Test Movie, and then click the format you want to test.
Your Animate movie plays in the selected format.
Saving The Animate File
As you create movies in Animate, you need to save them in order to see them again. The
default extension for an Animate file is .fla. Animate does not save your work periodically, so it
is essential to save early and often—every time you make a significant change.

1. Click on File menu.

The File menu appears.
3
2. Click on Save. You can also press Ctrl + S to
save the file.
The Save As dialog box appears.
3. Choose the destination where you wish to
4 save the file using the Save In list box.
4. In the File name text box, type a file name
for your file.
5
5. Click on Save.
The file will be saved for your future use.

Opening The Animate File

1. Click on File menu.

The File menu appears.
P
You can reopen a saved file to work on it.
PM
2. Click on Open. You can also press Ctrl + O to open the file.
The Open dialog box appears.

3. Navigate the folder where you have saved

the file.
3
4. Click on Animate file, or navigate to one you
want to open.
To enable only certain types of files for
Animate to open, click here and select a file
4 type.

IT PLANET - 6 (GIGABYTE)
5. Click on Open.
The file opens in Animate.
5

Closing The Animate File

1. Click on File menu.
The File menu appears.
2. Click on Close. You can also press Ctrl + W to close the file.
If you forget to save your file before closing, Animate prompts you with a dialog box to save your work. 87
 CHECKLIST
S
Self-Evaluation

ee
agr
ree
After reading the chapter, I know these points:

Dis
Ag
$ I know that Adobe Animate is a multimedia authoring and computer animation
program.
$ I know that user can work with layers, symbols, and instances in Animate.
$ I know that Animate Timeline is located below the Stage, and it contains the frames,
layers, and scenes.
$ I know that Animate Tools Panel is packed with tools that user uses to create and work
with graphic objects.
$ I know that user can set up stage size, format rate, background color, and action script
version in his/her new document.
$ I know that user can test animate movie by pressing ‘Ctrl + Enter’ keys.

Exercises
A. Tick [ü ] the correct answer.

a. Layers P
1. …………………… are used to organize the artwork in your document.
b. Symbols c. Instances
2. The …………………… plug-in allows user to view flash file in their browsers.
PM
a. Java Script b. HTML 5 c. Flash player
3. …………………… tab is used to organize and select symbols to add to your movie.
a. Stage b. Library c. Timeline
4. ………… enable you to control what appears in animation sequence.
a. Frames b. Work Area c. Tools panel
5. …………………… marks the current frame displayed on the Stage.
a. Buttons b. Current scene c. Play head
PM PUBLISHERS PVT. LTD.

B. Write ‘T’ for True and ‘F’ for False statements.

1. You can create illustration and other artworks in Adobe Animate.
2. Symbols are the objects in Animate that you cannot re-use.
3. To change the Stage size, we can type the height and width dimensions.
4. By default, Tools Panel appears on the right side of the program window.
5. All document types in Adobe Animate are saved as FLA or XFL files.

C. Fill in the blanks.

1. Adobe Animate uses frame by frame or motion tweening methods to create ………………....….
2. ……………..........…… appear in chronological order in the Timeline, and each frame has a
number.
88 3. The area surrounding the stage is called ……………..........…… .
4. You can ……………..........…… your animate movies at any time during design and development.
5. You can press ……………..........…… key to test an Animate movie.
D. Define the following.
1. Frames: ...................................................................................................................................
......................................................................................................................................................
2. Playhead: ...................................................................................................................................
.....................................................................................................................................................
E. Answer in 1-2 sentences.
1. What do you mean by Adobe Animate?
.....................................................................................................................................................
.....................................................................................................................................................
2. What is the use of Drawing tools in the Tools Panel?
.....................................................................................................................................................
.....................................................................................................................................................
3. What do you understand by Stage?
.....................................................................................................................................................
.....................................................................................................................................................
F. Answer Briefly.
1. What are the main features of Adobe Animate?

P
.....................................................................................................................................................
.....................................................................................................................................................
.....................................................................................................................................................
PM
2. What are main features of Animate Timeline? Explain briefly.
.....................................................................................................................................................
.....................................................................................................................................................
.....................................................................................................................................................
.....................................................................................................................................................
3. How will you test an animate movie? Explain.
.....................................................................................................................................................
.....................................................................................................................................................

IT PLANET - 6 (GIGABYTE)
.....................................................................................................................................................
.....................................................................................................................................................
G. Application Based Question.
During the class revision session, your teacher asked you which feature of Adobe Animate can
help you to add time to your movie? Answer her.
...........................................................................................................................................................

Group Discussion
Divide the students into two groups and discuss the topic, “Which one you find more interesting
‘Creating Illustrations’ or ‘Creating Animation’ with Adobe Animate”?
89
Online Link
To learn more about working of Adobe Animate visit the website:
https://conceptartempire.com/adobe-animate-tutorials/
 Discover More
Adobe Creative Cloud
Adobe Creative Cloud is a set of applications and services from Adobe Systems that
gives subscribers access to a collection of software. Lets learn about some popular
Adobe System software programs.
Adobe InDesign: It is a desktop publishing and page layout designing software application. It
can be used to create works such as posters, flyers, brochures, magazines, newspapers,
presentations, books and ebooks.

Adobe Illustrator: It is a vector graphics editor program which allows you to create icons,
logos, drawings, typography and illustrations. They can then be used for diverse platforms,
including; print, web, video and mobile.
Adobe Dreamweaver: It is a software program for designing web pages. It is essentially a fully
featured HTML web and programming editor. It is also used to edit PHP, Javascript, CSS and
related files and can also be used to upload them to one's Web server.
Adobe Photoshop: It is a graphics editing program that is used by professionals and regular

P
users. It is used to create images from scratch or to edit existing images.

Adobe Acrobat: It is a software program that is used view, create, manipulate, print and
manage PDF (Portable Document Format) files.
PM
Adobe After Effects: It is a software application for creating motion graphics and special
effects used in video, online content and presentations.

Adobe Premiere: It is a video editing software which is used for editing videos, commercials
and other film, television, and online video.

Adobe InCopy: It is a professional word processor that is used to write, edit, and design
documents.

Technology Trailblazers
PM PUBLISHERS PVT. LTD.

Shantanu Narayen
? CEO: Adobe YEAR: 2007
Shantanu Narayen is an Indian-American business executive who is currently
affiliated with Adobe Systems as the multinational software company’s Chief
Executive Officer (CEO). He was born on May 27, 1963 in Hyderabad, India
into an affluent family. His mother was a professor of American literature
while his father owned a plastics company. He grew up alongside his older
brother. Initially, he wanted to become a journalist but his parents advised
90 him to study engineering instead. Narayen began his professional career at
Apple and played an instrumental role in the revitalization of the technology
giant. In 1998, he was hired by Abode as a senior vice-president of worldwide
product research. In the ensuing years, he rose through the ranks swiftly and
in November 2007, was appointed to his current post.