Internet Explorer Direct Animation
| The Internet Explorer comes with even more powerful tools, such as Direct Animation . Direct Animation enables you to create and move graphics and image objects of great complexity. In fact, many people find Direct Animation pretty complex to use, which may account for the fact that it's not in widespread use. (I've never seen a web page "in the wild" that uses it.) What it does can also be done in many cases with styles or other applications such as Macromedia Flash. Here's an example that uses Direct Animation. In this case, the code creates a figure made of three boxes with various colorspurple, red, green, and blueand then makes that figure slowly revolve and move above the other elements on the page, making it appear that it's floating above them. Note that this example uses the Direct Animation ActiveX control that is installed with Internet Explorer and that you access with the <OBJECT> element: (Listing 16-16.html on the web site) <HTML> <HEAD> <TITLE> Using Direct Animation </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function animate() { var library = DAControl1.MeterLibrary var surface = library.NewDrawingSurface() surface.FillColor(library.ColorRgb(1, 0, 1)) surface.FillPath(library.Polyline(Array(0, 0, 400, 0, 400, 400, 0, 400, 0, 0))) surface.FillColor(library.ColorRgb(1, 0, 0)) surface.FillPath(library.Polyline(Array(200, 0, 0, 400, 400, 400, 200, 0))) surface.FillColor(library.ColorRgb(1, 0, 1)) surface.FillPath(library.Polyline(Array(0, 0, -400, 0, -400, -400, 0, -400, 0, 0))) surface.FillColor(library.ColorRgb(0, 1, 0)) surface.FillPath(library.Polyline(Array(-200, -400, -400, 0, 0, 0, -200, -400))) surface.FillColor(library.ColorRgb(1, 0, 1)) surface.FillPath(library.Polyline(Array(-400, -400, -800, -400, -800, -800, -400, -800, -400, -400))) surface.FillColor(library.ColorRgb(0, 0, 1)) surface.FillPath(library.Polyline(Array(-600, -800, -800, -400, -400, -400, -600, -800))) var axis = library.Vector3(40, 40, 40) var startPoint = library.Point2(-2000, 0) var endPoint = library.Point2(4000, 0) var path = library.FollowPath(library.Line(startPoint, endPoint), 10) var twist = library.Rotate3RateDegrees(axis, 180).Duration(10).ParallelTransform2() DAControl1.Image = surface.Image.Transform(twist). Transform(path).Transform(library.Scale2(1./30000., 1./30000.)) DAControl1.Start() } //--> </SCRIPT> </HEAD> <BODY> <H1> Using Direct Animation </H1> <FORM> <INPUT TYPE="BUTTON" VALUE="Click me!" ONCLICK="animate()"> </FORM> <OBJECT ID="DAControl1" STYLE="position:absolute; left:10%; top:10%; width:90%; height:90%" CLASSID="CLSID:B6FFC24C-7E13-11D0-9B47-00C04FC2F51D"> </OBJECT> <BR> <BR> Animated graphics that can move over page elements... </BODY> </HTML> You can see the results in Figure 16.14, where the figure I've created is twisting and turning and moving to the right over the underlying text. Note that it's not clear whether Microsoft will continue to support Direct Animation in the future (in fact, there are indications that it will not), now that .NET has been introduced. However, Direct Animation has been around since Internet Explorer 5.0 and is still shipping with the most recent versions of Internet Explorer 6.0. Figure 16.14. Using direct animation. That completes our look at making web page content dynamic, in this chapter. In the next chapter, we're going to take a look at some related topics: drag and drop, data binding, and behaviors, as we continue our exploration of Dynamic HTML.  |
