Schongar P.VBScript unleashed.1997

\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.

Rotating Text with the Label Control

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.

Using Active Movie for Digital Audio and Video

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 Marquee Control for Scrolling Pages

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">