Behind the Scenes

This sample uses three files:

- TLFish.htm contains the Timeline control and other functions to control the objects on the page.
- FishLeft.gif is an animated GIF of a fish swimming to the left.
- FishRght.gif is an animated GIF of a fish swimming to the right.

The Timeline control fires events that call JavaScript functions to control the fish and change the Z-order of the seaweed.

The following code is called by the Timeline control when the fish is about to swim to the right. Before the fish begins to swim, the Z-order of the seaweed is changed, the animated GIF of the fish swimming left (FishLeft.gif) is hidden, the animated GIF of the fish swimming right (FishRght.gif) becomes visible. Then the function calls the play method of the Timeline control to start the animation.

function Swim_goRight()
{
plant2.style.zIndex=-2 //make plant2 move to the back
plant1.style.zIndex=1 //make plant1 move to the foreground
plant3.style.zIndex=1 //make plant3 move to the foreground
fishl.style.visibility="hidden"
fishr.style.visibility="visible"
Right.play()
}

The Timeline control will then call another JavaScript function that will move the fish 5 pixels every 100ms:

var moveInc = 5
function Right_frameRight()
{
fishr.style.left = fishr.style.pixelLeft + moveInc
fishl.style.left = fishl.style.pixelLeft + moveInc
}

When the fish has gotten to the right side of the screen, the Timeline control will use similar functions to make the fish swim to the left.