Animaciones

Las animaciones son un recurso muy �til para el dise�ador de p�ginas web. Pero tambi�n son el signo m�s evidente de mal gusto en muchas, muchas p�ginas. No hay nada peor que castigar la vista de los visitantes con un mont�n de feas animaciones que poco o nada aportan a los contenidos. Si las utilizamos selectivamente, las animaciones pueden resolver muchas necesidades.

Hay dos formas principales de incorporar animaciones a las p�ginas web: los gif animados (la soluci�n m�s extendida) y las pel�culas de flash. Tambi�n se pueden utilizar otros formatos multimedia, pero no se utilizan tan extensamente como estos dos.

Animaci�n con GIF

Un gif animado consiste, simplemente, en una serie de im�genes, en formato gif, naturalmente, que est�n colocados consecutivamente y se muestran en pantalla durante un intervalo de tiempo determinado; se puede especificar para cada fotograma oframe. Al acabar la serie, puede volver a empezar (loop) un cierto n�mero de veces, o indefinidamente.

Con este formato, admitido por cualquier navegador, se tiene la ventaja que ofrece el formato gif: r�pida descarga, nitidez, uso de transparencia... pero tambi�n la limitaci�n de que las im�genes deben tener un n�mero fijo de colores (un m�ximo de 256). Al tratarse de un formato de bitmap, si la animaci�n es muy grande, larga o compleja, el tama�o del fichero resultante puede ser excesivo para que sea pr�ctico.

Trucos para� la creaci�n de animaciones GIF.

Un gif animado se puede preparar con un programa dedicado (GIF Construction Set, Ulead Gif animator, Animagic) o bien utilizar la capacidad de exportar animaciones de otros programas m�s generales de creaci�n y manipulaci�n de im�genes, tales como Xara, Fireworks, Imageready. Crear el gif animado implica una preparaci�n previa tan importante o m�s que la creaci�n de los fotogramas de la animaci�n. Debemos considerar qu� partes del objeto se mueven y cu�les se mantienen fijas, y dibujar el n�mero m�nimo de frames para que la animaci�n sea compacta pero convincente. La mayor�a de animaciones que se crean, de todos modos, no son animaci�n de movimiento, sino al estilo de los banners publicitarios de muchas p�ginas. Es una manera de exponer m�s informaci�n en la misma �rea de la pantalla. Podemos enlazar, por ejemplo, una serie de lemas uno tras otro, para que aparezcan gradualmente.

En este gr�fico vemos los principales controles que ofrece un t�pico programa de construcci�n de animaciones gif.

Con cualquier aplicaci�n de las comentadas, no resulta nada complicado crear la animaci�n. S�lo deben prepararse las im�genes individuales. Las partes invariables pueden copiarse de un fotograma al siguiente; se indica el tiempo que se ha de mostrar cada uno, normalmente en milisegundos, y se decide si se repetir� toda la animaci�n, un n�mero finito de veces o indefinidamente. El tama�o final del GIF puede ser considerable si hay muchas im�genes, con muchos colores diferentes y formas complejas. Para reducir algo el tama�o de la animaci�n, puede intentarse aplicar una paleta com�n a toda la serie de im�genes. El ejemplo que mostramos, algo m�s arriba, es un ejemplo gif animado aprovechando las posibilidades del formato: nuestro simp�tico charlat�n apenas tiene 5k de tama�o de fichero.

Flash

La limitaci�n de gif, jpg i png es que son ficheros de mapa de bits, con una resoluci�n fija. No es posible cambiar el grado de ampliaci�n de la imagen dentro del navegador, y si lo hacemos, inevitablemente perdemos calidad. La soluci�n en este caso ser�a utilizar un formato vectorial, pero los navegadores no lo han permitido hasta hace relativamente poco. Se han intentado diferentes propuestas, entre ellas una muy interesante de Xara (el formato .web), pero han fracasado. A falta de un est�ndar oficial, se ha impuesto un formato cada vez m�s difundido: Flash.

Si se quieren incluir im�genes en las que se pueda ampliar (zoom) para ver los detalles, que incluyan interactividad (men�s desplegables, enlaces...) y sonido, debe considerarse el formato flash (o Shockwave Flash). Con los navegadores en las versiones 4 - 5, no hay ning�n problema, puesto que incorporan el plugin necesario, que de todos modos es gratis: puede bajarse muy r�pidamente de la web de Macromedia (http://www.macromedia.com). Ciertamente, Flash es m�s que un formato de vector, y m�s que un formato de animaci�n: se usa m�s para animaciones interactivas, una especie de "pel�culas" que para ilustraciones est�ticas (si bien muchos de nuestros ejemplos est�n m�s bien en esta �ltima categor�a.)

Flash se ha convertido en el est�ndar de facto para� gr�ficos vectoriales, pero existe un nuevo formato emergente, recomendado por el consorcio de la www, llamado SVG (Scalable vector graphics). En el futuro probablemente se emplee en abundancia...

Las pel�culas de Flash se generan con un m�todo bastante diferente al de los gif animados. Aunque Flash no sea precisamente un ejemplo de programa f�cil de aprender, en algunos aspectos, debido al trabajo con objetos vectoriales, crear ciertos tipos de animaci�n es tarea simple. Por ejemplo, los efectos de cambio de luminosidad y movimiento o cambio de forma que afecten a un objeto son la simplicidad misma en Flash. Para crear im�genes est�ticas, o preparar las im�genes de base para la animaci�n, tambi�n es posible utilizar Freehand o Illustrator, (este �ltimo requiere un plugin gratuito). Se elige la opci�n archivo | exportar... eligiendo shockwave flash (swf).

Una de las mayores ventajas de Flash es su manejo de s�mbolos: un s�mbolo es un objeto de la animaci�n; una vez definido, queda incorporado al panel de s�mbolos del programa, y podemos utilizar tantas copias como deseemos, alterando su color, tama�o, visibilidad, distorsion�ndolas, fundi�ndolas entre s�... sin que aumente el tama�o del fichero, puesto que el programa busca la informaci�n para generar el objeto en una �nica definici�n, la de la librer�a de s�mbolos.

Flash , de Macromedia, es un programa de manejo un tanto complejo, que permite crear animaciones interactivas en formato SWF. Su manejo de gr�ficos vectoriales permite cambiar las dimensiones sin problemas, interpolar formas y otros efectos manteniendo tama�os de archivo compactos. Por ejemplo, visitando la p�gina inicial de Macromedia, podemos ver un ejemplo bastante t�pico de lo que se puede conseguir con Flash. Aparece una imagen con una serie de efectos de animaci�n y al cabo de unos instantes se nos ofrecen una serie de botones para elegir opciones. Estos botones pueden tener un efecto de "mouseover" y, adem�s, al apretarlos desplegar un submen�, empezar una nueva animaci�n, etc�tera