Letterman Stationery Filter Tutorial

A Tutorial on IE Filters

Everybody likes 'em. Everybody wants 'em. Why are they so tough to use? I'm talking Filters. Hopefully this tutorial will shed some light.

Author's Note: The filter calls in this tutorial are in the original Internet Explorer 4 call format. They will also work with the new filter call format instituted by Internet Explorer 5.5. Many more filters have been added with IE 5.5. Be sure to check out the Microsoft documentation available on their web site.

There are two basic classes of filters available to users of Internet Explorer 4+. They are Transition Filters and Visual Filters. This tutorial will describe all filters available in both classes, and give you a chance to play with each one. We'll also look at the small scripts which you can write to control them. It is important to note that multiple filter types can be applied to a single image or page element. First, we'll explore Transition Filters, like the ones being used above on the rocket ship.

Transition Filters - BlendTrans and RevealTrans

Transition filters do just that: they transition an image or page element on or off - from visible to invisible, or invisible back to visible. A pretty simple concept. You can even control the time element of transition. Within the class of Transition Filters, there are two methods we can use, BlendTrans and RevealTrans.

The BlendTrans Filter

The first method we'll explore is BlendTrans. BlendTrans is a simple fade filter. Let's try a BlendTrans on an image. Click on the blue link to the left of the saucer to start the transition.

Make Invisible

The saucer is transitioned on and off over a period of one second. As previously stated, the transition time can be controlled through script. We can write a simple, five line VBScript "subroutine" which we can call at will to display or hide our image or page element. Yes, that's right - other elements on the page can be controlled too - not just images. Here are the HTML elements that can be controlled using both the BlendTrans and RevealTrans filters:

<BODY>
<BUTTON>
<IMG>
<INPUT>
<MARQUEE>
<TABLE>
<TD>
<TEXTAREA>
<TFOOT>
<TH>
<THEAD>
<TR>
<DIV> **
<SPAN> **

** only available if this element is absolutely positioned

*Note:
Contrary to the posted documentation for <DIV> and <SPAN>, I have found that filters can be used on non-positioned elements. The requirement seems to be that at least a width or height argument be specified.

In this tutorial, we'll concern ourselves generally with the image element (the <IMG> tag). Using the filters with the other elements is essentially the same.

Using the BlendTrans Filter in Script

The following example of HTML code and script will define a visible image and cause it to transition to a hidden state.

Let's define our image first. We'll use the saucer image for example. Here is the <IMG> tag defining it:

Notice we have added the terms filter:blendTrans; and visibility:visible; to the STYLE operator. This defines the blendTrans filter to this image and sets the initial status of the image to "visible". Had we wanted to start off the image in an invisible state, we would specify "visibility:hidden" instead. Notice we have also identified the image by coding the term ID=saucer1. We must have a way to refer to it through the script. Now let's look at the script which activates the BlendTrans filter.

This is the simple VBScript "subroutine":

Sub blendTrans()
   saucer1.filters(0).Apply()
   saucer1.style.visibility="hidden"
   saucer1.filters(0).Play(1.000)
End Sub

We'll take each of the statements in turn and describe what they do.

Sub blendTrans()
Sub defines this as the beginning of our subroutine. Its name is blendTrans. You may name your subroutine whatever name you'd like, but be sure to start with an alphabetic character, and don't use embedded periods. Also, be sure to include the parentheses "()" after the name.

saucer1.filters(0).Apply()
This statement applies the filter and freezes the image so that we can start the transition. saucer1 is the ID of our image (see the <IMG> tag above). filters(0) references the first (and only) filter, (0), defined within this <IMG> element. Had we defined a second filter for this image, perhaps a visual wave filter, we would reference the wave filter by using the term filter(1). Apply() applies the filter and freezes the image.

saucer1.style.visibility="hidden"
Now we set the image's visibility to hidden. Hidden is what we want the image to be when the transition is complete. It will not attain totally hidden status until the transition has run its course (see the next paragraph). If, instead, we were transitioning an element from hidden to visible, we would code the word visible here, as visible would be our desired result.

saucer1.filters(0).Play(1.000)
Everything is now set up. This statement plays the transition. The number within the parentheses after Play(1.000) defines the time of the transition. The number to the left of the period defines the number of seconds, and the number to the right defines the number of milliseconds. One second = (1.000), 15.6 seconds = (15.600), etc.

End Sub
This defines the End of the subroutine.

But how do we start the transition? How do we call the subroutine through script? There are numerous ways. I'll describe two.

SetTimeOut "blendTrans",5000
Place this statement in another part of your script and it will call the blendTrans subroutine after a delay of 5 seconds (5000). Notice there is no period in the time specification. Change the time to whatever you like, even zero. If you don't need to set a timeout, simply use the statement blendTrans to call the subroutine.

Sub Window_OnLoad()
You can automatically have the transition take place when the page or post (the window) has fully loaded. Simply place the transition script within a subroutine named Window_OnLoad(). When the window has completed loading, the transition will start. It will take 1 second. As follows:

Sub Window_OnLoad()
   saucer1.filters(0).Apply()
   saucer1.style.visibility="hidden"
   saucer1.filters(0).Play(1.000)
End Sub

The RevealTrans Filter

Now we're going to have some real fun. The second method we can use to transition images or page elements is RevealTrans, which introduces many (actually 24) new possibilities of showing or hiding the element. Let's try the RevealTrans on an image. First select a transition effect from either the left or right column, then click on the blue link below the saucer.

Box In (0)
Box Out (1)

Circle In (2)
Circle Out (3)

Wipe Up (4)
Wipe Down (5)
Wipe Right (6)
Wipe Left (7)

Vertical Blinds (8)
Horizontal Blinds (9)

Checkerboard Across (10)
Checkerboard Down (11)

Random Dissolve (12)

Box In

Make Invisible

Split Vertical In (13)
Split Vertical Out (14)

Split Horizontal In (15)
Split Horizontal Out (16)

Stripes Left Down (17)
Stripes Left Up (18)
Stripes Right Down (19)
Stripes Right Up (20)

Random Bars Horizontal (21)
Random Bars Vertical (22)

Random (23)

Again, the saucer is transitioned on and off over a period of one second. And again, the transition time can be controlled through script. With the addition of a single line to our previous VBScript subroutine, we can control the RevealTrans filter and its many possibilities.

Tip:
Make a note of the transition effects numbers (0-23), and what they do. You will use these when selecting a transition effect in your script.

Using the RevealTrans Filter in Script

The following example of HTML code and script will define a visible image and cause it to transition to a hidden state.

Again, we must define our image. We'll use the second saucer image for this example:

Notice we have again added the term visibility:visible; to the STYLE operator. This time the filter constant has been changed to filter:revealTrans;. Our image is set to "visible" again, and the revealTrans filter is defined. Again, had we wanted to start off the image in an invisible state, we would specify "visibility:hidden" instead. And again we have identified the image, this time by coding the term ID=saucer2. Now let's look at the script which activates the RevealTrans filter.

Sub revealTrans()
   saucer2.filters(0).Apply()
   saucer2.filters(0).transition=12
   saucer2.style.visibility="hidden"
   saucer2.filters(0).Play(1.000)
End Sub

Notice the additional statement that has been added to the subroutine to handle the RevealTrans filter:

saucer2.filters(0).transition=12

This statement sets the transition effect. The transition set here is 12, the Random Dissolve effect. You may use any of the 24 filter designators (0-23) here.

All other statements and functions are the same as in the BlendTrans example, the only difference being the name of the subroutine, which may be any name you like. Call the subroutine the same way as described under BlendTrans, using your subroutine name in its place.

Again, you can automatically have the transition take place when the window has completed loading. Simply place the transition script within the Window_OnLoad() subroutine as was done with BlendTrans. When the window has completed loading, the transition will start. In this case, the image will become totally visible after one second.

Sub Window_OnLoad()
   saucer2.filters(0).Apply()
   saucer2.filters(0).transition=12
   saucer2.style.visibility="visible"
   saucer2.filters(0).Play(1.000)
End Sub

Now, let's look at a completed HTML document. This image will be automatically transitioned from a hidden state to a visible state when the window loads. It uses the RevealTrans filter. The transition takes 3 seconds:

<HTML>
<HEAD>
   <SCRIPT language=VBScript>
   Sub Window_OnLoad()
      saucer2.filters(0).Apply()
      saucer2.filters(0).transition=12
      saucer2.style.visibility="visible"
      saucer2.filters(0).Play(3.000)
   End Sub
   </SCRIPT>
</HEAD>
<BODY>
<IMG ID=saucer2 SRC="flyingsaucer.gif" STYLE="filter:revealTrans; visibility:hidden; WIDTH:158px; HEIGHT:114px">
</BODY>
</HTML>

Here is a second HTML document example. This image will be automatically transitioned from a visible state to a hidden state using the BlendTrans filter. The transition starts after a timeout of 10.5 seconds. The actual transition itself takes 1 second:

<HTML>
<HEAD>
   <SCRIPT language=VBScript>
   Sub Window_OnLoad()
      SetTimeOut "blendTrans",10500
   End Sub
   Sub blendTrans()
      saucer2.filters(0).Apply()
      saucer2.style.visibility="hidden"
      saucer2.filters(0).Play(1.000)
   End Sub
   </SCRIPT>
</HEAD>
<BODY>
<IMG ID=saucer2 SRC="flyingsaucer.gif" STYLE="filter:blendTrans; visibility:visible; WIDTH:158px; HEIGHT:114px">
</BODY>
</HTML>

Notice the Window_OnLoad() routine in this last example. When the window completes loading, Window_OnLoad() runs, setting the timeout to execute the blendTrans() routine after 10.5 seconds. After 10.5 seconds, the transition starts. The actual transition takes 1 second.

You are not limited to only one filter per subroutine either. Here the Window_OnLoad() routine transitions two images:

<HTML>
<HEAD>
   <SCRIPT language=VBScript>
   Sub Window_OnLoad()
      rocket1.filters(0).Apply()
      rocket1.filters(0).transition=16
      rocket1.style.visibility="visible"
      rocket1.filters(0).Play(6.000)
      saucer2.filters(0).Apply()
      saucer2.filters(0).transition=12
      saucer2.style.visibility="visible"
      saucer2.filters(0).Play(3.000)
   End Sub
   </SCRIPT>
</HEAD>
<BODY>
<IMG ID=rocket1 SRC="rocket.gif" STYLE="filter:revealTrans; visibility:hidden; WIDTH:100px; HEIGHT:250px">
<IMG ID=saucer2 SRC="flyingsaucer.gif" STYLE="filter:revealTrans; visibility:hidden; WIDTH:158px; HEIGHT:114px">
</BODY>
</HTML>

Here we call the transition subroutine outside of the Window_OnLoad():

<HTML>
<HEAD>
   <SCRIPT language=VBScript>
   ...
   ...the rest of your script here
   ...
   SetTimeOut "showImage",1500
   ...
   Sub showImage()
      saucer2.filters(0).Apply()
      saucer2.filters(0).transition=12
      saucer2.style.visibility="visible"
      saucer2.filters(0).Play(3.000)
   End Sub
   </SCRIPT>
</HEAD>
<BODY>
<IMG ID=saucer2 SRC="flyingsaucer.gif" STYLE="filter:revealTrans; visibility:hidden; WIDTH:158px; HEIGHT:114px">
</BODY>
</HTML>

You have just written your first transition script!

Visual Filters

There are 14 visual filters available. Visual filters are static filters, that is, once the filter effect is applied it does not change unless altered by script. Experiment with the filters below.

The 14 Visual Filters

Select one or more of the following filters:
alpha Opacity:
blur
chroma
dropShadow
flipH
flipV
glow
grayscale
invert
light
mask
shadow
wave
xRay

IE Visual Filters

Water Ripple Example

Now, using the wave filter, let's try using script to make a water ripple scene. It will require two images:

First, using positioning arguments in the <IMG> tag, we'll overlay the bottom image precisely with the image at the top. The wave filter will be applied to the small water image. Using script with a recurring loop, we'll then modify the wave filter slightly each time through the loop causing the water to appear to ripple. First, let's define the left image element:

Second, we'll define the small image element with the wave filter:

Notice two important things about the image definitions. First, they are both absolutely positioned. This means that we are controlling precisely where each image will be positioned on the screen. The position:absolute; left:0px; top:0px code is what does this. left:0px sets the distance of the image from the left side of the screen (0 pixels in this case), and top:0px sets the distance of the image from the top of the screen (0 pixels). Second, pay careful attention to the z-index: values. z-index sets the layer order for each image. The screen background is always referenced as z-index:0. z-index:1 is one layer above the screen background. We have set the diverimage layer index to z-index:1, and the rippling water layer index to z-index:2, which layers the rippling water over diverimage.

Now, let's analyze the important settings of the wave filter definition below:

filter:wave(freq=80, strength=6, phase=10, lightstrength=0, add=0, enabled=1)

Strength=6 defines the wave effect intensity. freq=80 defines the number of waves applied to the distortion. Arbitrarily, we'll set the wave phase=10. This is the value that will be changed repetitively in our looping script. It is what will create the ripple effect. enable=1 simply enables the wave filter at the time the window is loaded. All of the wave filter parameters can be controlled by script. For this exercise, we will only be modifying the phase value. In your own script, feel free to experiment with these values to produce different effects.

Here is the script:

Dim phase
Sub Window_OnLoad()
   shimmer
End Sub
Sub shimmer()
   phase = phase + 3
   water.filters(0).phase = phase
   SetTimeOut"shimmer",0
End Sub

The script explanation:

Dim phase
This statement defines the variable phase. We will use it to hold the current phase value.

Sub Window_OnLoad()
The Window_OnLoad routine, called when the window loads, starts the shimmer process by calling the shimmer routine.

Sub shimmer()
This defines the start of the shimmer routine.

phase = phase + 3
Here, we add 3 to the variable holding the phase value of the wave filter.

water.filters(0).phase = phase
Update the actual phase value of the filter, making the water appear to ripple.

SetTimeOut"shimmer",0
Now we loop back to the start of the shimmer routine again, repeating the process.

End Sub
This defines the End of the shimmer routine.

When we merge the images and run the script, this is the result:

The Visual Filters in Detail

Here is a brief description of what each of the 14 Visual filters do:

alpha
Sets element transparency level. Parameters: opacity=, finishopacity= (0-100, 0 is transparent, 100 is opaque). style= 0(uniform), (1)linear, (2)radial, (3)rectangular. startx=, starty= horizontal and vertical coordinates for opacity gradient start. finishx=, finishy= horizontal and vertical coordinates for opacity gradient end.

blur
Gives the element the impression of motion. Parameters: add= (1)add original image to blurred image, (0)omit it. direction= sets angle of blurred image in relation to original (0-360). strength= extension of blur in pixels.

chroma
Sets a color transparent. Parameters: color= hexadecimal triplet value (#xxxxxx) of color to be made transparent.

dropShadow
Creates an offset shadow for apparent depth. color= hexadecimal triplet value of drop shadow. offx=, offy= number of pixels between the element and the drop shadow along x and y axes. positive= (1)positive pixels generate drop shadow, (0)transparent pixels generate drop shadow.

flipH
Creates a horizontally mirrored image. No parameters.

flipV
Creates a vertically mirrored image. No parameters.

glow
Adds radiance to outer edges. Parameters: color= hexadecimal triplet value of radiance effect. strength= radiance intensity (0-255).

grayscale
Removes colors but retains luminance. No parameters.

invert
Reverses the hue, saturation, and brightness levels. No parameters.

light
Shines a light source on the element. Numerous parameters. Check the Microsoft documentation.

mask
Creates a transparent mask. Parameters: color= hexadecimal triplet value applied to transparent regions.

shadow
Displays the element as a solid silhouette. Parameters: color= hexadecimal triplet value of color used for shadows. direction= angle of shadow in relation to original image (0-360).

wave
Renders the element with a sine wave distortion along the x-axis. Parameters: add= (1)adds the original image to the waved image, (0)does not. freq= number of waves to be applied to the visual distortion. lightstrength= light strength (0-100). phase= percentage offset for the sine wave (0-100, corresponding to 0 to 360 degrees). strength= wave effect intensity (0-255).

xray
Renders only the edges. No parameters.

All filters share the common parameter of enable= (1)enable the filter, (0)disable the filter.

And there you have it - the 14 Visual filters in a nutshell.

Text Glow Example

Let's try one more filter example and script. We will generate some text and apply the glow filter to make it glow. Then we'll use script to heighten and lessen the glow effect. First, we'll define the image (our text actually):

<DIV id=textbox style="filter:glow(strength=10, color=#ffa500, enabled=1); color:#cc0000; font-size:24pt; font-family:georgia, serif; width:100%">
My Computer is on Fire!
</DIV>

This time we define our "image" in a <DIV> element. Remember, filters can be applied to other elements besides the <IMG> element. We first do some standard setup (color, font-size, font-family), then we set the width of the block to 100% of the window width (between the left and right margins). Using script with a recurring loop, we'll then modify the glow filter strength slightly each time through the loop causing the glow around the text to expand and contract.

Now, let's analyze the important settings of the glow filter definition below:

filter:glow(strength=7, color=#ffa500, enabled=1)

strength=7, sets the radiance intensity. This is the value that will be changed repetitively in our looping script. It is what will create the changing glow intensity. color=#ffa500, sets the hexadecimal triplet value of radiance effect (orange color). enable=1 simply enables the glow filter at the time the window is loaded. For this exercise, we will only be modifying the strength value.

Here is the script:

Dim glowStrength, increment
Sub glowText()
   if glowStrength>15 then
      increment=-1
   end if
   if glowStrength<0 then
      increment=1
   end if
   glowStrength=glowStrength + increment
   textbox.filters(0).strength = glowStrength
   SetTimeOut "glowText",80
End sub

The script explanation:

Dim glowStrength, increment
This statement defines the variables glowStrength and increment. We will be varying the filter's strength parameter between 0 and 15. Our increment will be either 1 or -1, depending if we are incrementing in a positive or negative direction.

Sub glowText()
This starts the Sub glowText() subroutine.

if glowStrength>15 then....end if
This section determines what our increment value should be. If strength is already at a value of 15, then we will set the new increment to -1 (negative).

if glowStrength<0 then....end if
This section determines what our increment value should be. If strength is already at a value of 0, then we will set the new increment to 1 (positive).

glowStrength=glowStrength + increment
Calculate the new glow strength.

textbox.filters(0).strength = glowStrength
Apply the new glow strength to the filter.

SetTimeOut "glowText",80
Now we loop back to the start of the glowStrength routine again, repeating the process.

End Sub
This defines the End of the glowStrength routine.

When we run the script, this is the result:

My Computer is on Fire!

Additional Notes

We have just scratched the surface on using filters. Here are some random ideas and techniques you can also try.

Defining Two Filters in the Same Element

Let's look at the glow text example again:

<DIV id=textbox style="filter:revealTrans glow(strength=10, color=#ffa500, enabled=1); color:#cc0000; font-size:24pt; font-family:georgia, serif; width:100%">
My Computer is on Fire!
</DIV>

Notice here we have added a second filter to the <DIV> element, a revealTrans filter. The revealTrans must now be referenced as filter(0), because it appears first, and the glow as filter(1). See how this works? The filters are always referenced in the order that they appear, starting with zero.

Defining a Filter in Script

You don't have to define your filter in the <IMG> tag or other element tag. It can be done using script. An example:

<SCRIPT language=VBScript>
...
...
saucer2.style.filter = "wave(freq=80, strength=6, phase=10, lightstrength=0, add=0, enabled=1)"
...
...
</SCRIPT>

This example defines a wave filter for the saucer image without having to define it in the HTML tag. When adding mulitple filters this way, be sure to include a blank space between each filter specification.

Other Ideas

• Define multiple images having RevealTrans or BlendTrans filters and create your own slide shows. Use the SetTimeOut statement to control the time sequence.

• Define multiple images in the same screen area, and transition each on an off where they fade into each other. Careful timing is the rule here.

• Define two images in the same screen space and use the opacity filter to make the upper image partially transparent, creating an interesting effect over the lower image.

There you have it - a quick course on filters. The possibilities and combinations are endless. The words for the day are experiment, experiment, experiment! Hope you all have fun with this. It's been a pleasure writing this tutorial.