The slide methods provide an easy solution for creating simple straight-line animations. I've included the slide methods into the standard DynLayer, but initially the slide methods are not available to use. You you have to initialize the slide methods before-hand to apply the slide methods to that DynLayer. That way you can selectively choose which of your DynLayers can be slide so that a minimum amount of resources are used. Optionally you could initialize all your DynLayers to recieve the slide methods by changing the code so that it automatically calls the initialize command when the DynLayers are created.
Initialize The Slide Methods:
To apply the slide methods to a DynLayer you call the slideInit() method:
objectName.slideInit()
Once you do that, 2 additional methods are added to the DynLayer by which you use to slide the layer.
The slideTo() Method:
The slideTo() method will slide the DynLayer to a specific coordinate.
objectName.slideTo(endx,endy,inc,speed,fn)
If you want the DynLayer to slide in a horizontal line pass null for the endy value. And if you want the DynLayer to slide in a vertical line pass null for the endx value.
Examples:
To slide the DynLayer to coordinate (100,50), in increments of 10 pixel units, at 20 milliseconds per repetition:
mylayer.slideTo(100,50,10,20)
To slide the DynLayer horizontally to the x-coordinate 80:
mylayer.slideTo(80,null,5,30)
To pop up alert to notify when a slide is complete:
mylayer.slideTo(100,50,10,20,'alert("The slide is complete")')
When using the fn property from a hyperlink you must do a trick with the quotes:
<A HREF="javascript:mylayer.slideTo(100,50,10,20,'alert(\'The slide is complete\')')"></A>
The slideBy() Method:
The slideBy() method will slide the DynLayer to another coordinate by defining the amount of pixels to shift from it's current location (similar to moveBy() but animated). The usage is very similar to slideTo():
objectName.slideBy(distx,disty,inc,speed,fn)
If you want the DynLayer to slide in a horizontal line pass 0 for the endy value. And if you want the DynLayer to slide in a vertical line pass 0 for the endx value.
Examples:
To slide the DynLayer on a diagonal 40 pixels left and 60 pixels down:
mylayer.slideBy(-40,60,5,20)
To slide the DynLayer 50 pixels to the right:
mylayer.slideBy(50,0,5,20)
Making Sequences:
I left the fn property so that you always have a way of determining when the slide is complete. By taking advantage of this feature you can link a series of slide()'s together to make a sequence of animations. Here's an easy way to accomplish a sequence:
seq1 = 0
function sequence1() {
seq1++
if (seq1==1) {
// commands for first part of sequence
// link the slide back to this function to keep it going
mylayer.slideBy(50,0,10,20,'sequence1()')
}
else if (seq1==2) {
// commands for seconds part of sequence
}
else seq1 = 0 // reset to 0 so you can play the sequence again
}
Slide Methods Demo:
View dynlayer-slide1.html for an example with different variations of the slide methods and sequences.
| Home | Next Lesson: Geometric Objects |