Try the buttons below:

First you need to include som javascript files

<script type="text/javascript" src="path.js"></script>
<script type="text/javascript" src="circlePath.js"></script>
<script type="text/javascript" src="straightPath.js"></script>
<script type="text/javascript" src="animator.js"></script>

Then you create four paths and sequence them using concat.

p1 = new StraightPath(150,50,250,50,12);
p2 = new CirclePath(250,150,100,100,90,-90,30);
p3 = new StraightPath(250,250,150,250,12);
p4 = new CirclePath(150,150,100,100,270,90,30);

p = p1.concat(p2).concat(p3).concat(p4);

p = p.rotate(150,50,45);   // Rotate the path 45 degrees around (150,50)

p = p.add(new StraigthPath(100,100,100,100,1);   // Move the path 100 pixels down
                                                 // and left

After this you need to create an animator object. Like this:

a = new Animator("dot", p, 50);
a.onanimationdone = new Function("alert('Animation done!\\nPressing stop will reset the animator and then you can press play again.')");

dot is an absolutely positioned div. The animation is started using a.play() and this is done in the button above.

Author: Erik Arvidsson