by Paul Lagasse
Now that you understand how to allocate variables and explicitly call functions in VBScript, you might be wondering how to use this new tool to effectively enhance the Web site you have or master the Web site you have in mind. The answer to that question is simple: animation. Nothing captures the attention of the transient Net surfer faster than a Web site with a lot of visual and audio data that doesn't slow down the connection.
One of the biggest drawbacks of the Internet, in its current incarnation, is the lack of effective multimedia data that can be transferred from a Web site to a local host. Without 30 frames per second animation and audio that doesn't stutter over a 28.8 modem connection, the information superhighway will never supersede the television as the world's favorite pastime and source of information. However, Internet development is happening rapidly and will soon overcome these obvious deficiencies. Tools like VBScript will be used to control the flow of this information to and from your Web site.
VBScript does not have internal structures or data types that allow it to handle digital video and audio playback, but coupled with Microsoft's ActiveX controls, many impressive types of animation can be achieved. Not only can you display an array of visual and audio data, from MPEGs to Stock Quotes, but many applications can have a level of interactivity far beyond simple frame-by-frame playback, by using Visual Basic logic. The following examples will give you some guidelines for setting up this interactivity.
We will look at a list of the current controls that Microsoft freely distributes from their Web site (http://www.microsoft.com/activex/gallery) at the time of this writing. Using these controls together and "gluing" them with VBScript, we can accomplish some very promising animation. As well, many updated controls are being created daily by Microsoft and third-party developers, which will make this list seem small and limited in the near future. The current animation-capable controls include
Each one of these controls can display information statically, but in conjunction with other controls it is possible to create some fairly sophisticated animation quickly and easily. The example we will first discuss uses the Timer and Image controls to display frames of a 3-D animation rendered as Windows bitmaps. The frames of this animation can be in any bitmap format the Image control supports, which gives you the ability to display images from several sources.
The examples in this chapter assume you are familiar with Microsoft's ActiveX Control Pad, which is an invaluable tool for laying out an HTML page that supports ActiveX controls and VBScript.
The Image control allows you to display bitmapped images in an HTML page; however, when you combine the control with a timer, it allows you to display your bitmaps as frames in an animation. The playback of these frames is completely customizable, including the order of the frames, the rate of play, and the types of images displayed.
First, the example displays an HTML layout (shown in Listing 17.1) called TimerAni that contains an Image control called Image1 and a Timer object named Timer1. These control names are the defaults generated by the ActiveX Control Pad and have not been modified to avoid any confusion.
Listing 17.1. HTML code segment to launch image control animation.
: <HTML> : <HEAD> : <TITLE>Image Control / Timer Sample</TITLE> : </HEAD> : <BODY> : <OBJECT CLASSID="CLSID:812AE312-8B8E-11CF-93C8-00AA00C08FDF" : ID="TimerAni_alx" STYLE="LEFT:0;TOP:0"> : <PARAM NAME="ALXPATH" REF VALUE="TimerAni.alx"> : </OBJECT> 10: </BODY> 11: </HTML>
When the layout is displayed, the Visual Basic Script will allocate two global variables to handle the processing. (See Listing 17.2.) The first, called Count, records the current frame index referenced in the second variable array, called Images(). Images() stores the names of the bitmapped graphics that contain the bulk of the animation. They are stored in consecutive order so that the frames of the animation appear to happen smoothly, but the order of the images could just as easily have been switched around, in order to make a collage of images instead of a smooth animation. When you become familiar with this example, you can try rearranging the order.
Listing 17.2. ActiveX Layout control code for the Image/Timer animation.
1: <SCRIPT LANGUAGE="VBScript">
2: <!--
3: 'Global Variables
4: dim Count 'Keep track of current image index
5: dim Images(16) 'Store the names of the bitmaps for the animation
6: Images(1) = "VBSA0000.BMP"
7: Images(2) = "VBSA0001.BMP"
8: Images(3) = "VBSA0002.BMP"
9: Images(4) = "VBSA0003.BMP"
10: Images(5) = "VBSA0004.BMP"
11: Images(6) = "VBSA0005.BMP"
12: Images(7) = "VBSA0006.BMP"
13: Images(8) = "VBSA0007.BMP"
14: Images(9) = "VBSA0008.BMP"
15: Images(10) = "VBSA0009.BMP"
16: Images(11) = "VBSA0010.BMP"
17: Images(12) = "VBSA0011.BMP"
18: Images(13) = "VBSA0012.BMP"
19: Images(14) = "VBSA0013.BMP"
20: Images(15) = "VBSA0014.BMP"
21: Images(16) = "VBSA0015.BMP"
22: -->
23: </SCRIPT>
24: <SCRIPT LANGUAGE="VBScript">
25: <!--
26: Sub Timer1_Timer()
27: 'When Timer1 generates the timer event, we want to change the graphic that is
currently being'displayed. To do this we set the picture path variable of
Image1 by referencing the array Images()
28: 'at the current index stored in Count
29: If Count = 16 Then Count = 0 'Make sure the Animation loops when it hits the
last frame
30: Count = Count + 1 'Increment the current frame count
31: Image1.PicturePath="C:\VBSCRIPT\IMAGES\" & Images(Count) 'concatenate the current Array
32: 'index the full path to the
33: 'images.
34: end sub
35: -->
36: </SCRIPT>
37: <DIV ID="Layout1" STYLE="LAYOUT:FIXED;WIDTH:597pt;HEIGHT:362pt;">
38: <OBJECT ID="Image1"
39: CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:17pt;LEFT:33pt;WIDTH:120pt;HEIGHT:75pt;ZINDEX:0;">
40: <PARAM NAME="PicturePath" VALUE="C:\VBSCRIPT\IMAGES\VBSA0000.BMP">
41: <PARAM NAME="BorderStyle" VALUE="0">
42: <PARAM NAME="SizeMode" VALUE="1">
43: <PARAM NAME="SpecialEffect" VALUE="2">
44: <PARAM NAME="Size" VALUE="4233;2646">
45: </OBJECT>
46: <OBJECT ID="Timer1"
47: CLASSID="CLSID:59CCB4A0-727D-11CF-AC36-00AA00A47DD2"
STYLE="TOP:17pt;LEFT:165pt;WIDTH:29pt;HEIGHT:29pt;ZINDEX:1;">
48: <PARAM NAME="_ExtentX" VALUE="1005">
49: <PARAM NAME="_ExtentY" VALUE="1005">
50: <PARAM NAME="Interval" VALUE="30">
51: </OBJECT>
52: <OBJECT ID="Label1"
53: CLASSID="CLSID:978C9E23-D4B0-11CE-Bf2D-00AA003f40D0"
STYLE="TOP:99pt;LEFT:25pt;WIDTH:363pt;HEIGHT:18pt;ZINDEX:2;">
54: <PARAM NAME="Caption" VALUE="Simple Animation Sample using Image
Control and Timer">
55: <PARAM NAME="Size" VALUE="12806;635">
56: <PARAM NAME="FontEffects" VALUE="1073741825">
57: <PARAM NAME="FontHeight" VALUE="240">
58: <PARAM NAME="FontCharSet" VALUE="0">
59: <PARAM NAME="FontPitchAndFamily" VALUE="2">
60: <PARAM NAME="FontWeight" VALUE="700">
61: </OBJECT>
62: </DIV>
Figure 17.1 : Embossed images displayed as animation frames.
You will notice that the main bulk of the processing is handled in the Timer1_Timer() subroutine. This _Timer event occurs every time the interval defined in the timer object is reached. The process is very straightforward; every time the timer generates an event, we increment our current frame index by 1. As long as the index does not go beyond the maximum number of frames the array contains, the Picture path is updated to point to a new image. This new image is named by joining the full path to the image (which could just as easily be a URL like http://www.samples.com/images instead of a local hard disk) and the current array element using the & operator. In this animation, the limit is set at 16 so the IF structure will reset the frame index to 0 whenever the animation hits the sixteenth frame.
Can you see how the animation can be very easily controlled using
VBScript? By changing the order of the elements of the array,
you can adjust the order of play. By changing the interval defined
in the Timer1 object, you can increase or decrease the
speed of playback and each frame of the animation can be a different
image format-even a different size image. Best of all, the animation
will continue to play properly, even when the HTML page has finished
loading, and will remain active and customizable at runtime. It
is possible to display an animated GIF in the same fashion, but
there is no way to have the GIF change its order at the touch
of a button. To show you this kind of interactivity coupled with
animation, the next example displays rotating text, using Microsoft's
Internet Explorer Label control and a timer. This time, however,
the user will be able to change the course of the rotation by
clicking Button controls available on the page.
| NOTE |
It is always good to keep in mind the size of the files you are downloading and the performance you can expect to achieve using them. Coming off a hard disk or CD-ROM, this example will work fine-but over a slow Internet connection, waiting for the images to download could take quite some time. To see the difference locally, rename the images to VBSAC000*.BMP and try the example again. The first set of images used are rendered at 16 million colors and are rather large. The second set are rendered at 256 colors and can save a large amount of load time. If you wanted to get even better performance from an Internet connection, you could try converting the images to a compressed format, like JPG. Having a much smaller file size than an uncompressed BMP can save time and increase performance. |
This example relies on some of the basic functionality described in the first example but expands upon the interactivity that VBScript provides. The example manipulates the Internet Explorer Label control to create a rotating text animation that cycles clockwise and counter-clockwise. Input is retrieved from the user in the form of two Button controls. When the user clicks either button, the direction of the animation will be adjusted accordingly. This example was set up using the ActiveX Control Pad. Listing 17.3 details the HTML header that loads the HTML Layout, and Listing 17.4 shows the contents of the layout (ALX) file.
Listing 17.3. Label control animation.
1: <HTML> 2: <HEAD> 3: <TITLE>Label / Timer Sample</TITLE> 4: </HEAD> 5: <BODY> 6: <OBJECT CLASSID="CLSID:812AE312-8B8E-11CF-93C8-00AA00C08FDF" 7: ID="TimrLabl_alx" STYLE="LEFT:0;TOP:0"> 8: <PARAM NAME="ALXPATH" REF VALUE="file:C:\VBSCRIPT\TimrLabl.alx"> 9: </OBJECT> 10: </BODY> 11: </HTML>
Once the page is loaded, the text will begin cycling clockwise. (See Figure 17.2.) The spinning effect is caused by incrementing the value stored in the Degree variable by 2 each time the _timer event is triggered. The Angle property of the ieLabel causes the caption of the label to be displayed at an elevated or declinated position, based on the value of the angle stored in the Degree variable. A value of 180 will cause the text to be displayed upside down. By running through this loop, we are able to achieve the effect of the text spinning at its center.
Figure 17.2 : Rotating label modified with user input through Button controls.
Listing 17.4. ActiveX Layout code for Label and Timer animation.
1: <SCRIPT LANGUAGE="VBScript">
2: <!--
3: dim Direction
4: dim Degree
5: Direction = "ClockWise"
6: -->
7: </SCRIPT>
8: <SCRIPT LANGUAGE="VBScript">
9: <!--
10: Sub IeTimer1_Timer()
11: Select Case Direction
12:
13: Case "ClockWise" 'Decrement the degree counter by two
14: Degree = Degree - 2
15: If Degree = 361 Then Degree = 0
16: Case "Counter-ClockWise" 'Increment the degree counter by two
17: Degree = Degree + 2
18: If Degree = 0 then Degree = 360
19: End Select
20: ieLabel1.Angle = Degree
21: end sub
22: -->
23: </SCRIPT>
24: <SCRIPT LANGUAGE="VBScript">
25: <!--
26: Sub CommandButton2_Click()
27: Direction = "Counter-ClockWise"
28: end sub
29: -->
30: </SCRIPT>
31: <SCRIPT LANGUAGE="VBScript">
32: <!--
33: Sub CommandButton1_Click()
34: Direction = "ClockWise"
35: end sub
36: -->
37:
38: </SCRIPT>
39: <DIV ID="Layout1" STYLE="LAYOUT:FIXED;WIDTH:477pt;HEIGHT:272pt;">
40: <OBJECT ID="IeTimer1"
41: CLASSID="CLSID:59CCB4A0-727D-11CF-AC36-00AA00A47DD2"
STYLE="TOP:33pt;LEFT:165pt;WIDTH:25pt;HEIGHT:29pt;ZINDEX:0;">
42: <PARAM NAME="_ExtentX" VALUE="873">
43: <PARAM NAME="_ExtentY" VALUE="1032">
44: <PARAM NAME="Interval" VALUE="2">
45: </OBJECT>
46: <OBJECT ID="IeLabel1"
47: CLASSID="CLSID:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
STYLE="TOP:8pt;LEFT:17pt;WIDTH:140pt;HEIGHT:99pt;ZINDEX:1;">
48: <PARAM NAME="_ExtentX" VALUE="4948">
49: <PARAM NAME="_ExtentY" VALUE="3493">
50: <PARAM NAME="Caption" VALUE="Rotating Text Example">
51: <PARAM NAME="Angle" VALUE="0">
52: <PARAM NAME="Alignment" VALUE="4">
53: <PARAM NAME="Mode" VALUE="1">
54: <PARAM NAME="FillStyle" VALUE="0">
55: <PARAM NAME="FillStyle" VALUE="0">
56: <PARAM NAME="ForeColor" VALUE="#000000">
57: <PARAM NAME="BackColor" VALUE="#000000">
58: <PARAM NAME="FontName" VALUE="Arial">
59: <PARAM NAME="FontSize" VALUE="12">
60: <PARAM NAME="FontItalic" VALUE="0">
61: <PARAM NAME="FontBold" VALUE="1">
62: <PARAM NAME="FontUnderline" VALUE="0">
63: <PARAM NAME="FontStrikeout" VALUE="0">
64: <PARAM NAME="TopPoints" VALUE="0">
65: <PARAM NAME="BotPoints" VALUE="0">
66: </OBJECT>
67: <OBJECT ID="CommandButton1"
68: CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57"
STYLE="TOP:116pt;LEFT:8pt;WIDTH:83pt;HEIGHT:25pt;TABINDEX:0;ZINDEX:2;">
69: <PARAM NAME="Caption" VALUE="ClockWise">
70: <PARAM NAME="Size" VALUE="2911;873">
71: <PARAM NAME="FontCharSet" VALUE="0">
72: <PARAM NAME="FontPitchAndFamily" VALUE="2">
73: <PARAM NAME="ParagraphAlign" VALUE="3">
74: <PARAM NAME="FontWeight" VALUE="0">
75: </OBJECT>.
76: <OBJECT ID="CommandButton2"
77: CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57"
STYLE="TOP:116pt;LEFT:99pt;WIDTH:83pt;HEIGHT:25pt;TABINDEX:1;ZINDEX:3;">
78: <PARAM NAME="Caption" VALUE="Counter-ClockWise">
79: <PARAM NAME="Size" VALUE="2910;873">
80: <PARAM NAME="FontCharSet" VALUE="0">
81: <PARAM NAME="FontPitchAndFamily" VALUE="2">
82: <PARAM NAME="ParagraphAlign" VALUE="3">
83: <PARAM NAME="FontWeight" VALUE="0">
84: </OBJECT>
85: </DIV>.
Looking at the sample carefully, you will notice that it is not very complicated. Each time the _timer event is triggered, the angle of the ieLabel is updated. Whether the value of the angle is incremented or decremented is determined by the state of the Direction variable. The Direction variable changes only when the user clicks either of the button controls. When the _click event occurs, the global variable Direction is changed and the _timer event updates the value of Degree using the Select... Case method to handle the program flow.
Okay, you are fairly impressed that you can control ActiveX controls so effortlessly using VBScript, but now you want to know how you can add real multimedia content to a Web site. You have seen many Web sites displaying impressive video files and kicking off a comical sound file whenever a button is pressed. How can you do this with VBScript? The answer is Microsoft's Active Movie control. It is a fully featured multimedia control that handles a multitude of video and audio file formats, including .mov, .mpg, .avi, .wav, .au, and .aiff. These file types are some of the most commonly seen on the Internet, which makes Active Movie a superb addition to Internet Explorer and VBScript. The following example will display a Video for Windows file in the Internet Explorer Window. This example (see Listings 17.5 and 17.6, as well as Figure 17.3) uses the default popup controls of the Active Movie driver to display the video that will allow the user a high level of interactivity with little programming.
Figure 17.3 : Default Active Movie control displaying AVI.
Listing 17.5. HTML for Active Movie control example.
1: <HTML> 2: <HEAD> 3: <TITLE>Active Movie Demonstration</TITLE> 4: </HEAD> 5: <BODY> 6: <OBJECT CLASSID="CLSID:812AE312-8B8E-11CF-93C8-00AA00C08FDF" 7: ID="AMovie_alx" STYLE="LEFT:0;TOP:0"> 8: <PARAM NAME="ALXPATH" REF VALUE="file:C:\VBScript\AMovie.alx"> 9: </OBJECT> 10: </BODY> 11: </HTML>
It's important to remember that all of the content files used to run the animation are loaded into the cache directory of your browser. That is why some sites take an exceptionally long time to load the first time you connect to them. All of the video and audio files are downloaded to the local machine and run from there when they are addressed. Caching information in this way removes much overhead that would be generated by extended communication with a server. This is good and bad for multimedia apps. It is great for your application once the files have downloaded, but the download times can be extraordinarily long when a lot of information is involved. The second time you connect to a cached site, your browser will look locally for content files and will display these files as quickly as the hardware on your machine will allow.
"Streaming" technology will allow an application to retrieve information from a server in small parts and play them back as they are loaded, but this requires a reliable connection to the Internet and can generate a lot of traffic. Relying on the local PC to run the content is called client-side networking. Once the data is downloaded, the local machine is responsible for handling the playback of data. Active Movie is a good example of a client-side control that relies on the local hardware and operating system to process multimedia data. An AVI downloaded into the Internet Explorer and run on one machine might perform differently on another.
Listing 17.6. ActiveX layout code for ActiveMovie playback.
1: <DIV ID="Layout1" STYLE="LAYOUT:FIXED;WIDTH:597pt;HEIGHT:362pt;">
2: <OBJECT ID="ActiveMovie1"
3: CLASSID="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A"
STYLE="TOP:8pt;LEFT:8pt;WIDTH:200pt;HEIGHT:151pt;TABINDEX:0;ZINDEX:0;">
4: <PARAM NAME="_ExtentX" VALUE="7038">
5: <PARAM NAME="_ExtentY" VALUE="5318">
6: <PARAM NAME="MovieWindowWidth" VALUE="160">
7: <PARAM NAME="MovieWindowHeight" VALUE="124">
8: <PARAM NAME="Appearance" VALUE="0">
9: <PARAM NAME="BorderStyle" VALUE="0">
10: <PARAM NAME="FileName" VALUE="C:\VBSCRIPT\IMAGES\VBSAMP.AVI">
11: </OBJECT>
12: <OBJECT ID="Label1"
13: CLASSID="CLSID:978C9E23-D4B0-11CE-Bf2D-00AA003f40D0"
STYLE="TOP:165pt;LEFT:8pt;WIDTH:470pt;HEIGHT:25pt;ZINDEX:1;">
14: <PARAM NAME="Caption" VALUE="Active Movie allows playback of a
multitude of file formats">
15: <PARAM NAME="Size" VALUE="16589;873">
16: <PARAM NAME="FontHeight" VALUE="360">
17: <PARAM NAME="FontCharSet" VALUE="0">
18: <PARAM NAME="FontPitchAndFamily" VALUE="2">
19: <PARAM NAME="FontWeight" VALUE="0">
20: </OBJECT>
21: </DIV>
You might notice that the Active Movie control provides quite a bit of extra functionality that doesn't need to be programmed in at all. Not only does the driver support many multimedia file formats, but it has built-in controls that can report information about the currently displayed files and control functionality, such as Pause and Resume. Using buttons or similar controls on a page makes it simple to create an interactive Audio or Video player (by addressing the properties of the Active Movie object). Changing the filename of the Active Movie object will allow you to download and display another video or audio file at the touch of a button, and MovieWindowSize will allow you to control how much of the screen the video takes up. It is simple to embed this type of functionality into your HTML layout using VBScript.
The final example included in the animated ActiveX control discussion is the Internet Explorer Marquee control. It is a very simple tool with a lot of potential and allows a VBScript developer to display scrolling HTML text within an HTML page without frames. This is a very nice feature. Developers who are familiar with HTML layout can take advantage of this control to effortlessly display scrolling HTML data on one side of a page while having static HTML text remain visible and scrollable on the same page. That alone is helpful if you want to display an updated list of information for your users to see; but the example adds another level of interactivity by allowing the user to determine which way the marquee scrolls by clicking on one of four directional buttons. Listing 17.7 and Figure 17.4 show an example of how you can put the marquee to work in your page.
Figure 17.4 : Marquee example shows a scrolling HTML document.
| NOTE |
This example was written without the ActiveX Control Pad, so you will notice some subtle differences. The object names are not simply control1, control2, or control3. Each button corresponds to its functionality, and the events in the script match the controls of the same name. This makes it easier to follow the flow of the example. On a more complex script, however, it a good idea to invest in some standards. A better idea for a more complex project would be to name each button control with the BTN_ prefix. For example, the Up button would be called BTN_UP or something similar that makes sense to you. If you looked through the code of a larger application, you would see why this makes sense, because a specific object type is usually the most readily available form of information. When debugging a script, you might know what type of object you are looking for but not necessarily which one. |
Listing 17.7. HTML code for a directional Marquee control.
1: <HTML>
2: <OBJECT
3: align=CENTER
4: classid="clsid:1a4da620-6217-11cf-be62-0080c72edd2d"
5: width=640 height=200 BORDER=1 HSPACE=5
6: id="Marquee"
7: >
8: <PARAM NAME="ScrollStyleX" VALUE="Circular">
9: <PARAM NAME="ScrollStyleY" VALUE="Circular">
10: <PARAM NAME="szURL" VALUE="c:\vbscript\marqdoc.htm">
11: <PARAM NAME="ScrollDelay" VALUE=1000>
12: <PARAM NAME="LoopsX" VALUE=-1>
13: <PARAM NAME="LoopsY" VALUE=-1>
14: <PARAM NAME="ScrollPixelsX" VALUE=0>
15: <PARAM NAME="ScrollPixelsY" VALUE=0>
16: <PARAM NAME="DrawImmediately" VALUE=1>
17: <PARAM NAME="Whitespace" VALUE=0>
18: <PARAM NAME="PageFlippingOn" VALUE=1>
19: <PARAM NAME="Zoom" VALUE=100>
20: <PARAM NAME="WidthOfPage" VALUE=640>
21: </OBJECT>
22: <HR>
23: <OBJECT ID="UP"
24: CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57"
STYLE="TOP:149pt;LEFT:83pt;WIDTH:41pt;HEIGHT:25pt;TABINDEX:0;ZINDEX:0;">
25: <PARAM NAME="Caption" VALUE="Up">
26: <PARAM NAME="Size" VALUE="1455;873">
27: <PARAM NAME="FontCharSet" VALUE="0">
28: <PARAM NAME="FontPitchAndFamily" VALUE="2">
29: <PARAM NAME="ParagraphAlign" VALUE="3">
30: <PARAM NAME="FontWeight" VALUE="0">
31: </OBJECT>
32: <OBJECT ID="DOWN"
33: CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57"
STYLE="TOP:182pt;LEFT:50pt;WIDTH:41pt;HEIGHT:25pt;TABINDEX:1;ZINDEX:1;">
34: <PARAM NAME="Caption" VALUE="Down">
35: <PARAM NAME="Size" VALUE="1455;873">
36: <PARAM NAME="FontCharSet" VALUE="0">
37: <PARAM NAME="FontPitchAndFamily" VALUE="2">
38: <PARAM NAME="ParagraphAlign" VALUE="3">
39: <PARAM NAME="FontWeight" VALUE="0">
40: </OBJECT>
41: <OBJECT ID="LEFT"
42: CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57"
STYLE="TOP:182pt;LEFT:116pt;WIDTH:41pt;HEIGHT:25pt;TABINDEX:2;ZINDEX:2;">
43: <PARAM NAME="Caption" VALUE="Left">
44: <PARAM NAME="Size" VALUE="1455;873">
45: <PARAM NAME="FontCharSet" VALUE="0">
46: <PARAM NAME="FontPitchAndFamily" VALUE="2">
47: <PARAM NAME="ParagraphAlign" VALUE="3">
48: <PARAM NAME="FontWeight" VALUE="0">
49: </OBJECT>
50: <OBJECT ID="RIGHT"
51: CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57"
STYLE="TOP:215pt;LEFT:83pt;WIDTH:41pt;HEIGHT:25pt;TABINDEX:3;ZINDEX:3;">
52: <PARAM NAME="Caption" VALUE="Right">
53: <PARAM NAME="Size" VALUE="1455;873">
54: <PARAM NAME="FontCharSet" VALUE="0">
55: <PARAM NAME="FontPitchAndFamily" VALUE="2">
56: <PARAM NAME="ParagraphAlign" VALUE="3">
57: <PARAM NAME="FontWeight" VALUE="0">
58: </OBJECT>
59: <SCRIPT LANGUAGE="VBScript">
60: <!--
61: -->
62: </SCRIPT>
63: <SCRIPT LANGUAGE="VBScript">
64: <!--
65: Sub UP_Click()
66: Marquee.ScrollPixelsX = "0"
67: Marquee.ScrollPixelsY = "-50"
68: end sub
69: -->
70: </SCRIPT>
71: <SCRIPT LANGUAGE="VBScript">
72: <!--
73: Sub DOWN_Click()
74: Marquee.ScrollPixelsX = "0"
75: Marquee.ScrollPixelsY = "50"
76: end sub
77: -->
78: </SCRIPT>
79: <SCRIPT LANGUAGE="VBScript">
80: <!--
81: Sub LEFT_Click()
82: Marquee.ScrollPixelsX = "-50"
83: Marquee.ScrollPixelsY = "0"
84: end sub
85: -->
86: </SCRIPT>
87: <SCRIPT LANGUAGE="VBScript">
88: <!--
89: Sub RIGHT_Click()
90: Marquee.ScrollPixelsX = "50"
91: Marquee.ScrollPixelsY = "0"
92: end sub
93: -->
94: </SCRIPT>
95: </HTML>
Once again, by simply changing the properties of the ActiveX control, I can change the functionality that is seen in the animation. The important things to note are the fact that ScrollPixelsX and ScrollPixelsY properties control the number of pixels the marquee will display at each interval. The interval is set at 1000 milliseconds when the object is defined, and the name of the URL that holds the HTML file to display is also set. Both of these properties could be changed at runtime with buttons or scrollbars to affect the rate at which the animation runs and which file is displaying.
Do you see a pattern in the examples? Almost all of the functionality built into the ActiveX controls is handled for you. VBScript can affect the properties and produce the types of animations that make a Web site interesting. Creating animations with VBScript is not really a matter of calling a particular series of functions but of creatively using the objects that are at hand. As mentioned before, more and more objects will become available, and some will handle more traditional style path and frame-based animations-but with simple property manipulation you can achieve some interesting and powerful results. Look at the StockTicker and Gradient controls. The Stockticker can display information much the same way the marquee can, but it uses a completely different type of file format, which is good for business applications. Can you see a way to make color-cycling animated page breaks using the gradient object? By using a Timer object and adjusting the StartColor and EndColor properties, it is a sure bet that you can create an HTML page that has content separators that no one has ever seen before.
Most of this chapter has dealt with providing animation control through ActiveX, which is the most logical way to perform the operation with VBScript because you can use VBScript to address the properties of the objects and make changes at runtime. There are several tags not supported by all browsers that allow playback of multimedia files. You cannot use VBScript to change the properties of these tags, but if you are using VBScript to generate HTML pages on the fly it is a good idea to know about them. Once again, the standards are changing even in the world of HTML tags, and those of you with extensive HTML building knowledge will already know these; but the most current tags are as follows:
Using these tags in conjunction with the VBScript Document.Write method, you can generate HTML pages on the fly that actually contain multimedia content. Too bad all the Web pages out there that use CGI scripts don't do that.