Dynamic HTML in Action

The Structured Graphics control is an effective and versatile tool for adding lightweight graphics to a Web document. Structured graphics are vector-based (meaning that they are constructed out of a series of lines and curves, rather than pixel by pixel like a JPG or GIF image) and tend to have very small file sizes compared to conventional graphics.

The DirectAnimation controls, like other ActiveX controls, must be identified on the page. The basic syntax for using this control is as follows:

Let's examine each part of the code. Notice first that everything is enclosed in a set of <OBJECT></OBJECT> tags, an HTML mechanism for identifying a non-HTML item. The ID attribute gives the object a name so that it can be referenced easily by script. Although an ID is not necessary, you will probably find that an object is of limited use without one since it becomes more difficult to address through script.

Every ActiveX control has a unique CLASSID—a required identifier that tells the browser which exact type of object is being used. Fortunately, you don't need to memorize those long hexadecimal number sequences. The easiest way to code the correct CLASSID is simply to copy it from another page that uses that control. To help you get started, we have included a text file named da_id.txt in the chap19 folder on the companion CD that contains all the CLASSIDs for the DirectAnimation controls, along with their friendly names. Many of the HTML editing programs, such as Microsoft FrontPage, Microsoft Visual Interdev, and others make adding objects (and their CLASSIDs) to a page as simple as selecting a name from a list.

The STYLE attribute is not completely necessary either, but it is very useful. It can be used to set a height and width for the overall structured graphic object (independent of any shapes created inside it). It is important that you size a structured graphic to be large enough to hold any items you create inside it. For example, if the object is only 100 pixels wide but it holds a shape 300 pixels wide, the shape inside will be clipped. Any shapes created inside the structured graphic object are normally drawn starting at its center. Without planning for this, you might find a shape being clipped by the right and bottom edges of the structured graphic object. You can avoid this situation by using the ExtentHeight and ExtentWidth parameters, discussed later in this chapter. The STYLE attribute also can be used to position an object on the page or to set its z-index to put the object behind or in front of other elements.

The PARAM tags allow you to set values for many of the properties that affect a control. <PARAM> tags can also be used to call methods of a particular control. The name portion of the PARAM element refers either to a property name, such as HighQuality, or to a line number. The value portion indicates either the value assigned to the property or a particular method that should be used. These properties and methods are different for every object. Although many objects might use properties or methods of the same name, the effects often differ for each object.

Code Listing 19-1 demonstrates a simple structured graphics object that creates a square. Figure 19-1 displays the results.

Code Listing 19-1.

Figure 19-1. A simple square with a fading fill.

NOTE

1. Turn so that you are facing South.
2. Extend your West arm.
3. Turn so that you are facing North.

In this case, you would finish with your right arm extended. If Steps 1 and 3 had been reversed, you would finish with your left arm extended.

This code sample shows some of the basic techniques for creating your own structured graphics. (Methods for automatically generating structured graphics shapes from existing graphic files will be covered later in this chapter.) The first two <PARAM> tags are used to define the line that creates the square. The first <PARAM> tag defines the color of the line in red, green, and blue components, in that order. We have set the red and green to 0 (thus no red or green) and the blue to 255 (the maximum), so our surrounding line is blue. The second <PARAM> tag sets the style of the line. The value of 1 sets it to a solid line, while 0 would have meant no line and 2 a dotted line. The second number in the SetLineStyle method sets the width of the line. The next two <PARAM> tags set the type and color of fill used for the shape. The SetFillStyle method supports a number of different types of fills, shown in the table below. We used fill type 11 to give a radial gradient from pure blue to a light red.

The next <PARAM> tag uses the Rect method to draw a rectangle. A rectangle is considered one of the basic shapes used to create structured graphics. These basic shapes are also known as primitives and are the building blocks for creating more complex images. The standard methods for creating primitives are listed in the following table.

Each of these methods is used in a different way, due to the differences among shapes. You can find full descriptions of these methods at microsoft.com/directx/dxm/help/da/ref_cntrl/controls_oview.htm. You can also go to the MSDN Online Resource page at msdn.microsoft.com/resources/schurmandhtml.htm and choose Structured Graphics Overview.

The final two <PARAM> tags set the ExtentTop and ExtentLeft properties. These are similar to the CSS properties top and left. Setting both of these to 0 causes the shape to be drawn starting from the top left of the structured graphics object. Similar properties include ExtentHeight and ExtentWidth, which set the height and width of the shape within the overall structured graphic object. They can be used only if ExtentTop and ExtentLeft have been set. Some of the other useful properties of the Structured Graphics control that you can set with <PARAM> tags and through script are included in this table.

Several additional properties of the control can be set only through script. These properties deal with interfacing the Structured Graphics control with its more capable relative, the DirectAnimation control, which will not be covered in this book due to its highly technical nature.

Creating Structured Graphics Easily

From the previous information, you can imagine that creating a complex structured graphic could entail using hundreds of <PARAM> tags in the correct sequence. Needless to say, this could be difficult. As of this writing, structured graphics are most easily created by converting Windows Metafiles, which use the WMF filename extension. Many commercial applications can create WMF graphics, including CorelDraw!, Adobe Illustrator, Microsoft PowerPoint, Harvard Graphics, and many more. Microsoft Office also includes a number of clip art images in the WMF format.

To use WMF files in your Web pages, you'll need to convert them to Structured Graphics. You can find the Windows Metafile Converter utility (Wmfcnv.exe) in the Tools folder on the companion CD. This tool converts Windows Metafiles to text files of <PARAM> tags used to define a structured graphic. To use it, simply open the WMF file you want to convert, set the options you prefer, and save the file. You will then have a text file that you can cut and paste into your Web documents or refer to with the SourceURL <PARAM> tag.

Advantages of Vector-Based Graphics

The two most popular forms of computer graphics are raster graphics and vector graphics. Raster graphics, the form used by most of the popular image formats such as BMP and GIF, are built pixel by pixel, with information about each pixel saved as part of the graphic. Vector graphics are built using a series of lines and curves. The information for these images is saved for each line or curve rather than for each pixel.

Unlike raster images, vector images can be resized, rotated, stretched, and manipulated in many ways while keeping the integrity of the original image. If you zoom in too far in a normal bitmap graphic, aliasing will occur and the edges of a shape will no longer appear smooth. To demonstrate the advantages of vector graphics, we'll need a more complex structured graphic than the simple rectangle used in the last example. The necessary code is shown in Code Listing 19-2; you can see the output in Figure 19-2.

Code Listing 19-2.

Figure 19-2. This entire page, including the graphics code, is only 2.67 KB.

Despite the length of Code Listing 19-2, the file size of the entire page, including the structured graphic, is only 2.67 KB. The image shown in Figure 19-2 is also completely scalable. By clicking the buttons in the upper left corner of the page, you can change the size of the image—and you can do it in real time, after the page has loaded. There is no need to load another image or even to refresh the page. This is accomplished by giving the Structured Graphics control's Scale method the factors by which we want to scale the graphic in the x, y, and z axes. In Code Listing 19-2, we scaled the image using the same value for the x and y coordinates to resize the image while maintaining its aspect ratio. You can experiment by using different scale values for the x, y, and z coordinates, which creates the effect of stretching the image. In addition to scale, structured graphics support many other methods, including Clear, Rotate, Translate (moves the graphic), SetIdentity (resets any changes), and Transform4x4 (scales, rotates, and translates all at once).

Code Listing 19-3 uses the structured graphic from Code Listing 19-2, but it adds buttons that allow rotation, stopping of rotation, and resetting to the initial position, as shown in Figure 19-3.

Code Listing 19-3.

Figure 19-3. The graphic can be rotated around any axis.

The code listing above uses the Rotate and SetIdentity methods of the Structured Graphics control. The Rotate method simply takes the graphic and rotates it a specified number of degrees around the x, y, and z axes. The RotateX, RotateY, and RotateZ buttons each contain an onclick event handler that looks something like the following:

This event handler takes advantage of the setInterval and clearInterval methods. The setInterval method is a method of the window object in both Internet Explorer and Netscape Navigator that allows for an action to be repeated whenever a particular period of time has elapsed. In this case, we specify that the SpinIt function should be called every 100 milliseconds. The SpinIt function rotates the graphic as specified above. Because setInterval repeats the rotate operation, the graphic appears to spin. The Xint variable is used to keep track of the particular timer object used by this setInterval method; it is used by clearInterval to remove any previous spinning occurring around that axis. The Initial Position button uses the SetIdentity method to reset the structured graphic to its initial orientation.

The Structured Graphics control supports a number of useful events, including onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, and onmouseup.

Using Script Blocks to Capture Events

The best way of capturing an event on a DirectAnimation control is usually with a dedicated script block. For example, you could capture an onmouseout event on the above mentioned Idea structured graphic as follows:

This section has supplied only the basics on how to get started with the Structured Graphics control. You can use this control in many other ways and with many additional methods and properties. For more information about structured graphics, check out the Structured Graphics control reference by going to microsoft.com/directx/dxm and then choosing DirectAnimation followed by Multimedia Controls.