Jeanne's WorldHouse o' HyperCardTricks of the HyperTalk Masters|
Jeanne's WorldHouse o' HyperCardTricks of the HyperTalk Masters |
As with many forms of communication, the effectiveness of a HyperCard stack depends largely on how it presents information to the eye of the user. The visual appearance of a stack - its look and feel - is supremely important in determining whether the stack is able to attract and hold attention, whether it is easy to learn about and use, and whether the information it presents will remain in the mind of the user.
This chapter is devoted to a single HyperTalk command - the visual effect command - along with the combinations that can be achieved using its many options. HyperCard's visual effects, like the special effects that are used in movies and television, can be used to direct the viewer's attention to important information, to amuse, and to fool the eye. When used with skill and attention, this single command can give much style as well as substance to the stacks you design.
A visual effect is a visible transition from one card's image to another. If you simply tell HyperCard to go to another card, either from a script or by choosing one of the items in the Go menu, the image of the destination card will almost instantly replace the image of the card you were previously on. This type of sharp transition is called a cut in movie and television production. Often, this is the most suitable way of moving from card to card. It has the advantage of simplicity, and it is not overly distracting to the user.
However, there may be times in the development of a stack when you find that you want to provide a different sort of transition. For example, transitions can be used to provoke the user's interest and attention, to soften the edges of the switch and make it less abrupt and jarring, or to achieve special effects (such as in animation). This is where visual effects become invaluable.
When used appropriately, visual effects can also be used as part of a subtle language of hints to the user about exactly what is going on during navigation from card to card. It's easy for a user to get lost in large or complicated stacks. Even in small stacks, the user can quickly become disoriented if there are no visual clues to tell him what direction he's going in, or even worse, if those clues are contradictory. Care must be paid, therefore, to choosing effects which are appropriate as well as attention-catching.
Since it's possible to design entire stacks with no visual effects at all, many people who have become experienced HyperTalk scripters are still unfamiliar with the visual effect command and the best ways to use it. Others have used a few of the most basic visual effects in their stacks, but may want to explore further possibilities, such as combining visual effects. (It is worth noting that adding visual effects to an already-existing stack is one of the most common ways for beginners to start learning a little about how HyperTalk works.)
This chapter contains a complete description of the visual effect command and each of its many options. The question of where to use which visual effects is discussed, and several scripts are presented, including one that lets you quickly test visual effects. You will also find information about the new unlock screen with visual effect command, and about variations such as chaining a series of visual effects in sequence.
This chapter is intended for people who are fairly experienced HyperCard users, and who have done at least a little HyperTalk scripting. You should be familiar with the basics of using HyperTalk, the go command, and the use of the message box.
You can add a visual effect to any card transition by placing the following command in a handler, before any card transition command:
visual effect name of effect
The word "effect" is optional. You can also add other optional parameters, such as speed, to a visual effect; these will be described later in the chapter.
The specified visual effect is not executed as soon as it is declared in the script; instead, it is stored up to be used for the next card transition that is commanded from the handler. The most common command used to go from one card to another within a script is, of course, the go command; however, the find and pop card commands are also card transitions and can also be used with a visual effect. The visual effect command, therefore, requires two lines of code in all: one line to declare the visual effect and one line to go to a card. This means that visual effects cannot be used from the message box, since the message box can only execute a single line of HyperTalk code.
You can place other command lines between the visual effect command and the card transition command. However, if the handler ends before any card transition is encountered, the visual effect is ignored. This is because all visual effect commands are forgotten as soon as HyperCard receives an idle message. (The idle message is sent continuously whenever HyperCard is not executing any handler.)
When you use the visual effect command in a script, first you see the image of the starting card; then the transition visual effect appears, which may mix parts of both images; and finally, when the transition is complete, the screen holds the image of the destination card. Since "go to this card" is a legal HyperTalk command, the starting card may be the same as the destination card; in this case, as will be seen below, most of the visual effects are not visible on the screen.
There are nine visual effects: dissolve, zoom, iris, scroll, wipe, barn door, checkerboard, venetian blinds, and plain (no effect at all).
The dissolve effect uses successive patterns of scattered pixels from the original image to replace pixels from the destination image, continuing with denser and denser patterns until the original image is completely gone. The effect is that of the original image gradually dissolving into the destination image.
The dissolve effect alters only the part of the screen that differs between the original image and the destination image. For example, if you dissolve from a card that contains a small graphic on a white background to a similar card, the white background that is common to both cards will not be affected at all by the dissolve.
A corollary of this is that if a stack includes a dissolve from one card to another identical card, you will not see the dissolve, since the original image is identical to the destination.
The zoom effect must be used with the direction open or close. (You can also use out instead of open, or in instead of close.) Zoom open creates the same "expanding rectangles" effect as is seen in the Finder when you double-click a document or application to open it; the zoom close effect is the same as the "contracting rectangles" you see when you quit from an application and return to the Finder. The zoom open effect is centered on the last point that was clicked. (Later in this chapter, you'll find a trick to make the zoom start from a point you select rather than from the point the user clicked on.) The zoom close effect always zooms to the center of the destination image, regardless of where the user clicked last.
HyperCard creates the zoom open effect by drawing a series of expanding rectangles over the image of the original card and then switching to the destination image, while the zoom close effect first switches to the destination image and draws the zooming rectangles over it. There is no gradual mixing together of the two images, as there is when using the dissolve effect. This means that a zoom is a fairly abrupt transition, visually and psychologically, since there is a fast cut at the end of the zoom. It also means that, unlike the dissolve effect, a zoom followed by a transition to an identical card can be seen on the screen.
The zoom effect provides a psychological clue about the direction of the movement, rather a softening of the transition. Zoom open is usually used to indicate that the user is moving into a deeper, more specific area of the stack, or opening a part of the stack to look at the contents. It can also be thought of as magnifying a small part of the card. Zoom close usually is used to signal the user that he is moving back out to a previous or more general level of the stack, closing part of the stack, or moving from a detailed view to an overall view.
There is an effect used in film called "iris" that is very similar to the HyperCard visual effect iris open. It shows a round lens gradually opening from a point in the center of the original image, through which the destination image can be seen. The lens increases in size until the destination image has completely replaced the original image. The iris close effect is similar to iris open, except that the lens starts at the edges and gradually draws to the center of the card.
However, the lens shape of the iris open effect, instead of being round (as it is in the film effect) is actually rectangular; to be exact, it follows the contour of the HyperCard window.
The iris effect is very similar to the zoom effect. Like zooming, it is often used to signal movement to a deeper area of the stack (iris open) or back out to a more general area (iris close). However, unlike the zoom effect, iris displays part of both images on the screen at the same time, so it's a softer, more gradual effect than a zoom. It also means that, as with the dissolve effect, an iris from one card to another identical image won't be visible. The iris open effect also differs from zoom open in that it always starts from the center of the card, rather than from the last point the user clicked on.
The scroll visual effect moves the destination image across the original image in the indicated direction. It looks like the new image is being slid into place over the old one, as though you were removing one card from a deck and slipping it onto the top of the deck.
A scroll is a fairly sharp-edged transition, though not as abrupt as a transition that uses no visual effect. The scroll right and scroll left variations are often used to indicate sequential movement through a stack, while scroll up and scroll down can be used to introduce an entirely new topic, or to indicate a non-sequential jump to a completely different part of the stack. The scroll effect is also useful when you want to create specific special effects, such as a simulation of a slide show.
Since the leading edge of a scrolling card is shown moving across the original image, scrolls appear cleaner if the edge is visually distinct in some way; for example, if the original image is mostly white and the destination image is mostly black, the edge will show clearly as it scrolls across the screen. Another way to make a clean edge is to put a border on the destination card.
The wipe visual effect is similar to the scroll effect. Like scrolling, the wipe effect moves the destination image into place over the original image, moving in the indicated direction. However, instead of the destination image sliding over the original image, the wipe action follows an imaginary vertical or horizontal line moving across the screen in the indicated direction; where the line passes, it leaves behind the image of the destination card, erasing the original one.
Several other ways to think of the wipe effect may help you visualize its action. For example, you can imagine that the wipe operates by laying one edge of the destination card against the corresponding edge of the current image and gradually unrolling it, pressing it down into place over the original image. Or you can imagine that the original image is being rolled up toward the edge to reveal the destination image lying underneath it.
Like the dissolve and iris effects, the wipe effect alters only whatever portion of the screen changes from the original image to the destination image.
Wipe and scroll are very similar effects, and are often used for the same purposes. The major difference is that the scroll effect appears to move the destination card into place over the source card, while the wipe effect gradually replaces the source image with the destination image while not moving either image. For this reason, wipe is a somewhat softer effect than scroll.
The barn door effect is a kind of double wipe. Barn door open wipes from the center of the screen outward to the left and right edges, while the barn door close effect wipes from the edges in to the center. The effect is of pulling a pair of sliding doors open or closed.
Like dissolve, iris, and wipe, the barn door effect alters only that part of the image that differs between the original image and the destination image. The effect of a door opening is particularly pronounced if the destination image is very different from the original image.
The barn door open effect can be used like an iris open, to indicate to the user that he is moving deeper into the stack's contents, while barn door close is used for the opposite movement back outward to a more general layer. The barn door effect is also often seen when the stack designer wants to show that a "side trip" - for example, to a help section - is being taken. Barn door is especially effective when the stack's graphic design includes a clear division down the center of the card: for example, when the background graphic is a picture of an open book.
The checkerboard effect divides the card into a grid of squares (sixteen squares horizontally by nine squares vertically). First all the odd squares are replaced by the corresponding parts of the destination image, then all the even squares. If you look at the individual squares during the checkerboard effect, you will see that each square is replaced with a wipe-type effect from top to bottom.
The checkerboard effect, like dissolve, iris, and wipe, does not change any area that doesn't differ between the original image and the destination image. Checkerboard generally looks best when the original image is very different from the destination image.
The venetian blinds effect divides the card into nine horizontal strips and replaces all the strips at once, from the top of each strip down. If you look closely you will see that each strip is replaced with a wipe, as with the checkerboard effect. Like the checkerboard effect, the venetian blinds effect works best if the original and destination images are very different from one another.
The checkerboard and venetian blinds visual effects are not used in stack design nearly as often as the others. This is largely because in most situations, they are too flashy to be appropriate. However, there are special circumstances where you may want to use one or both. For example, you may be designing a promotional stack that will be used in a public place, such as a sales floor; such a stack can be designed to use striking effects that are visible from a distance in order to attract users. The venetian blinds effect is also a good one to use when you want to indicate that the user is now looking "behind the scenes" of a stack. It can be used to good effect to animate card-to-card transitions where a continuous "rolling" effect is desired. The venetian blinds and checkerboard effects are very obvious and unusual, and they may not be subtle enough for a lot of applications - they are too distracting and garish for most stacks. But they certainly catch the user's attention, and where that feature is needed is where you'll want to consider using them.
The plain visual effect means to use no visual effect: simply cut directly to the destination image, as though no visual effect command had been given. You might well ask what use this is; the answer is that the plain visual effect can be used to cut directly to a destination image other than the card you're going to.
With any visual effect command, you can specify a destination image and speed. A visual effect command that includes a destination image and speed is written like this: visual effect effect-name speed to destination-image
Both destination image and speed are optional: you can include a destination image, a speed, both, or neither with any visual effect command you use.
For the destination image, you can specify any of five images: black, gray, white, card, and inverse. Black, white, and gray are self-explanatory. "Card" is the image of the destination card; if you haven't specified a destination image, card is used. "Inverse" is the black-to-white reverse of the destination card.
If the destination image is anything other than card, you'll see the effect performed from the original image to the destination image, and then cut directly to the card when the effect is over. For example, if you have the lines
visual effect dissolve to gray go to card "Next Topic"
in a handler, then when the handler is executed, you will see the original card dissolve to a solid gray. When the dissolve is finished, there will be a cut to the card "Next Topic". This cut at the end of the visual effect can sometimes lend an undesired abruptness to the transition that uses an intermediate image. One way to avoid this abruptness is discussed in the section below on chaining visual effects.
In addition to selecting a destination image, you can vary the speed of a visual effect. Any visual effect can take place at one of five speeds: very slowly, slowly, normal, fast, very fast. ("Slowly" can be abbreviated as "slow"). If you don't specify a speed, the normal speed is used. There is no visible difference between the fast and very fast speeds except on a Macintosh II or accelerated Mac SE.
With some visual effects (for example, scroll and zoom), the transition is not displayed continuously, but in stages or steps. At normal speed, this isn't really apparent; however, at very slow speed, some effects will look a little jerky. This bumpy effect can be interesting in itself and you may want to use it deliberately sometimes, but you'll usually want to choose from among normal, fast, and slow speeds.
You will probably use the dissolve, zoom, and iris visual effects more often than the others. These three are among the more subtle of HyperCard's visual effects. They are also easily understood, since they correspond to actions that are already familiar to the user, either through experience with the Macintosh interface (as in the zoom effect) or knowledge of the visual language of film and television.
As mentioned previously, the visual effect command has no visible result when simply typed into the message box, since in order for the visual effect to be seen, HyperCard must receive a command that results in a card transfer before the next idle message is generated. (Idle messages are sent continuously when there is no command executing.) However, there may be times when you are undecided about a visual effect and want to see several of the possibilities in turn, without the necessity of typing each of them into a script in turn. The following custom message handler lets you quickly demonstrate any visual effect by typing the effect's name into the message box:
on doVisual theEffect
do "visual effect" && (theEffect) -- parentheses mean "the value of"
go to next card
end doVisual
After you've typed this handler into your stack's script, type the following line into the message box:
doVisual "zoom open"
You will see the zoom open visual effect, followed by a transfer to the next card. You must enclose the name of the visual effect in quotation marks. (Strictly speaking, this is necessary only when the effect consists of more than one word, such as "dissolve to inverse".) The quotation marks tell HyperCard that it should treat the name of the effect as a single term in the doVisual command.
If you would like this capability to always be available when you're working on a stack, type the doVisual handler into the script of your Home stack.
Remember that visual effects affect only the contents of the card window, and any floating windoids (such as the message box) remain unaffected. If you want to see what the visual effect looks like without the message box cluttering up the screen, make certain the global blindTyping property is set to true. (You can set blindTyping to true on the Preferences card of the Home stack, if the userlevel is set to 5. You can also set it in a script with the line
set blindTyping to true
If the blindTyping property is true, then any text you type will be entered into the message box, whether or not the box is visible on the screen. Type the doVisual command, then close the message box and press the Return key. Since blindTyping is on, the message box will receive the keypress, prompting it to execute the doVisual command.
While you are developing a stack and choosing visual effects for it, you may at times want a quick reminder of the available visual effects and their syntax. The following handler provides information about the available effects and about the options for each effect:
on remindVisual theEffect
if theEffect is "dissolve"
then put "dissolve [<speed>] [to <destination image>]"
else if theEffect is "zoom"
then put "zoom open|close [<speed>] [to <destination image>]"
else if theEffect is "iris"
then put "iris open|close [<speed>] [to <destination image>]"
else if theEffect is "scroll"
then put "scroll left|right|up|down [<speed>] [to <destination image>]"
else if theEffect is "wipe"
then put "wipe left|right|up|down [<speed>] [to <destination image>]"
else if theEffect is "barn door"
then put "barn door open|close [<speed>] [to <destination image>]"
else if theEffect contains "venetian"
then put "venetian blinds [<speed>] [to <destination image>]"
else if theEffect is "checkerboard"
then put "checkerboard [<speed>] [to <destination image>]"
else if theEffect is "plain"
then put "plain [<speed>] [to <destination image>]"
else if theEffect contains "destination" then
then put "destination images: card, inverse, gray, black, or white"
else if theEffect is "speed"
then put "speeds: very fast, fast, normal, slow[ly], very slow[ly]"
else
put "visual effects: dissolve, zoom, iris, scroll, wipe, barn door..."
wait 5 seconds
put "...barn door, checkerboard, venetian blinds, plain."
end if
end remindVisual
If you type this handler into your stack's script and then type remindVisual into the message box along with the name of a visual effect, the syntax and variations for that effect will appear in the message box. For example, if you want to be reminded of the variations available for the barn door effect, type this in:
remindVisual "barn door"
The following line will appear in the message box:
barn door open|close [<speed>] [to <destination image>]
Following the usual conventions for HyperTalk command descriptions, a vertical line (|) indicates a choice between two or more alternatives, and optional parts of the command are enclosed in square brackets.
If, instead of specifying a visual effect, you type remindVisual speed or remindVisual "destination image" into the message box, the handler displays all the possible values for these optional parameters. If you type "remindVisual" with no additional arguments, or if the remindVisual handler doesn't recognize the visual effect you specify, it will list all the available visual effects. (Since there is not enough room in the message box for the names of all nine visual effects, the remindVisual handler lists them in two sets displayed five seconds apart.) You can then ask for a reminder about a particular effect.
To obtain certain special effects, you can execute two or more one visual effects in sequence during a single card transition. HyperCard allows you to chain several visual effects together by declaring them in the handler in the order that you want them to appear during the card transition.
For example, suppose you have a button that transfers the user from a card containing a large graphic on a white background to another card that contains mostly text. You may decide that you want the graphics card to dissolve to a completely white background (using the visual effect command's optional destination image) and then, instead of an abrupt cut at the end of the dissolve, do another dissolve from the all-white image to the destination card. This combination makes the transition look as though the card is fading slowly and reappearing in a new form. The handler for such an effect would look like this:
on mouseUp
visual effect dissolve to white
visual effect dissolve to card
go to card "Text Field"
end mouseUp
(The "to card" in the second line of the handler is optional, since "card" is the default destination image. It is included here for clarity.) The visual effects you declare are not executed at once; instead, they are stored up to be used at the next card transition. This means that you cannot halt a series of visual effects in the middle. In this sense, issuing several visual effect commands and then triggering them with a card transition command is analogous to loading a pinball machine with several pinballs; once the lever has been pulled and the balls have been released, they cannot be individually recalled.
You may want to use the doVisual script discussed above to see how multiple chained effects look. Here is an enhanced version that lets you try out several effects chained together:
on doVisual theEffect
repeat with x = 1 to the number of items in theEffect
visual effect (item x of theEffect)
end repeat
go to next card
end doVisual
To use this command with one visual effect, type the doVisual command into the message box as discussed above. To use multiple visual effects, separate the effect names with commas and enclose the list of effects with quotation marks:
doVisual "dissolve to white,dissolve to card"
The ability to layer multiple effects atop one another gives you a great deal of versatility in choosing effects for your stacks. For example, you can use a double dissolve like the one discussed above to visually soften a transition. You can also use multiple visual effects such as those in the following combination to sharpen a transition, making it more noticeable:
visual effect dissolve fast to inverse visual effect dissolve fast to card
Here are a few other interesting combinations. For a quick and fairly sharp transition, try this combination:
visual effect plain to white visual effect plain to card
This works especially well with cards that contains a great deal of information on a white background. Try it with other destination images for different effects.
As noted earlier, the zoom effect is a fairly abrupt one, since it ends with a sharp cut. The iris effect is softer, but it always opens from the center of the screen rather than from the point the user clicked on. To soften a zoom open transition while retaining the visual association to the point the user clicked on, try this combination:
visual effect zoom open to gray -- or white or black visual effect iris open fast to card
The destination image for the zoom open command should use whatever color is predominant in the card design's background.
Many combinations work by giving the impression of closing the original card and then opening the destination card. For example, you might use the iris effect:
visual effect iris close to black visual effect iris open to card
The first card closes to a blank background, from which the destination card then opens. This kind of combination is especially effective when moving between stacks or when going to a completely new area of a stack.
While it is tempting to take maximum advantage of the many possibilities offered by chaining visual effects, you need to use some caution in choosing to use a multiple effect. For one thing, multiple effects will take longer to execute than a single effect, so it's usually not a good idea to use them in any situation where the user will be irritated by a slightly slower response. And, although you can chain together any number of visual effect commands, you will usually not want to chain more than two effects together.
Partly because of the reduced speed, multiple effects increase the psychological distance the user feels between the original card and the destination card. Keep this in mind, and use them when you want to cue the user that a large "distance" is being traversed.
As a final flourish to the doVisual handler, you can add an optional card name or card ID parameter. The following handler lets you specify the name of the card you want to go to after the visual effect, as well as the effect(s) you want to see. (If you don't specify any card, it just goes to the next card in the stack.) This additional capability can be useful for fine-tuning effects between two specific cards.
on doVisual theEffect, theCard
repeat with x = 1 to the number of items in theEffect
visual effect (item x of theEffect)
end repeat
if theCard is empty then
go to next card
else
go to card theCard
end if
end doVisual
To use this form of the doVisual command along with a card parameter, type the card's name or card ID after the visual effect(s). Here are some examples:
doVisual "dissolve to gray, dissolve to card","Glossary Card" doVisual "zoom open","ID 67802"
Note that you must enclose the card name in quotation marks if the name contains a space.
There is one more method for achieving visual effects: the unlock screen with visual effect command, which was introduced in version 1.2 of HyperCard. This command is used in tandem with the lock screen command, also introduced in version 1.2. (For more on these two commands, see Chapter 3 - "Large Stacks".)
While the screen is locked, any changes to the appearance of the current card, such as changes in the position of fields or buttons, are not shown; only when the screen is unlocked do these changes appear.
This command lets you do a a few things that are not possible using HyperTalk's original visual effect command. For instance, suppose your stack contains a button that, when clicked, shows a previously hidden field. You want to give the effect of the field "dissolving in" to the rest of the card. Recalling that go to this card is a legal HyperTalk command, it seems that this handler should achieve the desired effect:
on mouseUp
visual effect dissolve
show card field "Notes"
go to this card
end mouseUp
However, there is a problem, because visual effects take place only when the card transition is made. If you first set up the visual effect, then show the field, then go to this card, as in the handler above, the field will appear before the visual effect action takes place. On the other hand, if you set up the visual effect, go to the card and then show the field, the field will suddenly pop into being. In both cases, the dissolve effect is not seen, because the original image is identical to the destination.
The root of the problem is that the visual effect command is not actually executed until the card transition takes place. This means that it is impossible to change the screen during a visual effect. The lock screen and unlock screen with visual effect commands get around this problem by letting you change the card's appearance while the screen is locked, then employ a visual effect in the transition from the original image to the changed image. For example, to obtain the "dissolving field" effect discussed above, you would use the following handler:
on mouseUp
lock screen
show card field "Notes"
unlock screen with visual effect dissolve
end mouseUp
No card transition is required for the unlock screen with visual effect command to take effect. Unlike the visual effect command, this command is executed immediately rather than being stored up for later use. You should also be aware that unless the lock screen command is used before the unlock screen with visual effect, the latter will have no effect.
There are some limitations of the unlock screen with visual effect command that you should be aware of. Since the visual effect is executed immediately, rather than stored up for later use as with HyperCard's original visual effect command, you cannot chain multiple effects together using this command. Also, since the lock screen and unlock screen with visual effect commands were introduced with version 1.2 of HyperCard, using them will cause problems for users who have an earlier version of HyperCard. Versions 1.01 and 1.1, if they encounter these commands in a script, will not be able to recognize them as valid HyperTalk commands are will present an error message to the user. If there is a possibility that your stack will be used with older versions of HyperCard, you'll want to avoid use of these commands if the version being used is too old to handle them properly. To test the version of HyperCard that is being used, you might modify the handler given above like this:
on mouseDown
if the version >= 1.2 then -- this version has command
lock screen
show card field "Notes"
unlock screen with visual effect dissolve
else
show card field "Notes" -- this version doesn't, so skip effect
end if
end mouseDown
This handler does one of two things, depending on the version of HyperCard being used. If the version is 1.2 or later (a version that contains the lock screen and unlock screen with visual effect commands), the handler displays the visual effect; if an older version of HyperCard is being used, it simply shows the field with no visual effect. This makes your stack compatible with all versions of HyperCard while still allowing you to use the new features of later versions.
This section describes certain limitations to the visual effect command that you should be aware of, and some situations in which visual effects won't work at all.
As has been pointed out above, a visual effect is executed on the next card transition, and if HyperCard issues an idle message before the next card transition, any visual effects are lost. (Recall that HyperCard issues idle messages continuously whenever no handler is executing.)
However, this does not necessarily mean that visual effects are lost when you exit the handler in which they were declared. As long as HyperCard is continuously executing some handler, no idle messages are sent and any visual effects will be retained for the next card transition. This is true even if the card transition command takes place in a different handler than the handler containing the visual effect command. For example, consider this script portion, which consists of two handlers:
on mouseDown
visual effect iris open
if field "Daily Notes" contains "afternoon" then
go to card "Appointments"
else
cleanUp
end if
end mouseDown
on cleanUp
put empty into field "Daily Notes"
go to next card
end cleanUp
If the field doesn't contain the word "afternoon", HyperCard enters another handler - the cleanUp handler - before the next card transition. However, since HyperCard immediately begins executing the cleanUp handler as soon as it exits the mouseUp handler, with no intervening idle period, the iris open effect that was declared in the mouseUp handler is retained, and is used with the go to next card transition command of the cleanUp handler.
This also means that it is possible to chain visual effects that are declared in different handlers. For example, suppose your stack script contains the following handler:
on go
visual effect dissolve -- add a dissolve effect, and then
pass go -- let the transition proceed normally
end go
This handler intercepts any go commands in the stack, and adds a dissolve to those card transitions. Now suppose that there is a button in the stack whose script looks like this:
on mouseUp
visual effect dissolve to black
go to next card
end mouseUp
What happens when a user clicks on this button? The mouseUp message is sent, and a dissolve to black effect is stored up for later use. Then a go command is given. But the transition does not take place at once, since there is a go handler in the stack's script. This handler is executed, adding a dissolve effect to the dissolve to black that is already stored up. Finally, the command pass go is encountered. This triggers the actual card transition, and the two visual effects are executed in order. The effect of the two handlers, then, is equivalent to the effect of a single mouseUp handler that contains both visual effects:
on mouseUp
visual effect dissolve to black
visual effect dissolve
go to next card
end mouseUp
This capability is rarely used; however, you may find it useful in some stack design problems. For example, you can use a generic effect (such as dissolve) for all card transitions, modifying it with a different intermediate image for certain special transitions. In any case, whether you ever use it or not, you should be aware of this behavior, since it may produce unexpected results in your stacks.
Visual effects don't affect the message box or other windoids (such as the tools or patterns windoid) at all. Since its presence on the screen may detract from the impact of your visual effects, you may want your script to hide the message box.
However, it is best to check whether the message box is visible or not before hiding it, and restore it to its original state after the visual effect command is finished. This avoids annoying users who want to use the message box. For example, the following handler first stores the state of the message box. It hides the message box during the visual effect, then shows it again if it was visible before the handler started.
on mouseUp
put the visible of the message box into messageVis
hide the message box
visual effect dissolve to black
visual effect dissolve to card
go to stack "My Appointments"
set the visible of the message box to messageVis
end mouseUp
On a Mac II displaying color or grayscale, HyperCard will not display any visual effects; they will simply be ignored. However, even on a color display, you can use the Control Panel desk accessory to change the current number of colors to 2. You will then have a black and white display, on which visual effects can be seen. Unfortunately, there is no easy way to determine from within a script whether a color display is being used.
However, you can work around this problem with the following technique. Since Mac II screens are all larger than the standard 512x342 size of the original Macintosh screen (which is also the size of the HyperCard main window), and since HyperCard automatically centers its window on the screen, you can tell whether your stack is running on a large screen or not by checking the location of the card window. If "the loc of card window" (the location of the upper left corner) is 0,0 (the upper left corner of the screen), you can be fairly certain that HyperCard is running on a Mac Plus or Mac SE. If not, your script can put up a dialog box asking the user to make sure the Macintosh is set to black and white before continuing.
on openStack
if the loc of card window is "0,0" then
answer "Make sure the monitor is set for 2 colors."
end if
end openStack
This workaround does not distinguish between a large color screen and a large black and white screen such as the expansion displays for the Mac Plus and Mac SE, so a user of these displays may be confused by a message that refers to color. Another problem is that, since the location of the HyperCard window can be changed by a script, a stack that was running previously may have moved the card window.
The HyperDA desk accessory has no support for several HyperTalk commands, including the visual effect command.
If your stack may be used under HyperDA or on a color Mac II, environments in which visual effects cannot be seen, you will want to consider whether the stack still works well if no visual effects are used. Fortunately, you do not need to go through the entire stack eliminating all the visual effects in order to test this. Instead, if you want to see what the stack will look like without visual effects, you can temporarily lock out the visual effect command by placing an empty handler for it in the stack script:
on visual end visual
This handler will intercept all visual effect commands which originate in the stack, preventing them from being executed. You can then navigate through the stack and observe whether the lack of visual effects makes it difficult to use and understand. If it does, you may want to modify the stack to give additional navigational hints which do not depend on the presence of visual effects.
How much time does it take to do a visual effect? A very complicated sequence of effects may be lengthy enough to annoy the user, especially if it's encountered on every movement from card to card. Save really time-consuming effects for transitions that aren't made too often (for example, transitions that are made only when the stack is first opened) and for stacks where the user is at some leisure to enjoy your art.
This section contains hints on the most effective use of the visual effect command in designing your stacks, along with some special tricks you can do with visual effects. This section also discusses some ways you can use visual effects to make your stacks more polished, professional, and easy to use.
Many beginning desktop publishers yield to the temptation to use all these wonderful new fonts, styles, and sizes to the fullest, and consequently go overboard in including a profusion of different fonts and styles in their newsletters and brochures. Eventually, most people come to realize that pages with only a few fonts and styles are much more effective. Like fonts in a newsletter, HyperCard's visual effects are easy to misuse or overuse. They must be used with care and restraint if they are not to look garish and amateurish.
Subtlety is a very important aspect you need to learn in order to master visual effects. Resist the temptation to use too many effects just because the capability is there; some stacks achieve enormous visual impact using few or no visual effects. In film, notice the prevalence of straight cuts that go directly to a new scene; special effects are reserved for special moments in the film. There will be situations in which you deliberately set out to capture the user's attention with visual effects. However, in most cases, if the visual effect calls attention to itself rather than to the information you are trying to highlight, it is too obtrusive and you should think about toning it down or even removing it.
Consistency in your use of visual effects is also important. The visual effects in your stacks can provide important cues to the user. If you don't pay careful attention to choosing the right visual effects, users of your stacks may be disoriented or confused by mixed messages. Consistency provides a familiar framework that lets the user navigate with confidence.
Here are a few simple rules you can keep in mind to help keep your visual effects consistent:
You also need to pay attention to the amount and kind of visual impact. Sometimes you want the visual effect to be all but unnoticeable on a conscious level; other times, it's important that the visual effect be clearly noticeable. The kind of effect, the variations (speed, destination image), and the context (psychological and visual) all help determine what kind of impact an effect has.
Visual effects that work by replacing part of the card image, such as dissolves, wipes, and irises, work best when either the whole card changes or when a small part changes. For example, in a clip art stack that presents each piece of art in an identical frame, you might choose to use a dissolve between cards, giving the impression that the frame remains solid while the graphic dissolves into another. When most but not all of the card changes, it can give an unpleasant or unfinished look. In these cases, you might want to use a visual effect that shows movement of the card, such as a scroll. Another means of increasing contrast between near-identical images is to use an intermediate destination image: for example, the sequence
visual effect wipe right to gray visual effect wipe right to card
The closer the intermediate image is to the card images, the subtler the intermediate transition will be.
If you are in doubt about the right visual effects to use and need a place to start, or if you don't yet have a good feel for when and which visual effects are appropriate, take a look at other stacks which use visual effects. Try to determine which effects you like and don't like, and more importantly, why. Do you enjoy a certain effect when it's used in some contexts, but hate it in others? Keep in mind that the effects that draw your attention aren't necessarily the best: many visual effects work best when the effect on the user is so subtle as to be almost unnoticeable on a conscious level. If a certain stack you see strikes you overall as being professional-looking, having a smooth "feel", and being easy to use and orient yourself in, check out its visual effects.
This section presents several ways to make your stack more inviting and elegant by adding visual effects to actions such as opening and closing the stack. While these are all small things, their cumulative impact is to give your stacks a more polished and professional feel.
The entrance to a stack is a good place for visual effects. A startup screen on the first card can display some information about your stack, then dissolve to the main area of the stack. At the time the stack is first opened, you certainly have the user's attention. This is a good place to show off a time-consuming visual effect, since it only happens once rather than every time the user tries to get more information.
on openStack
visual effect dissolve to gray
visual effect dissolve to card
go to card "Main Index"
end openStack
One striking effect can be used with an all-black first card:
on openStack
visual effect barn door open
go to card "Main Index"
end openStack
Since the openStack message is sent when the user returns from another application after having launched the application from within HyperCard, you may prefer to put the opening sequence in the script of the first card if your stack launches applications. If you choose to do this, remember to put a comment in the stack's openStack handler explaining that the code for the startup sequence can be found in the script of the first card.
Often you will put visual effects in standard navigation buttons; however, remember that navigation can also be done from a menu, even if the menu bar is hidden (via keyboard commands). You may therefore want to trap these other card transitions for the purpose of adding a visual effect. The following handler adds an appropriate scroll visual effect when the user goes to the previous or next card using the Go menu. Note: the doMenu message is also sent when command-key equivalents for menu items are used.
on doMenu theItem
if theItem is "Prev" then visual effect scroll right
if theItem is "Next" then visual effect scroll left
pass doMenu
end doMenu
The following handler adds a dissolve effect to every card transition done within the stack, including those from pre-programmed buttons:
on go
visual effect dissolve
pass go
end go
You may want a special, more time-consuming effect when going to another stack, to indicate that the user is traversing a longer distance than on a simple card transition within the stack. The following handler uses the iris visual effect to give the effect that the previous stack is closing and the new one is opening:
on doMenu theItem
if theItem is "Home" or theItem is "OpenÉ" then
visual effect iris close to black
visual effect iris open to card
end if
pass doMenu --- this line is VERY important!
end doMenu
You can similarly trap the "help" message that is sent when the user chooses the Help menu item.
On exiting the stack, you may want to use a visual effect to make a distinct break between the HyperCard environment and the Finder. This handler dissolves to the gray color of the desktop:
on Quit
hide message box
visual effect iris close
go to card "Gray Card" -- an all-gray card
end Quit
Since a visual effect takes place only on a card transition, you must go to a card. You may want to use your startup screen card, if it is appropriate for the end of the stack.
Remember to check for already-existing handlers for these messages.
You will recall from the discussion of the zoom visual effect that zoom open zooms from the point the user last clicked on. Most often, you will use the zoom open visual effect in the mouseDown or mouseUp handler of a button, and you will want to zoom from the button's location, which will of course be at the last point the user clicked on. Zooming from the last point the user clicked on also helps maintain consistency with the zooming behavior of the Finder.
However, there may be times when you zoom from another point. In these situations, you can use the click command within the script to cause the effect to zoom from a point you select.
For instance, suppose part of your stack consists of a map of the world with a list of continents as buttons. (You might do this rather than simply labelling the map if, for instance, there are too many names to fit comfortably on the map, or if you are designing an educational stack to teach children the names of the continents.) When the user clicks on a continent's name, the zoom open effect should be centered on the corresponding part of the map, rather than on the label, to set up a visual correspondence between the large map of the world and a more detailed map invoked by the click.
The following handler might be placed in the button for Africa:
on mouseUp
click at 300,200
visual effect zoom open
go to card "Africa Map"
end mouseUp
One problem to be aware of with this approach is the possibility of conflicting messages. For example, if there is a button with a mouseDown or mouseUp handler at the point (300,200) in the example above, the handler will be triggered by the click command.
Visual effects let you give the impression of many other forms of communication. Here are a couple of examples that may be especially useful for information presentation.
You can also incorporate sound to improve the presentation. It is important to choose compatible and well-integrated sounds, visual effects, and screen designs.
To present a series of images like a slide show, use two wipe visual effects:
on mouseUp
visual effect scroll left to black
visual effect scroll right to card
go to next card
end mouseUp
This looks a lot like a shutter sliding into place over a slide and then moving back to reveal the next slide. This kind of technique helps your audience to associate a stack with a form of communication already familiar to them. For example, you might use this slideshow technique to present a series of graphs in a prepared presentation, and then take questions, with the rest of the stack serving as a reference for you.
If it is appropriate for your particular presentation, combining this effect with a digitized clunking sound enhances the slideshow illusion:
on mouseUp
play "clunk" -- digitized sound placed in stack
visual effect scroll left to black
play "clunk"
visual effect scroll right to card
go to next card
end mouseUp
Another way to present information, especially text, is in the pages of an electronic "book". You might use this kind of layout, showing a book page, for a children's stack. There is a square transparent button over the flap at the corner of the page. This button works in a similar way to the flap in the Notebook desk accessory. Clicking in the lower right half of the square takes you to the next page; clicking in the upper left half takes you to the previous page.
on mouseDown
play "click" tempo 180 c5e c6 -- "click" is a digitized sound
if ((item 1 of the clickLoc) - (item 1 of the rect of the target)) ¬
< ((item 4 of the rect of the target) - (item 2 of the clickLoc))
---- x-coordinate of the click with respect to the button
---- y-coordinate of the click with respect to the button
then
visual effect wipe left to card
go previous card
else
visual effect wipe right to card
go next card
end if
end mouseDown
Remember that since the background is common to both cards, it is unaffected by the wipe.
Appropriateness is very important in choosing to use fancy effects like these. If your information and the way you choose to present it don't really match one of these ideas, don't use it. If you use an effect that's not really suitable out of a wish to impress viewers or capture their attention, there's a good chance that the clash between materials and presentation will distract your audience from the ideas you're trying to get across to them.
One use for visual effects, particularly in stacks that are meant to be on public display, is to enhance animation techniques. If a part of your stack uses movements from card to card - for example, a transparent button to zoom in on one section of a diagram - you can use a dissolve to psychologically "smooth" the effect. Another example is the use of effects such as venetian blinds to capture attention on a show floor or other environment where you want people to walk up and take notice.
The script below waits until the stack has been idle for 60 seconds, and then begins an animation sequence using the venetian blinds effect. It is especially suitable for demo stacks that are used at trade shows and on sales floors, because it ensures that if no one is using the stack, it is still visually active and attention-attracting.
This handler works by keeping track of the mouse. Every two minutes, the idle handler checks the mouse position. If it is the same as the position 120 seconds ago, the stack is considered to be idle and the animation sequence starts. If the mouse is in a different position, the clock is reset and the position is checked again in another two minutes.
on idle
global lastTimeChecked, lastMouseLoc
if the seconds - lastTimeChecked < 120 then exit idle
---- we only want to check every 2 minutes ---
put the seconds into lastTimeChecked -- reset the clock
if the mouseLoc = lastMouseLoc then -- idling routine
repeat until the mouseLoc lastMouseLoc or the mouseClick
visual effect venetian blinds to black
visual effect venetian blinds to card
go to next card
end repeat
end if
put the mouseLoc into lastMouseLoc
go to first card
end idle
The following is also required in the openStack hander in order to set the global variables to their initial values:
on openStack
global lastTimeChecked, lastMouseLoc
put the seconds into lastTimeChecked
put the mouseLoc into lastMouseLoc
end openStack
Visual effects can be used to make two cards appear as one. For example, using the wipe effect, you can use two cards as a single paint canvas. One way to implement this kind of function is to place a transparent button at the lower border of the top card and another at the upper border of the bottom card. When the mouse enters one of these border areas, the other card is brought into view.
Visual effects can also give the impression that a single card is really two. In the discussion of visual effects earlier in this chapter, it is noted that go to this card is a legal HyperTalk command which, since it is a card transition command, triggers any waiting visual effects. This capability is useful to obtain certain effects.
For example, you can click a button to "zoom open" a pop-up field:
on mouseDown
visual effect zoom open
go to this card
show card field "Notes"
end mouseDown
Unlike the dissolve effect described earlier, you don't need to use the unlock screen with visual effect command for this. To understand the reason, recall that the dissolve effect affects only those parts of the card that are different from the original image. This was the source of the sequence problem described in the section on unlock screen with visual effect. However, the zoom effect draws on the original card rather than relying on the difference between original and destination image, and so it appears even if the original image is identical to the destination image.
In a HyperCard stack that is used as a replacement for the Finder, you may want to emulate the Finder's behavior on opening a document or application: when the icon is double-clicked, a zooming-rectangles effect appears as the document is opened. The following handler will provide this behavior:
on mouseDown
global myTicks
if the ticks - myTicks > 120 then -- if the click is soon enough
put the ticks into myTicks -- after the last click, the user
exit mouseDown -- has double-clicked
else
visual effect zoom open
go to this card -- without a "go", the effect
open "MacWrite" -- won't be seen
end if
end mouseDown
Visual effects can give the user valuable clues for navigation, can draw the attention, and can greatly enhance the smooth operation and professional feel of the stacks you design. If they are overused or used inappropriately, however, they can make a mess of the stack. When used carefully and with attention, visual effects are among the most powerful and aesthetically rewarding of HyperCard's possibilities.
Jeanne A. E. DeVoto jaed@jaedworks.com