[: wWw.Musica-Mx.Com.Ar :] Llamadas Gratis | Sms Gratis | Ringtones Gratis | Trucos Celulares | Trucos Hi5 | Trucos Msn

• Primero, la preparación de fotogramas individuales y demás
• Segundo, poner juntos ficheros GIF animados
• Tercero, hacer un looping de GIFs animados y otra información

Construyendo Animaciones

PRIMERA PARTE: Preparando Todas las Piezas
• Algunos Conceptos sobre Animaciones GIF en la Web
• Haciendo una Secuencia de Animaciones
• Variedad de Trucos y Consejos

SEGUNDA PARTE: Haciendo una Animación Básica
• Creando un fichero de Animación GIF89A

TERCERA PARTE: Extensiones de Netscape y una Guía de Problemas
• Haciendo un loop de GIF Animado en Netscape 2.0
• Guía de Problemas

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:

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... (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? :->

"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 relucir 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:

- 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!