Animación Digital para Banner Animado

Sesión 6
.
ón
ci
uc
od
pr
Banner animado
re
su
da
bi
hi
ro
Aprendizajes esperados:
0 ,p
02
-2
a
• Diseñar un banner publicitario animado utilizando interpolaciones

ci
de movimiento considerando la inclusión de imágenes y texto.

g en
• Realizar operaciones de las interpolaciones como:: alargar, cortar,

er
copiar y pegar las animaciones, para modificar los tiempos en la

em
película.
de
• Incorporar texto como párrafo y palabra al diseño de una

animación considerando modificar sus propiedades para mejorar
n
el diseño.
la
rP
po
Además, conocerás sobre:

o
iv
us
• Ruta de movimiento.
cl
ex
• Propiedades para texto.

so
U
• Distribuir en capas.
53
IDEAS PREVIAS
¿Sabes qué es un banner? ¿Dónde has visto banners animados? ¿Hay algún banner que te haya
llamado la atención últimamente? ¿Qué herramientas de las que ya has visto serían las más
importantes para crear banners?
.
ón
ci
PRESENTACIÓN
uc
od
En la presente sesión crearás
pr
un banner animado, uno de los
re
medios digitales publicitarios
su
más efectivos y que puedes
encontrar fácilmente en
da
sitios web que reservan
bi
espacios para publicidad.
hi
ro
Para elaborar esta pieza
animada, emplearás otro tipo
0 ,p
02
de interpolación, denominado
como: interpolación de
-2
movimiento. Además,
a
conocerás sus ventajas y diferencias con respecto a la interpolación que se desarrolló en la

ci
sesión anterior: interpolación clásica. A la vez, trabajarás con la herramienta de texto para
en
crear tipografía y editarla para crear animaciones atractivas con caracteres.

g
er
em
INTERPOLACIÓN DE MOVIMIENTO
de
Al igual que la interpolación clásica, la interpolación de movimiento también crea pasos intermedios
n
entre dos estados con propiedades distintas; sin embargo, en la interpolación de movimiento no
la
se crea fotogramas clave, sino fotogramas de propiedad.

rP
po
1. Abre el archivo banner_animado.fla.

o
2. Primero, crea un fotograma para todas las capas en la

iv
posición 20 de la línea de tiempo.

us
cl
3. Para aplicar una interpolación de movimiento

ex
al contenido de la capa Círculo, realiza un

clic derecho sobre cualquier fotograma de
so
esta capa y elige Crear interpolación de

U
movimiento.
54 Animación Digital 2D
4. Como sucedía con la interpolación clásica, también se pide que los objetos a los que se aplica esta
interpolación sean convertidos a símbolo previamente. Haz clic en Aceptar para que se concrete.
5. Visualizarás la presencia de un color distinto 6. En el fotograma 20, mueve el círculo hacia la
sobre los fotogramas. esquina superior derecha del escenario.
.
ón
ci
uc
R
od
pr
re
Para seleccionar con mayor facilidad los elementos
su
deseados, puedes bloquear la capa que no deseas
afectar.
da
bi
hi
ro
RUTA DE MOVIMIENTO ,p
0
02
Visualizarás la presencia de la ruta de movimiento que

a su vez, consta de diversos puntos que representan
-2
los estados intermedios en cada fotograma. Esta ruta

a
se puede modificar para al mismo tiempo alterar el

ci
desplazamiento del símbolo.

g en
er
em
1. Activa la herramienta Selección y aproxima el cursor

a la ruta hasta que se muestre una pequeña curva, al
de
igual que cuando se va a modificar una línea.

2. Arrastra hacia abajo y ve cómo se ha modificado el
n
la
desplazamiento del círculo.

rP
po
Corrobora desplazándote por la línea de tiempo, cómo se desplaza ahora el círculo.

o
iv
us
COPIAR Y PEGAR MOVIMIENTO

cl
ex
Se puede copiar una animación con interpolación de movimiento de un objeto a otro inanimado.
so
Colocar la animación del círculo al contenido de la capa Solo_Hoy.

U
1. Haz clic derecho en la interpolación aplicada al círculo y elige la opción Copiar movimiento.
2. Realiza un clic derecho sobre cualquier fotograma de la capa Solo_Hoy y selecciona la opción Pegar
movimiento.
3. Cuando vuelva a aparecer la ventana que sugiere que transformes el objeto en símbolo, acepta. Luego,
verás que ahora ambos símbolos se mueven igual.
55
.
ón
ci
uc
od
pr
re
su
MOVER INTERPOLACIÓN
da
bi
Mueve los fotogramas interpolados de la capa Solo_Hoy para que su animación se ejecute
hi
después de la del círculo.
ro
1. Haz un clic sobre el primer fotograma de la 2. Teniendo los fotogramas seleccionados, haz clic
interpolación y sin soltar, arrastra la selección
hasta el último fotograma.
0 ,p
sobre cualquier parte de la selección y arrastra
hacia la derecha hasta que el primer fotograma
02
figure en el sitio 21 de la línea de tiempo. De

esta manera, el último fotograma de Solo_Hoy
-2
estará en el lugar 40 de la línea de tiempo.

a
ci
g en
er
em
3. Como notarás, ahora la animación de Solo_Hoy 4. Para superar este inconveniente, crea
se ejecuta después del círculo. Sin embargo, fotogramas (normales) cada vez que solo
de
durante esta animación, el resto de contenido deseas hacer visible el contenido de una capa.
desaparece. Crea uno en el lugar 40 para cada capa, menos
n
la que ya es visible.
la
rP
po
o
iv
us
cl
ex
so
U
OPERACIONES CON TEXTO
Crea texto y configúralo para animarlo con interpolaciones también. Para empezar, crea una nueva
capa llamada Texto.
.
ón
CREAR BLOQUES DE TEXTO
ci
uc
Dentro de la capa Texto, realiza lo siguiente.
od
pr
1. Haz clic sobre la herramienta Texto en el panel
re
Herramientas.
2. Haz clic sobre el escenario y escribe Gorra
su
deportiva.
da
bi
hi
ro
EDITAR BLOQUES DE TEXTO ,p
0
02
Si deseas modificar las características que por defecto

-2
tiene el texto, revisa el panel Propiedades. Para el

a
texto en cuestión, coloca tamaño de 48pt, familia

ci
Myriad pro, estilo Bold y color negro. La ubicación

en
puede ser modificada con la herramienta Selección.

g
er
em
de
INTERPOLACIÓN DE MOVIMIENTO CON TEXTO

n
la
rP
Para animar un texto con interpolación de movimiento, realiza el siguiente procedimiento.

po
1. Indica desde dónde hasta dónde durará la animación.

En este caso, será desde el fotograma 20 hasta el 40.
o
Por lo tanto, inserta un fotograma clave en el fotograma

iv
20 para la capa Texto.

us
2. Entre el fotograma clave 20 y el fotograma 40, inserta

cl
una interpolación de movimiento.

ex
3. En tanto en el fotograma 40, reduce el texto con la

so
herramienta Transformación libre.

U
Para modificar el tamaño con la

herramienta Transformación libre de
forma concéntrica, modifica el tamaño
mientras presionas la tecla Shift.
57
4. Observa que la animación hace que el 5. Ahora, observa que el texto incrementa su
texto se reduzca. En realidad, el texto debe tamaño cuando se prueba la película; sin
incrementarse. Por lo tanto, realiza clic derecho embargo, el texto no debería aparecer desde
sobre los fotogramas y elige Invertir fotogramas el inicio de la línea de tiempo, si no desde el
clave. fotograma clave 20. Por lo tanto, haz clic sobre el
fotograma clave 1 y presiona la tecla Suprimir
.
para eliminar el texto aquí. Nota que no se ha
ón
eliminado el texto desde el fotograma clave
ci
20, pues esta es una instancia del texto que
uc
permanece gracias a que está en un fotograma
clave y no uno normal. Ahora en la posición 1 de
od
la línea de tiempo tienes un fotograma clave
pr
en blanco.
re
Finalmente, observa que el texto aparece e
su
incrementa su tamaño desde el fotograma clave
da
20.
bi
hi
ro
SEPARAR BLOQUES DE TEXTO 0 ,p
02
Anima los caracteres por separado de una misma palabra.
-2
1. Crea una capa adicional llamada Descuento y 2. Para separar los caracteres de la misma palabra
escribe por arriba del escenario el texto -40% . y animarlos por separado, haz clic sobre la
a
ci
palabra y elige la opción Separar.

g en
er
em
de
n
la
rP
Nota cómo se han separado los caracteres de la frase.

po
o
DISTRIBUIR EN CAPAS
iv
us
cl
Estando los caracteres ya separados, anima cada uno de forma individual.

ex
1. Teniendo seleccionados los caracteres separados, realiza clic derecho sobre el

so
grupo y elige la opción Distribuir en capas.

U
2. Nota que ahora cada carácter tiene su propia capa. Borra la capa Descuento,
pues ahora está vacía.
3. Cada capa tiene los 40 fotogramas que hasta ahora dura la película. Acorta la
cantidad de fotogramas a 10, seleccionando los fotogramas desde el 11 hasta
el 40 para todas las capas y con la herramienta Selección.
4. Haz clic derecho sobre la selección y elige la opción Quitar fotogramas.
5. Habiéndose borrado los fotogramas, desplaza los grupos de 10 fotogramas a lo largo de la línea de
tiempo de la siguiente manera:
• Capa “ – ”: entre 40 y 50
• Capa “4”: entre 50 y 60
• Capa “0”: entre 60 y 70
.
ón
• Capa “%”: entre 70 y 80
ci
6. Inserta la interpolación de movimiento para cada grupo de fotogramas.
uc
7. Inserta un fotograma normal en 80 para las demás capas para tener
una referencia del lugar a donde llegarán las otras cuatro capas con la
od
animación.
pr
8. Usa la interpolación de la capa “ – ”: para traer su contenido al escenario
re
estando en su último fotograma (50).
su
9. Inserta un fotograma para “ – ”: en 80 para que permanezca visible
hasta el final de la película.
da
10. Realiza el mismo procedimiento para las demás capas. Solo en el caso
bi
de “%” no se requiere crear un fotograma adicional en 80.
hi
ro
INSERTAR PÁRRAFOS 0 ,p
02
Crea una capa adicional llamada Legal y en ella, insertarás

-2
un párrafo. El contenido de este se encuentra en el archivo

Legal.txt., ábrelo y copia su contenido.
a
ci
en
1. En la capa Legal activa la herramienta Texto y configura en el

panel propiedades en Familia Myriad Pro, tamaño de caracteres de
g
10pt y estilo regular.

er
2. Traza un recuadro sobre el escenario.

em
3. Pega el texto y debe aparecer en el recuadro que trazaste y con las

características que colocaste en el panel Propiedades. Nota que en
de
el panel también tienes una sección llamada Párrafo. Úsala para

alinear el texto al centro.
n
la
rP
po
o
iv
us
cl
ex
so
U
Termina el banner animando el contenido de la capa

Gorra y crea otra capa para el texto “descuento” que se
ubicará debajo de texto “-40%” Guarda el archivo con
el nombre Apellidos_Nombres_NombreProyecto_S6.
59
Actividades
.
COMPRENDO
ón
ci
1. Indica si son verdaderas o falsas, las siguientes afirmaciones:
uc
od
• Para reducir la cantidad de fotogramas de una capa, solo tienes que seleccionar los fotogramas que
pr
no deseas y presionar la tecla Suprimir. ( )
re
• Para mantener la visibilidad del contenido de una capa, tienes que agregar más fotogramas.
su
( )
• Para reducir un objeto de forma concéntrica con la herramienta Transformación Libre, tienes que
da
presionar la tecla Alt mientras reduces. ( )
bi
• Para crear una curva en la ruta de movimiento, tienes que usar la herramienta Transformación libre.
hi
( )
ro
0 ,p
02
REALIZO
-2
2. Abre el archivo movimiento.fla y realiza los siguientes pasos:

a
ci
• Anima el contenido de la capa Zapatilla para que ingrese

en
al escenario describiendo una curva con interpolación de

movimiento.
g
er
• La animación de la zapatilla debe abarcar desde el

fotograma 1 hasta el 30 y permanecer quieto hasta el
em
fotograma 80.
• En la capa texto crea tipografía de la familia Tahoma, estilo
de
bold y tamaño 12pt.

n
• Anima este texto para que ingrese al escenario desde el

la
fotograma 30 hasta 50 y que permanezca quieto hasta el

rP
fotograma 80.
• Guarda el archivo como Mi_sexta_actividad.fla.
po
o
INVESTIGO
iv
us
cl
ex
3. Averigua y responde la siguiente pregunta.

so
a. ¿Para qué sirve la opción Ajuste automático, presente en el

panel Propiedades para la herramienta Texto?
U
_____________________________________
_____________________________________
_____________________________________
_____________________________________
________________
AUTOEVALUACIÓN
No En Logro Logro
logrado proceso esperado destacado
.
ón
Diseño un banner publicitario animado
ci
para utilizar interpolaciones de movimiento
uc
considerando la inclusión de imágenes y
texto.
od
Realizo operaciones de las interpolaciones:
pr
alargar, cortar, copiar y pegar las animaciones
re
para modificar los tiempos en la película.
Incorporo texto como párrafo y palabra al
su
diseño de una animación considerando
da
modificar sus propiedades para mejorar el
diseño.
bi
hi
METACOGNICIÓN
ro
,p
• ¿Cómo resolviste las dificultades que encontraste animando con Interpolación de movimiento?
0
02
• ¿Qué método de trabajo puede ser conveniente para alcanzar el dominio de las herramientas
-2
aprendidas?
a
ci
• ¿Qué utilidad encuentras en las herramientas aprendidas para realizar tu primer corto animado?
g en
er
REFERENCIAS
• BIBLIOGRÁFICAS
em
• Adobe, Cómo utilizar los fotogramas y fotogramas clave en Animate CC. Recuperado de https://
de
helpx.adobe.com/es/animate/using/frames-keyframes.html
n
la
• Adobe, Cómo crear una animación de interpolación de movimiento. Recuperado de https://helpx.

rP
adobe.com/es/animate/using/motion-tween-animation.html
po
o
iv
us
cl
ex
so
U
61
U
so
ex
cl
us
iv
o
po
rP
la
n
de
em
er
g en
ci
a
-2
02
0,p
ro
hi
bi
da
su
re
pr
od
uc
ci
ón
.
Sesión 7
.
ón
ci
uc
od
pr
re
Tarjeta animada
su
da
bi
hi
ro
0 ,p
02
-2
a
• Diseñar una tarjeta animada en la que se emplee interpolaciones

ci
de forma para mostrar la transformación de formas vectoriales

en
complejas en otras distintas mostrando transiciones.

g
er
• Crear interpolaciones con textos para utilizarlos en la animación

em
de caracteres presentes en una pieza animada.

de
n

la
rP
po
• Conversión a imagen vectorial.

o
• Pegar en el mismo sitio.

iv
us
cl
ex
so
U
63
IDEAS PREVIAS
¿Qué animarías en una tarjeta de cumpleaños digital? ¿Has escuchado sobre las imágenes
vectoriales? ¿Dónde has visto animaciones con elementos que cambian de forma?
.
ón
PRESENTACIÓN
ci
uc
od
En la presente sesión crearás una tarjeta
pr
de cumpleaños animada, que puede
re
ser empleada para saludar a amigos y a
su
clientes, si se tiene en cuenta que puede
ser un medio de fidelizar a consumidores,
da
a través de los medios en línea, como
bi
correo electrónico o redes sociales.
hi
ro
Para la elaboración de estas tarjetas,
elaborarás formas animadas a partir
0,p
02
de imágenes de formas vectoriales

-2
conseguidas de imágenes de mapa de

bits. Además, aprenderás a pintar estos
a
ci
objetos vectoriales y los utilizarás para

en
explorar el tercer tipo de interpolación:

interpolación de forma.
g
er
em
de
n
la
rP
OBJETOS VECTORIALES
po
Existen dos tipos de imágenes digitales: las imágenes

o
de mapa de bits y las imágenes vectoriales. Mientras

iv
que las imágenes de mapa de bits están definidas

us
por una cuadrícula de unidades llamados píxeles,

cl
los objetos vectoriales están definidos por trazados,

ex
que pueden ser líneas curvas o rectas que conectan

puntos de control. Una curva abierta siempre es tipo
so
contorno. Una curva cerrada puede ser tipo contorno

U
o tipo relleno.
CONSEGUIR OBJETOS VECTORIALES DESDE IMÁGENES DE
MAPA DE BITS
A partir de imágenes de mapas de bits se pueden conseguir formas vectoriales de la siguiente
.
manera:
ón
ci
uc
1. Abre el archivo tarjeta cumpleaños.fla. 3. Asígnale un marco vectorial mediante la opción
Separar que figura cuando se le da un clic
od
2. En la capa Estrella-Corazón, importa la imagen
corazón.jpg. derecho.
pr
re
su
da
bi
hi
ro
0 ,p
02
-2
a
ci
g en
er
SELECCIÓN DE ÁREAS DE OBJETOS VECTORIALES

em
de
Se puede seleccionar solo un área de la imagen, ahora que ya está en un marco vectorial.
n
1. Activa la herramienta Varita Mágica y selecciona solo al Corazón.

la
2. Con la herramienta Selección haz clic sobre el 3. Elimina el fondo restante y solo quedará el
rP
área seleccionada y separa el fondo. corazón.

po
o
iv
us
cl
ex
so
U
65
PINTAR OBJETOS VECTORIALES
Para pintar el nuevo objeto vectorial, utiliza las
herramientas de Asignación de color vistas
previamente para las formas creadas con la barra
.
ón
Herramientas.
ci
Haz un clic sobre la nueva forma vectorial y activa el
uc
Selector de color para la capa.
od
pr
re
su
da
bi
INTERPOLACIÓN DE FORMA
hi
ro
Crea interpolaciones para animar el cambio de una forma a otra. Esta interpolación solo se puede
aplicar a formas vectoriales.
0 ,p
02
-2
APLICAR EN OBJETOS
a
ci
g en
Crea una forma que se transformará a una versión modificada de la misma.

er
em
1. En la capa Fuego, crea con la herramienta 2. Inserta un fotograma clave en cada fotograma
Pluma una forma igual a la que se aprecia en la normal donde se detectará un cambio de forma.
de
imagen y ubícala sobre el gráfico de la vela en la Insértalos en los fotogramas 15, 30, 45 y 60.
torta. Procura que la forma sea alta y angosta. 3. Realiza una modificación de la forma con la
n
herramienta Subselección en los fotogramas

la
clave 15 y 45. Procura que la forma sea de

rP
menor altura, pero de mayor ancho.

po
o
iv
us
cl
ex
so
U
4. Para aplicar la interpolación, selecciona
todos los fotogramas y fotogramas
clave de la capa. Para ello, haz clic
sobre la capa.
5. Haz clic derecho sobre los fotogramas seleccionados y elige Insertar interpolación de forma.
.
ón
6. Visualizarás que aparecen flechas y un color característico de este tipo de interpolación. A la vez recorre
ci
la línea de tiempo y observa cómo es gradual el cambio entre cada forma presente en los fotogramas.
uc
od
pr
re
su
da
7. También puedes hacer este cambio en formas más complejas;
bi
por ejemplo las creadas a partir de imágenes de mapa de
hi
bits convertidas a vectoriales. Para comprobarlo, usa la
ro
capa Estrella_Corazón y crea un fotograma clave en 15 y
en 30 para que se ejecute la interpolación entre 15 y 30.
,p
8. En el fotograma clave 30, importa la imagen estrella.jpg y conviértela en vectorial.
0
02
9. Elimina el fondo de la imagen y borra el corazón 10. A su vez, la estrella se convertirá en el corazón,
para poner a la estrella en su lugar. pero desde el fotograma 45 hasta el 60. Por lo
-2
tanto, crea fotogramas clave en 45 y 60 de la

línea de tiempo.
a
ci
g en
er
em
de
n
la
rP
po
o
11. En 60, reemplaza a la estrella por el corazón

iv
del fotograma 1. Para ello, ve al fotograma

us
clave 1 y copia el contenido (Tecla Control

+C). En 60, elimina la estrella y en su lugar
cl
pega el objeto en el mismo sitio (Tecla Shift

ex
+ Tecla Control + V).

so
12. Inserta la interpolación de forma y nota cómo

el corazón se vuelve estrella y viceversa.
U
67
APLICAR EN TEXTOS
Inserta interpolación de forma para animar textos también.
1. En la capa Feliz_Cumpleaños, escribe el texto 2. Crea fotogramas claves también en 15, 30, 45
.
ón
Feliz. y 60.
3. En los fotogramas clave 30 y 45, reemplaza el
ci
texto por Cumpleaños.
uc
od
pr
re
su
da
bi
hi
ro
0 ,p
02
4. Convierte los textos de todos los fotogramas 5. Sin embargo, Separar solo hizo que las palabras
-2
clave en imágenes vectoriales realizándoles un se dividieran en caracteres. Por lo tanto, a todo

clic derecho y elige Separar. el conjunto vuelve a aplicarle Separar.
a
ci
6. Habiéndoles aplicado dos veces Separar las

en
palabras de cada fotograma clave, inserta la

interpolación de forma a todos los fotogramas
g
de la capa y observa cómo se animan los textos.

er
em
de
n
Termina la tarjeta de cumpleaños animada creando otra

la
capa más, para un elemento que también cambie de

rP
forma al otro costado de la torta. Guarda el archivo con

el nombre Apellidos_Nombres_NombrePoyecto_S7.
po
o
iv
us
cl
ex
so
U
Actividades
.
COMPRENDO
ón
ci
uc
1. Indica si son verdaderas o falsas las siguientes afirmaciones:
od
pr
• Las imágenes vectoriales se componen de puntos unidos por líneas en el contorno. ( )
re
• Para seleccionar todos los fotogramas de una capa, solo haz clic a la capa. ( )
su
• La opción Separar posibilita que a un texto se le pueda insertar la interpolación de forma. ( )
• Si quieres transformar un círculo en un cuadrado con interpolación de forma, ambas formas
da
pueden estar en distintas capas. ( )
bi
hi
ro
0 ,p REALIZO
02
-2
Crea un archivo de medidas 640px x 480px y realiza lo siguiente:

• Importa las imágenes paz.jpg y amor.jpg. Conviértelas a
a
ci
vectores, bórrales el fondo y píntalas de blanco.

en
• Inserta fotogramas normales hasta 45.

g
• El corazón se debe mantener normal hasta 15.

er
• Entre 15 y 20 el corazón debe convertirse en paloma.

em
• La paloma se mantiene quieta hasta 39.

• Entre 40 y 45 se convierte en el corazón.
de
• Guarda el archivo como Mi_sétima_actividad.fla.

n
la
INVESTIGO
rP
po
a. ¿Además de la forma de un objeto, qué otro cambio puedes animar con interpolación de forma?
o
iv
__________________________________________________________________________
us
__________________________________________________________________________
cl
ex
b. ¿Qué son imágenes de mapa de bits?

so
U
__________________________________________________________________________
__________________________________________________________________________
69
AUTOEVALUACIÓN
No En Logro Logro
.
Diseño una tarjeta animada en la que se
ón
emplee interpolaciones de forma para
ci
mostrar la transformación de formas
uc
vectoriales complejas en otras distintas
mostrando transiciones.
od
Creo interpolaciones con textos para
pr
utilizarlos en la animación de caracteres
re
presentes en una pieza animada.
su
da
METACOGNICIÓN
bi
hi
ro
,p
• ¿Por qué será importante haber aprendido a utilizar la herramienta Interpolación de forma?
• ¿Qué método de trabajo puede ser conveniente para alcanzar el dominio de las herramientas
0
02
aprendidas?
• ¿Qué uso en el ámbito profesional puedes encontrar para una tarjeta animada?
-2
a
ci
en
REFERENCIAS BIBLIOGRÁFICAS
g
er
em
• Adobe, Dibujo y creación de objetos en Animate CC. Recuperado de

https://helpx.adobe.com/es/animate/using/drawing.html
de
n
• Valdivia, P. M. La imagen digital, una mirada interna. Revista Cubana de

la
Informática Medica, Recuperado de: www. rcim. sld. cu/revista_3/

rP
articulos_html/articulo_pedro. htm.
po
o
iv
us
cl
ex
so
U
Sesión 8
.
ón
ci
uc
od
pr
re
Collage de recuerdos de viaje
su
da
bi
hi
ro
0 ,p
02
-2
a
• Diseñar una pieza de animación aplicando propiedades de

ci
interpolaciones clásicas, de movimiento y de forma, para

en
conseguir películas más armónicas y vistosas.

g
er
• Aprender a insertar un código a una película para obtener un

em
mayor control de la reproducción al momento de previsualizar

en un navegador.
de
n
la

rP
po
• Panel Acciones.
o
iv
us
• Fragmentos de código.
cl
ex
so
U
71
IDEAS PREVIAS
¿Qué es un collage? ¿Cómo animarías un collage de fotos de viaje? ¿Cómo emplearías las
interpolaciones?¿Qué herramientas, de las que ya has visto, crees que se usan para animar
collages?
.
ón
ci
PRESENTACIÓN
uc
od
En la presente sesión, crearás un collage de fotos
pr
animado, es decir, una pieza animada de un conjunto
re
de imágenes individuales de diferentes orígenes
que se reunirán en un mismo espacio.
su
En este collage, no solo animarás la imagen sino
también texto. La animación de estos elementos
da
adquirirá diversas modificaciones mediante la
bi
alteración de las propiedades de sus interpolaciones
hi
en forma de cambios de aceleración, rotación,
ro
orientación y ruta.
0 ,p
02
OPERACIONES PRELIMINARES
-2
Abre el archivo collage.fla. encontrarás un

a
ci
escenario de color, una serie de objetos fuera

en
y dentro, así como, fotogramas para todas las

capas hasta el lugar 25.
g
er
em
de
PROPIEDADES DE INTERPOLACIÓN CLÁSICA

n
la
rP
En la capa viaje_1, realiza el siguiente procedimiento.

po
o
1. Anima el contenido con interpolación clásica para que ingrese al escenario

iv
y se ubique en la esquina inferior derecha en el fotograma clave 25.

us
cl
ex
so
U
2. Realiza clic sobre la interpolación y observa las propiedades de la misma,

en el panel Propiedades.
72 Animación Digital 2
ACELERACIÓN
Modifica la aceleración de este objeto
animado modificando la sección Aceleración
del panel de Propiedades, donde encontrarás
.
las siguientes herramientas:
ón
ci
uc
od
pr
• Todas las propiedades: modifica la aceleración de todas las
propiedades al mismo tiempo.
re
• Cada propiedad por separado: permite modificar la aceleración a
su
cada propiedad por separado (posición, giro, escala, color y filtros).
da
• Intensidad de la aceleración: puede modificar una curva de
aceleración o agregar un valor numérico que va desde -100 para
bi
acelerar y 100 para desacelerar.
hi
ro
0 ,p
02
-2
a
ci
Manteniendo la aceleración en Todas las

en
propiedades, asigna a la Intensidad de

g
aceleración el valor de 100 y observa cómo

er
la animación reduce la velocidad hasta

em
detenerse.
de
n
la
ROTACIÓN
rP
po
Haz que el objeto rote mediante las siguientes opciones en el panel Propiedades.
o
iv
Si despliegas las Opciones de rotación, encontrarás las siguientes alternativas:

us
• Automática: permite configurar de forma manual mediante la rotación del objeto en uno de los dos
cl
fotogramas clave.
ex
• En sentido horario: permite asignar una rotación en el

so
sentido de las agujas de un reloj. A diferencia de la opción

anterior, aquí se permite asignar un valor que indique la
U
cantidad de vueltas deseadas.

• En sentido antihorario: permite asignar la rotación en
sentido opuesto al de las agujas de un reloj y, al igual que
la opción anterior, permite asignar la cantidad de vueltas
mediante un valor exacto.
73
Asigna la rotación en Sentido
horario y coloca el valor 2.
.
ón
ci
uc
od
PROPIEDADES DE INTERPOLACIÓN DE MOVIMIENTO
pr
re
Anima en la capa viaje_2.
su
1. Crea fotogramas para todas las capas en 50,
da
además de un fotograma clave para la capa
bi
viaje_2.
hi
2. Entre 25 y 50 inserta una interpolación de
ro
movimiento y anima a la imagen ingresando 3. Nota que tiene
hasta ubicarse en la esquina inferior izquierda.
No importa que parte de ella se superponga en común
0 ,p
propiedades
con
en
la
la imagen anterior. interpolación clásica,
02
aunque con algunas

-2
variantes.
a
ci
g en
er
em
de
n
ROTACIÓN ADICIONAL
la
rP
A diferencia de las propiedades de la interpolación

po
clásica, la de movimiento presenta la Rotación adicional,

que permite agregar unos grados adicionales de rotación
o
iv
sumados a las vueltas completas definidas como “veces”.

us
cl
Asigna la cantidad de veces como 1,

ex
la dirección como Derecha y 15° de

rotación adicional.
so
U
ORIENTAR SEGÚN TRAZADO
Esta opción también se encuentra en las propiedades de la interpolación anterior y se usa en
casos específicos en los que deseas que el desplazamiento se dé, siguiendo la misma orientación
de la ruta del movimiento.
.
ón
Realiza los siguientes pasos para aplicar esta opción al contenido de la capa viaje_3.
ci
1. Crea fotogramas para todas las capas hasta el lugar
uc
75 y solo para viaje_3 crea un fotograma clave en 50.
od
pr
2. Inserta una interpolación de movimiento en este esta sea una curva. Notarás que, durante el
re
intervalo y anima el contenido para que ingrese desplazamiento, el objeto mantiene la misma
su
al escenario y se ubique en la parte superior orientación horizontal independientemente de
derecha por debajo del recuadro del título. si la ruta es una curva o una recta.
da
3. Modifica la ruta de movimiento para que
bi
hi
ro
0 ,p
02
-2
a
ci
4. En Propiedades, activa Orientar, según trazado Transformación libre en el fotograma de

en
y nota ahora que el objeto adopta el ángulo que propiedad final, para que el objeto ingrese con
le indica la ruta de movimiento. un ángulo de inclinación.
g
er
5. Corrige el ángulo del objeto con la herramienta

em
de
n
la
rP
po
RUTA
o
iv
us
Puedes modificar la ubicación o el tamaño de toda

cl
la ruta, a través del ingreso de valores en el eje X

ex
(horizontal) y eje Y (vertical) o en AN (ancho) y AL

(alto), respectivamente.
so
U
75
También puedes modificar el tamaño de la ruta. Si
haces clic al ícono de la cadena, puedes modificar
el tamaño de la forma proporcional (se se modifica el
ancho, automáticamente sucede lo mismo con el alto y
.
ón
viceversa)
ci
uc
PROPIEDADES DE INTERPOLACIÓN DE FORMA
od
pr
re
Aplica la interpolación de forma al contenido de la capa Mis_vacaciones.
su
1. Crea fotogramas para todas las capas en 125 y
da
crea un fotograma clave en 100 para la capa Mis_
vacaciones.
bi
hi
ro
2. Crea un fotograma clave el 125 y cambia el
texto de Mis vacaciones por Inolvidables. ,p
clave 100 y 125. Inserta la interpolación de
forma y observa las propiedades.
0
02
3. Convierte a vectores los textos en los fotogramas

-2
a
ci
g en
er
em
de
n
la
rP
FUSIÓN
po
Además de las propiedades que ya conoces de las demás interpolaciones, tienes las de Fusión.
o
Se refiere dos modalidades distintas de transición entre ambas formas.

iv
us
• Distributiva: el cambio de forma es uniforme

cl
y parejo.
ex
• Angular: el cambio se da primero a las formas

angulares, para luego proceder con las curvas.
so
U
PANEL ACCIONES
1. Si pruebas la animación en el navegador, notarás que la película se reproduce, pero una vez que termina,
vuelve a repetirse desde el inicio.
2. Para hacer que la película se detenga en el último fotograma, activa el panel Control ubicado en el menú
.
ón
Ventana y selecciona Acciones.
3. Observa el panel. Consta de un campo
ci
para agregar códigos, la información de
uc
la capa y del fotograma en los que te
od
encuentras, y la opción Fragmento de
código, permite que ingreses el código
pr
sin tener que redactarlo en el campo.
re
su
DETENER PELÍCULA WEB EN ÚLTIMO FOTOGRAMA
da
bi
1. Ubícate en la parte de la línea de tiempo, en la 2. Haz clic en Fragmento de código dentro del
hi
que deseas que se detenga la película. panel Acciones y sigue la siguiente ruta.
ro
a. HTML5 canvas.
0 ,p b. Navegación de línea de tiempo.
c. Detener en este fotograma.
02
3. Nota que en la ventana de código ha aparecido

un código y una explicación del uso del mismo.
-2
a
ci
g en
er
em
de
4. Observa que en la línea de tiempo ha aparecido una

nueva capa llamada Actions y un fotograma clave
n
en blanco con un símbolo, que indica en dónde

la
se detiene la película. Comprueba el resultado

rP
probando la película en el navegador.

po
Si deseas cambiar el lugar de la línea de tiempo

o
donde se detiene la película, puedes mover el

iv
fotograma clave donde está el código a otro

us
lugar de línea
cl
ex
Termina la película animando el contenido de la capa

viaje_4 entre los fotogramas 75 y 100, empleando
so
propiedades de la interpolación que elijas para que el

U
contenido ingrese al escenario. Guarda el archivo con

el nombre Apellidos_Nombres_NombreProyecto_
S8.
77
Actividades
.
COMPRENDO
ón
ci
1. Indica si los siguientes enunciados son verdaderos (V) o falsos (F):
uc
od
• El objeto se desplaza desacelerando (disminuyendo la velocidad). ( )
pr
• El objeto gira en el sentido opuesto al sentido de las agujas de un reloj. ( )
re
• La interpolación es de movimiento. ( )
su
• El objeto da 4 vueltas completas. ( )
da
bi
REALIZO
hi
ro
2. Abre el archivo flecha.fla y realiza los siguientes pasos.
0 ,p
• Anima el contenido de la capa Flecha para que ingrese al escenario y roce la punta en el centro del
02
blanco.
-2
• Haz que la ruta sea una curva.

• La flecha debe desplazarse de forma paralela a la ruta durante la trayectoria.
a
ci
• Durante la trayectoria la flecha debe empezar despacio y poco a poco acelerar hasta que se detenga.
en
• Introduce un código para que la película se detenga en el último fotograma.

g
er
em
de
n
la
• Guarda el archivo como Flecha_animada.fla.

rP
po
INVESTIGO
o
iv
3. Averigua y responde.
us
Utilidad
cl
ex
Propiedad de interpolación
clásica: Colorear trazado
so
U
clásica: Escalar trazado

clásica: Ajustar
AUTOEVALUACIÓN
No En Logro Logro
.
ón
Diseño una pieza de animación aplicando
propiedades de interpolaciones clásicas,
ci
de movimiento y de forma para conseguir
uc
películas más armónicas y vistosas.
od
Aprendo a insertar un código a una película
para obtener un mayor control de la
pr
reproducción al momento de previsualizar
re
en un navegador.
su
da
bi
METACOGNICIÓN
hi
ro
• ¿Qué crees que aporta a la animación, la alteración de las propiedades de las interpolaciones ?
,p
• ¿Qué utilidad le puedes encontrar a las herramientas aprendidas para mejorar las animaciones
0
que has estado realizando hasta antes de esta sesión?
02
• ¿Qué habilidades en el ámbito del diseño has mejorado en la sesión?

-2
a
ci
g en
• Adobe, Interpolación de forma. Recuperado de

er
https://helpx.adobe.com/es/animate/using/shape-tweening.html
em
• Adobe, Uso de animación de interpolación clásica en Animate. Recuperado de

de
https://helpx.adobe.com/mx/animate/using/classic-tween-animation.html
n
la
rP
po
o
iv
us
cl
ex
so
U
79
U
so
ex
cl
us
iv
o
po
rP
la
n
de
em
er
g en
ci
a
-2
02
0,p
ro
hi
bi
da
su
re
pr
od
uc
ci
ón
.
Sesión 9
.
ón
ci
uc
od
pr
re
su
Fondos animados
da
bi
hi
ro
0 ,p
02
-2
• Comprender la utilidad de los símbolos en la

a
animación con interpolaciones para generar

ci
animaciones de complejidad avanzada.

g en
er
• Identificar las ventajas del empleo de símbolos para

agilizar el desarrollo de un proyecto de animación.
em
• Crear y modificar símbolos y sus instancias para

de
diseñar animaciones de mayor complejidad.

n
la
rP

po
o
• Panel Propiedades.
iv
us
• Eje de rotación.
cl
ex
so
U
81
IDEAS PREVIAS
¿Qué se anima dentro de un fondo? ¿Dónde has visto fondos animados? ¿Para qué medios puede
ser útil animar el fondo? ¿Qué herramientas de las que ya has visto serían las más importantes
para animar fondos?
.
ón
ci
uc
PRESENTACIÓN
od
pr
En la presente sesión crearás un fondo con elementos
re
animados. Para conseguir este propósito, crearás
su
elementos que se animen en la línea de tiempo y
tendrán animación en su interior. Estas posibilidades,
da
darán mayor complejidad y vistosidad a tu proyecto
de animación.
bi
hi
Descubrirás el concepto de “símbolos e instancias”,
ro
que ya has estado utilizando, pero profundizarás
en él, para reconocer su utilidad y aprenderás la
gran importancia que tiene la biblioteca para añadir ,p
0
02
practicidad al desarrollo del proyecto de animación.
-2
a
ci
g en
Abre el archivo fondo_animado.fla. encontrarás un

er
escenario con capas para el fondo y para dos objetos que

em
animarás durante este proyecto.

de
n
la
rP
po
o
iv
SÍMBOLOS
us
cl
Los símbolos son elementos reutilizables que se generan a partir de

ex
formas creadas en el programa o importadas de archivos externos.

so
Estos elementos son requisitos para la inserción de interpolaciones

de movimiento y clásicas. De hecho, ya has generado símbolos
U
cuando usabas estas interpolaciones y se han estado almacenando

en el panel Biblioteca.
TIPOS DE SÍMBOLOS
Los símbolos se dividen en tipos diferenciados por íconos distintivos en el panel Biblioteca.
.
ón
Gráfico: son símbolos que pueden ser estáticos o animados, y que requieren una extensión real
en la línea de tiempo principal equivalente a la extensión de su línea de tiempo interna.
ci
uc
od
Clip de película: son símbolos que pueden ser estáticos o animados y que poseen una línea de
tiempo independiente de la principal y que pueden interactuar con el código de programación.
pr
re
su
Botón: son símbolos que responden a la interacción del usuario con un mouse. Además, poseen
una línea de tiempo independiente para la asignación de los diversos estados del botón.
da
bi
hi
CONVERTIR EN SÍMBOLOS
ro
Convertirás en símbolo el contenido de la capa ave:
0 ,p
02
-2
1. Selecciona la forma que convertirás en símbolo y ve al menú Modificar. También puedes acceder a la
Luego, haz clic en Convertir en símbolo. opción Convertir en símbolo
a
presionando la tecla F8.

ci
2. Aparece una ventana en el que podrás poner un nombre al símbolo y

en
seleccionar un tipo de símbolo.

3. Nombra el símbolo como Ave y despliega el 4. Puedes notar que ahora, se ha añadido este
g
er
menú del Tipo para seleccionar Clip de película. nuevo símbolo en el panel Biblioteca.
Luego, haz clic en Aceptar.
em
de
n
la
rP
po
o
iv
us
cl
ex
so
U
83
INGRESAR AL INTERIOR DE SÍMBOLOS
Como se trata de un clip de película, para la animación aprovecharás la línea de tiempo que el
símbolo tiene en su interior. Para esto primero ingresa en el símbolo.
.
ón
1. Para ingresar en el símbolo, haz doble clic sobre 3. Observa la línea de tiempo y nota que el panel
ci
él. de capas ha cambiado y se ha convertido en
uc
2. Nota en la esquina superior derecha que acaba uno básico. Este panel corresponde a la línea
od
de aparecer una ruta que indica en dónde te de tiempo interna del símbolo a diferencia de la
encuentras. Según él, estás en la Escena 1 y principal que viste cuando abriste el archivo.
pr
además, dentro del símbolo Ave.
re
su
da
bi
hi
ro
0 ,p
02
-2
4. Nombra a la capa como Cuerpo y crea dos capas:

una encima que se llame Ala_1 y otra debajo que
a
ci
se llame Ala_2. Este contenido será de la línea de

en
tiempo interna del símbolo y no de la principal.

5. Crea 20 fotogramas para las capas internas del
g
er
símbolo.
em
CREAR INSTANCIAS
de
n
la
Las instancias son las copias del símbolo que se extraen del panel Biblioteca, pero que se
rP
mantienen dependientes del símbolo original. Si modificas internamente el símbolo original o

una instancia, todas las instancias se modificarán también.
po
o
1. Arrastra desde el panel Biblioteca dos instancias del

iv
símbolo Ala hacia las capas Ala_1 y Ala_2.

us
2. Invierte el contenido de Ala_2, para ello selecciona y

cl
haz clic derecho para elegir Voltear horizontalmente.

ex
so
U
ANIMAR EN EL INTERIOR DEL SÍMBOLO
Animarás el aleteo del ave. Para este propósito realiza los siguientes pasos.
1. Inserta interpolación de movimiento para las 2. Selecciona cada ala con la herramienta
.
capas de las alas. Transformación Libre y notarás un pequeño
ón
círculo en el centro, que constituye el eje
ci
entorno al que giraría el símbolo cuando se le
uc
anime la rotación. Mueve este eje hacia la parte
más cerca al cuerpo del ave.
od
pr
re
su
da
bi
hi
ro
0 ,p
3. Mueve la cabecera al fotograma 1 y rota el ala para descenderlo.
4. Mueve la cabecera al fotograma 10 y rota el ala para elevarlo.
02
5. Copia el fotograma 1 en el lugar 20 de la interpolación. Para este

-2
propósito, teniendo deseleccionada la interpolación, haz clic sobre

el fotograma 1 y arrastra mientras presionas la tecla Alt hacia la
a
posición 20.
ci
g en
er
6. Realiza los mismos pasos con la otra ala y tendrás la animación de un aleteo dentro del símbolo Ave.
em
de
n
la
rP
po
o
iv
us
cl
SALIR DEL INTERIOR DEL SÍMBOLO

ex
so
1. Para salir del símbolo dirígete a la esquina superior izquierda y

U
haz clic sobre la flecha para subir de nivel hacia la Escena, donde
está la línea de tiempo principal. En este caso el siguiente nivel
es el de la Escena, pero puede darse el caso de estar dentro
de un símbolo que a su vez está en otro símbolo, por lo que la
cantidad de niveles puede aumentar.
85
2. En la Escena, visualizarás la línea de tiempo principal y las capas que viste inicialmente.
También puede salir de un símbolo
.
ón
con solo un doble clic en un
espacio vacío para ir directamente
ci
a la línea de tiempo principal
uc
od
pr
re
su
PRUEBA DE SÍMBOLOS E INSTANCIAS
da
bi
hi
Prueba las instancias del símbolo Ave en el escenario.
ro
1. Arrastra tres instancias del símbolo Ave en el
escenario y prueba la película.
0 ,p
2. Notarás que cada símbolo tiene la misma
animación que hiciste una sola vez.
02
-2
a
ci
gen
er
em
de
n
MODIFICAR INSTANCIAS
la
rP
po
Haber animado el símbolo implica que las instancias adopten la misma animación, esto sucede
con otras modificaciones. En este caso, modificarás el color de las alas.
o
iv
us
1. Ingresa al símbolo de las alas haciendo un doble clic sobre

cl
él, en el panel Biblioteca.

ex
so
U
2. Agrega un color de tu preferencia que difiera del 3. Sal del interior del símbolo y observa el resultado
color del cuerpo. aplicado a todas las instancias.
.
ón
ci
uc
od
pr
re
su
ANIMACIÓN DE SÍMBOLOS
da
bi
hi
1. Distribuye cada instancia en capas distintas.
ro
2. Agrega un fotograma en 30 e inserta una 3. Anima el desplazamiento de cada capa para que
interpolación para cada capa con instancia del
símbolo Ave.
0 ,p
cruce el escenario.
02
-2
a
ci
g en
er
em
de
n
la
4. Prueba la película en el navegador y observa.

rP
Termina la película animando el contenido

po
de la capa hoja. Conviértelo en símbolo

y anima dentro un desplazamiento en
o
iv
sentido horizontal. Además, en la línea

us
de tiempo principal anima este símbolo

desplazándose en sentido vertical. El
cl
ex
resultado cuando pruebes la película,

debería ser un desplazamiento en zigzag
so
hacia abajo. Finalmente, guarda el archivo

con el nombre Apellidos_Nombres_
U
NombreProyecto_S9.
87
Actividades
.
COMPRENDO
ón
ci
uc
1. Observa el siguiente entorno de un archivo que contiene símbolos de diversos tipos. Indica qué significa
lo que está indicado con números.
od
pr
1.______________________________________
re
2._________________________________________
3._________________________________________
su
4._________________________________________
da
bi
hi
ro
0 ,p
02
REALIZO
-2
a
2. Abre el archivo Estrellas.fla y realiza los siguientes pasos.

ci
en
• Convierte en símbolo Clip de película el contenido de la capa Estrellas.

g
• Dentro del Clip de película, anima a la

er
estrella incrementando su tamaño y

em
regresando a su tamaño original.

• Dispersa tres instancias más de
de
diferentes tamaños.
• Prueba la película y deben aparecer
n
la
las estrellas dispersas en el escenario

de diferentes tamaños y ejecutando
rP
una animación en la que cambian de

po
tamaño.
• Guarda el archivo como Estrellas_final.
o
fla.
iv
us
INVESTIGO
cl
ex
3. Lee, indaga y responde.

so
a. ¿Para qué sirve Registro en la ventana para

U
convertir símbolo?
____________________________________
____________________________________
____________________________________
INVESTIGO
b. ¿Cómo puedes convertir una instancia en una forma editable en la misma línea de tiempo
principal?
.
____________________________________________________________________________
ón
________________________________________________________________________
ci
uc
c. ¿Para qué sirve este slider sobre la línea de tiempo?
od
____________________________________________
pr
____________________________________________
re
____________________________________________
su
AUTOEVALUACIÓN
da
bi
hi
No En Logro Logro
ro
Comprendo la utilidad de los símbolos en la
animación con interpolaciones para generar
0 ,p
02
animaciones de complejidad avanzada.
Identifico las ventajas del empleo de
-2
símbolos para agilizar el desarrollo de un

a
proyecto de animación.
ci
Creo y modificar símbolos y sus instancias

en
para diseñar animaciones de mayor

g
complejidad.
er
em
METACOGNICIÓN
de
n
• ¿Qué método de trabajo puede ser conveniente para alcanzar el dominio de las herramientas aprendidas?
la
• ¿Qué utilidad le puedes encontrar a las herramientas aprendidas aparte de la creación de un fondo con
rP
animado?
po
• Comenta a tu compañero ¿qué obstáculos encontraste durante la clase? ¿qué plan utilizaste para poder
resolverlo?
o
• ¿Con qué podrías relacionar lo aprendido para que puedas recordarlo de forma permanente?
iv
us
cl
ex
• Adobe, Trabajo con símbolos en Animate. Recuperado de

so
https://helpx.adobe.com/es/animate/using/symbols.html
U
89
U
so
ex
cl
us
iv
o
po
rP
la
n
de
em
er
g en
ci
a
-2
02
0,p
ro
hi
bi
da
su
re
pr
od
uc
ci
ón
.
Sesión 10
.
ón
ci
uc
od
pr
re
EJERCICIO DE INTEGRACIÓN 2
su
da
1. Abre el archivo Tennis.fla y realiza las siguientes instrucciones para ejecutar una animación en la que la
bi
pelota se desplace hasta la X:
hi
ro
• Crea fotogramas para que la animación dure 40 fotogramas.
• Convierte el contenido de la capa Pelota en símbolo. 0
• Inserta una interpolación de movimiento para que la pelota
,p
02
se desplace hasta la X.
-2
• Haz que la ruta sea una curva.

• La pelota debe dar tres vueltas completas hacia la izquierda
a
ci
y una rotación adicional de 25°.

en
• La pelota debe desacelerar hasta llegar a la X

g
• Guarda el archivo como Tennis_final.fla.

er
em
2. Abre el archivo Fantasma.fla y realiza los siguientes cambios para conseguir el siguiente que el fantasma
de
se desplace siguiendo el sendero hasta salir del escenario.

n
• Crea fotogramas para que la animación dure 2

la
segundos.
rP
• Convierte el contenido de la capa Fantasma en

símbolo de tipo Gráfico y coloca en su interior dos
po
instancias del símbolo Ojo, que está en el panel

Biblioteca.
o
iv
• Anima al personaje con interpolación de movimiento

us
en la dirección que indican las líneas en forma de L.

cl
• Guarda el archivo como Fantasma_final.fla.

ex
so
3. Crea una película siguiendo las siguientes instrucciones.

U
• Crea un escenario de medidas 640px por 480px de color azul oscuro.

• Crea un texto amarillo que diga STAR y usa la familia Impact para los caracteres.
• Distribuye cada letra en capas distintas.
91
• Con interpolación de forma haz que cada caracter se convierta en una estrella amarilla en 20 fotogramas.
• Guarda el archivo como Estrella_final.fla.
.
ón
Fotograma 1 Fotograma 10 Fotograma 20
ci
uc
od
pr
re
su
da
bi
4. Abre el archivo Mi_Gato.fla y crea la siguiente película.
hi
ro
• Convierte la imagen de mapa de bits que está en la capa Gato en vectores, elimina el fondo, coloca
en el gato el color del texto y ubícalo como aparece en la imagen de
adjunta. ,p
0
• Ingresa al símbolo Pez y anima la mandíbula para que parezca que
02
abre y cierra la boca constantemente.

-2
• Anima el símbolo Pez para que avance hasta ubicarse sobre la letra i
de Mi en 30 fotogramas.
a
ci
• Agrega un código en 30 de la línea de tiempo para que la película se

en
detenga en ese momento.

g
• Guarda el archivo como Mi_Gato_final.fla.

er
em
de
n
la
rP
po
o
iv
us
cl
ex
so
U
Sesión 11
.
ón
ci
uc
od
Animación de personaje con
pr
re
Adobe Character Animator
su
da
bi
hi
ro
0 ,p
02
-2
• Identificar las ventajas de Adobe Character Animator

a
en la animación digital de personajes destinados a

ci
productos audiovisuales.
g en
• Reconocer el entorno de trabajo del programa para

er
destinar, adecuadamente, las labores del proceso de

em
animación a los diversos paneles y ventanas que ofrece

la interfaz.
de
• Realizar un primer video básico con un personaje

n
animado para reconocer la facilitación que ofrece el

la
programa, a través del trabajo de proyectos de animación

rP
que incluya marionetas y escenas.

po
o

iv
us
cl
ex
• Activadores.
so
• Grabar video.
U
• Plantillas de marionetas.
93
IDEAS PREVIAS
¿Qué comportamientos o acciones ejecutarías en un personaje de un corto animado hecho por ti?
¿Qué crees que se debe animar en los personajes cuando realizan diálogos? ¿Cómo distinguirías
a un personaje que se mueve como ser vivo de uno que se moviera como robot?
.
ón
ci
uc
PRESENTACIÓN
od
pr
re
En la presente sesión identificarás la utilidad
su
de Adobe Character Animator. Para este
propósito explorarás el entorno de trabajo y las
da
diferentes herramientas que permiten crear
bi
personajes y escenas para animar personajes,
hi
previamente creados. Además, como parte de
ro
esta exploración, usarás uno de los personajes
que por defecto te ofrece el programa.
0 ,p
02
Asimismo, realizarás animaciones básicas del

-2
personaje a partir de activadores y con él, crearás

una primera pieza de video.
a
ci
en
INICIAR EL PROGRAMA
g
er
em
1. Haz clic en el ícono del programa, presente en el menú Inicio de

de
Windows.
n
la
rP
po
o
iv
INTERFAZ DEL PROGRAMA

us
cl
ex
Encontrarás la ventana Inicio de Adobe Character Animator.

so
U
1. Barra de menús.
2. Barra de ventanas: muestra las principales ventanas por las que uno transita cuando trabaja en un
proyecto de Character Animator. La ventana que se muestra cuando inicias el programa es la ventana
Inicio y cada vez que una de ellas está activa, el texto se muestra en azul. Las ventanas principales que
se muestran son las siguientes:
a. Inicio
b. Plataforma
c. Grabar
d. Transmisión
.
ón
3. Proyectos recientes: muestran los últimos
ci
proyectos abiertos en el programa. Por defecto,
uc
se encuentran en el primer proyecto que se
muestra, el cual presenta su nombre y un
od
subtítulo en el que se lee “proyecto actual”.
pr
4. Plantillas de marionetas: muestra personajes
re
ya construidos para animar en el programa.
5. Nuevo proyecto…: permite crear un nuevo
su
proyecto.
da
6. Abrir proyecto…: permite abrir un proyecto ya Cada ventana cuenta con un menú desplegable con
creado.
bi
un símbolo en donde encontrarás opciones de
espacio de trabajo
hi
ro
CREAR NUEVO PROYECTO
0 ,p
02
-2
1. Realiza un clic sobre la opción Nuevo proyecto… dentro de la ventana Inicio.

a
ci
2. Elige la ruta donde guardarás éste y asigna

en
un nombre. En este caso, nómbralo Primer_

Proyecto y haz clic en Guardar.
g
er
3. Verifica que en la parte superior izquierda se

corrobora que está en el proyecto que acabas
em
de crear. Además, el programa acaba de

cambiar de ventana de Inicio a Grabar.
de
n
la
MARIONETA
rP
po
Las marionetas son los personajes o los

o
objetos creados en programas de creación

iv
y edición de gráficos que se animan en

us
Adobe Character Animator. Los programas

cl
en los que se puede crear estas marionetas

ex
son Adobe Photoshop y Adobe Illustrator.

so
U
Para animar a un personaje, necesitas

importarlo luego de haberlo creado en otro
programa o puedes importar al proyecto
una de las plantillas que se presentan en la
ventana Inicio.
95
USAR PLANTILLA DE MARIONETA
1. Regresa a Inicio y haz clic sobre la plantilla de 2. Mientras abres la marioneta en el proyecto,
marioneta llamada Cara en blanco. se abre el programa que permite la edición del
.
personaje. En este caso, se trata de Adobe
ón
Photoshop.
ci
uc
od
pr
re
su
da
bi
hi
ro
CARACTERÍSTICAS DE LAS MARIONETAS 0 ,p
02
-2
Como puedes observar, las marionetas presentan las siguientes características:

a
1. División en capas: las capas permiten dividir el total del personaje

ci
en porciones que se animarán de forma independiente, como las

en
pupilas que se animan aparte de los globos oculares.

g
2. Nombres de capas y grupos de capas: cada capa y grupo de capas

er
debe tener un nombre que haga referencia a la extremidad que

representa. En este caso, los nombres son estrictos para que
em
se pueda hacer la relación entre los nombres de las capas y las

etiquetas que se animan en Adobe Character Animator. Por lo tanto,
de
los nombres de las capas deben ser los que ya se encuentran en la

plantilla en inglés.
n
la
3. Capas ocultas y reveladas: las capas ocultas corresponden a

rP
vistas de ciertas partes que no están activas, pero que deben

estar disponibles en caso de que se puedan necesitar, como los
po
ojos cerrados, que están ocultos cuando los ojos abiertos si están
visibles.
o
4. Nombres con signo + : la presencia del signo + hace referencia a

iv
que el elemento de la capa se animará de forma independiente o si

us
su animación se incluirá en la de los elementos circundantes.

cl
ex
Éstas también son guías sobre las características que deberás tener
so
el archivo del personaje que vayas a crear para animar en Adobe

U
Character Animator.
EDICIÓN DE MARIONETA
La edición se realiza en el mismo programa donde se creó inicialmente.
.
ón
1. En Photoshop, ubica la capa face background. 2. Utiliza la forma en face background como
ci
referencia para crear una cabeza de otras
uc
características.
od
pr
re
su
da
bi
hi
ro
0 ,p
02
3. Crea un grupo de capas para las nuevas
formas de la cabeza, coloca como nombre
-2
face background y borra la capa que

inicialmente, tenía este nombre.
a
ci
4. Guarda el archivo y regresa a Adobe

en
Character Animator.
g
er
em
de
PLATAFORMA
n
la
rP
En Adobe Character Animator, activa el panel Plataforma y la marioneta se habrá actualizado.

po
En esta ventana, observa los siguientes elementos:

o
iv
us
1. Lista de capas de la marioneta como aparecen en el

cl
archivo editable original.

ex
2. Panel proyecto: se encuentran los siguientes

elementos.
so
a. Carpetas: agrupan elementos de este panel.

U
b. Escenas: se crean para cada toma animada de

la marioneta.
c. Marionetas: cada personaje animado.
97
3. Panel activadores: muestran y permite configurar acciones del usuario con el mouse o el teclado para
que el personaje realice ciertos comportamientos que luego, se grabarán en una línea de tiempo.
4. Panel historial: compendio de últimas acciones realizadas en el proyecto. Asimismo, permite retroceder
a acciones previas para deshacer otras recientes.
5. Panel propiedades.
.
ón
ci
GRABAR
uc
od
pr
En la ventana grabar podrás registrar los
re
movimientos que ejecute la marioneta
para crear un video en una línea de tiempo.
su
Los elementos que encontrarás en él y
da
que diferencian a la ventana anterior son,
principalmente, los que se detallan a
bi
continuación.
hi
ro
1. Línea de tiempo: permite asignar un tiempo para
0 ,p
02
el video en su totalidad y asignar momentos para
cada cambio en la marioneta. Puede añadirse
-2
audio también. Además, se puede recorrer la

a
línea de tiempo a través de la cabecera o de un

ci
panel de reproducción ubicado encima.

g en
2. Cámara y micrófono: permite el registro de movimiento a través de una cámara para su emulación por
er
parte de la marioneta para facilitar su animación. Asimismo, permite el registro de audio para facilitar la
em
animación de bocas en los diálogos.

de
GRABAR VIDEO
n
la
rP
A continuación, grabarás un video de la marioneta realizando una animación ejecutada a partir de

po
activadores.
o
iv
us
1. Presiona la tecla B y observa que el

personaje realiza un parpadeo. Esto se
cl
debe a que la plantilla de marioneta ya

ex
tenía esta acción por defecto.

so
U
2. Para grabar al personaje, primero configura el largo del video de la escena que vas a grabar. Para esto, ten
seleccionada la Escena, en el panel Proyecto y en el panel propiedades, cambia la duración de 30s a 6s.
.
ón
ci
uc
od
pr
re
3. Ubícate en el inicio de la línea de tiempo y luego, 4. Inmediatamente después, ejecuta los
su
presiona el botón Grabar dentro del panel de parpadeos antes de que la cabecera termine
reproducción. de recorrer la línea de tiempo de 6 segundos.
da
Cuando hayas terminado, haz clic en el botón
bi
Detener en el panel de reproducción.
hi
ro
0 ,p
02
5. Si te has pasado de los 6 segundos, puedes corregir la duración de la escena en el panel Propiedades.
-2
Fíjate en la línea de tiempo cómo se han creado fotogramas para cada parpadeo. En este caso, ejecuta
a
cinco parpadeos.
ci
6. Modifica los activadores de parpadeo haciendo un clic sobre uno de los extremos y estirándolos hacia un
en
lado para prolongar o reducir la duración. Estira

uno de ellos para que el personaje permanezca
g
er
con los ojos cerrados por un lapso más largo.

em
7. Prueba la película haciendo clic en el botón

Reproducir.
de
n
ACTIVADORES
la
rP
po
Para observar qué activadores están disponibles, realiza

o
un clic sobre el panel Activadores que está al lado

iv
izquierdo de la interfaz y junto al panel Historial. Notarás

us
que el activador del parpadeo es el único y que también

cl
se indica qué tecla lo ejecuta.

ex
so
U
99
CREAR ACTIVADORES
Crearás los activadores para que el personaje ejecute una sonrisa cuando se presiona la tecla S.
.
ón
1. Regresa a la ventana Plataforma y ubica la capa
ci
Neutral, dentro del grupo de capas Mouth (boca
uc
en inglés).
od
pr
re
2. Arrastra la capa hacia el panel Activadores. Ya 3. Arrastra a Activadores, la capa Smile, que
su
tienes el estado por defecto, ahora solo falta contiene la sonrisa. Ya tienes las dos apariencias
da
la capa de la boca que mostrará cada vez que que tendrá la boca.
actives la sonrisa.
bi
hi
ro
0 ,p
02
-2
a
ci
4. Haz clic en el signo + para añadir un Conjunto de intercambio, que agrupará a las dos capas para alternar,
en
entre ambas, mediante un activador.

g
5. Arrastra las dos capas al nuevo Conjunto de intercambio.

er
em
de
n
la
rP
po
o
iv
us
6. Realiza un clic derecho sobre el nombre Conjuntos

cl
de Intercambio y cámbialo por Sonrisa.

ex
7. Indica a la capa Smile la tecla que la activará.

so
Para ello, escribe la letra S en el recuadro negro,

correspondiente al lado izquierdo.
U

8. Indica la capa Neutral como la capa que se 9. Regresa a la ventana Grabar y prueba que
mostrará por defecto. Para este propósito, haz puedes agregar momentos en los que sonríe al
clic sobre el ícono de la manito que está al lado personaje que ya parpadea a veces.
del nombre para que resalte a diferencia del
ícono de la capa Smile.
.
ón
ci
uc
od
pr
re
su
da
bi
hi
ro
Complementa el personaje añadiéndole un torso en Photoshop y guardándolo. Crea otro activador
0 ,p
que haga que aparezca la capa Surprised para mostrar sorpresa. El conjunto de intercambio se
llamará ¡Oh! y se activará la boca sorprendida con la tecla O. Sumado a ello, incorpora este
02
cambio a la línea de tiempo. Por último, guarda la carpeta de proyecto con el nombre Apellidos_
-2
Nombres_NombredeProyecto_SX (número de la sesión).

a
ci
g en
er
em
de
n
la
rP
po
o
iv
us
cl
ex
so
U
101
Actividades
.
COMPRENDO
ón
ci
uc
od
1. Observa el siguiente entorno de un
pr
archivo donde están símbolos de
re
diversos tipos. Indica qué significan
los íconos que están indicados con
su
números.
da
1. ____________________________
bi
2. ____________________________
hi
3. ____________________________
ro
4. ____________________________
0 ,p
02
REALIZO
-2
a
ci
g en
er
Crea un proyecto llamado Segundo_

em
Proyecto y realiza los siguientes pasos.

• Trae al proyecto a la plantilla de marioneta
de
llamada Monstruo rojo.

• En Photoshop, realiza los siguientes cambios
n
a la marioneta.
la
○ Cámbiale el color a las puntas por verde.

rP
○ Agrégale unas tres manchas de rojo

po
oscuro en el cuerpo.
○ Crea una copia de la nariz, ponle color
o
iv
amarillo y ocúltala.
us
○ Guarda el archivo.
cl
• Actualizada la marioneta en Character Animator, arrastra las capas de la nariz al panel Activadores.
ex
• Añade un conjunto de intercambio e incluye en él a las capas de la nariz para que con la tecla N la nariz del
personaje se cambie a amarillo.
so
• La capa que se mostrará por defecto, será la de la nariz negra.

U
• Cambia el nombre del conjunto de intercambio por Nariz.

INVESTIGO
• Guarda el proyecto.
.
a. ¿Cómo modificas el ancho y largo de la escena?
ón
ci
______________________________________________________________________________
uc
______________________________________________________________________________
od
b. ¿Cómo aceleras la velocidad de reproducción?
pr
______________________________________________________________________________
re
______________________________________________________________________________
su
c. ¿Para qué sirve la ventana Transmisión?
da
______________________________________________________________________________
______________________________________________________________________________
bi
hi
AUTOEVALUACIÓN
ro
No 0,p
logrado
En
proceso
Logro
esperado
Logro
destacado
02
Identifico las ventajas de Adobe Character

-2
Animator en la animación digital de

personajes destinados a productos
a
ci
audiovisuales.
en
Reconozco el entorno de trabajo del

g
programa para destinar adecuadamente

er
las labores del proceso de animación a los

em
diversos paneles y ventanas que ofrece la

interfaz.
de
Realizo un primer video básico con un

personaje animado para reconocer la
n
facilitación que ofrece el programa a través

la
del trabajo de proyectos de animación que

rP
incluyan marionetas y escenas.

po
o
iv
METACOGNICIÓN
us
cl
• ¿Qué método de trabajo puede ser conveniente para alcanzar el dominio de las herramientas aprendidas?
ex
• ¿Qué utilidad, en el aspecto académico, encuentras en los conocimientos adquiridos en esta sesión?
so
U
• Adobe, Creación de marionetas e ilustraciones. Recuperado de

https://helpx.adobe.com/es/adobe-character-animator/using/puppet.html
103
U
so
ex
cl
us
iv
o
po
rP
la
n
de
em
er
g en
ci
a
-2
02
0,p
ro
hi
bi
da
su
re
pr
od
uc
ci
ón
.
Sesión 12
.
ón
ci
uc
od
Sincronización de labios
pr
re
su
da
bi
hi
ro
0 ,p
02
-2
• Utilizar las herramientas de control facial de personajes para

a
facilitar la animación de labios que emiten un diálogo en piezas

ci
audiovisuales.
en
• Reconocer el método de preparación del archivo origen de una

g
marioneta para que pueda ejecutar una animación de boca

er
verosímil.
em
• Identificar las facilidades que ofrece el programa para la

animación de personajes a través del hardware de registro de
de
imagen y de audio.
n
la
rP
po

o
iv
us
• Importación de archivos externos.

cl
• Creación y edición de escenas.

ex
• Grabación de tomas del comportamiento de marionetas.

so
U
105
IDEAS PREVIAS
¿Qué valor añadido da el sonido en una animación? ¿Para qué sirve darle voz a un personaje
animado? ¿Consideras que los tonos de voz deben ir acorde a cada personaje?
.
ón
ci
uc
PRESENTACIÓN
od
pr
re
En la presente sesión, efectuarás acciones que el programa
su
ya había realizado por ti en la sesión anterior, debido a que
elegiste una marioneta predeterminada en la ventana Inicio de
da
Character Animator. Por lo tanto, crearás una escena nueva e
bi
importarás una marioneta realizada en Photoshop.
hi
ro
Debido a que se le dará voz al personaje, también insertarás un
0,p
archivo de audio y lo emplearás para realizar la sincronización
de labios del personaje para tener al final, un video en el que
02
la marioneta habla y adecúa la forma de la boca a los sonidos

-2
emitidos.
a
ci
en
g
er
em
Crea un nuevo proyecto llamado Segundo_Proyecto y guárdalo en una ruta fácil de acceder.
de
n
CREAR ESCENA
la
rP
po
Crea una escena para tener una línea de tiempo donde se incluirán todos los elementos presentes
o
en tu animación, como imágenes estáticas, marionetas y archivos de audio.

iv
us
1. Haz clic en el menú Escena y selecciona Nueva Escena.

cl
ex
2. Usa el panel de Propiedades para que la escena tenga

una duración de 6 segundos.
so
U

NOMBRAR ESCENA
Luego de añadida la escena al panel Proyecto, haz clic derecho sobre el nombre de escena por
defecto y renómbrala como Escena_Bienvenidos.
.
ón
ci
uc
od
pr
re
su
IMPORTAR ARCHIVOS A PROYECTO
da
bi
hi
1. Es muy importante mantener todos los archivos
ro
en la carpeta del proyecto por si vas a moverlo de
sitio o quieres asegurar un orden en el mismo. Por
lo tanto, primero usando el explorador del sistema
operativo, ubica los archivos Bienvenidos.wav
0 ,p
02
(archivo de audio), Cara.psd (marioneta) y Fondo_

anim.jpg (imagen de fondo) y cópialos de la ruta que
-2
te dé tu profesor y pégalos en la carpeta de proyecto

a
Segundo_Proyecto.
ci
2. Los archivos comparten la misma ruta de una 3. De regreso en Character Animator, realiza un
en
carpeta llamada Ch Data y de un archivo de doble clic sobre el panel Proyecto y se abrirá
g
proyecto de Character Animator. la ventana Importar. Ubica los tres archivos

er
que acabas de incorporar en el proyecto,

em
selecciónalos y haz clic en Importar.

de
n
la
rP
po
o
iv
us
cl
4. Encontrarás los tres archivos agregados al proyecto en el

ex
panel Proyecto.
so
U
107
INGRESAR A ESCENA
1. Para ingresar a la escena, haz clic sobre el

respectivo nombre en el panel Proyecto.
.
ón
2. Verifica que se acaba de activar la ventana
Grabar y la pantalla destinada para la escena
ci
acaba de ser activada.
uc
od
pr
re
INGRESAR ARCHIVOS IMPORTADOS A ESCENA
su
da
Para incluir archivos en la escena, éstos deben arrastrarse a la línea de tiempo.
bi
hi
ro
1. Haz clic sobre el elemento Fondo_anim en 2. Observa que el elemento Fondo_anim ya se
el panel de Proyecto y arrástralo a la línea de
tiempo. ,p
encuentra en la línea de tiempo y como sucedía
en Animate, también se presenta como capas.
0
02
-2
a
ci
g en
er
em
de
LÍNEA DE TIEMPO DE CHARACTER ANIMATOR

n
la
rP
En la línea de tiempo de Character Animator puedes encontrar las siguientes partes.

po
o
1. Mostrar / Ocultar capa.

iv
us
2. Listo para grabar (cuando el círculo esta rojo) / No grabar.

3. Tiempo en fotogramas.
cl
ex
4. Tiempo en minutos y segundos.

5. Ampliar vista de tiempo de duración de escena a la totalidad
so
del panel.
U
6. Alejamiento / Acercamiento para la línea de tiempo.
Arrastra los otros dos elementos a la línea de tiempo.

Observa cómo se distingue el archivo de audio comparado
con los demás.

MOVER CONTENIDO EN LA LÍNEA DE TIEMPO
Si usas el panel de reproducción, notarás que el audio se reproduce desde el inicio. Si deseas que
la película inicie con una pausa de 1 segundo antes de empezar el diálogo del personaje, realiza
.
ón
lo siguiente.
ci
1. Usa la cabecera de reproducción y avanza 2. Haz clic sobre la pista de audio en la línea de
uc
hasta donde está el segundo 1 de la línea de tiempo y arrástrala hasta que inicie donde está
tiempo. Puedes corroborar que estás en el la cabecera.
od
lugar correcto gracias a un contador de tiempo,
ubicado encima de la línea de tiempo.
pr
re
su
da
bi
hi
ro
0 ,p
02
-2
SINCRONIZACIÓN DE LABIOS
a
ci
g en
Para sincronizar los labios del personaje con una pista de audio se puede hacer de dos maneras.
er
• A través de un archivo de audio.

em
• A través de la cámara y el micrófono.

de
Para cualquiera de estas modalidades, Character Animator hace uso de visemos, es decir
n
representaciones de la apariencia de la boca cuando produce un sonido. Estos visemos se

la
distribuyen en capas y grupos de capas tanto en el archivo origen de la marioneta, como Photoshop
rP
e Illustrator, como es su visualización en la ventana Plataforma.

po
o
iv
us
cl
ex
so
U
109
Los visemos están ubicados en la capa Mouth y para cubrir todas las
posibles apariencias de la boca, además de posturas para producir sonidos,
tienen otro grupo que no los produce, donde se encuentran la posición
Neutral, Smile (sonrisa) y Surprised (sorpresa).
.
ón
Por otro lado, para cubrir todas las posibles posturas que puede adquirir la
boca para hablar, el programa las ha reducido a unas pocas: Aa, D, Ee, F, L,
ci
M, Oh, R, S, Uh, W-Oo.
uc
od
pr
re
SINCRONIZACIÓN DE LABIOS DESDE UN ARCHIVO DE AUDIO
su
da
1. Selecciona la capa del audio y con la tecla
bi
Shift, selecciona también la de la marioneta.
hi
ro
,p
2. Ve al menú Línea de tiempo y selecciona Cuadrar sincronización labial del audio de
0
02
la escena.
3. Verifica que, al reproducir el video, la postura de la boca coincide con los sonidos
-2
emitidos en la línea de tiempo.

a
ci
g en
er
EDITAR VISEMOS EN LA LÍNEA DE TIEMPO

em
de
Si crees que la sincronización no ha sido la deseada, también puedes modificar los visemos en
n
la línea de tiempo.
la
rP
1. Despliega la pequeña flecha que se encuentra en el panel

po
de capas y correspondiente a la marioneta. Ya puedes ver los

visemos.
o
iv
2. Si realizas un clic derecho sobre uno de los 3. Si crees conveniente, también puedes estirar o
us
visemos, notarás que puedes cambiar por uno recortar la duración de un visemo con solo hacer
distinto, si así lo crees conveniente. un clic sobre uno de los extremos y arrastrar.
cl
ex
so
U

SINCRONIZACIÓN DE LABIOS DESDE LA CÁMARA Y EL
MICRÓFONO
.
1. Crea una nueva escena llamada Escena_Hola. un micrófono en tu ordenador, habilita la entrada
ón
Ingresa en ella, arrastra el objeto Fondo_anim y de cámara y micrófono del panel Cámara y
ci
la marioneta Cara. micrófono.
uc
2. Teniendo conectados y operativos, una cámara y
od
pr
re
su
da
bi
hi
3. Una vez que ya tienes activados la cámara y el
ro
micrófono, nota cómo el personaje sigue los
movimientos que uno realiza ante la cámara,
aunque pueden no ser tan precisos.
0 ,p
02
4. Para mejorar la precisión, mantén una postura

neutral ante la cámara y realiza un clic en el
-2
botón Def. pose reposo.

a
ci
g en
er
em
de
5. Verifica cómo la detección de gesticulaciones es más

precisa. De esta manera, el programa detecta posturas
n
la
de la boca que no producen sonido también.

rP
6. Para empezar a grabar, ubícate al inicio de la línea de

tiempo y presiona el botón Grabar.
po
7. Aparecerá un contador en cuenta regresiva. Una vez que termine, la línea de

tiempo avanzará y dirás un diálogo breve para los 6 segundos de duración de la
o
iv
escena. Puedes decir “Hola queridos amigos”.

us
8. Apenas hayas terminado el diálogo, presiona el botón

cl
Detener.
ex
9. Nota que han aparecido visemos en la línea de tiempo, que

también puedes cambiar por otros, alterar su duración o
so
eliminar. Junto con ellos, también tienes la pista de audio

registrada con el micrófono y las registradas por la cámara.
U
111
TOMA
Se denomina toma a cada grabación que se realiza del

comportamiento de una marioneta. De hecho se han
.
ón
generado la tomas Cara, Mirada y Sincronización de audio.
ci
uc
od
DIFUMINACIÓN DE TOMAS
pr
re
su
Si la escena tiene una duración mayor al de las tomas, puede ser que
da
haya un cambio brusco entre el fin de la toma y el estado neutral,
restándose naturalidad a la animación.
bi
hi
ro
Para agregar una pequeña transición entre el fin de la toma y el
desperfecto más evidente.

0 ,p
estado neutral, realiza lo siguiente, usando la toma Cara, que es la del
02
-2
a
ci
1. Verifica que al final de la toma hay un pequeño 2. Luego de arrastrar hacia la izquierda, se genera
en
cuadrado. Haz clic allí y arrastra hacia la izquierda. una curva que indica la transición suave.
g
er
em
de
Crea un proyecto llamado Apellidos_Nombres_NombrePoyecto_SX (número de la sesión). En

n
la
este proyecto, crea una escena llamada Escena_Adiós. En esta escena trae el mismo fondo y la
rP
misma marioneta y anímala diciendo “Hasta la próxima clase”.

po
o
iv
us
cl
ex
so
U

Actividades
.
COMPRENDO
ón
ci
uc
Indica si son verdaderas (V) o falsas (F) las siguientes afirmaciones.
od
pr
1. Los visemos son distintas apariencias que tienen los ojos del personaje durante su
animación………………………………………………………………………………….( )
re
su
2. Cuando grabas voz con el micrófono en Character Animator, se crea un nuevo archivo en el panel
Proyecto…………………………………………………………………………..( )
da
3. Cuando utilizas la cámara para registrar los movimientos de los labios, también se pueden registrar los de
bi
las cejas……………………………………………………………………( )
hi
ro
4. Con la cámara y el micrófono habilitados, se registran los movimientos de los labios aún si no se emite
,p
sonido, como las sonrisas……………………………..( ) 0
02
REALIZO
-2
a
ci
Crea un proyecto llamado Proyecto_Realizo y realiza los siguientes pasos.

en
• Trae al proyecto a la plantilla de marioneta llamada Cara en blanco.

g
• Importa el archivo Contento.wav.

er
• Crea una escena llamada Escena_Contento.

em
• Coloca la marioneta y el archivo de audio en la línea de tiempo de

la escena Escena_Contento.
de
• Selecciona la marioneta y el audio, en la línea de tiempo, y utiliza

Cuadrar sincronización labial del audio de la escena para hacer la
n
la
sincronización de labios de la marioneta con el audio.

rP
po
o
INVESTIGO
iv
us
a. ¿Qué otros formatos de archivo de audio puedo usar en Character Animator además de wav?
cl
ex
__________________________________________________________________________
__________________________________________________________________________
so
b. ¿Se pueden importar archivos de video a la línea de tiempo?

U
__________________________________________________________________________
__________________________________________________________________________
113
INVESTIGO
c. ¿Para qué sirve el botón Nuevo marcador de historia presente en la parte

inferior del panel Historial?
.
ón
_______________________________________________________
ci
_______________________________________________________
uc
_______________________________________________________
od
pr
AUTOEVALUACIÓN
re
su
da
No En Logro Logro
bi
hi
Utilizo las herramientas de control facial de
ro
personajes para facilitar la animación de
labios de personajes que emiten un diálogo
en piezas audiovisuales.
0 ,p
Reconozco el método de preparación del
02
archivo origen de una marioneta para que

-2
pueda ejecutar una animación de boca

verosímil.
a
ci
Identifico las facilidades que ofrece el

en
programa para la animación de personajes

a través del hardware de registro de imagen
g
y de audio.
er
em
METACOGNICIÓN
de
n
• ¿Qué estrategia de trabajo puede ser conveniente para que puedas dominar las herramientas vistas en
la
esta sesión?
rP
• ¿Qué aplicaciones en el ámbito profesional puedes encontrar a la animación que aproveche cámara y
po
micrófono en tiempo real?

o
iv
us
• Adobe, Creación de marionetas e ilustraciones. Recuperado de

cl
https://helpx.adobe.com/es/adobe-character-animator/using/puppet.html
ex
so
U

Sesión 13
.
ón
ci
uc
od
Ciclo de caminata
pr
re
su
da
bi
hi
ro
0 ,p
02
-2
a
• Reconocer las herramientas del panel Propiedades

ci
de la marioneta que permiten el etiquetado de las

en
extremidades de la marioneta, para animar el ciclo de

g
caminata de un personaje para piezas audiovisuales.

er
em
• Identificar las ventajas del empleo de comportamientos

para la agilización del proceso de animación de
de
personajes
n
la
• Modificar los parámetros de movimiento para

personalizar la animación de la caminata de un personaje
rP
po

o
iv
us
cl
• Controladores.
ex
• Herramienta pegado.
so
U
115
IDEAS PREVIAS
¿Qué formas de desplazarse puede adoptar un personaje? Cuando se anima a un personaje
caminando, ¿qué partes deberían moverse? ¿Puede un personaje mostrar cómo se siente por
la manera de caminar? ¿Cómo? ¿Por qué será útil colocar nombres apropiados a las capas de la
.
ón
marioneta?
ci
uc
PRESENTACIÓN
od
pr
re
En la presente sesión realizarás la animación de la caminata
su
de una marioneta. Para este propósito, profundizarás en el
concepto de etiquetas, que ayudará al programa a identificar
da
las extremidades de la marioneta necesarias para ejecutar
bi
esta acción. Asimismo, insertarás un comportamiento a la
hi
marioneta para aprovechar la animación de la caminata que
ro
el programa ya tiene almacenado para asignar a tu personaje.
0 ,p
02
-2
a
ci
1. Crea un nuevo proyecto llamado Tercer_Proyecto y guárdalo en una ruta fácil de acceder.
en
2. Ubica el archivo Pepe.psd y colócalo en la 3. Crea una escena llamada Caminata e importa la
g
carpeta de proyecto que debe de haberse marioneta Pepe.psd.

er
creado.
em
de
n
la
rP
CONTROLES
po
o
iv
us
Para preparar las diversas extremidades que se moverán del

cuerpo del personaje, se debe asignar los ejes, entorno a
cl
ex
los cuales rotarán cada uno de las extremidades, de acuerdo

a cómo suele darse en un cuerpo real; por ejemplo, el eje
so
de rotación de un muslo estará en la pelvis y el de un brazo

en el hombro. Estos ejes son los controles y algunos ya se
U
encuentran en las extremidades para solo ubicarlos en los

lugares correctos y otros, están para crearlos. Asimismo, los
controles permiten asignar puntos que se animarán mientras
que el resto del cuerpo o de la extremidad, solo responderá
a estas animaciones.
116 Adobe Illustrator

MODIFICAR CONTROLES
Para modificar los controles ya establecidos, realiza los siguientes pasos.
.
1. Haz clic sobre la capa BrazoDer dentro de Body 2. Selecciónalo y muévelo hacia el lugar desde
ón
y observa cómo en la ventana Plataforma se donde debería rotar el brazo derecho, es decir,
ci
resalta el elemento seleccionado y aparece su en su unión con el hombro. Realiza lo mismo
uc
control. con la extremidad BrazoIzq.
od
pr
re
su
da
bi
hi
ro
3. En el caso de las piernas, éstas tendrán su eje
en su unión con la pelvis. Muévelas al lugar
0 ,p
4. Baja el control de la cabeza hacia su unión con
el cuello.
02
correcto para ambas piernas.

-2
a
ci
g en
er
em
de
n
la
CREAR CONTROLES
rP
po
o
Además de los controles que tienen tanto brazos

iv
como piernas en su unión con el torso y la pelvis

us
respectivamente, estas extremidades también

cl
deben tener otros ejes de rotación para las subpartes

ex
que tienen estas extremidades, como antebrazos,

pantorrillas, pies, etc. Para estos casos, crea controles
so
de la siguiente manera.
U
1. Haz clic sobre BrazoDer y selecciona el botón

Herramienta de control, ubicado en la parte inferior de
la venta Plataforma.
117
2. Realiza un clic donde se ubicaría el codo para 3. Para las piernas, coloca controles donde irían la
crear allí un control. Coloca otro más donde se rodilla, el tobillo, el talón y los dedos de los pies.
ubicaría la muñeca. Haz lo mismo con el otro
brazo.
.
ón
ci
uc
od
pr
re
su
4. Teniendo seleccionado el cuerpo, agrega otro 5. Usa los cuatro puntos que aparecen, mientras
control en la cintura. tienes seleccionado el cuerpo, para agregar
da
cuatro controles más.
bi
hi
ro
0 ,p
02
-2
a
ci
HERRAMIENTA PEGADO
g en
er
em
Ya tienes áreas del personaje que se doblarán, como codos, rodillas y otros. Ahora, establece
áreas que se mantendrán rígidas, como las que se cubren de un solo hueso en un cuerpo real.
de
Realízalo en la marioneta de la siguiente manera.

n
1. Selecciona BrazoDer y en la parte superior de la 2. Sobre el brazo y entre dos controles, traza dos
la
ventana Plataforma, haz clic sobre el ícono de la líneas con la herramienta Pegado. Haz lo mismo
rP
Herramienta pegado. en el brazo izquierdo.

po
o
iv
us
cl
ex
so
U

3. En las piernas traza estas líneas con la herramienta Pegado,
entre los puntos de control que se indican en la imagen.
.
ón
ci
uc
od
ETIQUETAS
pr
re
su
Cuando se asignan ciertos nombres a las capas de
una marioneta en su programa original, las etiquetas
da
se asignan de forma automática en Character
bi
Animator. Así, por ejemplo, la capa o grupo de capas
hi
donde está el ojo derecho en Adobe Photoshop, se
ro
detecta como tal en Character Animator y se facilita
,p
su animación de forma diferenciada de otras partes
de la marioneta.
0
02
-2
a
ci
en
Sin embargo, en este caso, hay algunos nombres que no son los que permiten asignar
automáticamente etiquetas, que son los que están en el grupo de capas Body. Podrías cambiarles
g
er
de nombre en el archivo original para guardarlos y luego, actualizarlos en Character Animator,

pero también se puede corregir esto, asignando las etiquetas a los controles de las capas
em
independientemente de los nombres que tengas.

de
n
ASIGNAR ETIQUETAS
la
rP
po
Asigna etiquetas a los controles de la siguiente manera.

o
1. Teniendo seleccionada alguna parte de la marioneta o la

iv
marioneta misma, ubica el panel Propiedades. Entre otras

us
secciones, encontrarás la que se llama Etiquetas.

cl
ex
so
U
119
2. Empieza seleccionando el control de la cabeza, 3. En la sección Etiquetas, haz clic dentro de las
que habías bajado hasta el cuello. Le asignarás etiquetas del cuerpo al punto que corresponde
a este control la etiqueta de cuello. a la etiqueta del cuello.
.
ón
ci
uc
od
pr
4. Verifica que ahora para el programa, el control 5. De la misma manera, teniendo seleccionado
re
de la cabeza se comportará como cuello cuando el control del codo, haz clic al punto que
su
se proceda a animar a la marioneta. corresponde al codo derecho y haz lo mismo
con la muñeca derecha. Ten en cuenta que los
da
hombros no se asignan aún. Realiza lo mismo
con el brazo izquierdo.
bi
hi
ro
0 ,p
02
-2
a
ci
6. Asigna a ambas piernas las etiquetas de la rodilla,

en
del tobillo del talón y del dedo del pie. Ten en 7. Teniendo seleccionado el cuerpo, asigna
g
cuenta que las etiquetas que corresponderían a etiquetas a los hombros izquierdo y derecho, las
er
los controles que unen las piernas a la pelvis, no caderas izquierda y derecha, y la cintura.
se asignan aún.
em
de
n
la
rP
po
o
iv
COMPORTAMIENTOS
us
cl
ex
Para animar la caminata usarás un comportamiento para

so
marioneta. Por lo tanto, incluye la marioneta que acabas

U
de configurar en la Escena que creaste y visualízala en

la ventana Grabar.

Los comportamientos constituyen una serie de parámetros para ajustar de acuerdo a la animación
que se desee ejecutar. Puedes visualizar el panel de comportamientos al lado derecho de la
interfaz. Por defecto, están activados los comportamientos Activadores, Arrastrador, Cara,
Física, Mirada, Sincronización de labios y Transformar.
.
ón
COMPORTAMIENTO TRANSFORMAR
ci
uc
od
Usa uno de los comportamientos para ajustar el tamaño del personaje a la pantalla.
pr
re
1. Despliega el comportamiento Transformar 2. Selecciona Escala, pues éste aplicará tanto para
su
en la sección Comportamientos de pista de el eje X como para el eje Y, además reduce la
da
marioneta. cifra de 100% a un 47%.
bi
hi
ro
0 ,p
02
-2
a
ci
g en
er
em
AGREGAR COMPORTAMIENTOS
de
n
la
Para agregar el comportamiento, que hará que la marioneta camine, realiza los siguientes pasos.
rP
1. Regresa a la ventana plataforma y al lado al signo +.

po
derecho donde dice comportamientos, haz clic 2. De la lista resultante, selecciona Movimiento.
o
iv
us
cl
ex
so
U
121
3. Luego de aplicado, regresa a la ventana Grabar y nota que
la marioneta ya camina y se ha añadido el comportamiento
Movimiento a la lista. Asimismo, si despliegas la lista, puedes
encontrar parámetros para ajustar en caso desees modificar el
modo de animación.
.
ón
ci
Para modiifcar o corregir algunos desperfectos,
uc
puede regresar a la ventana Plataforma y agregar o
ajustar controles, líneas y etiquetas, según convenga.
od
pr
re
su
da
Añade al proyecto, el fondo_celeste.jpg y el audio Caminar.wav, descargados de la ruta que te
bi
hi
indique tu profesor. Realiza la sincronización de labios para que el personaje hable mientras está
caminando. Finalmente, guarda el proyecto como Apellidos_Nombres_NombreProyecto_SX
ro
(número de la sesión).
0 ,p
02
-2
a
ci
g en
er
em
de
n
la
rP
po
o
iv
us
cl
ex
so
U

Actividades
.
COMPRENDO
ón
ci
uc
1. Escribe cómo se llaman las etiquetas que indican los números.
od
pr
re
su
1. ______________________________________________
2._______________________________________________
da
3._______________________________________________
bi
4._______________________________________________
hi
ro
0 ,p
02
REALIZO
-2
a
ci
en
Crea un proyecto llamado Realizo_Caminata y ejecuta los siguientes

g
pasos.
er
• Importa al proyecto la marioneta del archivo Stickman.psd.

em
• Crea una Escena e inserta en ella a la marioneta.

• Mueve controles a sus lugares adecuados y crea otros para asignar
de
control a las extremidades.

n
• Crea líneas con la herramienta de pegado en las áreas de las extremidades

la
donde no debe haber doblez.

rP
• Agrega a toda la marioneta el comportamiento Movimiento para que

ejecute una caminata.
po
o
iv
us
INVESTIGO
cl
ex
Observa estas herramientas

so
presentes en la ventana Plataforma

U
e indica para qué sirven.

1. _________________________________________________________________________
2._________________________________________________________________________
3._________________________________________________________________________
123
AUTOEVALUACIÓN
No En Logro Logro
Reconozco las herramientas que permiten
.
ón
el etiquetado de las extremidades de la
marioneta para animar el ciclo de caminata
ci
de un personaje para piezas audiovisuales.
uc
od
Identifico las ventajas del empleo de
comportamientos para la agilización del
pr
proceso de animación de personajes.
re
Modifico los parámetros de movimiento para
su
personalizar la animación de la caminata de
un personaje.
da
bi
hi
ro
METACOGNICIÓN
,p
• ¿Con qué situación puedes relacionar lo aprendido en esta sesión?
0
02
• ¿Qué dificultades encontraste para aprender las herramientas vistas? ¿Qué hiciste para resolverlas?
Comparte tu respuesta con tu compañero.
-2
a
ci
en
g
• Adobe, Preparar ilustraciones. Recuperado de

er
https://helpx.adobe.com/la/adobe-character-animator/using/prepare-artwork.html
em
de
n
la
rP
po
o
iv
us
cl
ex
so
U

Sesión 14
.
ón
ci
uc
od
Animación de extremidades y
pr
re
exportación de película
su
da
bi
hi
ro
0 ,p
02
-2
a
• Reconocer las herramientas que permiten la animación de

ci
extremidades de personajes para su empleo en diálogos a la

en
cámara dentro de una pieza de material audiovisual animado.

g
er
• Exportar el proyecto elaborado en Character Animator para que

em
pueda ser utilizado en un material audiovisual aprovechable

en la edición de videos de mayor amplitud.
de
n
la
rP

po
o
iv
• Arrastradores.
us
cl
• Adobe Media Encoder.

ex
so
U
125
IDEAS PREVIAS
¿Qué otras partes del cuerpo de un personaje se animan cuando dialoga? ¿Para qué puede
ser útil exportar a archivos de video, el trabajo en un proyecto de Character Animator? ¿Qué
.
ón
formatos de video conoces?
ci
uc
PRESENTACIÓN
od
pr
re
En la presente sesión realizarás la animación de los brazos de un personaje
su
para ser utilizado mientras habla a la cámara o para realizar cualquier gesto
con estas extremidades. A la vez, exportarás el proyecto de Animate a un
da
formato de video que pueda ser visto por usuarios que no cuenten con el
bi
programa o para aprovecharlo en piezas audiovisuales más amplias.
hi
ro
0 ,p
02
-2
a
ci
1. Crea un nuevo proyecto llamado Cuarto_Proyecto y guárdalo en una ruta fácil de acceder.
en
2. Ubica el archivo Chica.puppet y colócalo en 3. Crea una escena llamada Hola e importa el
la carpeta de proyecto que debe de haberse archivo marioneta Chica.puppet.
g
er
creado.
em
de
n
la
rP
ARCHIVO MARIONETA
po
o
iv
El archivo marioneta tiene la extensión .puppet y es un archivo con

us
todos los gráficos relacionados a una marioneta. Además, en ella se

cl
incluye los controladores asignados, por lo que puede estar listo para
ex
la animación a través de comportamientos.

so
Para animar una mano agitándose para saludar será necesario

agregar otros controladores llamados arrastradores.
U
Para editar el archivo de Photoshop o Illustrator

que se encuentra incluido en una marioneta, solo
selecciona a la marioneta en el panel proyecto y en
el menú Editar, selecciona Editar original...

HERRAMIENTA DE ARRASTRAR
Para añadir los arrastradores necesitarás la herramienta de Arrastrar. Gracias a estos arrastradores,
podrás manipular partes del personaje con el uso del mouse para que pueda doblar o estirar una
extremidad. Para insertar arrastradores, realiza las siguientes acciones.
.
ón
ci
1. Haz clic sobre la capa RightArm y en la parte 2. Haz clic sobre la mano derecha para insertar un
uc
inferior de la ventana Plataforma, haz clic sobre arrastrador allí y hacer que ella sea maniobrada
od
el ícono de la Herramienta de arrastrar. con el cursor.
pr
re
su
da
bi
hi
ro
0 ,p
02
-2
3. Visualiza al personaje en la escena y en la ventana Grabar, de igual manera,

a
nota que si haces un clic sobre la mano y arrastras, podrás mover la mano.
ci
g en
er
em
CONFIGURACIÓN DE ARRASTRADOR
de
n
Para modificar el arrastrador, es necesario ubicar los ajustes en el

la
panel Comportamientos de pista de marioneta. Realiza los siguientes

rP
ajustes.
po
o
iv
1. Por defecto, debe aparecer con la configuración Después

us
del... y por defecto, tiene el valor Mantener en su sitio,

cl
es decir, cuando arrastras la mano de la marioneta, ésta

ex
mantendrá la posición en donde la dejaste hasta que

vuelvas a moverla.
so
2. Haz clic en la lista desplegable y selecciona Volver a

U
reposo.
127
3. Eleva más la mano desde el sitio en que la 4. Puede ser que el retorno sea muy rápido. Por
dejaste y nota que cuando sueltas el clic, la ello, puedes ajustar la velocidad con la que
mano regresa al estado inicial. vuelve al estado original, modificando el tiempo
en Duración del retorno. Prueba cambiando de
0.2 segundos a 2 segundos.
.
ón
ci
uc
od
pr
re
su
da
EXPORTAR MARIONETA
bi
hi
ro
,p
Ya tienes un arrastrador en la marioneta, que ya se incorpora junto al resto de elementos de los
que se compone la marioneta Chica. Si quisieras aprovechar esta animación en otro proyecto
0
02
será necesario que exportes la marioneta con todos sus componentes para que no tengas que
volver a crearlos o insertarlos.
-2
a
ci
1. Para este propósito, haz clic en la marioneta dentro del

en
panel Proyecto y selecciona Exportar marioneta.

g
2. Selecciona la ruta y nombre de tu preferencia, asimismo,

er
nota el tipo de archivo como Character Animator Puppet y

em
luego, guárdalo.
de
SELECTOR DE CAPA
n
la
rP
po
Anima un brazo del personaje a través de la

transición entre varias capas. Para realizar esta
o
iv
operación, importa la marioneta Patty.psd. y

us
revísala en la ventana Plataforma. Nota que se

trata de una versión distinta de la misma imagen y
cl
tienes varias capas del brazo en transición desde la

ex
posición normal hasta el brazo levantado. Observa

so
que la imagen por defecto o posición normal es la

capa que no está oculta.
U

ELIMINAR COMPORTAMIENTOS
Antes de insertar el comportamiento Selector de capas, elimina los existentes de la siguiente
.
manera.
ón
1. Dentro de la misma ventana Plataforma, en el panel de
ci
la derecha, está la lista de comportamientos que ya están
uc
aplicados por defecto. Haz clic sobre el signo + que está al
od
nivel de Comportamientos.
pr
2. Esta vez, no insertarás un comportamiento, sino harás clic en la
opción Eliminar todos los comportamientos. De esta manera,
re
se limpiará la lista de Comportamientos.
su
da
AÑADIR SELECTOR DE CAPA
bi
hi
ro
2. De la lista que aparece, elige Selector de capa
,p
1. En la lista de capas de la marioneta, coloca
el cursor a la altura de BrazoDer y por
0
debajo del ícono que indica la presencia de
02
comportamientos. Cuando aparezca un signo

+, haz clic en Añadir un comportamiento.
-2
a
ci
g en
er
em
de
n
la
rP
3. Aparecerá, brevemente, el mensaje Marcador

po
automático creado y un ícono permanecerá donde

habías hecho clic para indicar la presencia de un
o
iv
Comportamiento.
us
cl
ex
so
4. Crea una escena llamada Adiós e inserta allí a la

marioneta Patty. Luego, ve a la marioneta desde
U
la ventana Grabar.
129
5. Nota que se ha añadido el comportamiento y entre
corchetes, se encuentra el nombre del grupo de
capas al que se ha aplicado.
.
ón
ci
uc
CONFIGURACIÓN DE SELECTOR DE CAPA
od
pr
re
Despliega el menú del Selector de capa en Comportamientos de pista de marioneta y detecta
las siguientes opciones.
su
da
• Entrada de audio: la alternancia de capas se presenta, de
bi
acuerdo al volumen de la voz registrada por el micrófono.
hi
• Entrada de teclado: las capas cambian con la presión de las
ro
teclas direccionales.
un clic en la pantalla y un arrastre.

0 ,p
• Entrada de ratón y dispositivo táctil: la alternancia se da con
02
• Desplazamiento del índice: la capa que aparece es la del

-2
número que figura en azul. Sin embargo, el número puede

exceder la cantidad de capas y si fuese este el caso, mostrará
a
la última.
ci
en
• Porcentaje de desplazamiento: de acuerdo a la cantidad de

capas, muestra las capas por porcentaje siendo destinado
g
para la aparición de la última capa el 100%.

er
• Sensibilidad de audio: ajusta la sensibilidad del micrófono para la opción entrada de audio.
em
• Intensidad del ratón y el dispositivo: ajusta la sensibilidad de clic para la opción entrada de ratón y
dispositivo táctil.
de
• Avance de teclado: trabaja con la opción entrada de teclado y sirve para configurar la alternancia de
n
capas, una por una, ante cada pulsación de las teclas (al pulsar) o se alternan todas, mientras se
la
mantiene presionada una tecla (al mantener pulsado).

rP
• Fuera de rango: permite realizar la alternancia una sola vez (limitar a primera o última) o hace que la
alternancia se repita una vez que llegue a la última capa (bucle).
po
o
iv
1. De estas opciones selecciona Entrada de ratón hacia uno de los lados, verás cómo se alternan
us
y dispositivo táctil. las capas dando la apariencia de agitar el brazo.

2. Realiza un clic sobre un área vacía y arrastra
cl
ex
so
U

EXPORTAR VIDEO
Anima a la marioneta Patty y grábala agitando las manos en menos de 6 segundos.
.
Ya teniendo la toma grabada, realiza los siguientes pasos para exportar el video.
ón
ci
uc
1. Selecciona la escena que exportarás a video, en este caso, la
escena Adiós, dentro del panel Proyecto.
od
2. Haz clic en el menú Archivo, luego a Exportar… y finalmente, a
pr
Video con Adobe media Encoder…
re
3. El formato al cual lo exportará será H.264, que es de extensión
su
mp4. Coloca el nombre Adiós y grábalo en la ruta del proyecto.
Luego, le das clic a Guardar.
da
bi
hi
4. Se abrirá otro programa de la suite de Adobe, llamado Adobe Media Encoder. En el panel Cola,
ro
encontrarás el archivo de video que acabas de guardar y estás a punto de exportar.
0 ,p
02
-2
a
ci
g en
er
em
5. Haz clic sobre el botón Iniciar cola, representado que ya se ha completado, puedes cerrar el
de
por una flecha verde. programa.

6. Empieza la codificación y una vez que indica
n
la
rP
po
o
iv
7. Ya debes tener exportado el video en formato mp4

us
y guardado en la ruta que habías indicado.

cl
ex
Anima el otro brazo de la marioneta Chica, que se

encuentra en la escena Hola. Usa arrastradores
so
para mover su mano y graba una toma, para

U
luego exportarla como archivo de video H.264

y formato mp4. Ahora, guarda el archivo de
video con el nombre Apellidos_Nombres_
NombredeProyecto_SX (número de la sesión).
mp4.
131
Actividades
.
COMPRENDO
ón
ci
uc
od
Indica si son verdaderos (V) o falsos (F) los siguientes enunciados:
pr
1. Una de las modalidades del comportamiento Selector de capa es la opción Desplazamiento del
re
índice……………………………………………………………….( )
su
2. El comportamiento Arrastrador tiene dos modalidades: Volver a reposo y Mantener en su
sitio……………………………………………………………………………………..( )
da
bi
3. Para añadir arrastradores se utiliza la Herramienta de control………………………...( )
hi
ro
4. Los archivos de video H.264 emplean el formato avi…………………………………...( )
0 ,p
02
REALIZO
-2
a
Crea un proyecto llamado Realizo_Capas y efectúa los siguientes pasos.

ci
en
• Importa al proyecto el archivo Gato.psd de la ruta que te indique tu profesor.

• En la ventana Plataforma, coloca el
g
er
comportamiento Selector de capa al grupo de

capas Cola.
em
• Crea una escena e inserta la marioneta Gato.

de
• Anima la cola usando este comportamiento en

la ventana Grabar.
n
• Graba al gato moviendo la cola por 5 segundos.

la
rP
• Selecciona la escena en el panel Proyecto,

exporta la toma grabada a archivo mp4 con
po
Adobe Media Encoder.

• Guarda el video animado.
o
iv
us
INVESTIGO
cl
ex
a. ¿Para qué sirve este botón presente en el panel Comportamientos

so
de pista de marioneta?
U
___________________________________________
___________________________________________
___________________________________________

INVESTIGO
b. ¿Para qué sirve el comportamiento Física?
______________________________________________________________________
.
ón
_________________________________________________________
ci
uc
c. ¿Para qué más sirve Adobe Media Encoder, además de la exportación de archivos de video?
od
______________________________________________________________________
pr
______________________________________________________________________
re
su
da
AUTOEVALUACIÓN
bi
hi
ro
No En Logro Logro
Reconozco las herramientas que permiten

logrado
0 ,p
proceso esperado destacado
02
la animación de extremidades de personajes

-2
para su empleo en diálogos a la cámara

dentro de una pieza de material audiovisual
a
animado.
ci
en
Exporto el proyecto elaborado en Character

Animator para que pueda ser utilizado en
g
un material audiovisual aprovechable en la

er
edición de videos de mayor amplitud.

em
de
METACOGNICIÓN
n
la
• ¿Con qué podrías relacionar lo aprendido?

rP
• ¿De qué forma te puede servir lo que has aprendido en esta sesión con respecto a tu comunicación con
po
los demás?
• ¿Cómo puedes mejorar tus habilidades en el aprendizaje de las herramientas vistas en esta sesión?
o
iv
us
cl
ex
• Adobe, Preparar ilustraciones. Recuperado de

https://helpx.adobe.com/la/adobe-character-animator/using/prepare-artwork.html
so
U
133
U
so
ex
cl
us
iv
o
po
rP
la
n
de
em
er
g en
ci
a
-2
02
0,p
ro
hi
bi
da
su
re
pr
od
uc
ci
ón
.
Sesión 15
.
ón
ci
uc
od
pr
EJERCICIO DE INTEGRACIÓN 3
re
su
1. Crea un proyecto y haz lo siguiente.
da
bi
• Usa la plantilla de marioneta llamada Cara
hi
en blanco.
ro
• Importa el archivo Buenos.wav.
• Junta en una línea de tiempo la marioneta y
0 ,p
el archivo de audio.
02
• Mueve el audio para que empiece a partir

-2
del segundo 1.
a
ci
• Usa Cuadrar sincronización labial del audio

en
de la escena para sincronizar los labios de la

marioneta con el diálogo del audio.
g
er
• Guarda el proyecto como Proyecto_Buenos.

em
de

2. Crea un nuevo proyecto y realiza los siguientes pasos.
n
la
• Importa el archivo Monster.psd y fondo.jpg de la ruta que te indique el profesor.

rP
• Crea una escena e inserta estos

po
archivos en la línea de tiempo para

tener a un personaje y un fondo en
o
la capa que está debajo.

iv
us
• Inserta un comportamiento
Selector de capa al conjunto de
cl
capas Cola.
ex
• Configura el comportamiento a
so
Entrada de ratón y dispositivo

U
táctil.
• Guarda el proyecto como Proyecto_
Monster.
135
3. Crea un proyecto y realiza los siguientes pasos.
• Importa el archivo Carlos.psd de la ruta que te indique tu profesor.

• Luego de ser importado, trabaja sobre el brazo derecho y haz lo siguiente.Mueve el origen al
hombro.
.
ón
○ Agrega un control en la muñeca y otro en el
codo.
ci
uc
○ Agrega líneas con la Herramienta de pegado
entre los tres controles.
od
○ Agrega un arrastrador en la mano.
pr
• Crea una escena e inserta la marioneta a su línea
re
de tiempo.
su
• En la ventana Grabar, anima la mano derecha
elevándose para cubrir el ojo derecho y grábala
da
en una toma de 10 segundos.
bi
• Guarda el archivo como Proyecto_Carlos.
hi
ro
4. Crea un proyecto llamado Proyecto_Robot.
0 ,p
02
• Importa el archivo de marioneta Robot.puppet.

-2
• Asigna las etiquetas que correspondan a los

respectivos controles del cuerpo y de las
a
ci
extremidades.
en
• Asigna el comportamiento Movimiento para que

se anime al personaje caminando.
g
er
• Crea una escena llamada Escena_Robot e incluye

em
al robot en su línea de tiempo.

• Graba una toma de 5 segundos del personaje
de
caminando.
• Exporta a video H.264 en formato mp4 usando
n
Adobe Media Encoder.

la
rP
• Guarda el video mp4.

po
o
iv
us
cl
ex
so
U

Animación Digital para Banner Animado

Cargado por

Copyright:

Formatos disponibles

Animación Digital para Banner Animado

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Animación Digital para Banner Animado

Cargado por

Copyright:

Formatos disponibles

Sesión 6

• Diseñar un banner publicitario animado utilizando interpolaciones

de movimiento considerando la inclusión de imágenes y texto.

• Realizar operaciones de las interpolaciones como:: alargar, cortar,

copiar y pegar las animaciones, para modificar los tiempos en la

• Incorporar texto como párrafo y palabra al diseño de una

Además, conocerás sobre:

• Propiedades para texto.

conocerás sus ventajas y diferencias con respecto a la interpolación que se desarrolló en la

crear tipografía y editarla para crear animaciones atractivas con caracteres.

se crea fotogramas clave, sino fotogramas de propiedad.

1. Abre el archivo banner_animado.fla.

2. Primero, crea un fotograma para todas las capas en la

posición 20 de la línea de tiempo.

3. Para aplicar una interpolación de movimiento

al contenido de la capa Círculo, realiza un

esta capa y elige Crear interpolación de

Visualizarás la presencia de la ruta de movimiento que

los estados intermedios en cada fotograma. Esta ruta

se puede modificar para al mismo tiempo alterar el

desplazamiento del símbolo.

1. Activa la herramienta Selección y aproxima el cursor

igual que cuando se va a modificar una línea.

desplazamiento del círculo.

Corrobora desplazándote por la línea de tiempo, cómo se desplaza ahora el círculo.

COPIAR Y PEGAR MOVIMIENTO

Colocar la animación del círculo al contenido de la capa Solo_Hoy.

figure en el sitio 21 de la línea de tiempo. De

estará en el lugar 40 de la línea de tiempo.

Si deseas modificar las características que por defecto

tiene el texto, revisa el panel Propiedades. Para el

texto en cuestión, coloca tamaño de 48pt, familia

Myriad pro, estilo Bold y color negro. La ubicación

puede ser modificada con la herramienta Selección.

INTERPOLACIÓN DE MOVIMIENTO CON TEXTO

Para animar un texto con interpolación de movimiento, realiza el siguiente procedimiento.

1. Indica desde dónde hasta dónde durará la animación.

Por lo tanto, inserta un fotograma clave en el fotograma

20 para la capa Texto.

2. Entre el fotograma clave 20 y el fotograma 40, inserta

una interpolación de movimiento.

3. En tanto en el fotograma 40, reduce el texto con la

herramienta Transformación libre.

Para modificar el tamaño con la

palabra y elige la opción Separar.

Nota cómo se han separado los caracteres de la frase.

Estando los caracteres ya separados, anima cada uno de forma individual.

1. Teniendo seleccionados los caracteres separados, realiza clic derecho sobre el

grupo y elige la opción Distribuir en capas.

Crea una capa adicional llamada Legal y en ella, insertarás

un párrafo. El contenido de este se encuentra en el archivo

1. En la capa Legal activa la herramienta Texto y configura en el

10pt y estilo regular.

2. Traza un recuadro sobre el escenario.

3. Pega el texto y debe aparecer en el recuadro que trazaste y con las

el panel también tienes una sección llamada Párrafo. Úsala para

Termina el banner animando el contenido de la capa

2. Abre el archivo movimiento.fla y realiza los siguientes pasos:

• Anima el contenido de la capa Zapatilla para que ingrese