Cómo funciona

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.