ANIMACIONES PARA LA WEB CON

Error: Reference source not found

En este tutorial vamos a ver como realizar animaciones para la web en formato GIF o MNG. Ya sean emoticones, banners o lo que se les ocurra. El formato GIF seguro que todos lo conocen en cambio MNG no es tan conocido, surgi de la necesidad de tener un formato libre de animaciones para la web, deriva del PNG y posee todas su ventajas. El formato GIF solo soporta color indexado (mximo 256 colores) o escala de grises, transparencias sin niveles(puede determinar si un pixel es transparente o no, pero no que tan transparente es) e imgenes entrelazadas en 1D. En cambio el PNG adems de color indexado y escala de grises permite imgenes con color verdadero(TrueColor) 48 bits por pixel, permite 254 grados de transparencias e imgenes entrelazadas en 2D. Si bien las ventajas son muchas es muy probable que si realizamos una animacin en MNG no todos la podrn ver, ya que los navegadores no suelen incluir todava soporte al mismo, an el GIF sigue siendo el formato mas popular. Para saber si tu navegador soporta este formato mirate los test de esta pgina: Error: Reference source not found Para mas informacin pueden ver la pgina del proyecto (en ingls): Error: Reference source not found Se puede animar con GIMP?. Tanto para animaciones GIF o MNG el proceso en GIMP es el mismo salvo en algunas cosas para los GIF que mas tarde veremos. Para este tipo de animacin Gimp toma como cuadros a las capas que posea una imagen y si su duracin no fuera la misma para todos los cuadros la tendramos que indicar en el nombre de la capa en milisegundos y entre parntesis, por ejemplo si queremos que un cuadro dure un segundo pondramos al lado del nombre de la capa (1000ms), para entenderlo mejor miremos la imagen de abajo: Como podemos ver es una imagen compuesta por 4 capas, es decir 4 cuadros de animacin, el inferior es el primer cuadro y el superior el ltimo de la animacin y cada cuadro tiene entre parntesis su duracin en milisegundos, el primero 3 segundos, el segundo 2 segundos, el tercero 1 segundo y el cuarto 1/2 segundo. En la imagen de la derecha se puede ver como quedara la animacin. Que es eso de combinar y reemplazar?. Si nuestra imagen est compuesta por capas con transparencias tenemos dos mtodos para manejar nuestros cuadros, y son combinar y reemplazar, se tiene que colocar en la capa entre parntesis al lado del tiempo: Nombre de la capa(xxxxms)(combine)o(replace)

La animacin que vimos arriba es una animacin cuyos cuadros(capas) no poseen transparencias(canal alfa), es decir las capas no dejan ver lo que hay por debajo de ellas, entonces no notaramos ningn cambio si entre estos mtodos, pero si las capas si dejan ver lo que hay por debajo podra servirnos. Vamos a ver que hace cada uno: Combinar (combine): este mtodo lo que hace es mantener los cuadros durante toda la animacin con lo cual se iran combinando a medida que avanza la animacin. Reemplazar (replace): este otro mtodo lo que hace es mostrar un cuadro atras del otro pero desapareciendo cuando cumple su tiempo de duracin. Vamos a verlo mejor con un ejemplo muy simple: Tenemos una animacin compuesta por estas tres figuras de la imagen de arriba y podemos ver como reaccionan en ambos mtodos: COMBINAR. REEMPLAZAR. Por que me esta pasando esto con los GIF?. Tenemos una imagen cuyas capas son las que vemos abajo y cuando hacemos la animacin vemos que algo anda mal:

En la animacin se perdi el esfumado del circulo. Si se acuerdan al comienzo del tutorial coment que el formato GIF no tiene niveles de transparencias, puede determinar si un pixel es transparente o no, pero no que tan transparente es, y en la animacin de arriba podemos ver que es as. Posibles soluciones!!!. La solucin a esta limitacin de los GIF sera generar cada cuadro de la animacin sin transparencias, es decir, un primer cuadro totalmente negro, y un segundo cuadro negro pero con el circulo esfumado. Entonces cuando hacemos la animacin nos quedara como queremos:

Podramos quedarnos contentos con los resultados pero si observamos ambas animaciones, notamos que la que nos gust nos qued con un tamao de archivo mayor.

Para poder reducir el tamao de archivo, cuando necesitemos hacer animaciones con este tipo de transparencias, GIMP tiene un filtro para optimizar el GIF, y podemos acceder a l yendo a: "filtros---Animacin---Optimizar(para GIF)" Este filtro lo que hace es ver en las capas que pixeles tienen una opacidad distinta de 0 y copiarle en toda su periferia los pixeles de las capas inferiores, como podemos ver abajo, adems ya pone al lado de los nombres de capas la duracin y el modo y solo nos quedara variar los valores del tiempo a los que necesitemos.

..... ANIMACIN OPTIMIZADA .....

De la misma manera si as lo quisiramos podramos desoptimizarlo yendo a: "filtros---Animacin---Desoptimizar".

Previsualizando la animacin. Cuando estemos regulando el tiempo, como el modo de manejar las capas, podemos en cualquier momento ver como va quedando nuestra animacin yendo a "filtros---Animacin---Reproducir Animacin" y nos aparecer el previsualizador:

Guardando en GIF o MNG. Una ves terminada nuestra animacin vamos a "archivo---guardar como" y elegimos el destino, un nombre de archivo y la extensin GIF o MNG. Si elegimos GIF nos aparecer esta ventana: Vemos que nos dice si queremos guardar como una imagen o como una animacin (seguro que adivinaron que elegir ;) ) Tambin nos dice que GIF solo soporta imgenes indexadas o en escala de gris,

como coment al inicio del tutorial. Podemos dejar que el programa lo haga de forma automtica pero si los resultados no fueran los esperados, para controlar la conversin a imagen indexada lo podramos hacer antes de guardar yendo a "imagen---Modo--Indexado". Nos queda hacer click en exportar y se nos abre esta otra ventana: Entrelazar: sirve para que la imagen se cargue de forma progresiva, es decir no espera a que la imagen este cargada por completo para visualizarse, sino que se va visualizando a distintos niveles de calidad, seguro que alguien not en alguna pgina que las imgenes cuando estn cargando se ven borrosas y cada ves van teniendo mas definicin, eso es porque son entrelazadas. Tambin entrelazar da como resultado un tamao mayor de archivo. Comentario GIF: es para poner lo que queramos que aparezca en el comentario de la imagen. Despus tenemos una serie de opciones del GIF animado y son: Repetir eternamente: es para que nuestra animacin se reinicie cuando finaliza. 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".

Si en cambio guardramos como MNG no solo no nos hace falta convertir la imagen a indexada o escala de grises, sino que tambin tenemos algunas opciones mas, como guardar la correccin de color, resolucin, la hora de la creacin de la animacin, y variar la calidad de la compresin. Es un excelente formato, aunque le falta que se masifique para que todo el mundo pueda verlo, mozilla traa en su versin oficial soporte a este formato, pero en las ltimas versiones lo quito, supongo que es cuestin de tiempo. A animar se ha dicho!!!.

Bueno hasta ahora todo muy lindo pero seguro que se preguntan ???? y que puedo hacer con todo esto, y es a lo que vamos. Abajo podemos ver unos GIF animados de nuestro querido wilber y van a ver que son muy fcil hacerlos. Les voy a pedir que elijan uno para mostrar como se hace..... El que guia el ojo? muy buena eleccin!!! ;).

Lo primero que tenemos que tener es la cara con la expresin inicial y luego iremos duplicndola y pintando los cambios de expresin, van a ver que con solo dos cuadros se pueden hacer muchas animaciones. En este caso nos conviene trabajar con una imagen mas grande que la animacin final para poder trabajar mas cmodos y con mas detalles ya que si fuera del tamao final el pincel mas chico seria demasiado grande para algunos detalles. Esta sera la imagen usada: 1- Haciendo doble click sobre el nombre de la capa la renombramos a "Cuadro1" luego la duplicamos y a esta otra la llamamos "Cuadro2". 2- Con la capa cuadro2 seleccionada y con la herramienta aergrafo(A) pintamos sobre el ojo hacindolo cerrado, podemos ir tomando los colores a usar desde la misma imagen presionando Ctrl. tendrian que llegar a algo como esto: 3- Ahora solo nos queda reducir el tamao de la imagen, "optimizar para GIF" como vimos antes y modificar la duracin de los cuadros como vemos en esta imagen:

4- Por ltimo guardamos nuestra animacin en GIF o MNG y nos tendra que quedar algo as

Error: Reference source not found

Esto fue todo, espero que les sea til... Hasta el prximo tutorial.