Adobe Animate CC.

Animate
Ejercicios adicionales

Definition of
requirements
When starting projects it is always important
to keep the client's goals in mind, to
determine the goals of the project and the
audience. Paying attention to the details of
the project's details (age, occupation, gender,
education, ethnicity, and computer skills of
the target audience) will help meet the
client's goals and produce a project
according to the target audience.
These factors are relevant because they are
what will influence the design options.

Definition of
requirements
Who knows the product and the
characteristics of its target market is the
customer, the one that requires our services,
therefore will have great relevance his
opinion identifying the elements necessary
to generate marketing materials.

Exercise
• Customer target
• Client's location
• Project budget
• Audience demographics
A designer is working on a new visual design
project for a local, clothing store. The
designer has been asked to attract a new
audience.
What are the most important considerations
that direct a project plan? (Choose two.)

Phases of the project
The phases of a project plan may include:
• Planning and analysis.
• Design.
• Building.
• Test.
• publication
It is very useful to define the phases of a
project so that the client and the creative can
easily follow the state of the project.

Phases of the project
• Planning and analysis: this includes the study of the audience and
customer needs.
• Design: Sketches, diagrams and visual proposals are generated of the
appearance that is intended with the animation.
• Building : The necessary graphics are generated for the realization of
the animation.
• Test: the material prepared and approved will be sent to the person
responsible for the layout of the design.
• Publication: Once elaborated and approved it is published.
For the development of an animation
proceed as follows

Exercise
• Test
• Build
• Analyse
• Publish
• Design
Place the steps of the project management
cycle in order.

Exercise
1. Analyse
2. Design
3. Build
4. Test
5. Publish
Place the steps of the project management
cycle in order.

Creative commons
One goal of Creative Commons is to increase the
amount of openly licensed creativity in “the
commons” — the body of work freely available for
legal use, sharing, repurposing, and remixing.
Through the use of CC licenses, millions of people
around the world have made their photos, videos,
writing, music, and other creative content available
for any member of the public to use.
https://creativecommons.org

Creative commons
Uno de los objetivos de la idea es aumentar la
cantidad de creatividad con una licencia
abiertamente en “el común” - el trabajo de libre
acceso para uso legal, el intercambio, la
reutilización y la remezcla. A través del uso de las
licencias CC, millones de personas en todo el
mundo han hecho sus fotos, vídeos, escritura,
música y otros contenidos creativos disponibles
para cualquiera.
https://creativecommons.org/licenses/by-nc-nd/3.0/es/
https://creativecommons.org/licenses/

¿Cuál de los siguientes indica No puede
utilizar el material para una finalidad
comercial ni Obra Derivada?
1. A
2. B
3. C
4. D
5. F
6. G
A
B
C
D
F
G

Design Principle:
Symmetry
Symmetry adds balance to a design. When
elements are the same on both sides of an axis, the
design feels harmonious.

Principios de diseño:
simetría
La simetría proporciona balance a un diseño.
Cuando los elementos son los mismos o parecidos
en ambos lados de un eje, el diseño se siente
armonioso.

¿Cuál de los siguientes imágenes no es
simétrica?
1. A
2. B
3. C
4. D
A
B
C
D

Symmetry:
Refers to the proper and balanced
distribution of shapes and spaces around a
common line.

Exercise
Click on the image that portrays symmetrical
balance.
1 2 3 4

Design Principle:
asymmetry
Asymmetry achieves balance through contrast.
Asymmetrical, or informal balance, involves
different elements that have equal visual weight;
the weight can be equal but the elements are not
identical.

Asimetría
La asimetría consigue equilibrio a través del
contraste. El equilibrio asimétrico o informal,
implica diferentes elementos que tienen el mismo
peso visual; El peso puede ser igual, pero los
elementos no son idénticos.

Design Principle: Unity
Unity provides the cohesive quality that makes a
project feel complete and finished.

Unidad
Proporciona la cualidad cohesiva que hace que un
proyecto se sienta completo y terminado.

Design Principle:
balance
Its means that the visual weight of objects, space,
and color is equally distributed across the page.
Without balance, a design feels off-kilter,
inconsistent, and unsettling.

Balance
Esto significa que el peso visual de los objetos, el
espacio y el color está igualmente distribuido a
través de la composición. Sin el balance, un diseño
se siente descontrolado, inconsistente e
inquietante.

Design Principle:
Proportion
Proportion is the relative visual size and weight of
particular graphical elements in a design and how
they compare with one another.

proporción
Proporción es el tamaño visual relativo y el peso de
elementos gráficos en un diseño y cómo se
comparan entre sí.

Design Principle:
Emphasis
Method used to attract attention in the design of a
page or work of art is the use of a focal point.

Enfásis
Método utilizado para atraer la atención en el
diseño, es el uso de un punto focal.

Match the concept with the correct
description.
Match the concept with the correct description.
Unity
Balance
Proportion
Emphasis
An element distinguish because it is different
An element seems to be the proper size
The sense that elements belong together
The image has correctly distribute elements

Theory of color
Both the design and the color scheme are
important, since knowing where an image
will be published: print, on the web, or on a
digital device, helps to adapt the colors and
values of an image for different users, I
reviewed some schemes color.

Primary colors
In an idealized model is considered primary
color to the color that can not be obtained
by mixing any other, for the light colors
(additives) are: red, green and blue, for the
subtractive pigments are: red ( Magenta),
blue (cyan) and yellow.

Complementary Colors
Colors with the maximum contrast are
located opposite each other in the chromatic
circle.

Similar Colors
Uses neighboring or sequential colors in the
color circle and have a color as common
denominator.

Exercise
• Law firm
• Government
• Construction company
• Preschool
A client needs an animation for his/her
website with bright and primary colors.
Select the business type that this color
scheme would typically serve for.

Exercise • Complementary
• Analogous
• Triad
• Split Complimentary
Given the image:

Edit symbols
When you edit a symbol, Animate updates all the
instances of that symbol in your document.
Do one of the following:
• Double-click an instance of the symbol on the
Stage.
• Select an instance of the symbol on the Stage
and right-click > select Edit symbols
Edit the symbol.
• To exit edit mode and return to document,
Click the Back button.

Editar símbolos
Al editar un símbolo, Animate actualiza todas las
instancias de ese símbolo en el documento.
Realice una de las siguientes acciones:
Stage.
Edit the symbol.

Editing Symbols
• In the context of the other objects in the scenario, using the Edit in
context command. Other objects appear dimmed for the badges of
the file being edited. The name of the file being edited appears in an
edit bar at the top of the Stage, to the right of the scene name.
• In a separate window, using the Edit command in new window.
Editing a book in a separate window allows you to view the symbol
and the main timeline. The file name that appears in the edit bar is at
the top of the Stage.
• The sky is changing the scene view window to a single photo view,
with symbol editing mode. The file name that appears in the edit bar
is at the top of the Stage, to the right of the name of the current
scene.
• The identification point of the identification (the point that is
identified with the coordinates 0, 0) is changed with any of the
methods of the symbol editing.
When editing a, animate update all instances
of this in the document. Symbols are written
in the following ways:

Exercise
• Another instance of the edited symbol would be added to the stage.
• The change is restricted to the new instances.
• A new symbol is added to the library.
• The instances change to reflect these mdifications automatically.
What happens when a symbol is edited?

Exercise
• Another instance of the edited symbol would be added to the stage.
• The change is restricted to the new instances.
• A new symbol is added to the library.
• The instances change to reflect these modifications automatically.
What happens when a symbol is edited?

Information on
symbols
Symbols may include illustrations imported from other applications. The
created symbols automatically form part of the active document library.
A frame, a movie clip that is created once in
the Animate CC editing environment
(formerly Flash Professional CC) or by the
SimpleButton (AS 3.0) and MovieClip classes.
These symbols can be reused in the same or
in other documents.

How to create a new
symbol
• Click the New Symbol button, located at the bottom left of the library
panel
• In the Create new symbol box, type the name and click ok
Create a new symbol through the library
panel

Exercise
• Timeline
• Modify menu
• Library panel
• Stage
Select the location where a user would find
the Select Unused Items option to select
unused symbols.

evaluating accessibility
When you edit a symbol, Animate updates all the
instances of that symbol in your document.
Stage.
Edit the symbol.
www.w3.org

EVALUAR
ACCESIBILIDAD
Al editar un símbolo, Animate actualiza todas las
instancias de ese símbolo en el documento.
Realice una de las siguientes acciones:
• Doble click en la instancia del scenario.
• Seleccionar Edit symbols
Edite el símbolo.
• Para salir del modo de edición dé clic en el
botón regresar.

Workspace
You create and manipulate your documents
and files using various elements, such as
panels, bars, and windows. Any arrangement
of these elements is called a workspace

Identificate each panel
from Animate CC
a)
b)
c)
d)

Identificate each panel
from Animate CC
a) Properties Panel
b) Library Panel
c) Components Panel
d) Actions Panel

Make Responsive
The users can create Canvas output that can be
responsively scaled within the browser. This new
feature allows users to select if the Canvas output
should be responsive in regards to it’s width,
height, or both and automatically resizes the
published output.
1. Select File > Publish Settings.
2. In the Basic tab, select Make Responsive >
Width, Height or Both.
3. Select Scale to fill visible area to view the
output in full screen mode.

Hacer interactivo
Los usuarios pueden dar salida a su documento y
adaptarse a medida del navegador. Esta nueva
característica permite a los usuarios seleccionar si
la salida del documento debe ser sensible en
cuanto a su anchura, altura o ambas y
redimensiona automáticamente.
1. Seleccionar Archivo> Configuración de
publicación.
2. En la ficha Básica, seleccionar Hacer
interactivo.
3. Seleccione Ajustar para rellenar el área visible
para ajustar a la vista.

AS3 Event class
• TextEvent: An object dispatches a TextEvent object when a user enters text in a
text field or clicks a hyperlink in an HTML-enabled text field.
• TimerEvent: A Timer object dispatches a TimerEvent objects whenever the
Timer object reaches the interval specified by the Timer.delay property.
• ActivityEvent: A Camera or Microphone object dispatches an ActivityEvent
object whenever a camera or microphone reports that it has become active or
inactive.
• MouseEvent: A MouseEvent object is dispatched into the event flow whenever
mouse events occur.
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/events/package-detail.html

AS3 Event class
• TextEvent: Un objeto distribuye un objeto TextEvent cuando el usuario escribe
texto en un campo de texto o hace clic en un hipervínculo de un campo de texto
compatible con HTML.
• TimerEvent: Un objeto Timer distribuye objetos TimerEvent siempre que el
objeto Timer alcanza el intervalo especificado por la propiedad Timer.delay.
• ActivityEvent: Un objeto Camera o Microphone distribuye un objeto
ActivityEvent siempre que una cámara o un micrófono informe sobre su cambio
de actividad (activo o inactivo).
• MouseEvent: Se distribuye un objeto MouseEvent en el flujo de eventos cada vez
que se produce un evento mouse.
http://help.adobe.com/es_ES/FlashPlatform/reference/actionscript/3/flash/events/package-detail.html

Match the concept with the correct description.
TimerEvent
ActivityEvent
TextEvent
MouseEvent
Send at designated intervals.
Send when an input field receives a input
Dispatched by user input with an interaction device
When a device becomes detected

Line Tool
Creates a shape that is entirely composed of
a single stroke. There is no fill whatsoever
when you’re working with the line tool.
Holding down Shift key ensures that the line
you créate is completely straight along the
horizontal axis, or at 45-degree angle.

Match each picture with
the instruction for
creating a line stroke and
modify the width.
• Select Line Tool ___
• Select the width tool and hover over the
stroke ___
• Create a Stroke ___
• Drag the Width Handle outwards ___
• ___

Match each picture with
the instruction for
creating a line stroke and
modify the width.
• Select the Line Tool _A_
• Select the width tool and hover over the
stroke _C_
• Create a Stroke _B__
• Drag the Width Handle outwards _D_

Guides
Guides help you align text and graphic
objects. You can create ruler guides (straight
vertical or horizontal lines) and guide
objects(vector objects that you convert to
guides). Like the grid, guides do not print.

What are the steps to
change the colors of the
guides in Adobe Animate
a) View > Guides > Edit Guides > Change
the color of the guides
b) View > Guides > Select Color
c) Window > Guides > Edit Guides > Change
the color of the guides
d) Modify > Guides

Tools panel
The tools in the Tools panel let you draw,
paint, select, and modify artwork, as well as
change the view of the Stage. The Tools
panel is divided into four sections:
• The tools area contains drawing, painting,
and selection tools.
To show or hide the Tools panel, select
Window > Tools.

Select the correct tool
to create shapes
1) Lasso
2) Pencil
3) Text
4) Rectangle

Publish as Animate
Deployment Package
(.oam)
• Select File> Publish Settings.
• In the Publish Settings dialog box, make sure that Animate
Deployment Package is selected as the publishing destination.
• Note the change to the destination directory.
• (Optional) Specify a poster image.
• Click Save to save your publication settings, or click Publish.
Select this export option to create a project
package file for use in other Adobe tools. The
following tools support Animation
deployment packages: Adobe Digital
Publishing Suite (DPS), InDesign CS6,
Dreamweaver CS6, and Muse.

Exercise • .swf
• .oam
• .exe
• .svg
File type resulting when publishing an
Animate Deployment Package?

Exercise • .adp
• .oam
• .swc
• .svg
File type resulting when publishing an
Animate Deployment Package?

Use of rules
• To show or hide the rules, select View> Rules.
• To specify the measure unit of rules for a document, choose Modify>
Document, and then choose a unit from the Rule Units menu.
When the rules are visible, they appear at
the top and left of the document. You can
change the unit of measure you use in the
rules; The default drive is pixels. When you
move an element on the Stage with the rules
visible, no lines in the rules that indicate the
dimensions of the element.

Exercise
• Edit > Preferences
• Modify > Document
• Edit > Document
• Modify > Preferences
What is one way to access the Units list in
order to change the measurement unit of the
rulers?

The principles of
design
They also help generate a design that will visually maintain consistency.
• Unity
• Balance
• Proportion
• Emphasis
Are techniques and theories that are used to
make graphics projects look attractive and
professional.

The principles of
design
Unity
Helps the transmission of the message of any
design. The unit is what gives coherence to
all of the above and tells us that the design is
well built, generates a feeling, everything
within the composition has a place and
completes it.

The principles of
design
Balance
It refers to the accommodation of the
elements and the relationship between them
that ensures a sense of order and therefore a
better appreciation. It also refers to the
common traits that some elements share.

The principles of
design
Proportion
Size relationships in a design are defined by
proportion and scale. Proportion refers to
how the elements within an object relate to
the object as a whole.

The principles of
design
Emphasis
Used to denote importance to certain
elements, some being more dominant than
others, this to attract the attention of the
viewer to certain areas as well as the
perception of objects within a composition.

Exercise • Unity
• Balance
• Proportion
• Emphasis
An element seems to be the proper
size
An element stands out because it is
different
The sense that elements belong
together
The image has well-distributed
elements
Match each design principle with its
description.
Answer options may be used more than once
or not at all.

Selecting objects in
Animate CC
Tool Icon Description
Selection
Tool (V)
Use this tool to select an entire object. Click or drag an
object to include the object with the rectangular
selection.
Subselec
tion Tool
(A)
Use this tool to change the shape of a motion plot of an
animation. You can display the control points and plot
curve controls that correspond to each position
property keyframe.
Loop Tool
(L)
Use this tool to create an irregular outline selection on
an object.
Polygon
Tool (L)
Use this tool to define a selection area with a series of
connected straight lines. To select this tool, hold down
the selected Lasso tool and click the Polygon tool.
Magic
Wand
Tool (L)
Use this tool to select areas of a bitmap graphic that
contain the same color or similar colors. To select this
tool, hold the selected Lasso tool and click the Magic
Wand tool.
In Animate CC, you can use the Pointer,
Subselection, and Lasso tools to select
objects. Animate highlights the objects and
strokes that have been selected with a
bounding box. You can choose to select only
the strokes of an object or its fillers. You can
hide the highlighting of the selection to edit
the objects without having to display the
highlighting.

Exercise
• Selects and transforms, rotate, skew, scale, or distort the element
• Selects the control points and bézier handles on the path
• Seletcs precise areas of an image by drawing the selection outline
• Selects entire objects by dragging to enclose the object
Which description defines the function of the
Subselection tool?

Packaging applications
for AIR for iOS
• Note: iTunes must be installed on the computer that has Animate
installed
• To enable direct deployment on an iOS device, do the following:
Make sure that iTunes is installed on the computer where you also
have Animate installed. In Animate, in the Properties pane, click the
button next to the Target drop-down box to open the AIR for iOS
Settings dialog box.
• En la ficha Implementación, seleccione la opción Instalar aplicación
en el dispositivo iOS conectado.
• Haga clic en Publicar.
Animate CC supports publishing applications for AIR for
iOS. AIR for iOS applications can run on the Apple
iPhone and iPad. When released for iOS, Animate
converts FLA files to native iPhone applications.
Deploying AIR applications directly to iOS devices
A major change in the AIR application deployment
workflow now allows you to deploy AIR applications
directly to iOS devices. Until now, to deploy applications
to iOS devices, it was necessary to invoke AIR
applications from iTunes.
However, with Animate, it is possible to deploy AIR
applications directly to iOS, without having to go
through iTunes. This feature reduces the time it takes to
publish an AIR application for iOS and dramatically
improves productivity and performance.

Exercise
• AIR
• WebGL
• JavaScript
• HTML5
Which technology is used to publish an
Animate project as an application for Android
and iOS devices?

SWF format • If you have selected the "Protect against import" option when
creating SWF, Animate will not be able to import the file again.
Attempting to import a protected SWF causes an error dialog to
appear.
• We recommend that you save the document in standard Animate FLA
format before exporting the file to Flash Player's SWF format or any
other file format. This allows you to open and edit the original file at a
later time.
The SWF format is a special compressed
format designed for small file size and
scalability. To keep this file size several
elements within the original Animate format
are compressed into data that Animate can
not re-import.

SWF format
Progressive download provides the following advantages over
incorporating video into the timeline:
• During editing, you can only publish the SWF file interface to preview
or try some or all of Animate content. This results in lower preview
times and faster speed when performing experiments several times.
• During playback, the video starts playing when the first video
segment is downloaded and cached in the local computer's disk drive.
• At run time, Flash Player loads video files from the computer's floppy
drive to the SWF file without any limitation on file size or duration.
There are no audio synchronization problems or memory limitations.
• The frame rate of the video file may not be the same as the frame
rate of the SWF file, which allows for greater flexibility when editing
Animate content.
Progressive download of video from a web
server
Progressive download lets you use the
FLVPlayback or ActionScript component you
write to load files and replay external FLV or
F4V files in a SWF file at run time.
The video file remains external to the rest of
the Animate content, so it is relatively time
to update the video content without having
to re-publish the SWF file.

Exercise
• Embed the video data directly inside the Animate file
• Stream the video from Adobe Media Server
• Place the video instance on the Stage
• Progressively download the video from a web server
Which two methods result in a smaller SWF
file size when incorporating a video? (Choose
two.)

Exercise
• The entire file must be downloaded before the video can be played.
• The video file can be easily updated bye publishing a new video to the
web.
• The video file must be published to the same folder on the web
server as the swf.
• The file size of the SWF is likely to be very small.
What is a characteristic of a SWF file with an
embedded video that has been published to
the web?

About sounds in
Animate CC
• You can create sounds that play consistently, independent of the
timeline, that use the timeline to synchronize an animation with a
sound track. You can add sounds to controls to make them more
interactive and make them appear and disappear gradually to further
refine the sound track.
• There are two types of sounds in Animation: event sounds and flow
sounds. An event sound must be fully discharged before it starts to
play and continue to play until it stops completely. Sound streams
begin to play as soon as enough information has been downloaded
for the first frames and synchronized with the timeline for playback
on websites.
About sounds in Animate CC Adobe Animate
offers several alternatives for the use of
sounds.

About sounds in
Animate CC
You can import Animate into the following sound file formats:
Adobe Sound (.asnd). This is the native sound format of Adobe®
Soundbooth ™.
• Wave (.wav)
• AIFF (.aif, .aifc)
• Mp3
You can import the following additional sound file formats:
• Sound Designer® II (.sd2)
• Sun AU (.au, .snd)
• FLAC (.flac)
• Ogg Vorbis (.ogg, .oga)
Supported sound file formats

About sounds in
Animate CC
• MP3 Compression
It allows exporting sounds with mp3 compression. Use mp3 to export
long sound streams, such as sound tracks with music. If you export an
imported file in mp3 format, you can export it with the same settings as
when importing it.
• Use imported mp3 quality
Default settings. Deselect this option to set up a different mp3
compression. Select this option to export an imported mp3 file with the
same settings it had when it was imported.
Compression options mp3

Exercise • wav
• aiff
• asnd
• mp3
Which sound file format compresses data
and has a smaller file size maintaining the
quality of the audio

How to use the frames
and keyframes in
Animate CC
• Frames
In the timeline, you work with the frames to organize and control the
content of the documents. Frames are placed in the timeline in the
order in which you want the objects in the frames to appear in the final
content.
• Keyframe
A keyframe is a frame where a new instance of the symbol appears in
the timeline. A keyframe can also be a frame that includes ActionScript®
code to control certain aspects of the document. You can also add an
empty keyframe in the timeline as a placeholder for the symbols you
want to add later, or to leave the frame empty premeditatedly.
By using the keyframe, you can set a position, add anchor points, actions
and comments, and more.
Adobe Animate CC documents split time into
frames similar to movies.

How to use the frames
and keyframes in
Animate CC
• To insert a new frame, select Insert> Timeline> Frame (F5).
• To create a keyframe, choose Insert> Timeline> Keyframe (F6), or
right-click (Windows) or Control-click (Macintosh) the frame where
you want to place a keyframe. keyframe. Then choose Insert
Keyframe from the context menu.
• To create an empty keyframe, choose Insert> Timeline> Empty
Keyframe, or right-click (Windows) or Control-click (Macintosh) the
frame where you want to place the frame key. Then choose Insert
Empty Keyframe from the context menu.
Add or insert frames in the timeline

Exercise • 100 frames
• 4 frames
• 50 frames
• 25 frames
How many frames are needed to create 4
seconds of animation, 25 Frames Per Second
(FPS)?

CretiveCommon0:
Public Domain
• CC0 does not affect the rights of trademark patents on the work, nor
the rights that other people are entitled to have in the work and in
the way in which it is used, such as publicity rights or rights derived
from protection of privacy.
• Unless expressly stated, the person who associated a work with this
agreement guarantees no delivery on the work, and disclaims all
responsibility for the uses of the work, to the extent permitted by
law.
• The use of the citation of the work must be done without it being
possible to infer approval or support of such use by the author and
who dedicates this work to the public domain.

Exercise
A designer is creating a free-of-charge
animation projection that other people can
use as long as they give her credit for the
work and don't make any changes to it.
Which Creative Commons license indicates
that an image can be used for free, requieres
that the original author is given credit, and
the image must remain unchanged in the
derivative work?
Please note the following acronyms:
CC0: Public Domain
BY: Attribution

CC0: Public Domain
• CC0 does not affect the rights of trademark patents on the work, nor
the rights that other people are entitled to have in the work and in
the way in which it is used, such as publicity rights or rights derived
from protection of privacy.
• Unless expressly stated, the person who associated a work with this
agreement guarantees no delivery on the work, and disclaims all
responsibility for the uses of the work, to the extent permitted by
law.
• The use of the citation of the work must be done without it being
possible to infer approval or support of such use by the author and
who dedicates this work to the public domain.

Exercise
A designer is creating a free-of-charge
animation projection that other people can
use as long as they give her credit for the
work and don't make any changes to it.
Which Creative Commons license indicates
that an image can be used for free, requires
that the original author is given credit, and
the image must remain unchanged in the
derivative work?
Please note the following acronyms:
CC0: Public Domain
BY: Attribution

Show or hide a layer
or folder
• To hide the folder layer, click the Eye column to the right of the folder
layer in the Timeline. To display the folder layer, click New.
• To hide all layers and folders in the Timeline, click the Eye icon. To
display all layers and folders, click the icon again.
• To show or hide multiple layers of folders, drag the pointer over the
Eye column.
• To hide all layers and folders Save the current folder layer, Alt-click
(Windows) or Option-click (Macintosh) the Eye column to the right of
the name of a layer or folder. To display all layers and folders, click Alt
or Option again by pressing Alt.
A red X next to the folder layer name in the
timeline indicates that it is hidden. In the
publication settings, you can choose whether
to include the hidden layers when publishing
a SWF file.

Exercise
• Lock the layers that should remain visible, and click on the Eye
icon at the top of the Timeline
• Select multiple layers, Right-click one, and then choose Hide
Selected from the Contest Menu
• Create a folder layer, nest the layers inside it, and toggle the
visibility of the folder
• Right click a layer that should remain visible and choose Show
Others Transparent
How can multiple layers be hidden at once?

Types of animations
Animate supports the following types of animation:
• Motion tweens
• Classic interpolations
• Shape interpolations
• Frame-by-frame animation
Animate CC offers several ways to create
animations and special effects. Each of the
methods available to create animated
content.

Types of animations
Motion tweens are used to set the properties of an object, for example,
the position and transparency of one frame and, again, another frame.
Animate interpolates the values of the properties of the intermediate
frames. Motion interpolations are useful for animations with continuous
motion for object transformation. Motion tweens appear in the Timeline
as groups of contiguous frames and can be selected as a single object by
default. Motion tweens are really powerful and easy to create.
Motion tweens

Types of animations
• Classical interpolations are like motion interpolations, although more
difficult to create. Classic interpolations add specific animation effects
that are not possible in size-based interpolations.
• Positions of inverse kinematics (no longer used in Animate CC)
• The poses of inverse kinematics allow you to stretch and bend the
shape objects, as well as the linking groups of symbol instances so
that they move at the same time and with naturalness. Once the
bones are added to a shape of a group of symbols, you can change
the position of the bones of the symbols in the different key
photographers. Animate interpolates the positions of the
intermediate frames.
Classic interpolations

Types of animations
• In shape interpolation, you draw a shape in a particular frame of the
timeline and modify or draw another shape in another specific frame.
Animar then interpolates the intermediate forms of the intermediate
frames and creates the animation in a changing way.
Shape interpolations

Types of animations
• This animation technique allows you to specify several illustrations for
each frame of the timeline. Use this technique to create effects like
that of fast-moving movie frames. This feature is useful in complex
animations where it is necessary that the graphic elements of each
frame are different.
Frame-by-frame animation

Exercise
• Shape
• Motion
• Classic
• Frame-by-Frame
Which type of tweening is used to create an
animation between two drawings that are
not symbols?

Exercise
• Each tweened layer can only have one instance of a single symbol.
• Existing basic shapes can remain on the same layer as an animating
symbol.
• Only graphic symbols can be placed on layers with Mtion Tweens.
• New shapes can be drawn on layers with existing tweens.
Which statement is true about the contents
of layers that contain Motion Tweens?

Creating and Applying
Custom Acceleration
Curves
• In the motion editor, select the property to which you want to apply
custom acceleration, and click the Add Acceleration button to display
the acceleration panel.
• In the Acceleration panel, you can modify the default custom
acceleration curve as follows:
• Click Click to add anchor points on the curve. You can also move these
points to any point on the grid.
• Active control points (press Alt + click an anchor point) on an anchor
point to smooth the curved segments on both sides of an anchor
point.
• To close the acceleration panel, click outside of it. Notice that the Add
Custom Acceleration button displays, indicating that you have applied
a custom acceleration to the property.
• Press the up or down arrow keys to move a selected anchor point
vertically.
To create and apply custom acceleration to
an interpolated property, do the following:

Exercise
• Right-click on a keyframe. In the menu, choose Mtion Path > Reverse
• Select an anchor point, Alt/Option-drag vertically and then drag the
handle
• Click on a smooth anchor point, copy it, and paste it on a corner
anchor point
• Select a keyframe. In the menu, choose Modify > Shape > Smooth
A user is editing a motion tween in the
Motion Editor.
Which workflow converts a sharp angle to an
arc in a motion path using Bezier controls?

Legitimate use of
protected works
In deciding whether the use of a work is reasonable, other factors are
also taken into account:
• If the use is non-profit and educational, or if it is commercial.
• The portion of the work used.
• The effect of that use on the potential market or the value of the
protected work.
Legitimate use only describes the conditions
under which copyrighted material may be
used without permission. Therefore, all
material released and without copyright, is in
the public domain and does not apply to the
doctrine of legitimate use. Public domain
works can be used for any purpose.
Reasonable use is considered one of the
exceptions to an author's exclusive rights
over his works. In general, the use of a work
for the purposes of criticism, making
descriptive comments, news, teaching and
research is considered a reasonable use.

Exercise
• The number of copies made of finished product will be large.
• The nature of the original work is unpublished and fictional.
• The amount of work used is a large portion of a copyrighted work.
• The purpose of using the copyrighted work is to teach and learn.
Select the factor that determines the MOST
compliance with the Fair Use of Copyrighted
materials used in new project.

Accessible Content
• You can create content that is used by all users, including users with a
disability, through the accessibility features that are animated with
Adobe Animate in the user interface of the editing environment
thanks to ActionScript® code designed to implement accessibility.
When designing accessible Animate applications, keep in mind how
users interact with content and follow the design and development
practices that are recommended.
General accessibility information

Accessibility
It includes labels for audio content that is essential to understanding the
material. A video of a speech, for example, would probably require
labels to be accessible, but a quick sound associated with a no button.
The methods for adding labels to an Animate document are as follows:
• Add text as labels making sure that the labels are synchronized with
the audio in the timeline.
• Use Hi-Caption Viewer, an available component of Hi Software that
works with Hi-Caption SE for use with Animate. The Captioning
Macromedia Animate Movies with Hi-Caption SE technical document
explains how to use Hi-Caption SE and Animate together to create a
document with labels.
Accessibility for hearing impaired users

Accessibility
• You can change the ownership of an accessible object during playback
of a SWF file. For example, to indicate the changes that occur in a
keyframe of an animation. However, the handling of new objects in
the frames will be different depending on the type of screen reader.
Some screen readers may read only the new object, while others may
instead re-read the entire document.Animation and accessibility for the visually
impaired

Animate for screen
readers and accessibility
By default, the following objects are defined as accessible in all Animate
documents and are included in the information that Flash Player
provides to the screen reader software:
• Dynamic text
• Input fields.
• Buttons
• Movie Clips
• Apps by Animate
Screen readers read aloud a description of
the content, read text, and help users
navigate through the user interfaces of
traditional applications such as menus,
toolbars, dialog boxes, and text entry fields.

Exercise • Hering disability:
• Motor disability:
• Poor vision:
• Seizure disorders:
Allow scaling of content
Synchronized caption
Limit flashing or blinking elements
Keyboard option
Match each accessibility issue with the
appropriate strategy used to address it.
You may use the options more than once or
not at all.

Exercise
• To ensure elements are accessiblee to the user by keyboard shortcut
• To limit distracting elements from being shared with the user
• To prevent the content from being printed
• To hide the rendered file from search results
What would be the reason for an Animate
developer to hide an object from a screen
reader?

Spelling check
Misspelled or unknown words, those that appear twice in a row (for
example "el") and words with possible case errors are highlighted. In
addition to checking the spelling of a document, you can also turn on
dynamic spell checking so that potentially misspelled words appear
underlined as you type.
You can check the spelling of a selected piece
of text, the entire article, all articles in a
document, or all articles in all open
documents.

Exercise
• Edit > Check Spelling
• Debug > Check Spelling
• Select the spell Checker from the Text menu
• Manually check the spelling
How can you verify the correct spelling in an
Animate project when you select a text
object?

Methods for using
video in Animate
• Progressive download from a web server
This method preserves the external video file in the Animate file and the
resulting SWF file. With this method the size of the SWF file remains
small. This is the most common method of using video in Animate.
• Stream video with Adobe Media Server.
This method also maintains the external video file in the Animate file.
Adobe Media Streaming Server provides secure protection of video
content along with streaming experience.
• Direct insertion of video within an Animate file
With this method you get large animation files and it is only
recommended for short video clips. For instructions, see Embedding
Video in an Animate File.
In Animate the video can use in different
ways:

Methods for using
video in Animate
• Built-in video
If the video clip is intended for linear reproduction in the timeline, this is
the most appropriate method.
• Movie Clip
It is advisable to include the video in a movie clip instance, to have
maximum control over the content. The video timeline plays
independently of the main timeline. It is not necessary to extend the
main timeline in many frames to fit the video, as it could make it difficult
to work with the FLA file.
• Graphic
Incorporating a video clip as a graphic symbol means that you can not
interact with it using ActionScript (usually, graphic symbols are used with
still images and to create reusable animation elements linked to the
main timeline).
Type of symbol with which the video is
incorporated.

Exercise
• Importing the video clip directly onto the stage
• Cheking Self-Contained in the Video import wizard
• Embedding the video clip as a library item
• Embedding the video clip as a library item
• Placing the video clip into a movie clip symbol
Select the option that allows a video clip to
play independently from the main Timeline.

https://goo.gl/VL7Wqc
adobe@etciberoamerica.com

Adobe Animate CC.

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Adobe Animate CC.

Similar to Adobe Animate CC. (20)

Recently uploaded

Recently uploaded (20)

Adobe Animate CC.