Inside Technique : Time Master : Timeline Object

We started this article with a quick demonstration of the TimeLine object. We built the timeline master to simplify passing arguments to timers and to better sequence events. The TimeLine object wraps and extends the built-in timer functionality. In addition, the TimeLine makes it easy to choreograph sequences or create quick loops, and best of all, the TimeLine object works with JavaScript aware browsers. Depending upon what and how you are animating, your code can become tied to a specific browser.

To use the TimeLine object, you need to copy or include the following script on your web page:

  // TimeLine Object
  // Copyright 1998 InsideDHTML.com, LLC. All rights reserved
  // For more information, see http://www.insideDHTML.com

  // This code can be reused as long as the above copyright notice is maintained

  // Track timers
  var timerList = new Array
 
  function Timeline() {
    this.list = new Array
    this.max = 0
    this.index = timerList.length
    this.counter = 0
    this.loopCount = 0
    timerList[this.index] = this
    this.add = Timeline_Add;
    this.run = Timeline_Run;
    this.running = false
    if (arguments[0]==null)
      this.loop = 1
    else
      this.loop = arguments[0]
  }

  function Timeline_Add(ms, fn) {
    if (this.list[ms]==null)
      this.list[ms] = new Array
    var idx = this.list[ms].length
    this.list[ms][idx] = new Object
    var item = this.list[ms][idx]
    item.fn = fn
    if (ms>this.max)
      this.max = ms 
    var args = new Array
    for (var i=2; i < arguments.length; i++)
      args[i-2] = arguments[i]
    item.args = args
  }


  function Timeline_Run() {
    this.running = true
    for (var item in this.list[this.counter]) 
        this.list[this.counter][item].fn(this.list[this.counter][item].args)
    if (this.counter>=this.max)   {
      if (this.loop>0)
        this.loopCount++
      this.counter = 0
    }
    var next = 0
    while ((this.counter0))))
      this.timerID = setTimeout("timerList["+this.index+"].run()",next)
  }

Using the Timeline Object

The Timeline object is very easy to use. To explain how to use the Timeline object, we will build a fading text demonstration. The code that hides and shows each letter is specific to Internet Explorer 4.0 and is based on a demonstration sent to us by Jesse Alston. The first step is to construct a new Timeline object. When you construct the Timeline, you can specify how many times to repeat the timeline once it starts running:

  var jesseDemo = new Timeline()  // always repeats
  var jesseDemo = new Timeline(0) // same as above - always repeats
  var jesseDemo = new Timeline(3) // Repeats 3 times

Once the Timeline is constructed, the next step is to add the actions to the Timeline object:

  function runJesseDemo() {
    // This loop adds 11 actions to the demo Timeline
    // that each occur 200 milliseconds apart
    if (!jesseDemo.running) {
      jesseDemo.loopCount = 0
      jesseDemo.run()
   }
  }


  for (var i = 1; i <= 11; i++) 
    jesseDemo.add((i*500),show_letter,document.all["let"+i])

  for (var i=1; i <= 11; i++)
    jesseDemo.add((i*500) + (11*500),hide_letter, document.all["let"+i])

The next step is to write the actual code that hides and shows each letter:

function show_letter(args) {
 args[0].filters[0].apply()
 args[0].style.visibility = "visible"
 args[0].filters[0].play()
}
 
function hide_letter(args) {
 args[0].filters[0].apply()
 args[0].style.visibility = "hidden"
 args[0].filters[0].play()
}

To create the effect, each letter needs to be inside of a constrained element (have a fixed width and height). This is so the filter can be properly applied. The easiest way to do this is to use a table where each cell contains a single letter:

<TABLE ID=jesse><TR>
<TD ID="let1">I</TD>
<TD ID="let2">N</TD>
<TD ID="let3">S</TD>
<TD ID="let4">I</TD>
<TD ID="let5">D</TD>
<TD ID="let6">E</TD>
<TD ID="let7">D</TD>
<TD ID="let8">H</TD>
<TD ID="let9">T</TD>
<TD ID="let10">M</TD>
<TD ID="let11">L</TD>
</TR></TABLE>

Last we create a button to run the actual demo. (The button is displayed and the demo is runnable only in IE4).

<INPUT TYPE=button ONCLICK="runJesseDemo()" VALUE="Run Demo">

On this page we created an Internet Explorer 4.0 only example. However, as we demonstrated on our first page, the Timeline object itself is designed to run on all JavaScript aware browsers. In future articles, we will use the Timeline object to build cross-browser animations. Next, we provide commented source for the Timeline object.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.