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

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.

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.

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.

Cualquier idea, sugerencias, utilidades o ejemplos, por favor envíamelos para incluirlos en esta página.

Royal Frazier

Ir al MENÚ en la parte superior de la página