<HTML> 
<HEAD>
<TITLE>DirectAnimation SDK, JScript sample</TITLE>
<SCRIPT LANGUAGE="JScript">
<!--
if (window.top.frames.length!=0 && window.top.frames[0].ShowNoButtons!=null)
    window.top.frames[0].ShowNoButtons();
//-->
</SCRIPT>
</HEAD>	 

<BODY BGCOLOR=WHITE TOPMARGIN=15 LEFTMARGIN=20>
<FONT FACE="Verdana, Arial, Helvetica" SIZE=2> 
<CENTER>
<H1>A Logo with a Spline shape</H1>
</CENTER>

<DIV ID="RedAnnotation"
  STYLE="position:absolute">
  <FONT FACE="VERDANA" COLOR=red SIZE=3>HTML <I><B>Red</B></I></FONT>
</DIV>

<DIV ID="BlueAnnotation"
  STYLE="position:absolute">
  <FONT FACE="VERDANA" COLOR=blue SIZE=4>HTML <B>Blue</B></FONT>
</DIV>

<OBJECT ID="DAControl"
  STYLE="position:absolute; left:100; top:150;width:400;height:400;z-index:-1" 
  CLASSID="CLSID:B6FFC24C-7E13-11D0-9B47-00C04FC2F51D">
</OBJECT>

<SCRIPT LANGUAGE="JScript">
<!--
  // The DirectAnimation library
  m = DAControl.PixelLibrary; 

  // the dimensions of the control
  baseX = 100;   // slightly to the right
  baseY = 150;   // slightly over
  dimX = 400;
  dimY = 400;

  // this translation is needed to map positions from DA to DHTML space
  // It is needed since DHTML has origin at upper left, while DA at center
  // the +15 and -15 are to nodge the text slightly higher and to the right
  mapXf2 = m.Translate2(dimX/2+baseX+15, dimY/2+baseY-15);

  // control points of 2D cubic BSpline
  splinePts = new Array(0,-100, -75,-200, -125,-175, -175,-125, 
                    -125,25, -25,50, 0,125, 0,125, 0,125, 
                    25,50, 125,25, 175,-125, 75,-200, 0,-100);  
  // uniform knot vector with interpolation of first and last points
  splineKnts = new Array(0,0,0,1,2,3,4,5,6,7,8,9,10,11,11,11);
  // construct the spline path
  splinePath = m.CubicBSplinePath(splinePts, splineKnts);
  
  // fill the region enclosed with the spline  
  pink = m.ColorRGB(1,0,1);
  fillImg = m.SolidColorImage(pink);      
  splineImg = splinePath.Fill(m.DefaultLineStyle, fillImg);
  
  // construct a transform that traverses the spline in duration time
  // and repeats that continually 
  dotPathXf = m.FollowPath(splinePath, 3).RepeatForever(); 
  // construct a green dot that travels along the spline
  fillImg = m.SolidColorImage(m.Green);
  // centered at origin
  dotImg = m.Oval(10,10).Fill(m.DefaultLineStyle, fillImg);
  mDotImg = dotImg.Transform(dotPathXf);

  // pause for 2 secs at first point of spline
  squarePathXf = m.Sequence(m.Translate2(0, -100).Duration(2), 
                            m.FollowPath(splinePath, 2.5).RepeatForever());
  fillImg = m.SolidColorImage(m.Blue);
  // place lower left corner at origin
  squareImg = m.Rect(10, 10).Transform(m.Translate2(5, -5)).  
                                 Fill(m.DefaultLineStyle, fillImg);
  mSquareImg = squareImg.Transform(squarePathXf);

  // blue point
  bPoint = m.Origin2.Transform(m.Compose2(mapXf2, squarePathXf));
  bPoint = bPoint.AnimateControlPositionPixel("BlueAnnotation", "JScript", 0, 0.02);
  DAControl.AddBehaviorToRun(bPoint);

  rPoint = m.Origin2.Transform(m.Compose2(mapXf2, dotPathXf));
  rPoint = rPoint.AnimateControlPositionPixel("RedAnnotation", "JScript", 0, 0.02);
  DAControl.AddBehaviorToRun(rPoint);

  // the resulting image is the travelling red dot overlaying the
  // green spline bounded region with conversion to centimeters.
  finalImg = m.OverlayArray(new Array(mDotImg, mSquareImg, splineImg));

  // set the resulting image, as the model to be displayed
  DAControl.Image = finalImg; 
  // set the background in case of a non-windowless browser (like IE3)
  DAControl.BackgroundImage = m.SolidColorImage(m.Blue); 
     
  // start the animation       
  DAControl.Start()
//-->
</SCRIPT>

<DIV STYLE="position:relative">
  <FONT FACE="Verdana, Arial, Helvetica" SIZE=2>
  <P>
  This is a DirectAnimation that animates two HTML DIV tags.
  </FONT>
</DIV>
</FONT>
</BODY>
</HTML>
