ActiveX Controls | Programming Active Server Pages (Microsoft Programming Series)

In addition to the data binding provided by new ActiveX controls, Internet Explorer 4.0 also supports impressive multimedia features through ActiveX controls. The multimedia controls that ship with IE 4.0 are intended to create fast, capable graphics and sound without the long download times typically associated with multimedia Web content. This section briefly examines the new multimedia controls and their uses. Look for a complete reference to these controls on the CD-ROM that accompanies this book.

Structured Graphics Control

The Structured Graphics control is an ActiveX control used for creating graphics from simple vectors. Using the control, you can create an image as a series of lines and shapes. The image can be as complex as you like, but you must specify exactly how to draw it. The specification is delivered through a set of <PARAM> tags associated with the control. Each <PARAM> tag specifies an instruction such as the color or the shape of the drawing. The following code generates a rectangle:

<OBJECT ID="MyShape"     CLASSID="CLSID:5FD6A143-372A-11D0-A521-0080C78FEE85">     <PARAM NAME="Line0001" VALUE="Rect(0,0,50,20,0)"> </OBJECT>

A <PARAM> tag for the control always specifies a line number for the NAME attribute and a drawing instruction for the VALUE attribute. The lines must begin with 0001 and increase by one for each new instruction. Failing to sequence the lines correctly causes the drawing to stop.

Path Control

The Path control is an ActiveX control that defines a sequence of x,y coordinates. Once the path is defined, you can specify another ActiveX control or HTML element that will follow the path. In this way, you can create a complicated animation path and have images and controls follow the path on the Web page. Defining the path is a simple matter of using two <PARAM> tags to specify the set of x coordinates and matching y coordinates referenced to an interval of time, or tick. For example, if you want to define a path that moves an image from the lower left corner of the browser to the upper right corner, you can use the following <OBJECT> tag:

<OBJECT ID="pthSquare"       CLASSID="CLSID:E0E3CC60-6A80-11D0-9B40-00A0C903AA7F">     <PARAM NAME="AutoStart" VALUE=-1>     <PARAM NAME="XSeries" VALUE="0,0;100,640">     <PARAM NAME="YSeries" VALUE="0,480;100,0">     <PARAM NAME="EdgeAction" VALUE="2">     <PARAM NAME="TickInterval" VALUE=10> </OBJECT>

Note how the XSeries and YSeries properties use a tick/coordinate pair to define the position of an object. With such pairs, you can simply define key positions at key moments and the Path control takes care of interpolating the position of the object at intermediate ticks. TickInterval is used to specify the duration of a tick. This example takes 1 second to cross the browser because a single tick occurs every 10 milliseconds and it takes 100 ticks to complete the animation. The AutoStart property determines whether the path animation occurs immediately after the page is loaded, and EdgeAction defines behavior after the path is complete. In this case, the animation begins immediately and keeps looping. Listing 4-14 shows the Path control and the Structured Graphics control creating a bouncing ball.

Listing 4-14. A bouncing ball created with the Path control.

 <HTML> <HEAD> <META NAME="GENERATOR" Content="Microsoft Developer Studio"> <META HTTP-EQUIV="Content-Type" content="text/html;      charset=iso-8859-1"> <TITLE>Bouncing Ball</TITLE> <SCRIPT LANGUAGE="VBScript"> <!--     Sub Window_OnLoad()         pathBall.Target = objBall.Style     End Sub --> </SCRIPT> </HEAD> <BODY BGCOLOR="BLACK" TEXT="RED"> <!-- Structured Graphics control --> <OBJECT ID="objBall" STYLE="position:absolute;height:70;width:110;top:0;left:0;zindex:0"     CLASSID="CLSID:5FD6A143-372A-11D0-A521-0080C78FEE85">     <PARAM NAME="Line0001" VALUE="SetLineColor(255,255,255)">     <PARAM NAME="Line0002" VALUE="SetFillColor(255,0,0,0,0,255)">     <PARAM NAME="Line0003" VALUE="SetFillSTYLE(1)">     <PARAM NAME="Line0004" VALUE="SetLineSTYLE(1)">     <PARAM NAME="Line0005" VALUE="Oval(0,-25,50,50,0)"> </OBJECT> <!-- Path control --> <OBJECT ID="pathBall"       CLASSID="CLSID:E0E3CC60-6A80-11D0-9B40-00A0C903AA7F">     <PARAM NAME=AutoStart VALUE=-1>     <PARAM NAME=XSeries VALUE="0,0;30,0;45,0;52,0;55,0">     <PARAM NAME=YSeries VALUE="0,0;30,80;45,160;52,240;55,320">     <PARAM NAME=EdgeAction VALUE="1">     <PARAM NAME=TickInterval VALUE=10> </OBJECT> </BODY> </HTML>

Sequencer Control

The Sequencer control is an ActiveX control that you can use to sequence a series of actions. These actions can include calling VBScript functions, manipulating ActiveX control properties and methods, and accessing intrinsic HTML controls. The Sequencer control allows you to synchronize behavior among scripts and objects by defining a set of actions to occur across the page.

Just as the Structured Graphics control uses a series of <PARAM> tags to define a vector graphic, the Sequencer control uses a series of <PARAM> tags to define a series of actions. Here is the basic syntax for the Sequencer control:

<OBJECT ID=object     CLASSID="CLSID:37992B41-F5E3-11CF-97DF-00A0C90FEE54">     <PARAM NAME="Actionx"         VALUE="AT Time, RepeatCount, RepeatRate Action, TieBreak">

Actionx is the NAME attribute of the <PARAM> tag and is structured as an integer beginning with 0001. The actions specified by the Sequencer control must be in order as <PARAM> tags starting with 0001. The VALUE attribute specifies which action to take. Time is when to take the action, specified in minutes:seconds:milliseconds after the sequence begins. RepeatCount is the number of times to repeat the action, where -1 is an infinite loop. RepeatRate defines the interval at which the action should be repeated, specified in the minutes:seconds:milliseconds format. Action is the act performed by the Sequencer, and TieBreak is a priority number assigned to the action in case two actions conflict. For example, the following code calls a VBScript function named Animate every second in an infinite loop:

<OBJECT ID="Sequencer1"     CLASSID="CLSID:37992B41-F5E3-11CF-97DF-00A0C90FEE54">     <PARAM NAME="Action0001"         VALUE="AT 00:00:00, -1, 00:01:00 Animate(), 1">

Sprite Control

The Sprite control is an ActiveX control that provides frame-based animation for your Web page. To use the control, you must define a series of images that will create the frames of an animated sequence. Once the images are defined, you can control when and how the animation plays. This makes the Sprite control superior to both an animated GIF, which cannot be controlled, and a movie, which generally takes longer to download. The Sprite control can also use an associated Sprite Frame Source object, which allows you to create animated frames as a grid of images. This means, for example, that you can download a single GIF file that contains all of the animation frames, structured in a grid format that the Sprite Frame Source object can provide as discrete frames to the Sprite control.

Listing 4-15 shows a complete example using a series of GIF images of the earth. The images are stored together in a single file named EARTHGRID.GIF. (See Figure 4-5.) The file contains 18 images in total, arranged in two columns of 9 images.

Listing 4-15. The Sprite control.

 <HTML> <HEAD> <META NAME="GENERATOR" Content="Microsoft Visual InterDev 1.0"> <META HTTP-EQUIV="Content-Type" content="text/html;      charset=iso-8859-1"> <TITLE>The Sprite Control</TITLE> </HEAD> <BODY> <!-- The Sprite control --> <OBJECT ID="Earth" HEIGHT=50 WIDTH=50 CLASSID="CLSID:FD179533-D86E-11D0-89D6-00A0C90833E6">     <PARAM NAME="Repeat" VALUE=-1>     <PARAM NAME="PlayRate" VALUE=1>     <PARAM NAME="InitialFrame" VALUE=1>     <PARAM NAME="FrameMap"          VALUE="1,100,,;2,100,,;3,100,,;4,100,,;             5,100,,;6,100,,;7,100,,;8,100,,;9,100,,;             10,100,,;11,100,,;12,100,,;13,100,,;14,100,,;             15,100,,;16,100,,;17,100,,;18,100,,;">     <PARAM NAME="NumFrames" VALUE=18>     <PARAM NAME="NumFramesAcross" VALUE=9>     <PARAM NAME="NumFramesDown" VALUE=2>     <PARAM NAME="SourceURL" VALUE="EARTHGRID.GIF">     <PARAM NAME="MouseEventsEnabled" VALUE="False">     <PARAM NAME="AutoStart" VALUE=-1> </OBJECT> </BODY> </HTML>

Figure 4-5. EARTHGRID.GIF.

Transitions Control

The Transitions control is an ActiveX control that can create professional fades, wipes, and cuts between visible objects on the Web page. The control is placed in a page utilizing an <OBJECT> tag that specifies the type of transition. You connect the control to a particular object by intercepting the painting functions of the object you want to affect. For example, to apply a Transitions control named MyTrans to an <IMG> tag named MyGIF, you could use the following code:

MyGIF.StopPainting(MyTrans) MyGIF.StartPainting(100)

The StopPainting method ties the Transitions control to the selected element. The StartPainting method starts the transition. The duration of the transition is determined by the value passed to StartPainting. The value represents the speed of the transition in milliseconds. Listing 4-16 shows a simple example of a transition applied to text on a Web page.

Listing 4-16. Transition of text on a Web page.

 <HTML> <HEAD> <META NAME="GENERATOR" Content="Microsoft Developer Studio"> <META HTTP-EQUIV="Content-Type" content="text/html;      charset=iso-8859-1"> <TITLE>Transitions Control</TITLE> <SCRIPT LANGUAGE="VBScript"> <!--     Sub Window_OnLoad         ' Intercept the painting process         txtDivision.StopPainting(Transition1)         ' Set the text color         txtHeader.Style.Color = "Black"         ' Start the transition         txtDivision.StartPainting(2000)     End Sub --> </SCRIPT> </HEAD> <BODY> <!-- Transitions control --> <OBJECT ID="Transition1" WIDTH=11 HEIGHT=11     CLASSID="CLSID:EEE70103-6A8F-11D0-BD28-00A0C908DB96">     <PARAM NAME="Clsid"          VALUE="{EB8F50E2-85D1-11D0-9D9D-00A0C908DB96}">     <PARAM NAME="TransitionStyle" VALUE="1"> </OBJECT> <!-- The text to transition --> <DIV ID="txtDivision"      STYLE="position:relative; height:100; width:200;"> <H1 ID="txtHeader" STYLE="color:white;">Text Transition</H1> </DIV> </BODY> </HTML>

Visual Filter Control

The Visual Filter control is an ActiveX control that applies effects such as shadows, flips, and lights to visible elements on the Web page. Multiple effects can be grouped under a single ActiveX control through the use of <PARAM> tags. Each series of tags designates an effect that you identify with a unique integer. The following code shows how to create a light source on the page:

<OBJECT ID="objLight"      CLASSID="CLSID:DA9E9D23-3661-11D0-BDC2-00A0C908DB96">     <PARAM NAME="Effect0.Clsid"         VALUE="{F1631E43-47F8-11D0-80D4-00AA006EC537}"> </OBJECT>

Once the effect is created, you must apply it to an element on the page by setting the Filter property of the element. <DIV>, <IMG>, and <OBJECT> tags support the Filter property. Listing 4-17 shows a complete example.

Listing 4-17. The Visual Filter control.

 <HTML> <HEAD> <SCRIPT LANGUAGE="VBScript"> <!--     Sub Window_OnLoad         ' Add a point of light         Call objLight(0).AddPoint(0, 0, 250, _                                   255, 0, 0, 90)         ' Set the filter on the object         txtDivision.Filter = objLight         objLight.Refresh     End Sub     Sub Document_OnMouseMove()         ' Move the light source         Call objLight(0).MoveLight(0, Window.Event.x, _                                    Window.Event.y, 250, -1)         objLight.Refresh     End Sub --> </SCRIPT>       <BODY BGCOLOR="BLACK"> <!-- The Visual Filter control --> <OBJECT ID="objLight" WIDTH=11 HEIGHT=11     CLASSID="CLSID:DA9E9D23-3661-11D0-BDC2-00A0C908DB96">     <PARAM NAME="Effect0.Clsid"          VALUE="{F1631E43-47F8-11D0-80D4-00AA006EC537}">     <PARAM NAME="Effect0.ID" VALUE="Filter1">     <PARAM NAME="Effect0.Enabled" VALUE="-1">     <PARAM NAME="Effect0.LightsAmount" VALUE="100"> </OBJECT> <!-- The text to light up --> <DIV ID="txtDivision"      STYLE="position:relative; width:100%;      height:100%; left:0; top:0"> <CENTER> <FONT COLOR="WHITE" FACE="Verdana" SIZE="100pt"> Lights </FONT> </CENTER> </DIV> </BODY> </HTML>

Mixer Control

With all the great visual multimedia effects to experiment with, don't forget audio! The Mixer control is an ActiveX control that mixes together different sound wave files. You can play individual wave files or combine wave files inside channels. The control uses both Sound and Channel objects to handle the WAV files and associated channels. Adding a sound to the control is a matter of using the NewSound method. Sounds can easily be played using the Play method of the Sound object. Listing 4-18 produces an example that plays a familiar WAV file when a Web page is loaded.

Listing 4-18. The Mixer control.

 <HTML> <HEAD> <META NAME="GENERATOR" Content="Microsoft Developer Studio"> <META HTTP-EQUIV="Content-Type" content="text/html;      charset=iso-8859-1"> <TITLE>Mixer Control</TITLE> <SCRIPT LANGUAGE="VBScript"> <!--     ' Variable for Sound object     Public Wave     Sub Window_OnLoad         ' Declare Sound object         Set Wave = objSound.NewSound("URLWav")         ' Load wave file         Wave.LoadMedia "The Microsoft Sound.wav", 2         ' Play wave file         Wave.Play     End Sub --> </SCRIPT> </HEAD> <BODY> <H1>Try leaving and returning to this page!</H1> <!-- The Mixer control --> <OBJECT ID="objSound"     CLASSID="CLSID:9A7D63C1-5391-11D0-8BB6-0000F803A803"> </OBJECT> </BODY> </HTML>

The Microsoft Agent

Using a browser to explore the Internet is simple. The challenge is to find what you want when you arrive at a Web site. Web sites are usually designed with creative considerations, not standardization, in mind, so each presents a unique landscape to the bewildered user. Even familiar sites can be updated frequently. The result of this confusion is that most people resort to simply using search services and blindly following hyperlinks until they stumble upon some useful information.

The Microsoft Agent is an ActiveX control that provides a friendly assistant to help explore Internet sites. This assistant can be programmed by the site developer to help users find information. In the current version, a developer can choose from three different standard characters or create a new character.

Programming a Web page to host the Agent is as simple as placing any ActiveX control in a page. Simply use the <OBJECT> tag with the appropriate CLASSID attribute, and the Agent is available. Because the Agent ships with IE 4.0, you are guaranteed that it will always be available on the client machine. The following code shows the <OBJECT> tag for the Agent:

<OBJECT ID="Agent1" WIDTH=32 HEIGHT=32     CLASSID="CLSID:F5BE8BD2-7DE6-11D0-91FE-00C04FD701A5"> </OBJECT>

When the control is available, you must load the selected character before it can be displayed. You can load more than one character into the Agent control, and they will all be managed as members of the Characters collection. When loading a character, you simply provide the filename and a name for the character to use in the Characters collection.

Once loaded, the Agent can be displayed by calling the Show method. The Agent supports speech and movement to present the personality. It can speak any text string provided to the Speak method and can move to any pixel location specified in the MoveTo method. Listing 4-19 shows a complete example that allows you to display, move, and converse with the standard Agent characters shown in Figure 4-6.

The Agent can do more than simply move and speak. It can also receive voice or mouse input and can perform tasks such as navigating to a desired Web page. These features are explored in detail in the project in Chapter 7.

Listing 4-19. Using the Microsoft Agent.

 <HTML> <HEAD> <META NAME="GENERATOR" Content="Microsoft Developer Studio"> <META HTTP-EQUIV="Content-Type" content="text/html;      charset=iso-8859-1"> <TITLE>Document Title</TITLE> <SCRIPT LANGUAGE="VBScript"> <!--     Sub Window_OnLoad         ' Dimension variables         Dim Agents         Dim AgentPath         ' Set variables         Set Agents = Document.frmAgent.Agent1.Characters         AgentPath = "c:\program files\microsoft agent\characters\"                  ' Load characters         Agents.Load "GENIE", AgentPath & "Genie.acs"         Agents.Load "ROBOT", AgentPath & "Robby.acs"         Agents.Load "WIZARD", AgentPath & "Merlin.acs"        End Sub     Sub cmdSpeech_OnClick()         ' Declare variables         Dim MyAgent         Dim MyForm         Dim AgentName         ' Get data         Set MyForm = Document.frmAgent         Set MyAgent = Document.frmAgent.Agent1         AgentName = MyForm.lstAgents.Value         MyAgent.Characters(AgentName).Show         MyAgent.Characters(AgentName).Speak MyForm.txtSpeech.Value              Window.Event.CancelBubble = True     End Sub     Sub Document_OnClick()         ' Declare variables         Dim MyAgent         Dim AgentName         ' Get data         Set MyForm = Document.frmAgent         Set MyAgent = Document.frmAgent.Agent1         AgentName = MyForm.lstAgents.Value         MyAgent.Characters(AgentName).MoveTo Window.Event.X, _                                              Window.Event.Y     End Sub --> </SCRIPT> </HEAD> <BODY> <FORM NAME="frmAgent"> <!-- The Microsoft Agent --> <OBJECT ID="Agent1" WIDTH=32 HEIGHT=32     CLASSID="CLSID:F5BE8BD2-7DE6-11D0-91FE-00C04FD701A5"> </OBJECT> <P> <INPUT TYPE="TEXT" NAME="txtSpeech" VALUE="Dynamic HTML is Cool!"> <INPUT TYPE="BUTTON" NAME="cmdSpeech" VALUE="Speak!"> </P> <SELECT NAME="lstAgents" SIZE=3>     <OPTION VALUE="GENIE" SELECTED>Genie     <OPTION VALUE="WIZARD">Merlin     <OPTION VALUE="ROBOT">Robby </SELECT> </FORM> </BODY> </HTML>

Figure 4-6. The Microsoft Agent.