Clase 8

Animación en dos dimensiones

Existen teorías diversas que intentan explicar por qué percibimos un movimiento continuo cuando vemos una sucesión de imágenes a una velocidad superior a 10 cuadros por segundo (persistencia de  las imágenes en la retina / fenómeno Phi / ilusión óptica). Lo cierto es que es una característica del sistema visual / perceptual humano que nos permite construir animaciones.

Cada cuadro de una animación debe tener un cambio sutil respecto al anterior para que no se perciban saltos en el movimiento.

El formato gif  y su variante gif 89a

Recordemos que gif es un formato de gráficos de mapa de bits que guarda la información en modo indexado, con diferentes tipos de paletas y que admite metadatos.

  • Admite transparencia binaria para uno de los códigos de la paleta (solo 100% de transparencia o 100% de opacidad).
  • Aplica compresión LZW sin pérdida de información de forma automática, sin que podamos intervenir en ella.

La variante  gif -89a guarda una sucesión de gráficos de mapa de bits en modo de color indexado.  Por lo tanto, para construir una animación que se vea nítida debemos tener en cuenta el tamaño en píxeles con el que deseamos que sea expuesta y también elegir una paleta de colores que no supere los 256.

¡Manos a la obra!

Construyamos animaciones en 2 dimensiones con Gimp

animación de 9 cuadros (con capas acumulativas) y retraso de 200 ms
animación de 9 cuadros (con un cuadro por capa) y retraso de 200 ms

Descargá desde aquí el archivo auxiliar y construí tu propio gif animado. Trabajá con una paleta de colores a tu elección y guardá los archivos.

También se pueden construir gif animados con cuadros generados en otro programa. Te mostramos un ejemplo a partir de aplicar escalado a una entidad, empleando Inkscape. Vos podés replicarlo usando la entidad que dibujaste en TGD1 y aplicando la operación de simetría que quieras (rotación, escala, traslación) para generar los cuadros.

CONSIGNAS

  • Actividad en equipos (grupos).
  • Tenés tiempo de resolver esta actividad hasta las 13 hs de mañana viernes 25 de septiembre.

1

Elegí uno de los gif animados que construiste a partir del archivo auxiliar. Revisá que el tamaño en píxeles sea de 500 x 500 píxeles y el peso no supere los 100 KB. Denominá el archivo con el número de grupo (Grupo50.gif)

2

Cargá el gif en la columna que corresponda del mural ubicado a continuación, consignando: el número de grupo (Grupo 50), el peso, la cantidad de cuadros que contiene el archivo y el retraso entre ellos.

Hecho con Padlet

Otra forma de construir gif animados, usando un programa en línea.

En este caso, para construir tu animación necesitás preparar tus propios insumos (fotos y/o dibujos en algún formato de mapa de bits).

¡Aclaración importante! si bien la página que se muestra en el video está fuera de funcionamiento, la siguiente es una alternativa que opera con similar lógica. https://www.freeconvert.com

Este es el resultado obtenido y, en este caso, no difiere en nada respecto a haberlo resuelto con Gimp.

Infografías animadas resueltas con gif

Te invitamos a visitar el sitio de Jacob O’Neal, donde se encuentra el original de esta infografía animada construida por él y resuelta con un gif animado.

La animación original está resuelta con un tamaño en píxeles de 1400 x1890 pix y con 120 cuadros. Dado que este gif tiene una paleta muy pocos colores, su autor logró un archivo que pesa solo 500 KB. 

Si bien la profundidad en bits de gif siempre es de 8 bpp, cuando se emplean pocos colores, la compresión sin perdida, que el formato aplica automáticamente puede ser muy eficaz, lográndose archivos optimizados de bajo peso.

Esta es otra fabulosa infografía animada de Jacob O’Neal resuelta con un gif animado

En este caso la animación está resuelta con 48 cuadros de 1000 x 2790 pixeles. El peso del archivo es de 2,45 MB

Procesos y recursos para producir animaciones: Guión y Story board

En el proceso de pre-producción (la etapa previa a la producción en la computadora de la animación) se acude a estos recursos:

El guión de animación

Es un escrito que explica la idea y la secuencia de acciones que se desarrollarán en la animación. Cuando se refiere a un guión estratégico o brief de animación, este documento también define objetivo/s de comunicación, comitente, destinatario, mensaje antes de empezar a dibujar o animar. 

El stoy board o guión gráfico

Es una representación visual del guión. Es un esquema gráfico de la idea desglosado por cuadros.  Aunque describe el diseño de la animación, no es equivalente a ella. Debe funcionar como un instrumento de comunicación que facilite la producción de la animación. En muchos casos,  los story boards están hechos de bocetos dibujados a mano y notas  en los márgenes. Aunque también existen programas específicos para generarlos.

Este es un ejemplo de cuadros del story board (o guión gráfico) de la película Wall-e. Te recomendamos visitar el sitio de donde fue obtenido en: https://soydecine.com/storyboard-que-es-y-como-se-hace/

Si ya desarrollaste todas las actividades anteriores, te invitamos que corrobores cuánto aprendiste con ellas, completando el formulario a continuación, y luego, a continuar con la tarea asincrónica.

TAREA SINCRÓNICA

CONSIGNAS

  • Actividad en equipos (grupos).
  • Tenés tiempo de resolver esta actividad hasta las 13 hs de mañana viernes 25 de septiembre.

 

1

Te proponemos que elabores un guión estratégico y un story board como paso previo a la animación de la marca que diseñaste en el Taller de Diseño Gráfico (si no cursás taller podés trabajar con la marca de algún compañero/a o algún otro trabajo propio de similares características. La idea es que cuenten con insumos y no deban ponerse a producirlos). Podés ver como ejemplo algunos de los trabajos que realizaron tus compañeros de años anteriores. Utilizaremos esta animación como insumo en la siguiente clase para la realización de una Multimedia Digital.

2

Te pedimos que cargues en el aula virtual 1 ó 2 pdf de guión estratégico y storyboard. Pueden ser producido en papel y fotografiado. 

TAREA ASINCRÓNICA

CONSIGNAS

  • Actividad en equipos (grupos).
  • Tenés tiempo de resolver esta actividad hasta las 8 hs del día jueves 01 de octubre.

1

1

Te proponemos que, en función del guión estratégico y del story board, elabores la animación en un tamaño de 550 x 550 píxeles. Tu archivo final debe pesar menos de 600 KB.  

2

Cuando tu animación esté lista, subí el gif animado al siguiente mural (consigná el número de Grupo, el peso del archivo, la cantidad de cuadros y el retraso).

3

 Por último, te pedimos que también cargues este mismo gif animado en el Aula Virtual.

Made with Padlet
Si llegaste hasta acá, has recorrido toda la clase.