Slide Sequences

The slideEnd Event

All slide methods support the slideEnd event. This allows you to specify an action that is executed after the current slide has completed and makes it easy to sequence a series of slides. For slide methods, there are two different ways to specify the slideEnd event listener.

The Inline slideEnd Event Listener

The first way is to provide the slideEnd listener as the last argument to the slide method. In this case, the listener is not a function reference, but just a string that will be evaluated. The slideEnd listener will only be evaluated once, at the end of the current slide. For example:

var e1;
function windowOnload() {
  e1 = document.getElementById('E1').cbe;
  e1.slideTo( 'nw', 0, 1000, "e1.slideTo('ne',0,1000)" );
}

Example 1

This will cause e1 to make a one second slide to the north-west corner of it's container. At the completion of this slide, the last argument will be evaluated, which will cause e1 to make a one second slide to the north-east corner of it's container. The following CrossBrowserElement methods accept a slideEnd listener as the last argument:

• autoClip()
• moveTo()
• moveBy()
• resizeTo()
• resizeBy()
• slideTo()
• slideBy()
• ellipse()
• parametricEquation()
• slideCornerTo()
• slideCornerBy()

This feature can be nested, but it gets cumbersome. Here's an example:

var e2;
function windowOnload() {
  e2 = document.getElementById('E2').cbe;
  e2.slideTo( 'nw', 0, 1000,
    "e2.slideTo('ne',0,1000,
    'e2.slideTo(\"se\",0,1000)')"
  );
}

Example 2

This will cause e2 to slide to the north-west corner, then slide to the north-east corner, and then slide to the south-east corner of it's container. As you can see, this gets messy because you have to escape the quote characters. However, it is convenient for sequences with 2 or 3 slides, and when you don't want the sequence to repeat.

Top

The Formal slideEnd Event Listener

The second way to specify the slideEnd event listener is to write a function that will serve as the slideEnd event listener, then add the listener to the element with the addEventListener method. Then after any slide, your listener will be called. This will remain in effect until you remove the listener with the removeEventListener method. For example:

var e1;
function windowOnload() {
  e1 = document.getElementById('E1').cbe;
  e1.addEventListener('slideEnd', mySlideEndListener, false);
  e1.slideTo('center', 0, 500);
}
function mySlideEndListener(cbe) {
  cbe.ellipse(200, 200, 0, 2000, 0, 360);
}
function stopExample3() {
  e1.stopSlide();
  e1.removeEventListener('slideEnd', mySlideEndListener, false);
}

Example 3: Run Stop

Wouldn't it be nice if mySlideEndListener would call a different slide method each time? Then we would have a nice slide sequence. As I experimented with these ideas, I eventually came up with two more CrossBrowserElement methods to support slide sequences.

The Slide Sequence Methods

var e1;
function windowOnload() {
  e1 = document.getElementById('E1').cbe;
  e1.sequence = new Array(
    "slideTo('n',0,1000)",
    "slideTo('center',0,1000)",
    "slideTo('ne',0,1000)",
    "slideTo('center',0,1000)",
    "slideTo('e',0,1000)",
    "slideTo('center',0,1000)",
    "slideTo('se',0,1000)",
    "slideTo('center',0,1000)",
    "slideTo('s',0,1000)",
    "slideTo('center',0,1000)",
    "slideTo('sw',0,1000)",
    "slideTo('center',0,1000)",
    "slideTo('w',0,1000)",
    "slideTo('center',0,1000)",
    "slideTo('nw',0,1000)",
    "slideTo('center',0,1000)"
  );
}

Example 4: Run Stop

The method startSequence([uIndex]) takes an optional unsigned integer argument that sets the initial index into the sequence array (starting with cbe_v4b3).

For convenience, the following variables are in scope during the evaluation of an element of the sequence array.

• cbe - this element
• w - this element's width()
• h - this element's height()
• pw - this element's parent's width
• ph - this element's parent's height

For example:

var e2;
function windowOnload() {
  e2 = document.getElementById('E2').cbe;
  e2.sequence = new Array(
    "slideTo('e', 0, 500)",
    "ellipse(pw/2-(w/2), ph/2-(h/2), 0, 1000, 0, 90)",
    "slideTo('n', 0, 500)",
    "ellipse(pw/2-(w/2), ph/2-(h/2), 0, 1000, -90, -180)"
  );
}

An easy way to make the sequence cycle only once is to include a call to stopSequence() as the last entry in the sequence array. For example:

var e2;
function windowOnload() {
  e2 = document.getElementById('E2').cbe;
  e2.sequence = new Array(
    "slideTo('e', 0, 500)",
    "ellipse(pw/2-(w/2), ph/2-(h/2), 0, 1000, 0, 90)",
    "slideTo('n', 0, 500)",
    "ellipse(pw/2-(w/2), ph/2-(h/2), 0, 1000, -90, -180)",
    "stopSequence()"
  );
}

Example 5: Run Stop

Top

Slide Sequence Implementation

In CBE...

When an object's slide method is called, these events are generated: slideStart, slide, and slideEnd. The objects also have methods: startSequence() and stopSequence(). They assume that the object has a property named sequence, which is an array of slide method calls... something like this:

var e2 = document.getElementById('E2').cbe;
e2.sequence = new Array(
  "slideTo('e', 0, 500)",
  "ellipse(pw/2-(w/2), ph/2-(h/2), 0, 1000, 0, 90)",
  "slideTo('n', 0, 500)",
  "ellipse(pw/2-(w/2), ph/2-(h/2), 0, 1000, -90, -180)"
);

When an object's startSequence() method is called, the following function is added to the object as its slideEnd event listener, and then the function is called one time to kick it off. After that, the function will be called each time the object completes a slide.

function cbeSlideSequence(cbe) {
  var
    pw = cbe.parentNode.width(),
    ph = cbe.parentNode.height(),
    w = cbe.width(),
    h = cbe.height();
  if (cbe.seqIndex >= cbe.sequence.length) cbe.seqIndex = 0;
  eval('cbe.'+cbe.sequence[cbe.seqIndex++]);
}

Each object has a property named seqIndex, which is used as an index into the sequence array. Each time the slideEnd event listener is called it causes the object to call the method in the current index of the array. It then increments the array index, preparing for the next call.

Writing Your Own...

Slide sequences were not too hard to implement since the slideEnd event feature was already in place. If you don't already have something like that in place, your motion loop will probably have some if statement which determines if the object has reached its target point or time. That's where you can call a function similar to cbeSlideSequence().