Este ejemplo utiliza tres archivos:
El control Timeline activa eventos que llaman a funciones de JavaScript para controlar el pez y cambiar el orden del zigzag del alga.
El control Timeline ejecuta el fragmento de código siguiente cuando el pez está a punto de nadar hacia la derecha. Antes de que el pez empiece a nadar, se cambia el orden del zigzag del alga, se oculta el GIF animado del pez que nada hacia la izquierda (FishLeft.gif) y se hace visible el GIF animado del pez que nada hacia la derecha (FishRght.gif). A continuación, la función llama al método de reproducción del control Timeline para iniciar la animación.
function
Swim_goRight()
{
plant2.style.zIndex=-2 //Colocar la planta 2 detrás
plant1.style.zIndex=1 //Colocar la planta 1 en el frente
plant3.style.zIndex=1 //Colocar la planta 1 en el frente
fishl.style.visibility="hidden"
fishr.style.visibility="visible"
Right.play()
}
El control Timeline llama entonces a otra función de JavaScript que mueve el pez 5 píxeles cada 100 milisegundos:
var moveInc =
5
function Right_frameRight()
{
fishr.style.left =
fishr.style.pixelLeft + moveInc
fishl.style.left = fishl.style.pixelLeft + moveInc
}
Cuando el pez ha alcanzado el lado derecho de la pantalla, el control Timeline utiliza funciones similares para hacer que el pez nade hacia la izquierda.