COMO CREAR UN GRÁFICO ANIMADO PARA UNA PÁGINA WEB


Construir un gráfico animado, puede ser de lo mas provechoso para destacar algo en una página Web.

El primer paso es crear tantas imágenes como movimientos queramos que tenga el gráfico. Es importante tener en cuenta el tamaño (en Kb) de las imágenes, ya que unos archivos de gran tamaño provocan la lentitud de la página Web, recomendamos que cualquier archivo no supero los 10 Kb. En el momento que tengamos todas las imágenes creadas, necesitaremos un programa que junte estas imágenes en un solo archivo, y cree movimiento entre ellas a una velocidad especifica.
Para este fin, os vamos a especificar los dos programas que conocemos para Windows 95.
* Gif Construction Set
* Microsoft Gif Animator

Los dos son muy similares, pero explicaremos el Gif Construction Set, ya que es el que utilizamos frecuentemente.

Para mostrar el manejo del programa, vamos a crear una simulación con 4 gráficos.
- Grafico1
- Grafico2
- Grafico3
- Grafico4
(los gráficos pueden tener la extensión GIF, BMP y JPG)
Una vez tengamos los gráficos creados, el programa instalado y en funcionamiento, abrimos un nuevo archivo pulsando sobre FILE y NEW. En la pantalla aparecerá : HEADER GIF89a Screen (640x480). 640x480 indica el tamaño de la pantalla en pixeles, si deseamos modificar ese tamaño, debemos pulsar sobre el botón EDIT estando seleccionada la línea en concreto.

El segundo paso es insertar las imágenes, para ello pulsaremos sobre el botón INSERT, y luego en IMAGE. En ese momento nos aparecerá la típica pantalla del Windows, en la cual seleccionaremos la primera imagen (Grafico1). Una vez hayamos seleccionado la primera imagen, nos aparecerá una tabla a elegir el tipo de paletta de colores, pulse en OK. Y así sucesivamente hasta insertar las 3 imágenes restantes.

Ahora en su pantalla ya tiene que tener las 4 imágenes insertadas. Si pulsa sobre el botón VIEW, vera únicamente la ultima imagen de las 4 insertadas, y sin movimiento, pero el ordenador si que ha enseñado las 4 imágenes, lo que a una velocidad tal que no le ha dado tiempo a verlas. Para volver a la pantalla anterior pulse sobre el botón derecho del Mouse o Esc.

Ahora vamos a hacer que cuando llegue a la ultima imagen, repita el proceso de nuevo empezando por la primera (secuencia circular). Para ello pulse sobre el botón INSERT y sobre LOOP, esto insertara debajo de la primera línea el comando LOOP, que significa que cuando haya mostrado todas las imágenes vuelva al principio. Si vuelve a pulsar sobre VIEW, vera que se muestran las 4 imágenes constantemente, pero el problema es que se muestran muy rápido.

Este programa nos permite poner un temporizador a cada imagen, y para ello nos situamos encima de la primera imagen (Grafico1) y pulsamos sobre el botón INSERT y sobre CONTROL. Esta acción crea debajo de la primera imagen un comando CONTROL.
Nos situamos encima del comando CONTROL y pulsamos sobre el botón EDIT. Esto nos mostrara una pantalla muy interesante, ya que desde aquí podremos poner transparencia a un color de la imagen e indicar el tiempo (expresado en milisegundos) que queremos que se vea la imagen en la pantalla.

Para darle transparencia a un color de la imagen, seleccionaremos la casilla "TRANSPARENT COLOR", y pulsaremos sobre la casilla de la derecha que sirve para seleccionar el color de la imagen a transparentar.

De momento solo incluiremos un tiempo a esa imagen, introduciendo en el apartado DELAY el tiempo de visualización de la imagen en milisegundos. Para esta prueba colocaremos 100 milisegundos, que equivale a 1 segundo. Pulse OK.

Repita la misma operación con las 3 imágenes restantes.

Una vez terminado el proceso, pruebe a pulsar sobre el botón VIEW, vera que se muestran las 4 imágenes separadas por 1 segundo de intervalo.

Ahora puede usted jugar con el intervalo de tiempo de cada imagen según le convenga.

Solo le queda guardar las cuatro imágenes en una (recuerde que la imagen se guarda en formato GIF). Para guardar la imagen pulse en el apartado FILE del menú, en la opción SAVE.

Solo me queda comentarle, que si abre la imagen con un programa gráfico, solo vera una imagen, y que para poder ver la imagen en movimiento tendrá que incluirla en el código de una página Web.

Recuerde el tamaño del archivo, es muy importante.

Estos programas, permiten mas opciones que ya iréis descubriendo con el uso. Nosotros solo hemos intentado aproximaros el manejo básico de la animación.