There are two kinds of custom cursors, or pointers, in Director. The first allows you to modify the normal mouse cursor with a 16 x 16 black-and-white (1-bit) bitmap image. The second involves using the Cursor Xtra. In Lesson 11 you'll use the Xtra to create a custom, animated color cursor, but in this lesson, we'll use a black-and-white image.
Actually two images are involved. The first is the image that will replace the cursor, and the second is the matte that specifies what portions of the cursor are transparent. Take for instance the following two images, which combine to form a flower cursor:
On the left is the actual cursor that will be shown. On the right is the matte telling Director how to cut the cursor out of the background. Any white in the matte image will appear as transparent in the cursor.
Let's go ahead and do a quick test using the flower cursor shown.
In the internal cast, click to highlight member 11, then select File > Import from the top menu. In the Import Files dialog select and import flower_cursor.gif and flower_matte.gif.
When importing .gif images, you'll get a new dialog box allowing you to select between Animated GIF and Bitmap Image, as shown:
Since the cursors aren't animated, choose Bitmap Image, and click to turn on Same Format for Remaining Files. When you click OK you'll be presented with the familiar Image Options dialog:
Set the options as shown: 8 bits, Remap to SystemWin, Trim White Space, and Same Settings for Remaining Images. Click OK to import the images. They should appear in positions 11 and 12 in the internal cast.
In the internal cast, select both of the new cursor members: members 11 and 12.
As stated previously, cursors need to be black-and-white, 1-bit images. Although the two images you just imported are black and white, they are 8 bit and will not work as cursors, which must be 1 bit.
With both members selected, choose Modify > Transform Bitmap from the top menu. Inthe Transform Bitmap dialog change the color depth to 1 bit and click the Transform button.
Remember that when modifying bitmaps you may receive a warning telling you that you should use an external editor. Simply click Continue within the warning dialog to dismiss it. When warned that the operation can't be undone, click OK.
If you select one of the cursor members and look at the Bitmap tab in the Property inspector you will see it is a 16x16 pixel image at 1 bit in color depth:
The images are now ready to be made into a custom cursor.
Rewind and play the movie, then open the Message window by pressing Ctrl/Command+M. Or click the Message Window icon on the toolbar.
In the Message window, enter the following:
Recall that you imported the two cursor images into positions 11 and 12 in the cast. When setting the cursor to a custom cursor you use a two-item list with the form [cursor member number, cursor matte member number]. Because the cursor image is in cast position 11 and the matte for the cursor is in position 12 you use the form [11, 12].
Now when the cursor is over the Stage, it changes to the flower. It also changes to the pointing finger when over the project 1 button, as expected.
If you instead wanted the cursor to change to the flower when over the button you could again use the cursor property of the sprite. You would simply set it to the two-item list like you did with the general _player.cursor() method.
Let's modify the project_button behavior so that instead of the pointing finger, the flower appears when the mouse is over the button.
Select the project_button behavior in the internal cast and click the Cast Member Script button to open the script window for editing.
Comment out the current line setting the cursor to 280, and add the line that sets the cursor to the flower, as shown:
on beginSprite me -- sprite(me.spriteNum).cursor = 280 sprite(me.spriteNum).cursor = [11, 12] end
Simple, right? It is, but it should be pointed out that using the member numbers directly in the list isn't a good idea because if you move either of the cursor bitmaps in the cast the code will break. The problem, however, is that the list itself requires member numbers to be used. The solution is that cast members have a number property. Examine the following output from the Message window:
trace(member("flower_cursor")) -- (member 11 of castLib 1) trace(member("flower_cursor").number) -- 11
There you go. Simply replace the numbers in the list with member ("name") number and you're good to go. The beginSprite handler should now look like the following:
on beginSprite me -- sprite(me.spriteNum).cursor = 280 sprite(me.spriteNum).cursor = [member("flower_cursor").number, member("flower_matte").number] end
Rewind and play the movie to see the results.
There is one last thing you need to know about creating and using custom cursors.
Stop the movie if it still playing.
In the internal cast double-click the flower_cursor cast member in position 11.
The Paint window opens when you double-click on a bitmap cast member.
Click to turn on the registration point in the Paint window's tool palette, as shown here:
By default, the registration point is set at the center of any bitmap images you create or import. When turned on, it appears as light gray crosshairs, and can be moved to any location simply by clicking in the image. With regard to cursors, the thing you need to know about the registration point is that it controls where the "hot spot" of the cursor is. If you leave it centered, nothing that reacts to the mouse, such as a button, will do so until the center of the cursor is over it. This would probably feel strange to the user, because the standard location for the cursor's hot spot is at the upper left corner.
Change the registration point of the flower to the upper left corner as shown here:
Rewind and play the movie. The flower now appears as a proper cursor when over the button. Before continuing, stop the movie and save it.