Text Animation with the Structured Graphics Control

by Shamir Dasgupta

With the multimedia controls available in Internet Explorer 4.0 and higher, it's a snap to add a little pizzazz to your Active Server applications. One control, the Structured Graphics control, which was introduced in Internet Explorer 4.0, uses simple vector primitives to create 3-D graphics that you can rotate, scale, and fill. Because the Structured Graphics control is an ActiveX control and because it requires Internet Explorer 4.0 or higher, you'll need to use browser detection in your application to make sure the client can use the control. That being said, let's take a look at the powerful--and fun--Structured Graphics control. In this article, we'll show you how to use it to create simple text animation without any graphics images.

Understanding the Structured Graphics control

The DirectAnimation Structured Graphics control is integrated into Internet Explorer versions 4.0 and 5.0 as part of the DirectAnimation package. Essentially, the control takes text and creates a set of vector graphic primitives from it, which you can then manipulate programmatically with client-side VBScript. Primitives are the basic elements used to create simple graphics such as text, lines, rectangles, circles, arcs, and splines. You'll find primitives handy for a number of reasons. First, they're easy to manipulate programmatically. Second, they require very little memory on your system. Finally, you can generate them dynamically and dispose of them just as quickly. Now, let's build an example using the Structured Graphics control to create a simple text animation.

Lights, camera, action!

For our example, we'll use the Structured Graphics control to create the text snippet, ZDJ Active Server. With the help of Cascading Style Sheet's positioning, we'll place the words on separate lines, slightly overlapping each other. We'll then use the Sequencer control to animate each word at one-second intervals. Last but not least, we'll write a simple script to play the animated sequence. Once we've finished, our page will look like Figure A.

Figure A: It's easy to create text animation with the new multimedia controls in Internet Explorer 4.0 and beyond.
[ Figure A ]

Warning: Be aware that while both Internet Explorer 4.0 and 5.0 use the DirectAnimation Sequencer control, each implements it slightly differently. As a result, if you use earlier versions of this control, the exact syntax will differ from our examples; though, the basic concepts and methods still apply.

If your InterDev Toolbox doesn't display either of these controls, right-click on the Toolbox and select Customize Toolbox from the shortcut menu. Visual InterDev displays the dialog box shown in Figure B.

Figure B: You can find the StructuredGraphics and Sequencer controls under the Microsoft DirectAnimation controls section in the Customize Toolbox dialog box.
[ Figure B ]

Next, click on the ActiveX Controls tab and select the Microsoft DirectAnimation StructuredGraphics and Sequencer controls. Click OK to add them to the Toolbox.

Now, open a new HTML page in a Visual InterDev 6.0 project and name it Graphics.html. Next, select the Source tab and drag the Structured Graphics control from the ActiveX portion of the toolbar. Drop it anywhere between the two <BODY> tags. If InterDev displays the control as a square box, right-click on it and select Always Show As Text from the resulting shortcut menu. Now set its ID to ZDJ, so we can refer to it by its name. At this point, the <OBJECT> code should look like the following:

<OBJECT classid="clsid:369303C2-D7AC
=>-11D0-89D5-00A0C90833E6" id="ZDJ" 
	style="LEFT: 0px; TOP: 0px" VIEWASTEXT>
	<PARAM NAME="SourceURL" VALUE="">
	<PARAM NAME="CoordinateSystem" VALUE="0">
	<PARAM NAME="MouseEventsEnabled" VALUE="0">
	<PARAM NAME="HighQuality" VALUE="0">
	<PARAM NAME="PreserveAspectRatio" 
		VALUE="-1">
</OBJECT>

We'll modify the style definition next. To do so, change the control's <OBJECT> tag as follows:

<OBJECT classid="clsid:369303C2-D7AC-11D0
=>-89D5-00A0C90833E6" id="ZDJ"
	style="POSITION:ABSOLUTE; HEIGHT: 350; 
=>WIDTH: 500; ZINDEX: 1" VIEWASTEXT>

As you can see, we added style definition attributes to the control to more precisely manage its position on the page. Now we need to add more parameters to our control so it will display the text. To do so, add the following lines of code before the </OBJECT> tag:

<PARAM NAME="Line0001" 
	VALUE="SetLineStyle(1)">
<PARAM NAME="Line0002" 
	VALUE="SetLineColor(0, 0, 255)">
<PARAM NAME="Line0003" 
	VALUE="SetFillStyle(1)">
<PARAM NAME="Line0004" VALUE="SetFont
=>('Bertram', 100, 100, 0, 0, 0)">
<PARAM NAME="Line0005" VALUE="Text
=>('ZDJ', -125, -100, 0)">

Notice that for each parameter we set attributes for the text, and that in the last parameter we define the actual text value. We also set the value for the x, y, and z coordinates for the text's position. The coordinates 0, 0, 0 represent the control's exact center. At this stage, feel free to experiment with the text colors and fonts.

Using similar steps, insert two more instances of the control for the rest of our text, Active and Server. Set the ID fields for the controls to Active and Server, respectively. Since we want each line of text to appear under the previous one and to overlap, you'll need to change the x and y coordinate values as well. At this point, the page's Design view in Visual InterDev should look similar to Figure C.

Figure C: We added three Structured Graphic controls to our page.
[ Figure C ]

Tip: To add multiple lines of text within the same Structured Graphics control, simply add additional Text <PARAM> tags to a single object. For example, we could have used the following code:
<PARAM NAME="Line0005" VALUE= =>"Text('ZDJ', -125, -100, 0)"> <PARAM NAME="Line0006" VALUE= =>"Text('Active',-165,-30)"> <PARAM NAME="Line0007" VALUE= =>"Text('Server',-175,45)">
Doing so would combine all three text lines in the same object.

We've finished our implementation of the Structured Graphics control. Next, we'll add the Sequencer control to define the animation and timing sequence.

It's all in the timing

Drag the Sequencer control onto the page from the Toolbox menu bar. As the name implies, the Sequencer control organizes events in a timed sequence. Using a start time, a repeat value, and a delay time, you can get the sequencer control to play pre-determined events. Events can invoke methods on ActiveX controls, call scripts, or change properties of existing controls, applets, or Dynamic HTML. For this example, we'll simply use the Sequencer control to rotate our three lines of text at one-second intervals so we'll get a smoothly synchronized effect. Our code for the sequencer looks like the following:

<OBJECT id="TCG" CLASSID="clsid:B0A6BAE2
=>-AAF0-11D0-A152-00A0C908DB96" 
		STYLE="WIDTH:2;HEIGHT:2">
</OBJECT>

Initiating Sequencer actions

In previous versions of this control, you could add <PARAM> tags between the <OBJECT> tags to execute Sequencer actions. However, to do so in the latest version installed with Internet Explorer 5.0, you must use some type of script. We'll use the window_oninit() event to start the rotation. Each Sequencer object contains a series of actions, or Action Set, which then runs in the order you specify. To create an action via script, use the Sequencer's AT method. Within this method, you define a series of values separated by commas to set the action's timing behavior and invoke the action. For example, our first action will use the time values:

TCG.Item("Action1").AT 0.00, _
	"ScriptName", -1, 0.050

The first AT parameter represents the start time formatted in seconds.tenths. The value defines how long the sequencer should wait before invoking the action after the sequencer begins playing. Since we want the animation to begin immediately after the page loads, we set this value to 0.00.

The next value contains a string value indicating the script we want to run--in this case, we'll replace ScriptName with the Structured Graphics control's Rotate() method. (We'll explain this method in more detail later.) In addition to calling a method, you can also pass any parameters along with it.

The next parameter indicates the number of times the action will repeat. We used -1, which causes the action to repeat infinitely. The final setting represents the time between repetitions. In our example, this value helps control the rotation speed. (Using zero would cause the control to render the text as fast as possible.) At this point, we're ready to examine the rotate method for our first Structured Graphics control.

Rotation, rotation, rotation

As we mentioned, we'll place the Rotate() method in the Sequencer's AT method to make our text rotate. This method accepts numeric values for the x-, y-, and z-axis coordinates. Each number represents the degree of rotation. In our case, we set the Active object's z coordinate equal to five degrees. Our goal is to start with the text fully displayed and then rotate it around the x- and z-axes. To use this method, set the Active object's parameter values to 0, 0, 5 so the text object will rotate away from the z-axis in five-degree increments until it completes one full rotation. The code for this action method looks like the following:

TCG.Item("Action1").AT 0.00, _
	"Active.Rotate(0,0,5)", -1

To complete the sequence for the other text objects, add one more action that invokes the rotate method, such as:

TCG.Item("Action1").AT 0.00, _
	"Server.Rotate(1,0,0)", -1

So far, we've added three lines of text using the Structured Graphics control and added timing sequence with the Multimedia Sequencer control. Now we're ready to complete the script to invoke the animation.

Show me the moves!

There are many ways to invoke this animation. For example, you can choose to start the animation when the page loads or, for a more dramatic effect, you can start it when the user's mouse pointer moves over the text. You can experiment with different load methods to find one that suits your needs. To keep our project simple, we'll start the animation when the page loads, as we mentioned earlier. To do so, we created the following script:

<SCRIPT LANGUAGE="VBScript">
Sub window_onload()
	msgbox ("triggered")
	TCG.Item("Action1").AT 0.00, _
		"Active.Rotate(0,0,5)", -1
	TCG.Item("Action1").AT 0.00, _
		"Server.Rotate(1,0,0)", -1
	TCG.Item("Action1").Play
end sub
</SCRIPT>

Add this script to the head of your page to complete the animation code. Finally, save Graphics.htm. Listing A shows the complete page definition. To preview the page, either select the Quick View tab, or right-click on the page and choose View In Browser. When the page opens in Internet Explorer, notice how the bottom two lines of text move gracefully along precise angles to complete the animation. Wow! Animation without any graphics!

Listing A: The Graphics.htm page

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT LANGUAGE="VBScript">
Sub Window_Onload()
	TCG.Item("Action1").AT 0.00, "Active.Rotate(0,0,5)", -1
	TCG.Item("Action1").AT 0.00, "Server.Rotate(1,0,0)", -1
	TCG.Item("Action1").Play
End Sub
</SCRIPT>
</HEAD>
<BODY>
<OBJECT classid="clsid:369303C2-D7AC-11D0-89D5-00A0C90833E6"
	id="ZDJ" STYLE="HEIGHT: 350px; POSITION:absolute; 
	=>WIDTH: 500px; ZINDEX: 1" VIEWASTEXT>
	<PARAM NAME="Line0001" VALUE="SetLineStyle(1,0)">
	<PARAM NAME="Line0002" VALUE="SetLineColor(0,0,255)">
	<PARAM NAME="Line0003" VALUE="SetFillStyle(1)">
	<PARAM NAME="Line0004" VALUE="SetFont('Bertram',100,100,0,0,0)">
	<PARAM NAME="Line0005" VALUE="Text('ZDJ',-175,-100)">
</OBJECT>
<OBJECT classid="clsid:369303C2-D7AC-11D0-89D5-00A0C90833E6"
	id="Active" STYLE="HEIGHT: 350px; POSITION: absolute; 
	=>WIDTH:500px; ZINDEX: 1" VIEWASTEXT>
	<PARAM NAME="Line0001" VALUE="SetLineStyle(1,0)">
	<PARAM NAME="Line0002" VALUE="SetLineColor(0,0,255)">
	<PARAM NAME="Line0003" VALUE="SetFillStyle(1)">
	<PARAM NAME="Line0004" VALUE="SetFont('Verdona',100,100,0,0,0)">
	<PARAM NAME="Line0005" VALUE="Text('Active',-215,-30)">
</OBJECT>
<OBJECT classid="clsid:369303C2-D7AC-11D0-89D5-00A0C90833E6" 
	id="Server" STYLE="HEIGHT: 350px; POSITION: absolute; 
	=>WIDTH: 500px; ZINDEX: 1" VIEWASTEXT>
	<PARAM NAME="Line0001" VALUE="SetLineStyle(1,0)">
	<PARAM NAME="Line0002" VALUE="SetLineColor(0,0,255)">
	<PARAM NAME="Line0003" VALUE="SetFillStyle(1)">
	<PARAM NAME="Line0004" VALUE="SetFont('Verdona',100,100,0,0,0)">
	<PARAM NAME="Line0005" VALUE="Text('Server',-225,45)">
</OBJECT>
<OBJECT classid="clsid:B0A6BAE2-AAF0-11D0-A152-00A0C908DB96"
	id="TCG" STYLE="WIDTH:2;HEIGHT:2">
</OBJECT>
</BODY>
</HTML>

Notes

As we mentioned, the technique we described here only works with Internet Explorer 4.0 and higher, so you should probably first create an ASP page that detects the capabilities of the connecting browser. If the browser is anything other than Internet Explorer, you'll need to serve an alternate page.

Conclusion

The DirectAnimation controls are powerful and welcome additions to the next generation of Internet Explorer and the Windows Desktop. These controls fully complement HTML and Cascading Style Sheets. With a bit of imagination, you can create impressive animation without any programming or large graphics files.

Copyright © 2000, ZD Inc. All rights reserved. ZD Journals and the ZD Journals logo are trademarks of ZD Inc. Reproduction in whole or in part in any form or medium without express written permission of ZD Inc. is prohibited. All other product names and logos are trademarks or registered trademarks of their respective owners.