Inside Technique : Animation Toolkit : Extending the Toolkit

In this section, we explain how path object are created to demonstrate extending the Animation Toolkit. Custom path objects inherit basic functinality from a base path object and contain custom logic and script necessary to calculate and sequence the next position for the element.

Defining Path Objects

All paths have properties representing the current position of the element and methods to move the element to the next position. The code for these properties and methods must be implemented by the path object and be exposed exactly as follows. These members are used by the Animator object to determine the element's current position and to calculate the next position.

To simplify path creation, all paths inherit additional methods from a top-level Path object: concat(), add(), and rotate(). The object hierarchy for the StraightPath and CirclePath objects demonstrating this inheritance is shown below. Notice that the concat, add, and rotate methods are defined by the base Path object.

	Path this.concat() this.add() this.rotate()
StraightPath this.x this.y this.step() this.reset()		CirclePath this.x this.y this.step() this.reset()

By using inheritance, the concat, rotate, and add methods for added to the Path objects for free. There is no need to write any code for them.

The inheritance in javascript is defined using the JavaScript prototype property exposed by all objects. To inherit the Path object, we instantiate an instance of the path object and assign it to the object's prototype. This extends the object with all the members of the Path object. Below is how we made the StraightPath object inherit from the base Path object:

StraightPath.prototype = new Path;

Using inheritance,the following line of script is valid, assuming p1, p2, and p3 are an object inherited from Path (eg., StraightPath, CirclePath or any other path that you have created).

// Assuming p1, p2, and p3 are Path objects
p1 = p2.concat(p3);

Next we take you through the steps of building your own custom sinus path object.

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