Creating a Slide Show Using the ActiveX Timer Control

Robert Coleridge

July 23, 1996

Contents

Introduction
Controlling the Timer with VBScript
Defining the Timer Object in HTML
Timer Events, Methods, and Properties

Abstract

This article explains the coding required to create a "slide show" Web page using the ActiveX™ Timer control and Microsoft® Visual Basic® Scripting Edition (VBScript) that displays images at regular intervals within a picture frame.

Introduction

To complete this example, you will need ActiveX controls—in particular, the ActiveX Timer control (which can be found in the Microsoft ActiveX Software Development Kit (SDK), available on the MSDN Development Platform)—and a scripting language such as Visual Basic Scripting Edition or JavaScript™. In this example, I will be using Visual Basic Scripting Edition as the 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.

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 this 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 Uniform Resource Locator (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://example.microsoft.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 (that is, 5,000 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.

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, found at http://www.microsoft.com/workshop/author/cpad/. If the control is not already loaded into memory, the code for the control can be found at the (hypothetical) 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 5,000 milliseconds. If you do not specify any <PARAM> tags, default parameter settings will be used.

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

Robert Coleridge is a software development engineer with SolutionsIQ.