Ministerio de Regional de Instituto de Excelencia

PERÚ
Educación Educación Ancash CARLOS SALAZAR
ROMERO

ADOBE ANIMATE CC: INTRODUCCIÓN

1. Historia de la animación gráfica

Las imágenes que intentan crear la ilusión de movimiento existen desde hace miles de
años. Ya sea por arte o diversión, el hombre ha querido representar la dinámica en dibujos.
Primero han sido dibujos en las cuevas prehistóricas, que a través de la repetición de partes
de los cuerpos de los animales querían emular el correr de, por ejemplo, un jabalí.

1.1.Curiosidades:
- Las dos primeras películas en las que intervineron planos enteramente generados
por computadora de forma importante fueron Tron en 1982 y The Last Strfighter en
1984.

- El primer personaje verdaderamente creado en imágenes generadas por

computadora fue creado por Pixar para la película Las aventuras del joven Sherlock
Holemes en 1985.

- En 1933 Jurassic Park cambiaría radicalmente la percepción de la industria del

cine, ya que los dinosaurios de la película parecían tan reales y la película integraba
tan impecablemente tanto imágenes generadas por computadora como secuencias
reales, que revolucionó la industria cinematográfica. Esta película marca la
transición del Hollywood de la animación de movimientos fotograma a fotograma
(Stop-Motion) y efectos ópticos convencionales, a las técnicas digitales.

- En 1994 Se crea en Canadá, la primera serie animada totalmente por computadora

llamada Reboot, siendo este el primer trabajo comercial 100% por computadora.

- Toy Story fueron los primeros largometrajes totalmente generados por

computadora, estrenados en 1995 y 1996 respectivamente.

Tec. Juan Diego Gonzales Salinas I.E.S.T.P. “Carlos Salazar Romero”

 Ministerio de Regional de Instituto de Excelencia
PERÚ
Educación Educación Ancash CARLOS SALAZAR
ROMERO

2. Animaciones gráficas

Una animación es un proceso utilizado para dar sensación de movimiento aimágenes o

dibujos. Para realizar animación existen numerosas técnicas que vanmás allá de los
familiares dibujos animados. Los cuadros se pueden generardibujando, pintando o
fotografiando los minúsculos cambios hechosrepetidamente a un modelo de la realidad o a
un modelo tridimensional virtual.También es posible animar objetos de la realidad y
actores.

2.1.Tipos de animación

• Dibujos animados.
• Stop-motion.- Consiste en aparentar el movimiento de objetos estáticos
capturando fotografías.
• Pixelación.- Variante del stop-motion, en la que los objetos animados
sonauténticos objetos comunes (ni modelos ni maquetas), e incluso personas.
• Rotoscopía.- Se basa en dibujar directamente sobre la referencia, quepueden ser
los cuadros de la animación de una persona real.En los últimos tiempos se ha
introducido la informática en la animación gráfica.Esta actúa tanto de herramienta
de creación como de medio de representación.

3. Adobe Animate CC

Adobe Animate CC permite crear animaciones vectoriales, anuncios, contenido

multimedia, experiencias envolventes, aplicaciones, juegos y más en un entorno de edición
basado en una cronología. Animate ofrece compatibilidad nativa para varias salidas, como
HTML5 Canvas y WebGL, y se puede ampliar para ofrecer compatibilidad con formatos
personalizados, como Snap.SVG.
Animate también es compatible con las aplicaciones de Adobe AIR de creación y
publicación de formatos Flash y de empaquetado.
La flexibilidad de los formatos de salida de Animate garantiza que el contenido se pueda
ver en cualquier ubicación sin necesidad de complementos. Animate también ofrece
herramientas de dibujo y de ilustración de la mejor calidad, así como una sólida
integración con Adobe CreativeSync.

Tec. Juan Diego Gonzales Salinas I.E.S.T.P. “Carlos Salazar Romero”

 Ministerio de Regional de Instituto de Excelencia
PERÚ
Educación Educación Ancash CARLOS SALAZAR
ROMERO

4. Adobe Animate: Interfaz de Inicio

4.1. Inicio
En este caso, Animate nos presenta un apartado llamada “Aprendizaje” donde hay
tutoriales para el uso del programa, tambien el atajo “Abrir” y la sección de Archivos
Recientes.

4.2. Ajustes preestablecidos

Es una sección donde se nos presenta las diferentes resoluciones de video y estan
organizadas por temas.

4.3. Detalles
Nos muestra las medidas (Anchura x Altura) de cada tipo de resolución que
seleccionemos pero estas se pueden modificar.
Además, se ubican las opciones de “unidades" y “tipo de plataforma”.

Tec. Juan Diego Gonzales Salinas I.E.S.T.P. “Carlos Salazar Romero”

 Ministerio de Regional de Instituto de Excelencia
PERÚ
Educación Educación Ancash CARLOS SALAZAR
ROMERO

5. Adobe Animate: Interfaz General

5.1. Escenario
El escenario es el área rectangular donde se coloca el contenido gráfico cuando se
crean documentos de Animate. El escenario del entorno de edición representa el
espacio rectangular de Flash Player o del navegador web donde se muestra el
documento durante la reproducción.
Un contorno negro predeterminado muestra la vista de esquema del escenario. Para
cambiar el aspecto del escenario mientras trabaja, utilice las opciones Acercar y Alejar.
Puede utilizar la cuadrícula, las guías y las reglas como ayuda para colocar
los elementos en el escenario.

5.2. Barras de Menú

Archivo: Permite crear nuevos archivos, abrirlos, guardarlos... Destaca la potencia de

la utilidad Importar que inserta en la película actual casi todo tipo de archivos.

Edición: permite Cortar, Copiar, Pegar... tanto objetos o dibujos como fotogramas;
también permite personalizar algunas de las opciones más comunes del programa.

Ver: Además de los típicos Zooms, te permite moverte por los fotogramas y por las
escenas. También incluye la posibilidad de crear una cuadrícula y unas guías.

Insertar: Te permite insertar objetos en la película, así como nuevos fotogramas,

capas, acciones, escenas, etc.

Modificar: Esta opción permite modificar los gráficos existentes en la película, y la

opción Trazar Mapa de Bits convierte los gráficos en mapas vectoriales .
El resto de opciones permite modificar características de los elementos de la
animación Suavizar, Optimizar o de la propia película.

Texto: Sus contenidos afectan a la edición de texto.

Tec. Juan Diego Gonzales Salinas I.E.S.T.P. “Carlos Salazar Romero”

 Ministerio de Regional de Instituto de Excelencia
PERÚ
Educación Educación Ancash CARLOS SALAZAR
ROMERO
Comandos: Permite administrar los Comandos (conjunto de sentencias almacenadas
que permiten emular lo que un usuario pueda introducir en el entorno de edición) que
hayamos almacenado en nuestra animación.

Depurar: Aquí encontraremos las opciones de depuración de la película que te

ayudaran a encontrar errores de programación en ActionScript, entre ellos se
encuentran Entrar, Pasar, Salir, Continuar.

Control: Desde aquí se modifican las propiedades de reproducción de la película.

Reproducir, Rebobinar, Probar Película.

Ventana: Esta opción incluye accesos directos a todos los Paneles.

Ayuda: Desde aquí podemos acceder a toda la ayuda que nos ofrece Adobe Animate
cc 2019.

Barra de edición: Situada en la parte superior del escenario, contiene controles e

información para editar escenas y símbolos, así como para cambiar el grado de
aumento del escenario.

Línea de tiempo: La línea de tiempo es una ventana en la que se muestran los

fotogramas de la animación (fotogramas por segundo). La línea de tiempo tiene unos
botones para previsualizar la animación, que nos permite reproducirla, pausarla y
hacer un bucle.

Capas: Una Capa se puede definir como una película independiente de un único nivel.
Es decir, una capa contiene su propia Línea de Tiempo (con infinitos fotogramas).

Los objetos que estén en una determinada capa comparten fotograma y por tanto,
pueden "mezclarse" entre sí. Esto es interesante a menudo, pero otras veces es
conveniente separar los objetos de modo que no interfieran entre sí. Para ello,
crearemos tantas capas como sea necesario.

Tec. Juan Diego Gonzales Salinas I.E.S.T.P. “Carlos Salazar Romero”

 Ministerio de Regional de Instituto de Excelencia
PERÚ
Educación Educación Ancash CARLOS SALAZAR
ROMERO
El uso de múltiples capas además, da lugar a películas bien ordenadas y de fácil
manejo.

Panel de color: Mediante este panel creamos los colores que más nos gusten.

Panel muestras: Nos permite seleccionar un color de modo rápido y gráfico.

(Incluidas nuestras creaciones).

Tec. Juan Diego Gonzales Salinas I.E.S.T.P. “Carlos Salazar Romero”

 Ministerio de Regional de Instituto de Excelencia
PERÚ
Educación Educación Ancash CARLOS SALAZAR
ROMERO
Panel alinear: Coloca los objetos del modo que le indiquemos.

Panel de información: Muestra el tamaño y las coordenadas de los objetos

seleccionados, permitiéndonos modificarlas.

Panel transformar: Como su nombre lo dice nos permite transformar el objeto

seleccionado.

Tec. Juan Diego Gonzales Salinas I.E.S.T.P. “Carlos Salazar Romero”

 Ministerio de Regional de Instituto de Excelencia
PERÚ
Educación Educación Ancash CARLOS SALAZAR
ROMERO
Panel de propiedades: Es el panel más usado y más importante. Nos muestra las
propiedades del objeto seleccionado en ese instante, color de borde, de fondo, tipo de
trazo, tamaño de los caracteres, tipografía, propiedades de los objetos (si hay
interpolaciones etc...), coordenadas, tamaño etc.

Panel de escena: Modifica los atributos de las escenas que usemos.

Tec. Juan Diego Gonzales Salinas I.E.S.T.P. “Carlos Salazar Romero”

 Ministerio de Regional de Instituto de Excelencia
PERÚ
Educación Educación Ancash CARLOS SALAZAR
ROMERO
Panel de Herramientas: Las herramientas del panel Herramientas permiten dibujar,
pintar, seleccionar y modificar ilustraciones, así como cambiar la visualización del
escenario.

El panel Herramientas se divide en cuatro secciones:

• La sección de herramientas contiene las herramientas de dibujo, pintura y

selección.
• La sección de visualización contiene herramientas para ampliar y reducir, así
como para realizar recorridos de la ventana de la aplicación.
• La sección de colores contiene modificadores de los colores de trazo y relleno.
• La sección de opciones contiene los modificadores de la herramienta
actualmente seleccionada. Los modificadores afectan a las operaciones de
pintura o edición de la herramienta.

Icono Nombre Descripción

Selección Sirve para seleccionar cualquier objeto, haciendo clic en el o
haciendo un rectángulo de selección, y para modificar vértices.

Subselección Sirve para seleccionar trazados y sus vértices.

Transformación Sirve para modificar las proporciones o la rotación de los

libre objetos.

Rotación 3D Sirve para rotar los símbolos sobre 3 ejes tridimensionales.

Lazo Sirve para seleccionar los objetos dentro de una zona trazada a
mano alzada

Pluma Sirve para hacer trazados vértice por vértice.

Texto Sirve para añadir textos.

Línea Sirve para trazar lineas rectas.

Rectángulo Sirve para hacer rectángulos.

Óvalo Sirve para hacer óvalos.

Tec. Juan Diego Gonzales Salinas I.E.S.T.P. “Carlos Salazar Romero”

 Ministerio de Regional de Instituto de Excelencia
PERÚ
Educación Educación Ancash CARLOS SALAZAR
ROMERO

Polígono Sirve para hacer polígonos. Se pueden ajustar el número de

lados y si es en forma de estrella.

Lápiz Sirve para hacer trazados a mano alzada.

pincel Sirve para hacer trazados a mano alzada como el lápiz, pero
tiene opciones de estilos y de dibujar como relleno.

Pincel Aunque se llame igual que el anterior (excepto por la

mayúscula al principio) sirve para dibujar rellenos a mano
alzada.
Hueso Sirve para hacer esqueletos que nos permiten animar con
facilidad una forma o un conjunto de símbolos.

Bote de pintura Sirve para rellenar una forma con un determinado color.

Bote de tinta Sirve para añadir un trazado a una forma con un determinado
color y grosor.

Cuentagotas Sirve para escoger un color dentro del documento.

Borrador Sirve para borrar trazados y rellenos.

Anchura Sirve para modificar la anchura de un vértice dentro de un

trazado.

Mano Sirve para desplazarse por el documento. También puede

hacerse pulsando la barra espaciadora.

Zoom Sirve para ampliar o disminuir la vista del documento.

También podemos trazar un rectángulo en la zona que
queremos ampliar.
Color del trazado Ajusta el color del trazado.

Color del relleno Ajusta el color del relleno.

Tec. Juan Diego Gonzales Salinas I.E.S.T.P. “Carlos Salazar Romero”

 Ministerio de Regional de Instituto de Excelencia
PERÚ
Educación Educación Ancash CARLOS SALAZAR
ROMERO

5.3. Elementos

Símbolos: Un símbolo es un gráfico, botón o clip de película que se crea una vez en el
entorno de edición de Animate CC o mediante las clases SimpleButton (AS 3.0) y
MovieClip. Estos símbolos pueden volver a utilizarse en el mismo o en otros
documentos. Los símbolos pueden incluir ilustraciones importadas de otras
aplicaciones.
Los símbolos creados forman parte automáticamente de la biblioteca del documento
activo. Una instancia es una copia de un símbolo ubicada en el escenario o anidada en
otro símbolo. Una instancia puede presentar un color, tamaño o función diferente de
los de su símbolo principal. Al editar el símbolo, se actualizan todas sus instancias,
pero al aplicar efectos a una instancia de un símbolo, sólo se aplica a la instancia en
cuestión.

Existen tres tipos:

• Clips de película: Los clips de película tienen sus propias líneas de tiempo de
varios fotogramas, independientes de la línea de tiempo principal.
Los clips de película son como pequeñas líneas de tiempo anidadas en una
línea de tiempo principal que contiene controles interactivos, sonidos e incluso
otras instancias de clip de película. También pueden colocarse instancias de
clip de película dentro de la línea de tiempo de un símbolo de botón para crear
botones animados. Además, se pueden ejecutar scripts para los clips de
película en ActionScript.

Tec. Juan Diego Gonzales Salinas I.E.S.T.P. “Carlos Salazar Romero”

 Ministerio de Regional de Instituto de Excelencia
PERÚ
Educación Educación Ancash CARLOS SALAZAR
ROMERO
• Gráficos: El símbolo gráfico es un conjunto de fotogramas utilizados en
animaciones o en modo de un solo fotograma.Utilice símbolos gráficos para las
imágenes estáticas y para crear animaciones reutilizables asociadas a la línea
de tiempo principal.

• Botón: Son sensores que detectan clics, desplazamientos del cursor u otras
acciones. Cuando se selecciona el tipo de botón durante la creación de un
símbolo, Animate crea una línea de tiempo con cuatro fotogramas.
Los tres primeros fotogramas muestran los tres posibles estados del botón:
Arriba, Sobre y Presionado; el cuarto fotograma define el área activa del
botón. Cuando se selecciona el tipo de botón durante la creación de un
símbolo, Animate crea una línea de tiempo con cuatro fotogramas.
Los tres primeros fotogramas muestran los tres posibles estados del botón:
Arriba, Sobre y Presionado; el cuarto fotograma define el área activa del botón.

Imágenes: Los sistemas informáticos muestran las imágenes en formato de vectores o

de mapa de bits. Mediante Animate, se pueden crear y animar gráficos vectoriales
compactos. Animate también permite importar y manipular gráficos vectoriales y de
mapa de bits creados en otras aplicaciones.

• Mapas de bits: Los gráficos de mapa de bits se suelen utilizar para mostrar el
contenido fotográfico, como las imágenes capturadas con una cámara digital.
Estos archivos muestran los píxeles individuales que contienen valores de color
exclusivos; cuando se visualizan a la vez, se muestran los píxeles que
componen la fotografía o la imagen.
• Vectoriales: Los gráficos vectoriales describen las imágenes mediante líneas y
curvas, denominadas vectores, que incluyen propiedades de color y
posición. Cuando se edita una imagen vectorial, se modifican las propiedades
de las líneas y curvas que describen su forma. Podrá desplazar, o modificar el
tamaño, la forma o el color de un gráfico vectorial sin alterar la calidad de su
aspecto.

Tec. Juan Diego Gonzales Salinas I.E.S.T.P. “Carlos Salazar Romero”

 Ministerio de Regional de Instituto de Excelencia
PERÚ
Educación Educación Ancash CARLOS SALAZAR
ROMERO
Fotogramas: Los documentos de Adobe Animate CC dividen el tiempo en fotogramas
similares a las películas. Los fotogramas se encuentran en el centro de la animación,
dictando cada segmento de tiempo y movimiento.

• Fotograma: Los fotogramas se colocan en la línea de tiempo en el orden en que

se desea que aparezcan los objetos de los fotogramas en el contenido final.
• Fotograma Clave: Crea una copia del último fotograma pero independiente a
él.
• Fotograma Clave Vacío: Se puede añadir un fotograma clave vacío en la línea
de tiempo como marcador de posición de los símbolos que se pretendan añadir
más adelante, o bien para dejar el fotograma vacío de forma premeditada.

Interpolación: Adaptación a dos fotogramas, agrega imágenes intermedias.

• Clásica: Genera imágenes intermedias entre el fotograma clave y el fotograma

final. Se refiere a la interpolación en Flash CS3 y versiones anteriores. Se
conserva en Animate por motivos de transición.
• Movimiento: El objeto debe ser un símbolo. Crea una interpolación a la que
podemos añadir varios fotogramas claves y seleccionar qué queremos que
interpole (el movimiento en x, la rotación, los filtros, etc).
• Forma: Crea una interpolación entre una forma y otra, modificando su color y
sus vértices.

ACTIVIDAD DE INVESTIGACIÓN Nº 01
Investigar que peliculas y series del territorio comercial has sido realizados con
Adobe Animate CC.

Tec. Juan Diego Gonzales Salinas I.E.S.T.P. “Carlos Salazar Romero”