Timeline Sample

See Also      

This sample shows how to use the Timeline design-time control to move an object back and forth across the screen. An animated fish swims a figure eight around some seaweed. This sample requires Microsoft^® Internet Explorer 4.x.

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.