Un completo curso de diseño gráfico, ilustración, diseño web y tipografía.

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 o frame. 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.

edición de animaciones gif

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.

Cuándo usar Flash

Dadas las especiales características de Flash, no vale la pena si sólo queremos crear un pequeño banner con animación; supondría una inversión de mucho tiempo para aprender la forma en que trabaja el programa. De todos modos, Flash lleva un sistema de ayuda muy completo y fácil de entender y no resulta difícil manejarlo correctamente. Para determinados efectos, es rápido y cómodo, mucho más conveniente que la alternativa de un gif estático o animado:

  • Animaciones con mucho movimiento de unos pocos símbolos: por ejemplo, unos engranajes. Flash resuelve la animación con mucha más facilidad, calidad y con un tamaño pequeño. El ejemplo que acompaña estas líneas tiene unos 5k, tamaño muy pequeño en comparación con el que exigiría un gif. Además, crear este tipo de movimientos en flash es muy fácil y con un gif sería extremadamente complicado y laborioso.
  • Para animaciones a gran escala. El tamaño en Flash no tiene importancia (salvo que se incluyan también bitmaps en la película), por lo que pueden resolver animaciones a pantalla completa o para áreas extensas, situación en la que un gif animado sería poco práctico.
  • Para logotipos que se van definiendo cada vez más, de forma gradual, a partir de una imagen inicial muy tenue; este efecto se puede hacer tan complejo como se quiera y el fichero final puede ser increíblemente pequeño. Con un GIF resultaría un enorme tamaño.
  • Si queremos mostrar una imagen ampliable para ver detalles, por ejemplo, un catálogo de imágenes vectoriales o fuentes, un mapa...

El inconveniente principal que presenta Flash, que alguno debería tener, es la exigencia de un plugin específico para ver estas imágenes. No es ningún problema grave: ya viene incluido en las últimas versiones de los navegadores y si es necesario se puede descargar libremente de Macromedia, sin que tarde mucho, ya que el reproductor de flash es relativamente pequeño. El mismo navegador detecta si existe una nueva versión y procede a preparar la actualización si nosotros lo autorizamos así.