© 1996, etsimo WWW team

Haga click aquí para acceder a los sitios espejo


GIF Animation on the WWW
[Overview] [Gallery] [All About GIF89a] [Software Toolbox] [HTML Assist] [Critter Report] [Smaller GIFs]


NOTA AL LECTOR: Las tres páginas que siguen contienen el proceso de creación de una animación. En algún punto necesitarás ir al icono de SOFTWARE TOOLBOX para conseguir software para tu ordenador. Si tienes algún problema, vete a CRITTER ALERT para obtener un listado de errores solubles e insolubles.

Construyendo Animaciones

NOTA: Debido a su excesivo tamaño, el tutorial está dividido ahora en tres partes.


Algunas Consideraciones sobre Animaciones GIF en la Web

Primera: Ten siempre presente el ancho de banda. El ancho de banda se refiere a como los datos pasan a través de la linea telefónica. La media de usuarios está todavía usando un modem 14.4. Tu mejor promedio de rendimiento está sobre 1.7 kilobytes de datos ( 1.7k, 1.700 bytes) por segundo de ancho de banda. Esto asume que tienes una conexión límpia, estás conectando al nivel de compresión óptima, no hay ruidos telefónicos, tu PC y modem pueden ir al ritmo apropiado respecto a la proporción de datos entrantes, tu suministrador de acceso (Netcom, UUNET, AOL, Compuserve, Prodigy) permiten mantener la proporción de transferencia a este nivel, y la fuente de los datos (en algún lugar en internet) igualmente podrá alimentar la salida de datos. Si alguno de estos está ocupado tu promedio de transferencia comenzará a caer. Algunas publicaciones sugieren que 1k por segundo es un buen indicador para páginas Web. Esta es una medida modesta para la mayoría de los servidores y modem que deberían poder superarla. Desafortunadamente he estado en numerosos servicios, distintas veces, lo que mostró lo lentas que pueden ir las conexiones. Una página Web con un total de 30k de texto y gráficos llevará 30 segundos en verse. 100k=1 minuto 40 segundos. Creo que es una buena medida para el status de internet hoy. Muchos servidores y proveedores no mantienen un rendimiento a niveles que igualen la capacidad de 28.8kbps de los modems (3.4k por segundo). Este es el servicio más popular en este momento que usas, y en el que las cosas pueden volverse más lentas. De esta manera, mi home page es tremendamente larga. Lo admito. La animación del título principal es de 110k y subiendo. En el mejor de los casos, mi página se carga en 35 segundos, por la medida tratada aquí, casi dos minutos!. Con tiempo lo reduciré tanto como sea posible.

Para conservar el ancho de banda, haz lo que puedas para construir tu imagen de forma compacta y pequeña. Un ejemplo reciente fue un test de animación de Arlene Gladney. La animación mostraba un signo con un pintor trabajando en él. Las letras aparecían una a una, deletreando el mensaje "ESTO ES FÁCIL". La animación ocupaba 58k. La salida era un gráfico al que se le añadía una letra. Una pequeña sugerencia y un rápido cambio redujo el fichero a sólo 10k, ahorrando 48k ( también aceleró la animación sin producir paradas en esta). La sugerencia fue simple. El primer fotograma sería el pintor y su signo. El segundo sería la letra "T", el tercero la "H", el cuarto la "I", etc. Editando cada bloque de imagen permite para la x y la y colocar las letras en el lugar que les pertenece. No es muy difícil pero si efectivo para conservar el ancho de banda. La animación resulta idéntica.

GIF permite cualquier número de colores entre 2 y 256. El menor número de colores, el menor número de datos y los más pequeños ficheros gráficos. No todo el software existente te permitirá establecer los bits por pixel para los GIFs. Adobe Photoshop (Mac/Win), GIFConvertor (Mac), y PhotoGIF (Mac), Picture Publisher (Win), Paint Shop Pro 3.0 (Win), LVewPro, WebImage de Group42, Graphic Convertor (Mac), Fractal Painter, Painter 2.0, PhotoStudio de ArcSoft, ImageMagick, ClarisPaintShop, PaintIt, ColorIt y ToolWorks 2.2 (SGI Indy). DeBabelizer 1.6.5 lo hace pero solamente para imágenes GIF87a.


Haciendo una Secuencia de Animaciones

Bien, la primera cosa que necesitarás es una serie de imágenes que parezcan una secuencia de animación. Como esta serie de estrellas que rotan en sentido contrario al de las agujas del reloj:

Animation sequence example

Cada celda o fotograma de la animación cambia un poco. Observa que cada estrella está en una "caja" roja idéntica. Esto da un fotograma de referencia para la animación, como el borde de una pantalla de cine. Si no estás trabajando con una "caja" de tamaño fijo cada fotograma de tu animación disminuirá y crecerá unos pocos pixels. Cuando lo insertes dentro de una secuencia de GIF, el objeto se desplazará arriba, abajo, a la derecha y a la izquierda con cada cambio de tamaño. Como esto...Sliding error (Pincha aquí para volver a verla)

Yo utilizo Corel Draw, pero tú puedes usar el que te resulte más cómodo. Necesitarás salvar cada fotograma de la secuencia animada en un GIF u otro formato bitmap. Si estás utilizando el GIF Construction Set u otro programa de montaje de GIF, puedes salvar tus animaciones en cualquier formato e importarlas cuando insertes las imágenes dentro del último GIF. GIF Construction Set maneja GIF, BMP, PCX, IMG, JPG, MAC, PICT y muchos más. Creo que fuciona mejor remapeando colores que algunos de los mejores editores de imágenes. GIFBuilder puede usar PICT y TIFF con un Applescript.

Respecto al color de fondo que hayas elegido para establecer la "caja" en algunos browsers a pesar de que han sido actualizados no soportan transparencias y el color transparente será visible. Escoge un color que sea lo más parecido posible. Yo escogía a menudo un color brillante para contrastar, lo que es más fácil de distinguir de la paleta, solamente para ver mostrado el color llamativo en un browser más viejo.

Además de la animación de la estrella hay otra técnica que es un poco más difícil. La estrella funciona como una animación basada en fotogramas dibujados en las páginas de un libro y donde ves la animación moviendo las páginas de este. Constantemente se reemplaza toda la "caja".Pero que ocurre si queremos mostrar una bola rebotando dentro de una caja grande?. Si redibujamos la caja contra la que rebota estaríamos desperdiciando un valioso ancho de banda en traerlo. No sería mejor que dibujáramos la bola moviéndose alrededor de la caja? :->

Bouncing ballBouncing eraser"Pincha" en las imágenes para volver a mostrarlas. Desafortunadamente Netscape no soporta esto todavía. La imagen de la izquierda utiliza el Remove By Previous Image. La de la derecha Remove By Background. Como puedes ver, la imagen derecha de la pelota se reemplaza por el fondo de la p´gina HTML. Esto le da el efecto de un borrador. La imagen de la izquierda debería haber tenido el efecto de una pelota rebotando en una caja, pero Netscape no soporta Remove By Previous Image. La imagen previa restauraría el fondo de la imagen a la forma que tenía antes de que la pelota fuera pintada. Coloqué el último fotograma de la pelota lejos del límite inferior de la caja. Esta pelota est´a fuera del límite del GIF, de este modo, como ha sido colocado fuera de la pantalla, no se muestra.

Pero no todo está perdido. Hay un camino para hacer la animación superior, con un poco de ingenio.

La animación de la bola rebotando tiene como primer GIF una caja. Después todos los restantes GIFs son pelotas de 32x32 pixels. El mismo GIF de la pelota se reinserta una y otra vez. Yo edito cada bloque de imagen y cambio la posición superior e izquierda de cada imagen de la pelota para simular movimiento sobre la imagen de cada caja. Esto reducirá muchísimo el tamaño, pero también es más trabajo. Sin embargo todavía tenemos el problema de la estela de las pelotas negras. Pude reinsertar un trozo del fondo después de la aparición de cada pelota. Esto pintaría el fondo de la caja sobre la pelota. Esto es lo que estarí haciendo la Previous Image. Si, el parpadeo está molestando, pero puedes no tener que pintar sobre CADA posición como hice con este ejemplo. Una forma sería tener la imagen de la pelota incluyendo una "estela" de blanco que se pintaría donde estaba la pelota. Una vez más, la planificación y el tiempo llegan a hacer lo que el software todavía no puede. Esto saca también a relucira bug un error en el GIF Construction Set para Windows. La posición de las imágenes dentro del fichero están fuera por un pixel por la parte de abajo y en otro por la derecha. Si estableces la posición en 0,0, GIFCon lo posicionará en la 1,1. Netscape no tiene este error.

¿Cómo se vería en clientes que no tienen Netscape?

La mayoría de los browsers que no son Netscape solamente mostrarán el primer fotograma de la secuencia. Unos pocos sólo mostrarán el último. Podrás construir una animación que se vea bien en todos. Si el primer y último fotogramas son iguales se podrá ver bien en cualquier sitio. Mi rolling star está creado de esta forma, puedes mirarlo en la Galería. El primer y último fotograma contienen la estrella en una posición vertical. En la animación continua, notarás que esto se muestra porque el posicionamiento de la estrella en la posición superior derecha es una fracción mas tarde que las otras. . Se aprecia este efecto pero la animación no sufre demasiado. Mi animación "INTERcoNnEcTions" en laHome page, sin embargo, parece terrible en todos excepto Netscape 2.0. La mayoría de los browsers ven una caja negra. Otros ven las palabras "forming links.." y nada más. Ninguna de las dos cosas es deseable. El problema del gráfico final es fácil de solucionar. Hay que hacer un repintado total del último gráfico. El primero sin embargo es problemático. Si incluyo la imagen completa arruinará el efecto. Estoy esperando todavía una gran idea =-> La solución más sencilla que conozco es una imagen en blanco, totalmente transparente como primer fotograma. Esto dejará un espacio en blanco en vez que una monstruosidad.



Variedad de trucos y consejos

Ok, no supe donde meter esto!

Si no estás haciendo el looping a tus animaciones:

  • recuerda que el último fotograma será el final y el único que permanecerá en la pantalla.
  • puedes borrar el último fotograma completamente, haciendo que el grafico aparentemente se desvanezca una vez que ha sido mostrado.

    Si estás haciendo looping tus animaciones:

  • El primer fotograma será el que se presente. La mayoría de los browsers mostrarán esto como un GIF estático.

    ¿Quieres desvanecer una imagen? Una manera fácil cargar la imagen en un editor de bitmap y con la herramienta de spray, como la rudimentaria de Paintbrush. Escoge la opción fuerte, sin transparencia. Si quieres pintar puntos de forma aleatoria de un color específico escoge el color que quieres que sea transparente, pinta algunos puntos aleatorios sobre la imagen. Sálvalo como fotograma. Pinta algunos más. Sálvalo como fotograma. Continúa hasta que no quede nada de la imagen. Cuando se crea la secuencia en el GIF parecerá que se está desintegrando o, de forma inversa, materializándose. Yo utilicé esto en mi animación del EMAIL para la materialización de la carta y la desmaterialización de la mano. Ambas son vistosas y el proceso fue extremadamente rápido.

    Intentándo idear algunas animaciones? Steve muestra que estas animaciones que pueden ser más que decorativas. Usa animaciones GIF para instruir a sus visitantes de la home page como hacer juegos malabares. Hay algunas buenas aplicaciones ahí, así que se creativo.

    Me gusta crear un directorio para cada animación y EXPORTAR y SALVAR cada fotograma de la animación dentro de él. Si el nombre de la animación final se llama STAR.GIF nombra cada animación STAR01, STAR02, STAR03. Yo la mayoría de las veces soy un poco vago y las llamo S01.GIF, S02.GIF, S03.GIF.

    Si buscas programas para ayudarte a hacer animaciones, aquí hay algunas recomendaciones de otros visitantes:

    Hans Huter: Cuando estaba creando animaciones gif en un Mac, encontré que nada podía romper la combinació de Macromedia Director + Gifbuilder:

    - simplemente anima tus sprites en el Director (conserva el escenario tan
    pequeño como sea posible, y el número de fotogramas por segundo
    muy bajo)
    - Después exporta los fotogramas como picts (en un nuevo directorio)
    - Abre Gifbuilder, arrastra la imagen dentro de la ventana de Gifbuilder
    - Establece las opciones y escoge construir desde el menú de archivo...
    - Voila!
    

    Aunque puede no ser lo más eficiente en cuanto a tamañ, puedes crear una animación en cuesti&oaucte;n de minutos antes que animar cada fotograma en Photoshop, y las correcciones a la animación pueden hacerse en pocos segundos si tienes ambos programas abiertos...

    Glenn Steffler sugiere usar Gold Disk Animation Works Interactive, o mejor todavía, Astound para Windows.

    Fenil Patel sugiere Egor de Sausage Software para crear la animación en la web. Está disponible para traer.

    Lisa Carter sugiere lo siguiente: Después de leer el tutorial, tengo noticias de una de las mayores secciones de trucos y consejos para forzar a tus gifs a una única paleta de colores -lo que puede ser un montón de trabajo, sobre todo si tus imágenes reducen los colores de una forma no muy buena. Me gustaría recomendar enormemente una gran utilidad, el "Dave's Targa Animator".

    Contrariamente al nombre, DTA trabaja con mucho más que Targas. Leerá y escribirá ficheros GIF, además de TGA, BMP, TIF, FLC, FLI, PCX y otros formatos. DTA es una utilidad de linea de comando de DOS que fue diseñada procesar un directorio lleno de imágenes numeradas y convertirlas en una animació Autodesk -aunque las escribirá en otro directorio y las numerará.

    DTA será muy útil para animaciones GIF porque puede leer un directorio lleno de ficheros GIF, calcular una única y optimizada paleta de colores, y después sobreescribir el nuevo fichero GIF con la nueva paleta optimizada- lo que será un gran ahorro de tiempo.

    DTA también puede cambiar el tamaño de las imágenes (con anti-aliasing!), y puede hacer muchos buenos difuminados y efectos de transición. DTA también interpola imágenes (por ejemplo ponte en el caso de que tenís una animación con 30 fotogramas y decidiste que era demasiado grande. DTA puede rebajarla a 15 imágenes). Tambié hace rotaciones, y otras muchas características.

    Puedes encontrar la última versión de DTA en http://povray.org.


    Continúa en la siguiente página del tutorial...

    Cualquier idea, sugerencias, utilidades, o ejemplos, por favor escríbeme para incluirlas en esta página.

    Royal Frazier

    Ir al MENU en la parte superior de la páginaPrevious Page Next Page