HTMLpointHTMLpoint HTMLpoint.com


 Botones animados ... 1/2

  semana 33 - 20 septiembre 1999

El Javascript de esta semana es algo más complejo que la media de los ejemplos presentados hasta ahora, pero es capaz de generar un efecto gráfico muy interesante: al pasar el ratón, botones aparentemente inanimados se activan con una serie de imágenes en secuencia. El efecto que se obtiene es muy sugestivo y, sin hacer muchas digresiones, te invitamos a juzgarlo tú mismo visualizando el esempio html adjunto.

El script es compatible con Ms Internet Explorer y Netscape Communicator y prevé el uso de algunas imágenes. En particular, el ejemplo presentado se compone de 6 imágenes para cada botón, creadas con Paint Shop Pro 5 y guardadas en formato GIF a 16 colores. Para verificar el modo en que hemos creado las imágenes, visualízalas una a una con un programa de gráfica (AcDsee, por ejemplo). Y sin más preámbulor, pasamos enseguida a analizar el código script.

El ejemplo consta de 14 file:
Para comprender más fácilmente el presente script, haz siempre referencia a los file antedichos, verificando los procedimientos y datos expresados. Sólo de esta manera, con una comparación continua, podrás entender las peculiaridades de este Javascript.

amimate.js

Este file Javascript externo es parte integrante del ejemplo.
Las primeras líneas de código:

var AnimationRunning = false;
var FrameInterval = 30;

indican respectivamente el estado de la animación y el intervalo de tiempo en milésimas de segundo entre una imagen y otra. Por tanto, para acelerar o hacer más lento el efecto gráfico animado, es necesario intervenir en este valor.

La línea de código:

this[i].src = "immagini" + name + "/" + i + ext;

Indica con "immagini" el nombre de la carpeta en la cual se deberán insertar las ulteriores carpetas de cada uno de los botones. Dicho de otro modo, esta línea indica el recorrido de las imágenes que, de vez en vez, hay que seguir:

"immagini" - carpeta principal de las imágenes
+ name + "/" - subcarpeta distinta para cada uno de los dos botones
+ i - nombre de la imagen (da 0 a 5)
+ ext; - extensión del formato gráfico de la imagen (.gif)


  Vuelve a principio de página