This example attaches a timeline specified with HTML+TIME to an image animated with DirectAnimation. The onOffBehavior property is used to display one image while the animation is running, and to display a different image while the animation is stopped.
<HTML>
<HEAD>
<TITLE>progressBehavior</TITLE>
<XML:NAMESPACE PREFIX="anim"/>
<STYLE>
.time { behavior: url(#time); }
anim\:DA { behavior: url(#default#anim); }
</STYLE>
<OBJECT ID="time" CLASSID="CLSID:476C391C-3E0D-11D2-B948-00C04FA32195">
</OBJECT>
</HEAD>
<BODY>
<P>An image of the sun is displayed before the DirectAnimation
behavior starts. Five seconds later, a new image replaces the
image of the sun. The new image fades out during five seconds
of animation, and the original image of the sun reappears.</P>
<SPAN ID="spanImg" CLASS="time" t:TIMEACTION="visibility" t:BEGIN="5"
t:DUR="5">
</SPAN>
<DIV ALIGN="center">
<anim:DA ID="da1" STYLE="width:504; height:126; z-index: -1;" />
</DIV>
<BR>
<BUTTON >Restart</BUTTON>
<SCRIPT LANGUAGE="JScript">
<!--
// Assign a variable to the DA statics library
m = da1.statics;
// Create the DAImages
img1 = m.ImportImage("/workshop/graphics/solarsys.gif");
img2 = m.ImportImage("/workshop/graphics/sun.gif");
// Display image 1 while the behavior is running, and
// image 2 while it is stopped.
img3 = m.Cond(spanImg.onOffBehavior, img1, img2)
// Animate the opacity of the image from 100% to 0%, based on the
// progress of the time behavior. Use (1 - progress) to get the
// proper opacity.
img4 = img3.OpacityAnim(m.Sub(m.DANumber(1),spanImg.progressBehavior));
// Set the image of the DA Object to be the final image behavior
da1.image = img4;
//-->
</SCRIPT>
</BODY>
</HTML>