Creating a Slide Show Using the ActiveX Timer Control

Robert Coleridge
Software Development Engineer, SolutionsIQ

July 23, 1996

Contents
Abstract
Introduction
Controlling the Timer with VBScript
Defining the Timer Object in HTML
Timer Events, Methods, and Properties
The Completed Sample

Abstract

This article explains how to create a "slide show" Web page, using the technologies adopted by The Nature Conservancy of Washington Web site .

The Nature Conservancy site uses the ActiveX™ Timer control and Visual Basic® Scripting Edition (VBScript) in its Gallery section (see http://www.tnc-washington.org/photo/photo001.asp ) to display images at regular intervals within a picture frame. The effect is that of watching a slide show of nature photographs. In this article, we'll explain the HTML and VBScript coding required to create a similar example.

Back to top

Introduction

To complete this example, you will need ActiveX™ controls -- in particular, the ActiveX Timer control (which can be found in the Microsoft ActiveX SDK) -- and a scripting language such as VBScript or JavaScript. In my example, I will be using VBScript as my scripting language. I will discuss the coding for the "slide show" in two sections: The first section describes the scripting code used to control the Timer object, and the second section describes the HTML tags for including the Timer object on the Web page. I've also included a reference section listing the events, methods, and properties associated with the Timer control.

Back to top

Controlling the Timer with VBScript

We first need to create a script and place it in our HTML page using the <SCRIPT> tag. This tag has an attribute, LANGUAGE, that identifies the scripting language being used -- for example, "VBScript" or "JavaScript". In our example, we will be using VBScript, so the HTML tag looks like this:

<SCRIPT LANGUAGE="VBScript">

Now we can declare some document-scoped variables. We need to keep in mind that VBScript uses only variant data types for variables, so we declare the variables as follows:

Dim aPicturePages(10)     'an array to hold HTML page names
Dim iPictureIndex         'an index into the above array
Dim iPictureCount         'a count of how many pictures to display

Next, the variables need to be initialized. We set the index to point to the first entry in the array:

iPictureIndex = 0

We need to fill the array with URL names pointing to the pictures to be displayed. These names can be in short form (for example, "photo1.htm") or in full URL form (for example, "http://www.misc.com/coolphoto.htm"):

aPicturePages(0) = "photo_1.htm"
aPicturePages(1) = "www.myown.com/pics/photo_2.htm"
aPicturePages(2) = "http://www.misc.com/coolphoto.htm"
...
aPicturePages(n) = "photo_n.htm"

To keep track of the number of URLs in the array, we need to initialize a variable to "n", where "n" is the URL count:

iPictureCount = n

I have named the Timer control tmrMain (I will use this name later in the HTML <OBJECT> tag). The Timer control has an Interval property, which is used to control the interval between Timer events (that is, the delay between photos in the slide show) in milliseconds. It also has a Timer event, which is triggered every time the interval specified in the Interval property expires. (See Timer Events, Methods, and Properties for a listing of events, methods, and properties associated with the Timer control.) We can set an interval of 5 seconds (=5000 milliseconds) as follows:

tmrMain.Interval = 5000

To write the actual subroutine for the Timer event, we simply increment the index variable and display a picture:

Sub tmrMain_Timer
   'increment the index
   iPictureIndex = iPictureIndex + 1

   'perform some bounds checking; if out of bounds, reset index
   if iPictureIndex > iPictureCount then
      iPictureIndex = 0
   end if

   'fill in location of contents of frame, causing picture to be displayed
   parent.frames("slides").location = aPicturePages(iPictureIndex)
end sub

The last line of code before end sub uses the frames collection on the parent page of the executing page to display the picture. The code parent.frames("slides").location points to the frame called "slides" on the parent page of the document that contains the code being executed.

That is all the VBScript code it takes to set up a "slide show" page. The entire VBScript code looks like this:

'create vars 
Dim aPicturePages(10)       'an array to hold HTML page names
Dim iPictureIndex           'an index into the above array
Dim iPictureCount           'a count of how many pictures to display

'initialize vars 
iPictureIndex = 0                 'set index to first entry
aPicturePages(0) = "photo1.htm"   'initialize URL array
aPicturePages(1) = "photo2.htm"   '
aPicturePages(2) = "photo3.htm"   '
iPictureCount = 3                 'store URL count
tmrMain.Interval = 5000           'set timer interval

Sub tmrMain_Timer
   'increment the index
   iPictureIndex = iPictureIndex + 1

   'perform some bounds checking; if out of bounds, reset index
   if iPictureIndex > iPictureCount then
      iPictureIndex = 0
   end if

   'fill in location of contents of frame, causing picture to be displayed
   parent.frames("slides").location = aPicturePages(iPictureIndex)
end sub

Since we always try to write concise, tight code, here is an alternative way to write the tmrMain_Timer subroutine more efficiently.

Sub tmrMain_Timer
   'increment index, wrapping back to zero if overflowed
   iPictureIndex = (iPictureIndex + 1) mod iPictureCount

   'fill in location of contents of frame, causing picture to be displayed
   parent.frames("slides").location = aPicturePages(iPictureIndex)
end sub

That is all it takes to create the first part of our "slide show." We must next add the ActiveX controls to the Web page.

Back to top

Defining the Timer Object in HTML

To use the Timer object, we need to include it on the Web page using the HTML <OBJECT> tag:

<OBJECT
   ID="tmrMain"
   CLASSID="CLSID:59CCB4A0-727D-11CF-AC36-00AA00A47DD2"
   CODEBASE="http://www.myown.com/ax.cab"> 
<PARAM NAME="Interval" VALUE="5000">
</OBJECT>

The <OBJECT> tag is used to identify the object being defined, in this case, an object called tmrMain, which has a class ID of "59CCB4A0-727D-11CF-AC36-00AA00A47DD2". The class ID can be obtained from the registry or the type library of the control, or it can be generated by the ActiveX Control Pad. If the control is not already loaded into memory, the code for the control can be found at the URL "http://www.myown.com/ax.cab" and will be automatically loaded from this location.

The instance of an object used on the executing page can be initialized with the <PARAM> tag within the <OBJECT>, </OBJECT> tag pair. You can include multiple <PARAM> tags, each setting a different parameter (identified with the NAME keyword) to a value (specified with the VALUE keyword). In this case, we are initializing the Interval property to 5000 milliseconds. If you do not specify any <PARAM> tags, default parameter settings will be used.

Back to top

Timer Events, Methods, and Properties

The Timer control has one event, one method, and two properties.

Sub tmrMain_Timer
'process event
End Sub

tmrMain.AboutBox()

Let tmrMain.Interval = 5000
Set x = tmrMain.Interval

Let tmrMain.Enabled = TRUE
Set x = tmrMain.Enabled

The Completed Sample

To see the "slide show" implemented with the technologies discussed in this article, visit the Gallery page of The Nature Conservancy of Washington Web site. You will need a browser that supports ActiveX controls and VBScript (for example, Microsoft Internet Explorer 3.0 or later ).

Back to Nature Conservancy project page