As far as interactivity goes, buttons are about as necessary as you can get. Pretty much everything you do, except for entering data into a field, involves using the mouse and clicking buttons. And there are as many ways to implement buttons as there are button styles.Director comes with a couple of different types of buttons you can use in your projects, and are available in the Tool palette. These are very basic buttons, howeverquite useful for prototyping, but not for custom interfacesand you still need to add Lingo to them to make them work. They simply save you the task of creating the button graphics. Since we already have button graphics, we'll focus on making them work.To make the buttons work, you'll need a bit of Lingo, in the form of a behavior attached to the button that will react to the mouse. (A button behavior is already available in the Library palette, but using it won't really teach you anything, so we'll do it the hard way instead.)
|1. ||Click to select frame 1 of channel 15 in the Score.By first selecting the frame and channel in the Score, new sprites you add directly to the Stage will begin their spans where you want. The buttons need to appear above the interface, and channel 15 will do nicely.|
|2. ||From the buttons cast, click and drag btn_p1_norm onto the Stage. Get it as close as you can to being aligned with the background graphic.I should mention that this method of having the buttons part of the background is simply how I do things. While it would be easy enough to not include buttons, I find it doing it this way quickLesson 2, and allow for rollovers and down states.Before continuing, this is a good point to save your progress.|
With the buttons in place, it's time to start adding the Lingo to make them work. Since there are three states to each button, you'll need to add the appropriate mouse event handlers into the button behavior. In Lesson 2, you created two simple behaviors that were attached to the buttons, and sent the playhead to the appropriate marker on mouseUp. Since those behaviors already exist in the internal cast, they will serve as a good starting point.Let's begin by modifying the behavior used on the project 1 button; it should be member number 8 in the internal cast. By the way, because you most likely didn't give the behavior a name when you created it, you might want to give it one now. Name the script member project_button.Before you get started, let's look at what you'll be doing.
|1. ||Rewind the movie, then open the Message window by clicking the Message Window icon on Director's toolbar or by pressing Ctrl/Command+M.With the Message window open, enter the following line of Lingo:|
When you press Enter you'll see the results appear in the lower half of the window:
Director is telling you that the sprite in channel 10 is using member number 2 from cast number 2. Cast 2, if you look at the tab order in the Cast panel, is the buttons cast. You can verify that in the Message window by tracing out the name of the cast:
-- (member 2 of castLib 2)
So you know what member sprite 10 is using. Not only can you get the member property of a sprite, you can set it as well.Now, since you deleted the old shape sprites being used as buttons, you'll need to attach the behavior to the project 1 button in order for the button to work.
|2. ||Click and drag the project_button behavior from the cast, and drop it onto the project 1 button on the Stage.When you drag the script over the button, the button will show a thick, highlighted edge, letting you know you can drop the script, as shown here:When you're ready, drop the script onto the button. Nothing visible will happen when you drop it, but the script is now attached to the button. You can see that the script is attached by selecting the sprite it's attached to, then choosing the Script tab in the Property inspector:The Property inspector will list any scripts attached to the sprite. As you will see later, many scripts can be attached to a single sprite.Next you need to add the other mouse handlers to the script.|
|3. ||To edit the script, click to select it in the Property inspector and then click the Script Window button as shown. Or you can select the script in the cast and then click the Cast Member Script button. Either way you do it, add the following Lingo underneath the current mouseUp handler.|
NoteA behavior or any other script can have as many different handlers as you care to add, and the handlers within the behavior can be in any order you like.After tracing the sprite member in the Message window, you should have an idea of what this handler is doing. When the mouse enters the button, the cast member being used by the sprite is set to the over state. Notice what the member property of the sprite is being set to member("btn_p1_over", "buttons")Though that probably makes sense it goes like so: member(member name, cast name). You don't actually have to specify the cast name. You could simply write: member("btn_p1_over"). But by specifying the cast name you ensure you will use the correct cast member.
on mouseEnter me
sprite(me.spriteNum).member = member("btn_p1_over", "buttons")
|4. ||Rewind and play the movie.You'll notice the circle changes to red when the mouse enters the button, but then it stays red when the mouse leaves the button. You need to change the sprite's member when the mouse leaves.If you pressed Play to test the button, stop the movie before continuing.|
|5. ||Add the following mouseLeave handler to the button behavior, underneath the two existing handlers.|
Now, when the mouse leaves the button, the member will change back to the normal state. All that's left to do is to handle the down state so the button looks a bit different when it's clicked. As you may have guessed, you'll add a mouseDown handler now.
on mouseLeave me
sprite(me.spriteNum).member = member("btn_p1_norm", "buttons")
|6. ||Add the mouseDown handler under the existing handlers.|
Director generates the mouseDown event when the left mouse button is pressed. Because there is a mouseDown handler attached to the button, the event is captured and 'handled.'Although you won't use it in the Portfolio Project, the right mouse button is handled with corresponding rightMouseDown and rightMouseUp handlers.
on mouseDown me
sprite(me.spriteNum).member = member("btn_p1_down", "buttons")
|7. ||Rewind and play the movie to see how the project 1 button is working.When you roll into the button the circle will turn red, and turn back to gray when you roll out. When clicked, the button will depress a little, and you'll jump to the project 1 section.Note that when you're in the project 1 section, the circle next to the project 1 button stays red, which tells users that they are viewing project 1.Another visual clue that is typical of buttons: the cursor, or pointer, changes when it passes over a button. Director affords you complete control over the mouse cursor. You can change it to any of the system cursors as well as custom cursorseven animated ones.If the movie is playing, you should stop it before continuing. This is also a good place to save your work.|