Just as Rollie Tyler and Leo McCarthy introduced special effects, or F/X, to many moviegoers 20 years ago, I hope to introduce F/X to you and many other scriptwriters. Like Rollie and Leo in the epic "F/X" movie, I'll let you in on the secrets behind the special effects you'll see shortly. But seeing is believing. Before you read on, I recommend that you download the HTAspecialEffects.hta from the Windows Scripting Solutions Web site (go to http://www.windowsitpro.com/windowsscripting, enter 49131 in the Instant-Doc ID text box, then click the 49131.zip hotlink). You might be amazed to see that you can make cursors come alive with animation, magically change text without even touching it, make text slowly fade in and fade out, make items quickly disappear and reappear, and more.
If you're unfamiliar with HTML Applications (HTAs) and how to use them as a front end for VBScript files, check out the resources in the "HTA Resources" box, page 16. If you're familiar with HTAs, let's get on with the show.
Let the Show Begin
Let's take a short tour around HTASpecialEffects .hta's UI, which Figure 1 shows. If you hover your cursor over the lower right textbox, you'll see your cursor change to the animated cursor that's currently selected in the adjacent list box. If you hover over the ShowTime button, you'll see the cursor change to a hand pointer. Hovering over the Browse button will demo a raindrop cursor. And hovering over the Exit button will dynamically change the "HTA Special Effects" heading to "Exit HTA Special Effects - Press F1 for Help."
All these special effects are achieved with the onmouseover attribute. Each object's onmouseover attribute has its own event that fires whenever the cursor hovers over that object. The Exit button's onmouseover event calls a subprocedure named ChangeColor, but all the other onmouseover events set the style.cursor property. For example, the ShowTime button's onmouseover attribute is
onmouseover=
"b3.style.cursor='hand'"
The hand cursor is built in, or native, to Microsoft Internet Explorer (IE). The Browse button's onmouseover attribute is
onmouseover="f1.style.cursor=
'c:\windows\cursors\raindrop.ani'"
The onmouseover attribute of the Hover over this box to see animated cursor textbox differs slightly because it displays the animated cursor that's selected in the list box. D1.value specifies this selection, so the code for this F/X is
onmouseover="t2.style.cursor=
D1.value"
As I mentioned earlier, the onmouseover event for the Exit button calls the ChangeColor subprocedure. As Listing 1 shows, this subprocedure changes not only the heading text but also its color. The heading's text and color are reset to their original values as soon as the cursor is no longer over the Exit button—a feat that's achieved with the onmouseout attribute. The event for the onmouseout attribute calls the ReturnColor subprocedure in Listing 1. This subprocedure sets the text and color back to the original values.
Fading In and Out
Now that you know how to animate cursors and magically change text without touching it, let's continue with the tour. Click the Fade Out button. As you can see, three things happen:
- The text directly above the button slowly fades out and some new text appears.
- The button's label changes from Fade Out to Fade Back.
- While the text is fading, the cursor changes to whatever you have selected in the animated-cursor list box.
When you click the Fade Back button, the new text and new label fade away and the previous text and label fade back in. This fade F/X is achieved with the SPAN element, which Listing 2 shows. The SPAN element lets you encompass a portion of text within another element for special processing. You can assign an ID to the SPAN element and reference the ID in order to apply unique style filters (which affect the way in which content is displayed) and transitions (which affect the way in which content changes are displayed). For example, the Span1 ID is used in the FadeIt function to apply special effects. (I'll elaborate on the FadeIt function shortly.)
You use the onfilterchange attribute to detect the end of a transition. When a transition ends (in this case, when the text finishes fading in or out), the onfilterchange event triggers and the cursor is reset to the default arrow.
The other noteworthy attribute within the SPAN element is the position attribute. In this example, the position attribute is set to relative. This setting enables the text to stay in the same position relative to the rest of the window, should the window be resized.
When you click the Fade Out or Fade Back button, the onclick attribute event calls the FadeIt function and passes the Span1 ID to that function as a parameter. As Listing 3 shows, the FadeIt function receives this ID in the variable named obj. With the needed information in hand, the function first sets the cursor style from within a subprocedure named ChangeCursor. ChangeCursor sets the cursor to whatever is selected in the animated-cursor list box.
Next, the FadeIt function checks the value of the button's label to see whether it's Fade Out. If it is, the function changes the button's label to Fade Back and performs a fade transition. If the label is Fade Back, the function performs a fade-in transition and changes the button's label to Fade Out.
Callout A in Listing 3 highlights the code that changes the label and performs the fade-out transition when you click the Fade Out button. Recall that Span1 is passed to the FadeIt function in the obj variable. So, anything applied to the obj variable actually gets applied to the Span1 object, which ultimately is the text that fades in and out.
Prev. page
[1]
2
next page 
