TALLER #5

TALLER DE
ANIMACIONES 2D
APRENDIZAJE EN MOVIMIENTO: CONSEJOS PRÁCTICOS
PARA EL USO DE ANIMACIÓN COMO APOYO VISUAL

Guía rápida de buenas prácticas para crear y editar

animaciones bidimensionales sencillas, como apoyo visual
en la creación de material didáctico.

ELABORADO POR:
Bach. Luis Carlos Guzmán Arias
Ing. en Diseño Industrial

luguzman@tec.ac.cr
Los Talleres de Herramientas Digitales son
elaborados por profesionales en Diseño y
Comunicación Visual de la Unidad TEC Digital.

Se recomienda que estos talleres sean brindados

por expertos en la creación de materiales de
aprendizaje para ambientes presenciales y
virtuales, para que el resultado sea óptimo de
acuerdo a las necesidades institucionales. Además,
facilitadores de la unidad pueden abarcar dudas
correspondientes al desarrollo, ejecución y material
brindados durante cada taller.

El TEC Digital no se hace responsable de que

terceras personas utilicen estos materiales para
otros fines, ni de los resultados que se obtengan a
partir de estos.

Los materiales están bajo la Licencia Creative

Commons Atribución-NoComercial-CompartirIgual
4.0 Internacional.
https://creativecommons.org/licenses/by-nc-sa/4.0/

CONTÁCTENOS

Si desea más información o recibir este taller

comuníquese a:

tec-digital@tec.ac.cr
2550-2069

Taller #5: Animaciones 2D - Ing. Luis Carlos Guzmán Arias 2

ÍNDICE

1. LAS 5 VENTAJAS DE LOS GRÁFICOS DINÁMICOS PÁG 4

2. LO QUE SE DEBE HACER Y NO SE DEBE HACER PÁG 5

3. TIPOS DE IMÁGENES RECOMENDADAS PÁG 6

4. PRIMEROS PASOS EN GENIALLY PÁG 7

5. INTERFAZ GENIALLY PÁG 8

6. GUÍA COMPOSITIVA DEL EJERCICIO “MOLINETE” PÁG 9

7. GUÍA COMPOSITIVA DEL EJERCICIO “BALÓN” PÁG 10

8. OTRAS HERRAMIENTAS PÁG 11

9. REFERENCIAS PÁG 12

Taller #5: Animaciones 2D - Ing. Luis Carlos Guzmán Arias 3

 1
LAS 5 VENTAJAS DE LOS
GRÁFICOS DINÁMICOS

En comparación con los gráficos estáticos, los gráficos

dinámicos elaborados y aplicados correctamente pueden
llegar a ser más...

1. INFORMATIVOS:
Muestran más sobre el tema, que la descripción estática
correspondiente.

2. CERCANOS A CARACTERÍSTICAS DEL TEMA REAL:

La descripción directa de los aspectos dinámicos da
una mejor correspondencia entre la situación referente
(el tema real) y la representación (la forma en que se
representa el tema cuando se muestra a los estudiantes).

3. EXPLÍCITOS:
Cada aspecto dinámico se “deletrea” directamente para el
espectador en lugar de requerir una interpretación sobre
la dinámica a partir de una representación estática.

Esto puede significar que se producen menos errores y

malentendidos debido a una menor dependencia en la
interpretación correcta del estudiante.

4. EXPLICATIVOS:
Ofrece la oportunidad de proporcionar múltiples
perspectivas visuales y conceptuales sobre el tema.
La descripción puede avanzar de la descripción a la
explicación. “LA ANIMACIÓN
PUEDE EXPLICAR
5. CLAROS: CUALQUIER COSA
A diferencia de los gráficos estáticos, no requieren varios QUE LA MENTE DEL
símbolos auxiliares (como flechas, líneas punteadas, etc.) HOMBRE PUEDA
para transmitir indirectamente los aspectos dinámicos
CONCEBIR”
del contenido. Esto significa que la pantalla puede
estar menos atestada y no requiere que los estudiantes
realicen los procesos de decodificación necesarios para - WALT DISNEY
interpretar estos símbolos a fin de comprender el tema.

Taller #5: Animaciones 2D - Ing. Luis Carlos Guzmán Arias 4

 2

LO QUE SE DEBE HACER

Y NO SE DEBE HACER

En el uso de la animación 2D
como recurso de aprendizaje se
debe hacer lo siguiente:

- Usarla como medio para

comunicar, es decir, para
visualizar y mostrar a los
estudiantes lo que se desea
decir.

- Usarla con intención y

propósito. Si usted no puede
explicar por qué está utilizando
animaciones en su recurso
didáctico... probablemente no
debería usar animaciones.

- Ante la duda use el tipo de

efecto aparecer y desaparecer.

En el uso de la animación 2D
como recurso de aprendizaje NO
se debe hacer lo siguiente:

- No use animaciones por

el simple hecho de usar
animaciones. (carece de
propósito e intención didáctica).

- No use todos los tipos de

animación disponible. Si lo está
usando para “condimentar” o
decorar cosas... ¡no lo haga!

Taller #5: Animaciones 2D - Ing. Luis Carlos Guzmán Arias 5

 3

TIPOS DE IMÁGENES
RECOMENDADAS

En animación 2D, los recursos a utilizar predominantemente son imágenes, para ello se debe valorar el
contenido de la imagen, la calidad en función del uso y el tamaño que tendrá el archivo. Las imágenes se
dividen en 2 tipos:

1. IMÁGENES TIPO “VECTOR” 2. IMÁGENES TIPO “RASTER”

Imágenes constituidas por objetos geométricos (líneas, Formada por diversos puntos minúsculos (pixeles). Cada
curvas, polígonos) que están definidas por ciertas uno de los píxeles que contiene información de color y
funciones matemáticas, infinitamente escalables. luminosidad.

FORMATO VENTAJAS DESVENTAJAS

FORMATOS TIPO RASTER

BMP • Funciona bien con la mayoría de programas • No se escala ni se comprime bien.

Bits Map Protocol en windows y OS. • No son compatibles con la web.

• Ideal para imprimir y procesar fotografías • Tamaño del archivo es muy grande.
TIFF (Nivel Profesional). • Consume grandes cantidades de espacio en
Tagged Image File Format • Permite reconocimiento de capas. el disco duro.
• Se puede editar sin que pierda calidad. • Tiempo de descarga es lento.

• Formato popular en medios digitales.

• No posee transparencia.
JPEG • Recomentado para fotografías con gran
• No se puede animar.
Joint Photographic Experts detalle de color.
• Les añade fondo blanco a las imágenes sin
Group • Comprime gran cantidad de información de
fondo.
la imagen.

• Permite la transparencia. • Solo soporta 256 colores.

GIF
Graphics Interchange Format • Tiene alta tasa de compresión. • El tamaño del archivo generado es mayor a
• Permite exportar secuencias de animación. generado por el formato PNG.

• Posee transparencia. • No puede ser animado.

PNG • Es el más indicado para utilizar • No es bueno para imágenes grandes porque
Portable Network Graphics digitalmente. genera un archivo muy grande.
• Mantiene una calidad de imagen muy alta. • No todos los navegadores web lo soportan.

FORMATO TIPO VECTOR

• Permite la escalabilidad sin cambiar la • El tamaño del archivo aumenta si esta
SVG calidad de la imagen. compuesto por muchos elementos pequeños.
Scalable Vector Graphics • Es posible visualizar los contenidos desde • Se puede modificar con software especial o
cualquier navegador. código CSS.

* Formato de imagen recomendado para uso en animación.

Taller #5: Animaciones 2D - Ing. Luis Carlos Guzmán Arias 6

 4
PRIMEROS PASOS
EN GENIALLY

Genially es la plataforma web para la creación de todo

tipo de contenidos dinámicos e interactivos. Puede ser
usada para comunicar y capturar la atención de los
estudiantes.

Cualquier persona puede crear historias visuales y

experiencias de comunicación con Genially.

En los siguientes enlaces se explica cómo:

• ¿Cómo empiezo a crear?

• Bases de edición

• Dar vida con la animación

• ¿Qué tipos de animaciones existen?
• ¿Qué aspectos de una animación son personalizables?
• ¿Cómo copiar y pegar una animación de un elemento?

• Compartir y visualizar tus creaciones

Taller #5: Animaciones 2D - Ing. Luis Carlos Guzmán Arias 7

 5
INTERFAZ
GENIALLY

A Superior: Barra de herramientas generales. C Área de trabajo (lienzo).

Inferior: Barra de herramientas específicas.

(las opciones varían según lo que tenga seleccionado). D Editor de Interactividad y
Animación.

B Menú de recursos y control de páginas. E “Acercamiento / Alejamiento” y

“Vista Previa”.

Taller #5: Animaciones 2D - Ing. Luis Carlos Guzmán Arias 8

 6
GUÍA COMPOSITIVA
DEL EJERCICIO “MOLINETE”

Ordenamiento de capas

Ejercicio “Molinete”
3

er
3 Plano
fondo.jpg

1
do
2 Plano
palito.png 2

er
1 Plano
molinete.png

Diagrama evidenciando la secuencia correcta en la que se deben colocar las imágenes del ejercicio “molinete”,
una sobre otra de modo tal que el traslape sea el deseado y la animación resultante se vea bien.

En estas dos imágenes de abajo se explica cuál
es la dirección de giro correcta para el molinete
en movimiento, dadas sus características
aerodinámicas en función de la fuerza de impulso
del viento.
Aquí se muestra el ordenamiento correcto
de capas del ejercicio “molinete”, versus un
ordenamiento incorrecto (nótese como la imagen
“palito.png” está mal colocada por encima de la
imagen “molinete.png”).

Taller #5: Animaciones 2D - Ing. Luis Carlos Guzmán Arias 9

 7
GUÍA COMPOSITIVA
DEL EJERCICIO “BALÓN”

Ordenamiento de capas

Ejercicio “Balón”

er
5 Plano
fondo_cancha_1.jpg
5
er 4
4 Plano
fondo_mundial_rusia.png

er
3 Plano
logo_mundial_rusia.png
3 1
er
2 Plano
balon_sombra.png 2
er
1 Plano
balon_mundial_rusia.png

Diagrama evidenciando la secuencia correcta en la que se deben colocar las imágenes del ejercicio “balón”, una
sobre otra de modo tal que el traslape sea el deseado y la animación resultante se vea bien.

Aquí se muestra el
ordenamiento correcto de
capas del ejercicio “balón”,
versus un ordenamiento
incorrecto (nótese como por
ejemplo la imagen “balón_
sombra.png” está por encima
de “balon_mundial_rusia.png”).

Taller #5: Animaciones 2D - Ing. Luis Carlos Guzmán Arias 10

 8
HAZ CLICK PARA NAVEGAR

OTRAS HERRAMIENTAS A CADA SITIO WEB

La mayoría de herramientas de autor en e-Learning

incluye opciones para añadir animaciones al contenido
didáctico. Motion

Existen muchas herramientas para crear animaciones,

algunas son de pago y otras tienen versión de prueba
gratuita, como por ejemplo las que se mencionan a
continuación en la columna derecha:

Adobe After Effects

Vyond

PowToon

Prezi

VideoScribe

Taller #5: Animaciones 2D - Ing. Luis Carlos Guzmán Arias 11

 9
REFERENCIAS

Hetsevich, I. (2017, March 20). How to Use Animation

in eLearning? - Interview with Tim Slade. Retrieved from
https://www.joomlalms.com/blog/expert-interview/
animation-in-elearning-tim-slade.html [Accessed: 25 Jan
2018].

TED-Ed. (2014). Animation basics: The art of timing and

spacing - TED-Ed. [Online Video]. 28 January 2014.
Available from: https://ed.ted.com/lessons/animation-
basics-the-art-of-timing-and-spacing-ted-ed. [Accessed:
17 April 2017].

TED-Ed. (2013). Animation basics: The optical illusion of

motion - TED-Ed. [Online Video]. 13 July 2013. Available
from: https://ed.ted.com/lessons/animation-basics-
the-optical-illusion-of-motion-ted-ed. [Accessed: 17 May
2017].

Taller #5: Animaciones 2D - Ing. Luis Carlos Guzmán Arias 12