Changing the Cursor
As you've no doubt seen in any modern application, the mouse cursor, or pointer, changes to provide visual cues to the user of the application. In Director, you can change the cursor whenever you need to with a little Lingo and, as mentioned previously, you can use the system cursors or custom cursors of your own design.To change the mouse cursor from the standard arrow to one of the system cursors you use the cursor command, which actually has two forms. It is both a method and a sprite property. By issuing the general _player.cursor() method the cursor will change throughout the application. By using the cursor property of a sprite, the cursor will change on that sprite only. This is the form you want to use for buttons.The chart shows the available system cursors for both Windows and the Mac. Where two cursors are shown, the first is the cursor on Windows, and the second is the cursor on the Mac. When just one cursor is shown, it looks the same on both platforms.Before modifying the button script so that the button itself changes the mouse cursor, let's have a look at the player.cursor() method using the Message window.
|1. ||Rewind and play the movie, then open the Message window by either selecting its icon on the toolbar or pressing Ctrl/Command+M, then enter the following Lingo. Remember to press Enter after typing each of these code snippets into the Message window, or the code won't work. Enter:|
The cursor will change to the hourglass (or the watch if you're on a Mac) when the cursor is anywhere over the Stage. Go ahead and change the cursor to some of the others available, according to the chart.In practice, you really won't use this form of the command. Instead you will use the cursor property of sprites.
|2. ||Enter the following in the Message window:|
When you enter _player.cursor(0) Director relinquishes control of the cursor back to the operating system, and the cursor becomes an arrow again. It's important to realize you're not setting the cursor to zero, but instead telling Director to not set it to anything.TIPNotice that in the chart, cursor 200 shows no cursor whatsoever. Using _player.cursor(200) is how you can hide the cursor from the user entirely.It's time to check out the cursor property of sprites.
|3. ||In the Message window, with the movie still playing, enter the following Lingo:|
sprite(10).cursor = 280
What you're doing here is telling the mouse pointer to change to the hand with the pointing finger whenever it is over sprite number 10. If you look in the Score, you'll see that sprite 10 is the project 1 button one.Now when you move the mouse around the Stage, the cursor stays the standard arrow until you're over the project 1 button, where it changes to the pointing finger.Having the cursor change over the button alerts users that there's something there, and is something I like to do in all my projects.Let's modify the behavior you've been working on for the button, to also include changing the mouse cursor to the pointing finger.
|4. ||Stop the movie and open the project_button script attached to the Project 1 button.TIPYou can right-click a sprite on the Stage, or in the Score, and select Script from the contextual menu that appears.Now the question is, where do you change the cursor property of the sprite, in the script? As you may have noticed by the exercise in the Message window, you can set the property once and the pointer will change each time it enters the button, and change back to the standard arrow without your having to tell it. So how do you take advantage of this? Answer: use the beginSprite event handler.You can place an on beginSprite handler definition into any script attached to a sprite. (This only works for sprites, as you might have guessed by the name.)Director issues the beginSprite just once for any given spritewhen the playhead initially enters the sprite's span in the Score. So this then is an ideal place to set the sprite's cursor property. It's also an ideal place to set up any other kind of data that only needs to be initialized once. (More about that later.)It should be mentioned that Director also issues an endSprite event when the playhead leaves a sprite's span. You can take advantage of the on endSprite handler within behaviors to reset the cursor, perform cleanup tasks, or anything else.|
|5. ||Add the following beginSprite and endSprite handlers to the project_button behavior.|
on beginSprite me
sprite(me.spriteNum).cursor = 280
on endSprite me
sprite(me.spriteNum).cursor = 0
Close the script window, then rewind and play the movie. As expected, the pointer changes to the pointing finger when the mouse is over the button, and the circle turns red. When the mouse leaves the button, the circle turns back to gray and the mouse pointer changes back to the arrow.Note
If you had used the general cursor() method in the beginSprite handler, instead of the cursor property of the sprite, the cursor would have changed to the pointing finger and stayed that way. Many rookie developers make the mistake of using the general cursorcommand, and set the cursor within the mouseEnter handler, and reset it within mouseLeave.Although that does work, it is much better practice to set the sprite's cursor property within beginSprite and leave it to Director from then on.Setting the cursor back to zero within the endSprite handler insures that the cursor changes happen for this sprite only. Let's see what happens had you not added the endSprite handler to the script.
|6. ||Open the project_button script and select the endSprite handler. With the handler selected, click the Comment button in the Script window's toolbar, as shown here.Using the Comment button in the toolbar allows you to comment out an entire selected block of code at once.Anything in the script that is commented is not executed when the movie is played. Comments allow you to add notes to your scripts, and you should do so liberally. Commenting your work can help you remember what you were thinking when you wrote it three months earlier. It also makes it much easier for someone else reading your code to understand it.In Lingo, comments are created by first typing two minus signs and then the comment. The comment can be as long as you like, but it has to be on one line. You can have as many lines of comments as you like.|
|7. ||Rewind and play the movie, then click the project 1 button.After the curtains open the cursor will still change to the pointing finger when over the project 1 button, even though there is no behavior attached to the button sprite. The cursor property affects the channel, which is why you need to reset the cursor on endSprite.Within the project 1 section, you want to keep the red circle, but the button itself should not be active.Stop the movie before continuing.|
|8. ||In the project_button script, select the commented endSprite handler and then click the Uncomment button in the Script window toolbar as shown:The Uncomment button lets you remove the comment indicators from a block of selected code.Commenting and uncommenting chunks of your code can help you to do bug testing as well. Remember, you can just type two minus signs at the beginning of any line and that line will comment out. This is typically the way you'll add comments into your behaviors:|
on beginSprite me
-- set the cursor to the pointing finger
sprite(me.spriteNum).cursor = 280
Now that you know how to use the various system cursors, it's time to have a look at creating and using your own, custom cursors.