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 la Home 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.

Construyendo Animaciones, segunda parte

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 Netscape

• Haciendo un loop de GIF Animado en Netscape 2.0
• Guía de Problemas

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

Creando un Fichero de Animación GIF89a

Empieza con GIF Construction Set (para evitar un horrible destino).

Hay dos formas de empezar un fichero de Animación GIF

UNA FORMA DE EMPEZAR UN FICHERO GIF

1. Selecciona FILE/OPEN desde el menú y selecciona tu primer GIF.
2. Ahora selecciona FILE/SAVE AS y renombra el GIF para darle el que será el nombre de la animación final. Haz click en OK. NO PULSES [ENTER!!!] [ENTER] CANCELA!.

UNA SEGUNDA FORMA (yo prefiero esta) DE EMPEZAR UN FICHERO GIF

1. Selecciona FILE/NEW desde el menú. Una lista de Bloques GIF en blanco aparecerán sólo con la CABECERA.
2. Comienza insertando imágenes.

¿Por qué lo prefiero?. He aquí porqué:

La primera imagen que introduces, debería ser sobre la que se realiza la paleta global, aún cuando borres esta imagen después del fichero. ¿Por qué? Aquí está mi razonamiento (si esto no es correcto por favor dímelo). La paleta global debería contener la gama más grande de colores para todas las imágenes. Así yo pienso que si tienes un fotograma donde se abre un arcoiris de colores, inserta la imagen primero, para que así la gama de la paleta esté cubierta.

En un conjunto de imágenes particularmente problemático, encontré que el color se desplazaba a lo largo del proceso. Especialmente con blancos cambiando a gris, verdoso o amarillo. Lo resolví creando un bitmap compuesto de todas las imágenes principales en las animaciones. y haciendolo todo en un único bitmap enorme. Inserté y cree una tabla de colores globales. Después descarté la imagen y comencé insertando las verdaderas imágenes en orden. No se produjeron más cambios de color.

CABECERA DE GIF89A Y BLOQUE DE DESCRIPTOR DE PANTALLA LóGICA

Cada GIF comienza con estos dos bloques. GIF Con une estos dos bloques en uno. El Bloque de Pantalla define los extremos del GIF mostrado. Un GIF en blanco tiene un tamaño por defecto de 640 por 480 pixels, anchura por altura. Este es el tamaño de una pantalla VGA estandar sobre un ordenador Compatible IBM. Esta pantalla lógica es la cantidad de espacio que Netscape dará a tu imagen cuando se muestre. Esta estrella utiliza una pantalla lógica de 90x90 para mostrar una imagen de una estrella de 60x60. Observa la derecha y bordes inferiores.
(NOTA: los atributos del comando IMG de Netscape: ALTURA Y ANCHURA pueden dejar una única imagen a cualquier tamaño. Sin embargo esto está basado en el tamaño de la pantalla lógica). Estas tres estrellas tienen el mismo fichero fuente (STAR.GIF 59x59) pero han sido escaladas para mostrarlas en diferentes tamaños. Otros browsers no prestan atención a la pantalla lógica o al los atributos de ALTURA Y ANCHURA de Netscape.

HEADER GIF89A Screen(640x480)

El tamaño debería ser reducido a las dimensiones de la imagen más grande insertada. Con esto quiero decir encontrar la anchura más grande de todos los ficheros y utilizar esa. Entonces encontrar la altura más grande de todas las imágenes y utilizarla. No des por supuesto que todas tus imágenes son del mismo tamaño. La mayoría de las veces no lo son. Insertando una imagen más grande que el tamaño de la pantalla causará un GPF en Netscape. Recuerda también que esta es como tu pantalla de cine. Mueve parte de una imagen fuera del borde y esta parte no se mostrará en Netscape. GIF Con te mostrará el área de pantalla utilizando una linea de puntos para definirla. Cualquier cosa que caiga fuera de la linea de puntos, cuando la veas en el GIFCon, no se mostrará

INSERTAR UNA IMAGEN

Pincha en INSERT. Pincha en IMAGE. Se abre una caja de dialogo. Busca tu fichero con la imagen o escribe su nombre. NO PULSES [ENTER]!, esto lo CANCELARíA en la versión 1.0c!. Pincha en el botón de OK.

Si algunos de los colores en la imagen no están representados por la paleta global, se abrirá una caja de dialogo con seis elecciones como máximo. Debes escoger una de las elecciones activas (las elecciones inactivas están en un gris difuminado). Color exacto, imágenes de 24-bit, son interiormente convertidas a imágenes de 256 colores en el GIF Construction Set. GIF no soporta más de 256 colores.

Mira la página de la Image Palette para ejemplos fotográficos de las siguientes opciones:

UTILIZACIóN DE UNA PALETA LOCAL

Esto incrementa el tamaño de los ficheros como mucho 779 bytes. Una nueva paleta de colores se genera solamente para esta imagen. El único problema que veo es que algunos displays de 256 colores pueden no manejar muy bien demasiados swaps de paletas. Puedes ver lo que parecen ser imágenes en negativo, o flashes en la pantalla.

UTILIZACIóN DE UNA PALETA GRIS LOCAL

Esto inserta una paleta compuesta de 256 niveles de gris. El color #0 es negro, el color #1 es blanco, y #2 a #255 desde casi negro a casi blanco. Puedes utilizar esto para convertir una imagen de color a escala de grises, aunque debido a este tipo de paletas, este método de conversión dejará a menudo la imagen muy oscura.

REMAPEAR LA IMAGEN A LA PALETA GLOBAL

Similar a DIFUMINAR más abajo. GIFCon simplemente reemplaza colores ausentes en la paleta global por uno parecido. REMAPEAR no es una buena opción para imagenes fotográficas.

DIFUMINAR LA IMAGEN A LA PALETA GLOBAL

Esto significa que GIFCon repintará tu imagen con colores que no están en la paleta global. Esto se puede conseguir utilizando un punto rojo y un punto naranja próximos uno al otro para obtener un raro marrón anaranjado. Esto es conocido como dithering (difuminado). Esto es mejor para imágenes como fotos. Algunos detalles se pueden perder.

USARLA COMO LA PALETA GLOBAL

Sólo obtienes esta opción una vez. Una imagen puede tener su paleta copiada dentro de la paleta global. Una vez hecho no puedes escoger otra. Por esta razón sugiero escoger primero tu paleta global, antes que hacerlo después.

UTILIZARLO COMO ES (PUEDE CAUSAR CAMBIOS DE COLOR)

Esta opción produce un GPF en GIFCon cuando voy a salvarlo. Se muy cuidadoso si intentas utilizarlo. Esto significa que cada color #0 usa ese color. Ves GIFs que trabajan como un color establecido por un número. Si un pixel es el color #197, el decodificador va a la paleta de color, encuentra el #197 y pinta el pixel de ese color. UTILIZARLO COMO ES simplemente utilizará la paleta GLOBAL. Esta opción a menudo no funciona.

CUANTIZACIóN DE QUINCE BITS

Esta opción producirá imágenes más atractivas si tu paleta requiere más precisión. Sin embargo esto es también más lento, sobre todo en máquinas más antiguas, pero produce gradientes más suaves, y representaciones más exactas de la imágenes de colores más subidos.

Si tienes problemas con las variaciones de color que causa GIF Con para realizar desplazamientos de color, aquí va una solución. Crea un bitmap que es un compuesto de todas las piezas de la animación, un bitmap grande. Inserta esta composición en GIF Con y construye una paleta que cubra todas las variaciones en las imágenes. Después borra la imagen, e inserta la secuencia de animación remapeando a los colores disponibles.

El BLOQUE DE IMAGEN aparecerá ahora en la Lista de Bloques. Mostrará como es la imagen de grande en pixels (anchura por altura) y cuantos colores tiene la imagen.

 HEADER GIF89A Screen (640x480)

 IMAGE 503 x 86, 256 colours

Si la imagen es más ancha o más alta que tu pantalla, ajusta la pantalla lógica para soportarla. En el ejemplo previo será ajustada para leer:

 HEADER GIF89A Screen (503x86)

 IMAGE 503 x 86, 256 colours

Vamos a editar el bloque de imagen y ver que opciones tenemos. Seleccionalo en la lista y pulsa EDIT.

Puedes especificar la posició de la X y la Y de la imagen, relativas al área de PANTALLA definida en la CABECERA del Bloque de Pantalla del GIF89A. Cero (0) izquierda y cero (0) arriba quiere decir que la imagen comienza en la esquina superior izquierda de donde está colocado el GIF en tu página web. 12 en la altura significa que la imagen comienza 12 pixels más abajo. 25 a la izquierda significa que la imagen se muestra 25 pixels a la derecha. Los valores negativos no son permitidos, así si tienes una imagen que se moverá a la izquierda, comienza con un número más alto que cero y decrece el número para mostrar movimiento hacia la izquierda. Lo mismo se puede aplicar para moverla hacia arriba, valores negativos hacia arriba no están permitidos. GIFCon tiene un error que malinterpreta estos valores. Con un cero arriba y un cero a la izquierda, las imágenes son insertadas un pixel abajo y un pixel a la derecha. Netscape no comete este error.

ENTRELAZADO DE IMÁGENES

En el Bloque de Imagen puedes especificar un entrelazado de imagen. El entrelazado de imágenes en una animación puede no entrelazar parte de primer fotograma. Mi primera animación fue entrelazada para todos los fotogramas. Continuamente veía que el entrelazado ocurría en la primera imagen pero no en las siguientes. Un GIF debe ser establecido para ser SALVADO como entrelazado, para ser mostrado como entrelazado.

BLOQUE DE EXTENSIóN DE CONTROL DE GRÁFICO

Los Bloques de Control pueden ser insertados dentro del fichero GIF. Solamente uno deberá ser insertado antes de cada imagen. Sería colocado inmediatamente antes de la imagen a controlar. Vamos a insertar un BLOQUE DE CONTROL antes de la imagen que vamos a insertar. Pincha en el bloque SOBRE la imagen (probablemente un bloque de cabecera si estás siguiendo el tutorial). Siempre que insertes, el nuevo bloque siempre aparecerá justo debajo del que está sobreiluminado en la lista actual de bloques . Pincha INSERT, escoge CONTROL.

  HEADER GIF89A Screen (503x86)

 CONTROL

 IMAGE 503 x 86, 256 colores

<P

Transparencia

Ahora puedes especificar un color para volverlo transparente. Pincha la opción de transparencia. El color de transparencia por defecto es cero (normalmente negro). Pinchando sobre un color puedes ver la paleta actual asociada con esta imagen. Selecciona el color que será transparente. Si ves múltiples instancias del color que quieres (esto sucede a menudo con el blanco) escoge su primer instancia en el mapa (leyendo de izquierda a derecha y hacia abajo). En la versión 1.0F y posteriores proporciona una herramienta de cuentagotas. Con esto puedes señalar el color que quieres para hacerlo transparente. Esto es mucho más fácil. Deberías usar el botón VIEW para verificar que la transparencia ha tenido el efecto deseado. Solamente un color puede ser transparente por imagen.

Debes insertar un bloque de control con transparencia antes de cada imagen para obtener una animación con un fondo transparente. Los bloques de control sólo afectan a la primera imagen que le sigue. Si tienes un fondo HTML definido, debes tener un bloque de control antes de la PRIMERA imagen con transparencia. Incluso si no lo necesitas pónselo y asignale algún color. Si la PRIMERA imagen está precedida por un Bloque de Control CON transparencia ACTIVADA, el Navigator reconocerá el fondo definido del HTML. De otra forma utilizará el fondo establecido en los menús del Navigator. Normalmente es el gris.

Por último, para trabajar con animaciones transparentes DEBES utilizar remove by background para cada fotograma a menos que quieras una estela de imágenes previas a la izquierda de la pantalla. Si se implementa remove by previous, será una opción alternativa. Hasta entonces utiliza "background".

Hay un error en la Transparencia con fotogramas. Mi página Link Cruiser a menudo muestra el fondo blanco del logo, en vez de mostrar de forma transparente la imagen JPeG del fondo. Esto solamente sucede en ejemplo. Es un problema de la beta6.

Espera por la Entrada de Usuario

Esto normalmente causará una parada que esperará por una entrada de usuario (o un tiempo de espera) antes de proceder. Netscape ignora esto.

Espera (Delay)

Esta espera está medida erroneamente en segundos por GIFCon antes de la versión 1.0G. Debería ser 1/100 centésimas. Esto hace imposible comprobar esperas en las primeras versiones de GIFCon. Consigue 1.0G de la página Alchemy Mindworks. Netscape maneja la sincronización de esta manera, muestra la IMAGEN, espera el tiempo deseado y procede a la eliminación. El siguiente bloque de control o de imagen tiene lugar. Esto es de acuerdo a las especificaciones GIF. La estrella girará sobre 12 segundos. La imagen posterior ocurre debido a que la eliminación es realizada a nada. (ver más abajo).

GIF Construction Set resolvió el problema de sincronización pero introdujo un serio problema para soportar el looping. Cuando ves una animación en el GIFCon no puedes interrumpir el renderizado de un fotograma. Esto es, cuando dibuja un fotograma ignora cualquier entrada. Durante la espera puedes pulsar ESCape para parar una animación. Si implementas una animación SIN esperas, NO LO EJECUTES EN EL GIF Con 1.0G. Si tienes un loop en él, nunca podrás pararlo. Tendrás que pulsar Control-Alt-Supr y rebotar el ordenador.

Netscape 2.0 tiene algunos problemas con esto. Beta3 esperará cualquier tiempo de espera en un GIF. Beta4 hasta la última versión para Windows contiene un error que impide que el GIF sea mostrado más rápido de 34/100 centésimas entre imágenes. También si tienes una espera larga, como dos segundos, el botón de STOP se difuminará y Netscape dejará de tomar tiempo de procesador para mostrar el GIF. Cuando el período de espera es elevado, el botón de STOP está disponible otra vez, y Netscape comienza a ejecutar el resto del GIF. Aunque esto no es un error, te impide parar la ejecución de la animación mientras está parada.

Remove by

Esto determina lo que se hace con la IMAGEN después del tiempo de espera o de la entrada de usuario. Hay cuatro acciones:

Nada - No hace nada. Cuando sobrescribes el fotograma completo con el siguiente fotograma es la mejor y más rápida elección. "Nada se ha hecho con la imagen".

Dejarlo Como Es - Es lo mismo que Nada. Bajo otras circunstancias estas dos opciones pueden ser tratadas de forma diferente.

Imagen Previa - Se supone que se restaura la imagen a la forma que tenía antes de que la imagen fuera colocada. Netscape no soporta esto todavía (2.0beta5). Por ahora es lo mismo que Nada. Puedes emular esto restaurando el área borrada con pequeños "trozos" de la imagen original.

Background - Pinta el fondo del browser Netscape sobre el área de la imagen. Este es normalmente gris. Se establece en el Menú del Navigator bajo OPTIONS, GENERAL PREFERENCES, COLORS. Especificas tu fondo definido en HTML o COLOR DE FONDO que será usado. Bien, no es muy convencional, pero la primera imagen necesita estar precedida por un bloque de CONTROL con la transparencia activada (cualquier color, no importa). Entonces el HTML pone el color o imagen de fondo que será pintada sobre el área de la imagen en el proceso de eliminación. Utiliza esto con animaciones transparentes.

Creando Un Flujo de Imágenes

Ok, has insertado tu primera imagen, es hora de crear el "flujo de imágenes" que el GIF nos permite. Con el último BLOQUE DE IMAGEN en GIF Construction Set destacado puedes ahora insertar la segunda imagen en la serie, después la tercera, la cuarta, la quinta, etc. Como esto...

�  HEADER GIF89A Screen (503x86)  <- Check width and height

 CONTROL

 IMAGE 503 x 86, 256 colours

 IMAGE 502 x 86, 256 colours

 IMAGE 499 x 86, 256 colours

 IMAGE 501 x 89, 256 colours   <- Note height (89)

 IMAGE 504 x 88, 256 colours   <- Note width (504)

Observa que las imágenes de ejemplo que he utilizado están cambiando ligeramente de forma. La imagen #4 es la imagen más alta con 89 pixels, y la imagen #5 es la más ancha con 504 pixels. Ambas dimensiones exceden nuestra pantalla (503x86) así que necesitamos incrementar la Pantalla Lógica en la cabecera de acuerdo con esto o arriesgarnos a un GPF en Netscape. Si necesitas posicionar cada imagen dentro de la pantalla lógica, necesitarás EDITAR cada imagen. Si, es aburrido, pero si lo necesitas, lo necesitas. Si estas imágenes tienen un color transparente, necesitarás insertar un bloque de Control antes de todas y cada una. Ahora, aquí tenemos un pequeño corte. A menos que necesites alterar la sincronización de las imágenes individuales, probablemente tendrás una serie de bloques de control idénticos: mismo color transparente, mismo tiempo de espera, y mismo removal by. Si estableces un Bloque de Control, puedes EDITARLO/COPIARLO en el clipboard. Después pincha sobre la primera imagen (así la siguiente se insertará en el punto correcto). Ahora con tus manos en el teclado... [ALT]+E, P, [flecha abajo]... y repítelo. Puedes poner esto en una macro si tienes una realmente larga con un montón de imágenes. Estos tres golpes de teclado, insertarán el bloque de Control copiado, después de insertado, el Bloque de Control será realzado. La flecha hacia abajo realzará la imagen siguiente. Este es un punto perfecto para insertar el siguiente bloque de Control. Una vez que obtienes el ritmo, puedes insertar veinte o treinta de estas en un instante. Borrarlas puede hacerse del mismo modo. Lo que tendrás al final será algo similar a esto...

 HEADER GIF89A Screen (504x89)

 LOOP               <- 1.0b versions before 1.0G of GIFCon

  CONTROL               APLICATION-DEFINED will show instead

 IMAGE 503 x 86, 256 colours     of LOOP.

 CONTROL

 IMAGE 502 x 86, 256 colours

 CONTROL

 IMAGE 499 x 86, 256 colours

 CONTROL

 IMAGE 501 x 89, 256 colours

 CONTROL

 IMAGE 504 x 88, 256 colours

Esto es como quedará un GIF animado cuando hayas terminado. Observa el LOOP, es lo que verás cuando el GIF esté construido para hacer el looping. Vamos con ello.