About ten years ago, a friend of mine bought a mouse for his computer. I thought he was crazy. Neither of us used any software that supported a mouse. I couldn't imagine that moving a hectic little dot around the screen could be easier than selecting things using the keyboard. Of course, our main input device at that time was a joystick, but my point here is that mice have completely changed the way people interact with a computer. And in catering to the mouse-driven world, rollovers and button-clicks are the bread and butter of multimedia. Chapter 10, "Controlling Movie Elements with Puppets," covers more advanced functions by puppeting sprites. This chapter covers both through the following simple examples:
What is a rollover? A rollover is simply a detection of the mouse location. When the mouse is located over something, something happens. A common use of rollovers is highlighting an area when the mouse travels over it so that the user knows it is a clickable area. A menu, for example, might have five buttons that are all a dim blue color when nothing is happening, but when the mouse moves over each button, it turns yellow. Then if the user clicks it, something else could happen.
In Director, the rollover feature is just a test, nothing more. You check if a certain rollover state is true or false and tell the computer what to do in either circumstance. Because Lingo is a programming language, you can have it perform one action or a list of actions. For a rollover, you can have the screen turn purple, make worms dance around, and play your favorite "Dueling Banjos" sound clip if you want to. Of course, that would be very annoying for the user to have to endure every time he or she moved the mouse over a particular area.
The Lingo test is easy. Suppose that you have a sprite in channel 5 that you want to test for a rollover. If the mouse is over it, you want to jump to a marker called "hilight" in another frame. If the mouse is not over it, you want to repeat the frame it's in. You would use the following Lingo in the frame script:
on exitframe
if rollover (5)=true then go "hilight"
else go to the frame
end
Remember that the number in parentheses is the sprite number, not the cast number. The wrong one can make for a confusing situation. My example used the else argument to loop in the frame, but it could have used another if test. The next statement does the same thing as the preceding Lingo:
on exitframe
if rollover (5)=true then go "hilight"
if rollover (5)=false then go to the frame
end
Let's look at a simple example of this. The file pdgwave.dir on the CD-ROM uses an easy rollover test to advance the movie when the mouse rolls over it, and to stop the movie when the mouse is not over it. This is useful because a continually looping movie could tie up the viewer's system or become annoying; this provides some means of interaction for when the movie starts and stops. Figure 9.1 shows the movie in Director.
Figure 9.1 : The rippling PDG logo.
The movie is a series of frames exported from 3D Studio that shows the PDG company logo rippling while playing a looping sound effect. The cast members play in sequence in sprite channel 1. Every frame in the loop has the same frame script Lingo, except the last one, which sends the playback head to the "start" marker to repeat the effect. The rollover scripts look like this:
on exitFrame
if rollover (1)=false then
sound stop 1
go 1
end if
end
So if the mouse is not located over sprite 1 (which always contains the image), two things happen: The audio is stopped in sound channel 1 using the "sound stop 1" command, and the playback head jumps back to frame one, which contains the static PDG logo image.
The rectangle that contains the sprite is the boundary of the rollover area. This is fine for rectangular shapes or areas that don't need to be exact, but what if you want to detect for a rollover in an area that is different from the bounding rectangle of the sprite?
One way is to create a second invisible shape above the sprite that will be seen as the rollover area (sometimes called a hot spot). So you might have a large bit-map image in sprite 3, and a small invisible shape in sprite 4. To create an invisible shape, use one of Director's hollow shape tools and select the dotted line for an outline (which means it has no outline). Then draw a shape over the area to be detected. Your Lingo would then use sprite 4 in the rollover command instead of sprite 3.
A second way of having nonrectangular rollovers is the mousecast function. This Lingo command returns the number of the cast member that the mouse is over. If cast member 8 is in sprite channel 4 and the mouse is located over it, the mousecast function would return the number 8. If copy ink is used, then the bounding area is a rectangle just like the rollover function. But if matte or background transparent inks are used, the "hot" area is only the visible part of the cast member. So the area that becomes transparent will not register as part of the cast member.
On the CD-ROM, arrows.dir shows how the mousecast Lingo is used. There are three markers that the playback head jumps between. "None" is where the mouse is not located over anything. "Left" is where the mouse has rolled over the left arrow. "Right" is where the mouse has rolled over the right arrow. In the "None" frame, the Lingo is as follows:
on exitFrame if the mousecast=1 then go "left" if the mousecast=2 then go "right" go to the frame end
You can see in the cast window that the left arrow is cast member 1, and the right arrow is cast member 2. The movie in Director is seen in figure 9.2.
Figure 9.2 : Using the mousecast function.
When the mouse is located over the left arrow, the mousecast function returns the value of 1 because the left arrow is cast member 1. The if statement causes the playback head to jump to the marker "left" where a different color arrow is used. In the new frame, there is a new Lingo statement to check the mouse position.
on exitFrame if the mousecast <>3 then go "none" else go to the frame end
This statement checks if the mouse is still over the arrow. But the red arrow is cast member 3, not 1 like the first blue arrow. Now the statement must check if the mouse is over cast member 3. If it is, the frame loops; if not, it jumps back to the "None" marker. The right arrow performs the same way as the left arrow, but a new script checks for a different cast number.
Using the mousecast function can become confusing if you end up rearranging your cast members later on. To prevent confusion, you can make a simple change that uses a cast member's name instead of the number. Arrow2.dir shows the same movie using cast member names instead of numbers. The scripts look like this:
on exitFrame if the mousecast=the number of cast "blue left" then go "left" if the mousecast=the number of cast "blue right" then go "right" go to the frame end
I named the blue left arrow "Blue Left" using the info button in the cast window. Similarly, I named the other arrows so that I could refer to them by name instead of by number. This way, you can move any cast members around without messing up your Lingo statements.
The mousecast function always
returns a number, so you need to use the
number of cast…
statement for this argument to work. If you typed
if the mousecast = "blue left" you would be comparing
a number to a name, which would never be true. By using the
number of cast "blue left" you are comparing
two numbers, which will execute the test properly.
| Note |
To avoid confusion, Director 5 uses the term number of member… instead of number of cast… because multiple casts may be used. Lingo from Director 4 still works properly in version 5. |
Director offers no support for distinguishing right and left mouse buttons (on Macintosh, there is no right button, anyway). But it can perform two separate tests for the mouse button. One is if the button is pressed; the other is if the button is released. Respectively, these are mousedown and mouseup. Like rollovers, you can have the mouse button perform an action or list of actions that you want.
Here's a simple example of how the mousedown function could be used in a Shockwave movie. Hats.dir on the CD-ROM could be part of a Web page with information about products that you could purchase on-line. It contains a small button that, when clicked, shows a close-up of the product-hats, in this case.
We used two graphic images: one of the small button, and one with the close-up picture. Figures 9.3 and 9.4 show the two images in Director. The button is in one frame that loops continually. A Lingo script attached to the button looks like this:
Figure 9.3 : Using mousedown to change frames.
Figure 9.4 : Repeating the frame while the mouse button is pressed.
On mousedown go "closeup" end
When the mouse is pressed, it jumps to the frame that contains the close-up. In the close-up frame, the script loops until the mouse button is no longer pressed. The Lingo in the frame script is as follows:
on exitframe if the mousedown=false then go "start" else go to the frame end
Mouseup is used more often than mousedown because people usually click the button down and release it immediately. When attached to a cast member, a mouseup script will execute every time the mouse is clicked on that particular cast member. You should know that if a user clicks a sprite, then moves the mouse off the sprite before releasing the mouse button, the mouseup handler doesn't execute.
Using the example from chapter 7, "Animations to Demonstrate or Teach," you can repeat an animation using a button with a mouseup script. Tires2.dir on the CD-ROM shows this (see figure 9.5). A button in the last frame contains a script to return to frame 1 when pressed.
Figure 9.5 : Using the mouseup command for a button to repeat the animation.
on mouseup go 1 end
You've started using interactivity in your movies, and no doubt you can find many uses for rollovers and button clicks. Here is what to expect in chapters to come: