Unit 1.

Introduction to ANIMATE CC
What is ADOBE ANIMATE?
Animate CC is a powerful tool created by Macromedia that has overcome the best expectations of
its creators.
Macromedia Adobe Animate was originally created in an effort to realize colorful animations for the
web as well as to create animated GIFs.
Designers, web professionals and amateurs have selected Animate CC by many reasons. Further
we will see why Animate CC is interesting.

The working environment (I)

Animate CC Interface

Animate CC counts with the most handy and intuitive environment or working interface. Moreover
it has an advantage it makes easier to assuming Adobe Animate, and faster its management and
control. We will see this after opening Animate CC for the first time:
 During the course we will work with the trial version of Adobe Animate.
In the image you can see the interface, we can see it just opening the Adobe Animate program.
Adobe Animate will remember your preferences and will open the program just as you left it last time
when you used it.

Menu Bar

The Menu Bar is aimed to

make easier the access to different program features. It is similar to any other web or graphic designer
program, although it has some particularities. Let's see the main Submenus you can access to:
File: It allows creating, opening and saving archives… Import has exceptional power; it inserts to
the current movie nearly all types of archives (sounds, videos, images and even Adobe Animate
movies) or the Publication Settings option from which you can modify the characteristics of the
publications. It also enables to configure the printing pages, print them, etc…
Edit: It is a classic menu that allows you to Cut, Copy, Paste… objects or as well images or frames;
it also allows you to customize some of the most common options of the program.
View: Apart from, typical Zooms, it allows you to move the frames and scenes. It also includes the
possibility to create a grid and some guides. These ones can be selected from submenu Grid and
Guides from where you can configure its options.
Insert: It permits you to insert objects into the movie, as well as new frames, layers, actions,
scenes…
Modify: The option Transform permits one to modify the graphics existing in the movie, and the
option Draw Bitmap allows to modify current graphics in vector maps (this theme will be studied
further). Other options allows you to modify characteristics of the animation elements Smooth,
Optimize or of the same movie (Layer, Scene…).
Text: Its contents affect the edition of text. It will be further handled in more details
Window: In addition to the classical options of distributing the windows, this menu includes
shortcuts to ALL the Panels.

The Working Environment (II)

Timeline

The Timeline represents a

simple mode of visualization. It
consists of two parts:
1) The Frames that are
limited by vertical lines (forming
rectangles)
2) The Numbers of
frames that allow us to know the
assigned number of each frame,
its duration and when it will
appear in the movie.
 On the definition level, the Timeline represents the succession of frames in the Time. The Adobe
Animate movie will not be only the frames that appear on the Timeline one after another in the order
established by the same Timeline

The Working Area

The Working Area consists of numerous parts, let's see them:

The most important part is the Stage, we will draw and fix different elements of our movie. The
Stage has very important properties, due to the fact that they coincide with Document
Properties, in order to access them, right-click on anywhere on the Stage with no objects and then
on Document Properties:
Add metadata to your files so they can be indexed in the search engines. For this fill
the Title and Description fields.
Dimensions: They fix the size of the movie. The smallest size is of 1 x 1 px (pixels) and the
biggest one is of 2880 x 2880 px.
Match: It causes the coincidence of the movie with the selected size
Background Color: The color selected here will be the one of the entire movie.

Unit 4. Drawing and Working with Color (I)

Drawing in Adobe Animate

Design passes through many phases when designing web page or an animation. After the phase
of "What do I want to create and how is it going to look", normally, the phase of graphic design comes
up. Realize what your imagination has produced on the paper (in this case on the paper of Adobe
Animate).
It isn't desirable to mislead us, Adobe Animate isn't a program of graphic design, but its power in
this field is almost as great as these programs. We are going to see how use every drawing tool
effectively.

Tools Bar. Basic Tools.

 The Tools Bar contains all necesary Tools for the drawing. Let's see which of them
are the most important and how they are used:

Selection (arrow) Tool : It is the most used tool among all. Its main use is to
select objects, it allows selecting the borders of the objects, the fillings (with only one
click), the borders (with double click), zones on our choice... Moreover, its adequate use
can save time of our work.

Line Tool: It allows creating straight lines in a quick way. The lines are created
as in any program of drawing. Click and drag to show up a straight line until the desired
end point. Once created, the line can be modified just by placing the cursor near the line:
above of the extremes for dragging them, and in any other part near the straight line to
curve it.

Text Tool: It creates a text in the place where we click. Its properties will be
shown in the next theme.

Oval Tool: The Oval Tool enables drawing circles or ellipses in a fast and
simple way.
To practice the handling this Tool, we recommend to do the Exercise of Creating
Oval
To practice the handling this Tool, we recommend to do the Exercise of Filling Color
Oval

Rectangle Tool: Its handling is identical to the Oval Tool, they only differ in the
objects they create.

Pencil Tool: It allows drawing lines, after being drawn you will be able to edit its
shape as you like. The color applied by this Tool can be modified from the Color Mixer
Panel or from the subpanel Colors that is in the Tool Bar.

Brush Tool: Its functionality is equivalent to the pencil, but its stroke is much
more thicker. It is usually useed for fills. We can modify its thickness and stroke shape.

Paint Bucket Tool: It lets you apply fillings to the created objects. Many other
programs of drawing don't allow to apply fillings if a border doesn’t limit the zone, it does.
The color applied by this Tool can be modified from the Colors Mixer Panel or from the
subpanel Colors that are in the Tool Bar.

Eraser Tool: It works like the Brush Tool. Nevertheless its function is to erase
everything what "it draws".

Tools Bar. Advanced Tools.

 Lasso Tool: Its function is complementary to the Arrow Tool, since it can select any object
in a free way (the Arrow Tool can only select objects or rectangular or square zones). In counterpart,
the Lasso Tool can't select fillings nor objects (if we don’t make the selection by hand).

By selecting this Tool, the following images appear on the Options Panel : This is
the Magic Wand Tool, which is so popular in other programs. It lets you make selections according

to the objects color. The third option you have is the following: It allows you to select polygon
shapes.

Ink Bottle Tool: It is used to change quickly the color of a stroke. It is applied to objects with
borders, changes the color of the boundary with one click in the Colors Mixer Panel.

Unit 5. Working with Texts (I)

Starting

Adobe Animate provides everything that we might need to create an animation, and, hence, also
all that is related to the texts. However, Adobe Animate was conceived to create graphic animations,
in such a way that it will treat any text as if it were one more object, prepared to be animated if that's
what you want it for. That allows us to animate texts afterwards and to easily create spectacular
animations. Adobe Animate distinguishes among 3 types of text: static text or normal; dynamic text;
and input text (in order the user to introduce the date, for example), it can also create text that
supports HTML format, etc...

Text Properties
In order to write we have to click on the Text Tool and then on the point of
the stage in which we want to start writing.

To learn more about How to write texts visit our Advanced Page
The Properties Panel contains the main properties of all the objects that
we'll use during our movie. So if we select a text, we can see whatever we need
to know about our text. If we have experience using Adobe Animate 5, we'll
notice that all the properties met before in the Character
Panels and Paragraph, are now grouped in the Properties Panel.

Properties Panel
 Let's see inside out the Properties Panel:

Font: From here, as well as in the more

common text editors, we can select the preferable type of letter or "font".

Height: It determines the space between the characters. It is

used when the useed typography shows the letters together or to add specific
effects to the text.

Text Orientation : It changes the orientation of the text from horizontal

to vertical, as well as from right to left.

Automatic adjustment between characters: The activation

of this square causes that the separation between characters is done
automatically.

Position: It allows us to convert our text in subindices

or in superindices (or leave it normal).

URL: If you want the text linked to a web page,

enter the address here.

Destination: It determines where the URL will be loaded: in the same

window of the browser, in a new one...

Line Type: If the text is dynamic (otherwise it appears deactivated), this

option allows us to determine the type of lines (single line, multiple line or multiple line without
adjusting).

Configuration: There are the classical options that allow to convert the text
in Bold (B), Cursive (I), or to change the text color and size.

Other Properties: Given the fact that Adobe Animate handles the
texts as objects, these also have width, height and coordinates. We can modify them.

Unit 6. Working with Sounds (I)

Starting

Who would be able to see a mute movie? And a spectacular animation without sound?
 Adobe Animate allows us to insert any sound that we want in our movies (.wav, .aiff y .mp3) in a
quick and easy way

mporting Sounds

If you had once intended to add a sound to your animation probably Adobe Animate would
have disappointed you a lot by not achieving it. This is due to the fact that it is not taken into account
that to be able to use an object in our movie: either we create it ourselves (how we have done until
now) or we get it in any other way, and then we insert it in our movie.
This last is called "Import" and it can be done with sound, graphics, and even with other Adobe
Animate movies. Hence, to import, you just notify Adobe Animate to add a determined file to our
movie for use it whenever you want. In fact, the file is added to our Library, that is the Panel in
which are all the objects that contribute in the movie (we'll see this Panel further).
So then if we want to handle a sound in our movie, we have to import it beforehand.
Once it is imported, we'll be able to use it with total freedom.

To import a sound click on the menu File → Import → Import to Library.

 The Import to Library dialog will open. There you will hace to select in Type All the sound
formats.
Browse your folders until you find the sound file you want to add. Then select it and press Ok.
The sound will be ready to use, you could find it in the Library (menu Window → Library).

Sounds Properties
In Adobe Animate, as well as in Adobe Animate MX 2004, we can publish all referring to the
sounds from the Properties Panel. Here we have all that is necessary to insert, modify and edit
the sound that we terminate to import. If we have not imported any sound, we will notice that we
cannot select anything in this panel, it's enough to insert it in order that it changes.
In order to work with sounds, we have to click in a frame of our movie. After doing this,
the Properties Panel takes the following appearance:

Unit 7. Working with Objects (I)

The Objects. Starting

Independently of our working with animation, at the web page, at the catalogue for CDRoms
or in any other place, we will have to work with objects. In general, we would consider everything
that appears and is visible in the movie as an object, hence, we could work with it; for example, an
object could be any image, which we create or import, a button, a drawing created by ourselves
etc...
The objects that are considered in this way have 2 fundamental parts:
The Border: It consists in one thin line that separates the object from the exterior part of the
stage.
It could exist or not, depending on what is convenient for us. When we create an object, the border
is always created and its color will be indicated in the Outline Color (inside of the Color Mixer
Panel).
If we want to draw and create Borders we must use the Pencil Tool, Line or Pen and if we want
our drawing without border, it will be enough to select the border and delete it (see the next point)
The Fill: The Fill is just the object without border. So far it is the interior part of the object. Its
existence is also arbitrary, because we can create an object which interior color is transparent, as
 we've seen in the Drawing unit, and therefore, it will seem that this object has no fill, although, in
fact, it does exist but it's transparent. In order to draw Fills (without borders) we can use such tools
as the Paintbrush or the Paint Bucket

Groups

A Group is nothing more than a set of objects. However, not each set of objects forms a group,
because to create a group, we must to indicate it to Adobe Animate. For that, select the enclosed
objects that we want to be member of a group and then click the Menu. Modify → Group.
After doing this we'll observe that the texture disappear indicating selected objects and that the
group happens to be a "whole", since it is impossible to choose one of its members without selecting
others as well. In addition, by default, the blue rectangle occurs that encloses the group, outlining it.
 A Paragraph is nothing more that a set of characters with common properties for all of them.
These paragraphs admit certain options that allow us to work with text blocks. The Properties
Panel provides us the following options to work with paragraphs (between others).

Align Left: All the lines will begin as far as possible to the left (within the defined text frame).

Center: The lines are distributed to the right and to the left from the middle Paragraph point.

Align right: All the lines will begin as far as possible to the right (within the box of defined
text).

Justify: The text is widen if it is necessary in such a way that there cannot be spaces in any
of its limits.

We use co
Unit 8. Layers (I)

The Layers. Let's understand them

Everybody has seen sometimes how the sketchers of cartoons work. And all we've seen how
they place a semitransparent leaf with drawings on others and the superposition of all composes
the final drawing. Why do they not draw everything on a same leaf? Why do they work with several
levels and several drawings if they are going to finish all together?
The reasons are many, and these levels that use the sketchers, are equivalent to the Layers,
which Adobe Animate uses. Each layer is, therefore, a level in which we can draw, to insert sounds,
texts... with INDEPENDENCE from the rest of layers. It is necessary to take into account that all the
layers share the same Timeline and therefore, its different frames will be reproduced simultaneously.

Let's clarify this with an

example:

Let's suppose that we

have 2 layers. In one layer,
the frames from the 1 to the
10 contain the drawing of
soccer goal. In the other
layer, the frames from the 1
to the 5 contain the drawing
of a goalkeeper (they are
empty from 5 and further).
Then, this movie will
initially display (during the
time that lasts the first 5
frames) the goal with the
goalkeeper, to show
afterward (during the frames
 from the 5 to the 10) the goal
without goalkeeper.
In such a way the goal is
independent from the
goalkeeper, and we can
handle these objects freely,
since they do not interfere
among themselves.

Working with Layers

The standard View of a layer is the one that shows the
image. Let's see for what the different buttons are used and
how to use them.

Insert Layers : As its name indicates, it is used

for Inserting layers in the present scene. It inserts normal
layers (in the following point the different types from layers will
be seen).

Add Guide Layer : Insert a kind of guide layer. It is

discussed in detail the following point.

Erase Layer : Erase the selected layer.

Change Name: To change Name: of a layer, it is enough to double click the current name.
 Layer Properties: If we double click the icon , we'll be able to access a panel with
the properties of the layer we've clicked. We'll be able to modify all the options that we've previously
commented and some more of lesser importance.

Here you can change different options about the layer, like its name or color. You can also lock or hide it.

Unit 11. Movie Clips (II)

Creating a new Clip

As we've commented, we'll usually use Clips to make animations. What we haven’t said yet is
that a Adobe Animate symbol can be created from nothing, saved in the library and publish when we
want.
It could be interesting in the clips, in distinction to graphics, because its purpose usually is the
movement and the complicated animations, sometimes special actions have been assigned to them
in which, either it’s not necessary its immediate creation or it's convenient to leave the clip empty.
That’s why, it's interesting to learn how to create a symbol, in this case a MovieClip, of nothing to
modify it later.
To insert an empty clip click on Insert → New Symbol and the Create a new Symbol dialog will
open.
Then you will have to name it, to identify it later in the Library, and select the Movie Clip option in
the Type list.
From now you will find the empty clip in the Library (menu Window → Library). If you right click
on it and select Edit you will be able to modify it and work on it.

Look how to do it
When we see the animations we'll make examples of them and we will see the real potential of this
type of symbols.
Import and Export Movie Clips from Library
As for all the Clip symbols are stored in the document library when they are created. It’s very
important because clips are usually very reusable. In order to import movies clips first we must open
the library where it is.
We've seen in the Symbols unit, two types of libraries: those that are associated with documents
or other movies; and the ones that have Adobe Animate. So, we can't only use symbols from the
same document but also Import them from other documents from our hard disc, in the end it
results to be very usefull. It’s obvious that the exporting to the library is automatic, because Adobe
Animate leaves created objects in the library in order to reuse them.
To import a Clip from a file on the hard disk we must go to the menu File → Import → Open
External Library, select Adobe Animate File (.fla) from which we want to import its library symbols
and press Open.
The Library will appear with its corresponding list of graphics, buttons and clips from the selected
document.
It's important to emphasize that when we insert a Clip from a library, all the symbols that it contains,
including clips, will be imported as well.
Now we'll show an example in which we will see how to import clips in this way, apart from verifying
the clips properties and its independent timelines by the simultaneous reproduction of two movies and
creating a quite showy effect by using “apparently” only one frame.
 .

Video tutorials

1. Text animation (advanced)

http://www.vtutorial.com/videos/Adobe_Adobe Animate/Adobe Animate_Text_Animation

2. Animation Basics
https://www.youtube.com/watch?v=YxI0dqT04Yc

3. Moving Ball animation

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

4. Running Stick man

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