The Path Control | Dynamic HTML in Action

The Path control provides a powerful, flexible mechanism for controlling the movement of objects over time. This control lets you define a path of almost any shape, target an object to move along the path, set the direction and the duration of movement, and even set markers on the path that can be used to call other events.

Again, an <OBJECT> tag must be added to the page to use the Path control. Its CLASSID is as follows:

 CLASSID="CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"

<PARAM> tags and script can be used to control many aspects of the Path control's behavior, including the direction of movement and whether the path is used automatically or requires script to start. Here is a partial list of the properties you can use with the Path control.

Property	Description
AutoStart	Specifies whether the path should start playing automatically when it loads (-1 or true) or not (0 or false).
Bounce	Specifies the behavior of the path when it reaches its end. If set to 1 or true, the object on the path will reverse direction and continue in the opposite direction. If set to 0 or false, the object on the path simply stops.
Direction	Specifies whether the path is followed in a forward direction (0) or in reverse (1).
Duration	Specifies the how long the path should take to get from beginning to end in ss.mss (seconds.milliseconds).
PlayState	Returns the playback state of the path. PlayState returns one of three values: 0 if the path is stopped, 1 if the path is playing, and 2 if the path is paused. This property is read-only.
Repeat	Specifies the number of times the path should loop its playback. A value of 0 disables the Repeat property; a value of -1 sets up an infinite loop. The default value is 1.
Target	Specifies the target object (using the value of the object's ID attribute) for the path.
Time	Returns how long the path has been running.
TimerInterval	Specifies how frequently the path is updated.

Code Listing 19-5 demonstrates a simple use of the Path control to manipulate some text around an oval path.

Code Listing 19-5.

 <HTML> <HEAD> <TITLE>Code Listing 19-5</TITLE> <OBJECT ID="pthOval"   CLASSID="CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6">   <PARAM NAME="AutoStart" VALUE="true">   <PARAM NAME="Repeat" VALUE="2">   <PARAM NAME="Bounce" VALUE="true">   <PARAM NAME="Duration" VALUE="7">   <PARAM NAME="Shape" VALUE="Oval(100,75,300,200)">   <PARAM NAME="Target" VALUE="Text1"> </OBJECT> </HEAD> <BODY> <SPAN ID="Text1" STYLE="position:absolute">An Oval Path</SPAN> </BODY> </HTML>

When the page created in Code Listing 19-5 is loaded, the path automatically starts. The path playback is set to take seven seconds to complete. This example uses the Path control's Oval method to define the shape of the path. The Path control supports a number of useful methods, including those listed in the table below.

Method

Description

Oval

Creates an oval as the path, following the same format as the Structured Graphic Oval method.

Polygon

Creates a multisided closed shape for the path.

PolyLine

Creates a path from a set of line segments.

Rect

Creates a rectangle as the path, following the same format as the Structured Graphic Rect method.

Spline

Creates the path from a curve derived from a polynomial function and a set of defining points.

Play

Starts the object moving on the path from the current elapsed time.

Stop

Stops movement and returns path to the beginning.

Pause

Stops movement and keeps the current elapsed time.

Seek

Sets the position to a specified point.

AddTimeMarker

Sets a marker that causes an onmarker event to be fired when the path reaches the marker position. The HTML code

<PARAM NAME="AddTimeMarker" VALUE="3,MarkerTest,true">

would cause a marker named MarkerTest to be set three seconds into play. The true value means that marker-related events will be fired. This is the equivalent of the JScript PthOval.AddTimeMarker(3,"MarkerTest,true").

KeyFrame

Sets specific x,y points along the path and a designated time to reach each point. It can be set through script as follows:

 KeyFrameArray=new Array(x1,y1, x2,y2,...xN,yN) TimeArray=new Array(Time2, Time3,...TimeN) PthCtrl.KeyFrame(N,KeyFrameArray,TimeArray)

The Path control also supports a number of useful events. The onplay, onpause, onstop, and onseek events are fired as the state of the control's playback changes. The onmarker and onplaymarker events are fired when the path reaches a point in the path specified with the AddTimeMarker method. The difference between the two is that onplaymarker is fired only if the marker is passed while the control is playing, while onmarker is fired even if the seek method is used to move to that point.