|  | Click Here!

Search the site:
EXPERT SEARCH

| Programming Languages
| Databases
| Security
| Web Services
| Network Services
| Middleware
| Components
| Operating Systems
| User Interfaces
| Groupware & Collaboration
| Content Management
| Productivity Applications
| Hardware
| Fun & Games

EarthWeb sites
Crossnodes
Datamation
Developer.com
DICE
EarthWeb.com
EarthWeb Direct
ERP Hub
Gamelan
GoCertify.com
HTMLGoodies
Intranet Journal
IT Knowledge
IT Library
JavaGoodies
JARS
JavaScripts.com
open source IT
RoadCoders
Y2K Info

# Chapter 17

# Animation

by Paul Lagasse

CONTENTS

- ActiveX Controls Capable of Animation
- Frame Animation with Image and Timer Controls
- Rotating Text with the Label Control
- Using Active Movie for Digital Audio and Video
- The Marquee Control for Scrolling Pages
- Other HTML Tags that Provide Multimedia Playback

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.

## ActiveX Controls Capable of Animation

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

- Image. This control allows the display of a variety of bitmapped image formats. In conjunction with a timer, the control can be used to create a frame-based animation or collage of images that can be manipulated by a user at runtime.
- Gradient. This control displays a rectangle with a smooth gradient fill from a start color to an end color. With a timer, this control too can be used to generate a color-cycling animation.
- Marquee. The Internet Explorer Marquee control can auto-scroll (vertically or horizontally) an HTML page in a region defined by the user. The speed of the scrolling and direction are user definable and adjustable at runtime using VBScript.
- Timer. The Timer is invisible at runtime and generates a specific timer event at a predefined interval. The timer event can be used to trigger activity in other controls and allows for a wide range of animation possibilities.
- Stock Ticker. This control is used to display data from a URL at a given interval. This data can change frequently and will provide the user with updated information on a regular basis. The data can be in a text or XRT format on a Web site.
- Label. This control displays text on an HTML page as well as responding to several types of mouse interactivity. It can be used to display the text at an angle that can be modified at runtime.
- Active Movie. The Active Movie format has recently hit the scene with Internet Explorer 3.0 and allows any tools that support ActiveX to display a wide variety of digital audio and visual data. Not only does it support AVI and MPEG playback but WAV and AU audio playback as well, with little to no programming overhead.

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.

## Frame Animation with Image and Timer Controls

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.

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

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

## Other HTML Tags that Provide Multimedia Playback

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:

- `<img>` Using the `src` property, you can display a GIF or JPG image. This is nearly the same as using the Image control, but your best bet for animating the image is to use an animated GIF and a browser that supports GIFs.
- Using the `dynsrc` property, you can display video files. The string `<img dynsrc="myvideo.avi" start="mouseover">` will put the first frame of `myvideo.avi` on your page and begin displaying it when you move the mouse over it.
- `<body>` Supports a `background` property that allows you to display a graphic as a tiled wallpaper.
- `<bgsound>` Used much like the `<img>` tag, this tag lets you specify a source (`src)` file that is a Wave audio (`.WAV`) or MIDI (`.MID`) file so you can play audio on your HTML page. The loop property sets the number of times a MIDI file will play. `-1` indicates infinite playback as long as the page is loaded, and a positive integer will set the number of times the file plays.

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.

| Use of this site is subject certain Terms & Conditions. Copyright (c) 1996-1999 EarthWeb, Inc.. All rights reserved. Reproduction in whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Please read our privacy policy for details.