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 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 03 de octubre.

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.

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 ASINCRÓNICA

CONSIGNAS

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

1

Te proponemos que te ayudes pensando en un guión escrito, delinees un story board y construyas una animación de la marca que diseñaste en el Taller de Diseño Gráfico, en un tamaño de 600×600 pixeles. Tu archivo final debe pesar menos de 600 KB. 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

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.