06- Animaciones para la web

Una nueva semana... En esta clase vamos a aplicar las capas para la produccin de animaciones. Ven el ttulo? Cmo se habr realizado?... En varias oportunidades deseamos enriquecer nuestro contenido con animaciones, muy simples, que nos ayuden a explicar mejor una idea o simplemente deseamos realizar un banner para focalizar la atencin del usuario. Seguramente, en algn momento de sus incursiones en internet habrn escuchado hablar de los gif animados, GIF por el formato ms popular y animados por la ilusin de movimiento. Este formato nos sirve para mostrar una secuencia de elementos grficos durante un lapso de tiempo especfico. No necesitamos aprender a programar ningn lenguaje especfico para animaciones, podemos lograr la ilusin de movimiento superponiendo imgenes. Se acuerdan cuando de chicos jugbamos a hacer una pelcula dibujando figuras en las hojas de un cuaderno y las pasbamos rpido? Pues bien, esta es bsicamente la tcnica que usaremos para disear la animacin. Se trata de una superposicin de elementos grficos que se muestran luego de una determinada cantidad de segundos.

Formatos
GIF no es el nico formato para poder guardar estas animaciones para la web, pero s es el ms popular como dijimos. Otro de estos formatos se denomina MNG y es el formato libre para animaciones web, tiene las mismas caractersticas que el formato PNG. En la actualidad no todos los navegadores soportan este formato, por eso haremos nuestras prcticas en formato GIF, que sigue siendo el ms utilizado por todos, para estar seguros que todos los usuarios podrn ver nuestra animacin.

Existen test en lnea para verificar si nuestro navegador soporta el formato MNG. Pueden visitar esta pgina para obtener mayor informacin al respecto o descargar el test: http://www.libmng.com/MNGsuite/

Animemos con GIMP

En GIMP, cada uno de los elementos que conforman nuestro diseo (foto, cuadro de texto, etc.) podemos insertarlo en una capa diferente. Recordando el ejemplo que les mencion antes, hagamos de cuenta que cada una de estas capas es una hoja, de las que dibujbamos para nuestra pelcula casera. Cuando guardamos nuestro diseo como una imagen con formato jpg, por ejemplo, estas capas se aplanan (fusionan o allanan), no se diferencian, en cambio cuando trabajamos con el formato GIF podemos jugar con ellas superponindolas y otorgndoles lapsos de tiempo. Cuando vamos insertando imgenes y texto en el lienzo de trabajo, las capas se pueden visualizar en una ventana a la derecha de nuestro espacio de trabajo.

Cada elemento grfico que insertemos en el lienzo de trabajo podramos ubicarlo en una nueva capa. Si a cada una de estas capas le indicramos un tiempo de duracin y luego reprodujramos la secuencia, veramos cada una capa despus de otra. En el ejemplo, tenemos un dilogo compuesto por tres elementos grficos: un fondo que representa el escenario y dos globos de dilogo, y cada uno de ellos est en una capa diferente Veamos cmo podemos animar este dilogo.

Cmo temporizamos las capas?

Si queremos que primero aparezca una capa el fondo, por ejemplo- y luego la otra capa - el texto- debemos especificar un tiempo para cada de ellas de esta manera: En la ventana donde visualizamos las capas, a la derecha de la pantalla, hacemos clic en el nombre de la capa y agregamos entre parntesis el tiempo de duracin. Ese tiempo tiene que estar expresado en milisegundos. Por ejemplo, aqu tienen algunas equivalencias: Medio segundo = 500ms (milisegundos) 1 segundo = 1000ms 2 segundos = 2000ms

En el ejemplo, no le he indicado tiempo de duracin a la capa del fondo para que se muestre siempre, de principio a fin, luego le indiqu 3000ms (3 segundos) a la capa que contiene el globo de dilogo de la mujer para que aparezca luego de transcurrido ese tiempo. La misma demora he indicado para el globo del hombre. La primera capa que se lee es la que vemos abajo, en nuestro ejemplo es la capa del fondo. La ltima capa que se mostrar es la del globo del hombre. Tips Para hacer que una capa se superponga pero no reemplace a otra, se pueden usar transparencias. En el ejemplo, la segunda capa es transparente para que el globo de la mujer aparezca sobre el fondo que muestra la primera. La tercera capa tiene fondo, cuando aparece tapa o reemplaza la capa anterior mostrada.

Miremos cmo va quedando

Para ajustar el tiempo necesitamos ver como va quedando nuestra animacin. Para ello, podemos reproducirla en cualquier momento desde: "Filtros / Animacin / Reproducir Animacin" y nos aparecer el previsualizador.

Guardamos nuestra animacin

Para guardar nuestro trabajo, debemos ir a "Archivo / Guardar como" y elegir el destino, un nombre de archivo y la extensin GIF. Al presionar Guardar, aparecer una nueva pantalla con opciones para elegir:

En esta pantalla debemos seleccionar la opcin Guardar como animacin. Finalmente, al hacer clic en Exportar, se abre otra ventana con algunas opciones ms:

Entrelazar: sirve para que la imagen se cargue de forma progresiva, es decir no espera a que la imagen est cargada por completo para visualizarse, sino que se va visualizando a distintos niveles de calidad. Es importante tener en cuenta que esta opcin da como resultado un tamao mayor de archivo. Repetir eternamente: es para que nuestra animacin vuelva a empezar cuando finaliza, una y otra vez. Pausa entre cuadro cuando no se especifique: si en el nombre de las capas no pusimos ninguna duracin todas tomarn la que ac especifiquemos. Colocacin de cuadros cuando no se especifique: es igual que la anterior pero para elegir entre "combinar o reemplazar". Por ltimo presionamos Aceptar. Para mostrar el ejemplo aqu, he seleccionado Repetir eternamente. El dilogo nos ha quedado as:

Para visualizar el gif animado guardado, pueden abrirlo en el navegador de internet que utilicen.

Ahora les toca probar a ustedes. Pensemos en todas las aplicaciones que podemos darle a esta herramienta: puede ser un banner promocionando un evento prximo, puede ser un esquema que se vaya completando siguiendo el sentido de las flechas, una historieta, la simulacin del crecimiento de una planta, la ampliacin gradual de un objeto, gestos en la cara de una persona, etc. Es importante tener bien claro desde un comienzo, qu es lo que queremos comunicar y en qu orden. Ese orden es lo que nos permitir decidir cules son los elementos grficos que necesitaremos separar en capas. Sugiero que primero realicen el ejemplo propuesto en la clase Editar imgenes con capas Vayan siguiendo el paso a paso para crear una imagen con capas y texto sobre el pavo real. Tienen que achicar el tamao de la imagen (escalar la imagen) para que no supere los 800 x 600 pxeles. La guardan como archivo Gimp(.xcf), para animarla le agregan tiempo en milisegundos(ms) en la ventana de capas, a cada una de ellas! (luego de asignar el tiempo presionar enter para que quede registrado en esa capa) A la capa de fondo tambin asgnenle tiempo. Para ver como van quedando los tiempos van a la ventanas Filtros-Animacin-Reproduccin. Cuando estn conformes la guardan con el formato Gif. De esa manera ya han creado una animacin. Para verla con el navegador van a la carpeta donde se guard la animacin Gif, hacen click derecho sobre el cono del archivo, luego Abrir con y eligen Internet Explorer (o el navegador que utilizan normalmente).

Y si se animan a realizar su propia animacin:

Diseen un banner de tres capas con el tema que ms les guste. En cada una de estas capas pueden insertar imgenes y/o texto. Indiquen tiempo de aparicin para cada capa. Guarden como gif animado.

Con esta actividad opcional finalizamos el uso especfico del programa Gimp; si desean pueden enviar el banner (su produccin) al correo interno, ser un verdadero placer recibirlo. Seguimos comunicados. Gustavo