How to Fly Text Through an Oval Path

Stretching the concept of flying text in Dynamic HTML one step further, this article describes how to fly text through a path—in this particular case, an oval path.

In general, flying text is implemented by manipulating the position of elements on a page over time through dynamic positioning. The Flying Text article covers the details of flying text through positioning. The article flies text through a straight path—vertical, horizontal, or diagonal—on a specified increment. Although flying text through a more complex path through positioning is possible, it requires a geometric algorithm to implement. The How to Fly Text in Geometric Patterns article demonstrates how to do this by flying text diagonally on a page using a little bit of algebra to calculate different slopes.

The sample described in this article uses the DirectAnimation™ path control, which makes implementation very easy with a few lines of code. By simply specifying a target object to be moved, the path control moves the object around the page over time in a geometric pattern. One limitation to using the path control is that it's specific to Microsoft® Internet Explorer 4.0.

The following steps outline how to fly text through an oval path.

Define the text to fly.
The path control requires the top and left properties (or CSS attributes) of the target object be set. Since the text being defined here is the target object, the top and left attributes have been set below.
Deciding whether to use absolute or relative position depends on where the text is with respect to the rest of the document. Whereas absolute removes the object from the default flow of the document, allowing the object to be positioned as specified in the (top,left) attributes, relative positions the object at an offset from where it's supposed to be in the flow. For more information, see Positioning.
```
<span ID="TextToFly" 
    STYLE="position: absolute; top: 125; left:70; 
        font: bold 20pt 'Arial'; color:white">
http://msdn.microsoft.com/workshop</span>
```
Insert a DirectAnimation path control .
Because it's an ActiveX® control, the path control is inserted into the page with an OBJECT element, specifying the correct CLASSID. This CLASSID is unique to the path control and should be specified exactly as shown in the sample.
Specify the parameters to the path control as follows:
- Duration specifies how long it takes (in seconds) to fly the text through the entire path.
- Shape specifies the Oval path to fly the text through. With the absence of a tool that sizes and positions the oval as appropriate, the only way to specify the correct parameters to this Oval method is by trial and error.
- AddTimeMarkerX sets a time marker (specified in seconds) that fires an event when playback reaches that marker position, where X is the nth time marker set. In the sample below, the time marker is set at the halfway point, at which time text flying stops. Because Duration has been set to two seconds, the halfway point is at one second, so the time marker is set accordingly.
- Target specifies the identifier of the target object to follow the path.
```
<OBJECT ID="pthOval"  
    CLASSID = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"
    <PARAM NAME="Duration"       VALUE="2">
    <PARAM NAME="Shape"          VALUE="Oval(-1400,100,1400,200)">
    <PARAM NAME="AddTimeMarker1" VALUE="1.0, HalfwayPt, 0">
    <PARAM NAME="Target" VALUE="TextToFly">
</OBJECT>
```
When the onplaymarker event fires as a result of the HalfwayPt time marker defined in Step 2c above, stop the flying at its current position.
```
<SCRIPT LANGUAGE="JavaScript" FOR="pthOval" EVENT= onplaymarker ("HalfwayPt")>
    pthOval.Stop;   
</SCRIPT>
```
Start flying.
```
<script>
    pthOval.Play;
</script>
```

Click the Show Me button to see a working sample and view the source code. The sample is part of a slide show presentation and has been set up to work with a specific configuration. The sample is best viewed on an 800 x 600 display, with the browser set to full-screen mode. (The sample also applies a transition to the company logo, which is not covered in this article. See How to Apply a Transition on an Image.)

This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

The following links provide more information about flying text through a path.