TALLER #5

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.

TALLER DEANIMACIONES 2D

Bach. Luis Carlos Guzmán AriasIng. en Diseño Industrial

luguzman@tec.ac.cr

ELABORADO POR:

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

https://creativecommons.org/licenses/by-nc-sa/4.0/

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.

Si desea más información o recibir este taller comuníquese a:

CONTÁCTENOS

tec-digital@tec.ac.cr

2550-2069

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

ÍNDICE

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

3. TIPOS DE IMÁGENES RECOMENDADAS

2. LO QUE SE DEBE HACER Y NO SE DEBE HACER

4. PRIMEROS PASOS EN GENIALLY

5. INTERFAZ GENIALLY

6. GUÍA COMPOSITIVA DEL EJERCICIO “MOLINETE”

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

8. OTRAS HERRAMIENTAS

9. REFERENCIAS

PÁG 4

PÁG 6

PÁG 5

PÁG 7

PÁG 8

PÁG 9

PÁG 10

PÁG 11

PÁG 12

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

LAS 5 VENTAJAS DE LOS GRÁFICOS DINÁMICOS

1

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.

5. CLAROS:A diferencia de los gráficos estáticos, no requieren varios símbolos auxiliares (como flechas, líneas punteadas, etc.) para transmitir indirectamente los aspectos dinámicos 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 interpretar estos símbolos a fin de comprender el tema.

“LA ANIMACIÓN PUEDE EXPLICAR CUALQUIER COSA QUE LA MENTE DEL HOMBRE PUEDA CONCEBIR”

- WALT DISNEY

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

LO QUE SE DEBE HACERY NO SE DEBE HACER

2

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 6

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:

FORMATO VENTAJAS DESVENTAJAS

FORMATOS TIPO RASTER

BMPBits Map Protocol

• Funciona bien con la mayoría de programas en windows y OS.

• No se escala ni se comprime bien.• No son compatibles con la web.

TIFFTagged Image File Format

• Ideal para imprimir y procesar fotografías (Nivel Profesional).

• Permite reconocimiento de capas.• Se puede editar sin que pierda calidad.

• Tamaño del archivo es muy grande.• Consume grandes cantidades de espacio en

el disco duro.• Tiempo de descarga es lento.

JPEGJoint Photographic Experts Group

• Formato popular en medios digitales.• Recomentado para fotografías con gran

detalle de color.• Comprime gran cantidad de información de

la imagen.

• No posee transparencia.• No se puede animar.• Les añade fondo blanco a las imágenes sin

fondo.

GIFGraphics Interchange Format

• Permite la transparencia.• Tiene alta tasa de compresión.• Permite exportar secuencias de animación.

• Solo soporta 256 colores.• El tamaño del archivo generado es mayor a

generado por el formato PNG.

PNGPortable Network Graphics

• Posee transparencia.• Es el más indicado para utilizar

digitalmente.• Mantiene una calidad de imagen muy alta.

• No puede ser animado.• No es bueno para imágenes grandes porque

genera un archivo muy grande.• No todos los navegadores web lo soportan.

FORMATO TIPO VECTOR

SVGScalable Vector Graphics

• Permite la escalabilidad sin cambiar la calidad de la imagen.

• Es posible visualizar los contenidos desde cualquier navegador.

• El tamaño del archivo aumenta si esta compuesto por muchos elementos pequeños.

• Se puede modificar con software especial o código CSS.

1. IMÁGENES TIPO “VECTOR”Imágenes constituidas por objetos geométricos (líneas, curvas, polígonos) que están definidas por ciertas funciones matemáticas, infinitamente escalables.

2. IMÁGENES TIPO “RASTER” Formada por diversos puntos minúsculos (pixeles). Cada uno de los píxeles que contiene información de color y luminosidad.

TIPOS DE IMÁGENESRECOMENDADAS

3

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

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

PRIMEROS PASOSEN GENIALLY

4

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 8

INTERFAZGENIALLY

5

Superior: Barra de herramientas generales.

Inferior: Barra de herramientas específicas.(las opciones varían según lo que tenga seleccionado).

Menú de recursos y control de páginas.

Editor de Interactividad y Animación.

Área de trabajo (lienzo).

“Acercamiento / Alejamiento” y “Vista Previa”.

A

B

C

D

E

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

GUÍA COMPOSITIVADEL EJERCICIO “MOLINETE”

6

3

2

1

3 Plano

Plano

Plano

2

1

er

fondo.jpg

palito.png

molinete.png

do

er

O r d e n a m i e n t o d e c a p a s

Ejercicio “Molinete”

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”).

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.

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

GUÍA COMPOSITIVADEL EJERCICIO “BALÓN”

7

Plano1balon_mundial_rusia.png

er

Plano2balon_sombra.png

er

Plano3logo_mundial_rusia.png

er

Plano4fondo_mundial_rusia.png

er

Plano5fondo_cancha_1.jpg

er

O r d e n a m i e n t o d e c a p a s

Ejercicio “Balón”

54

3 1

2

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 11

OTRAS HERRAMIENTAS

8

Motion

Adobe After Effects

Vyond

PowToon

Prezi

VideoScribe

La mayoría de herramientas de autor en e-Learning incluye opciones para añadir animaciones al contenido didáctico.

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:

HAZ CLICK PARA NAVEGAR

A CADA SITIO WEB

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

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].