| 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 quick and easy. And although changes take a little more work, I do that in my image editor anyway. You will develop your own methods of working as you progress.
As you can see from the following image, dropping the sprite exactly where it needs to be is sketchy at best. This is where the channel visibility buttons are your friend.
| 3. | Position the sprite using the arrow keys on your keyboard, and also by toggling the channel visibility.
By toggling the sprite's visibility as you move it, you can see the underlying image and thereby know where the button needs to go.
| 4. | Click to select frame 1 of channel 16 in the Score, then repeat steps 2 and 3 to place btn_p2_norm where it needs to go.
With the two buttons in place, it's time to do a little adjusting.
| 5. | Modify the span lengths of both button sprites to end at frame 10, where the intro section ends.
Remember, you select both sprites by clicking the spans anywhere but on a keyframe. Then click in the frame bar at frame 10 to move the playhead without deselecting the sprites. Finally, press Ctrl/Command+B to trim the spans.
You are probably wondering why you wouldn't just extend both buttons the entire length of the movie. After all, they will be needed everywhere in the movie, right?
Well, kind of. In the cast, you can see from the names of the button images that for each of the two buttons there are three states: normal, over, and down. Notice the over state is the same as the normal state, except that the little ball is red in the over state. You can use this over state, in the appropriate section, to indicate to users where they are in the movie. This will be clearer once you lay out the sprites in the Score.
| 6. | With both button sprites still selected in the Score, press Ctrl/Command+C to copy the sprites. Or select File > Copy Sprites from the top menu.
Now you're going to paste the copied sprites into the Score in the other two sections of the movie.
| 7. | Click to select frame 15 of channel 15, in the Score, then press Ctrl/Command+V to paste the sprites.
If all went according to plan, your Score should look like so:
| 8. | With both sprites still selected, click in the frame bar to move the playhead to the end of section 1, which should be frame 44. Press Ctrl/Command+B to extend the spans.
You now need to repeat this procedure once more so that the project2 section also contains the two button sprites.
| 9. | Select and copy both button from the project1 section, then paste them into the project2 section. Extend the spans so they match the length of the project2 section.
Your score now looks like this:
 With the new graphical buttons in place you can remove the invisible rectangles serving as temporary buttons in channels 10 and 11. You could have deleted the temporary buttons first, but doing it in this manner will help you to become a little more familiar with working in the Score.
| 10. | Select and delete the two invisible rectangle sprites in channels 10 and 11 of the Score.
With the old buttons removed, you can move the new buttons from their current channels into the channels occupied by the old buttons. But before doing that, you should delete the now unused shape from the internal cast. It should be located in slot 7. Simply click to highlight it and hit your Delete key.
| 11. | Click in the Score to select the first button sprite in channel 15, which spans frames 1 to 10. Then Shift-click the last button sprite in channel 16; this span should begin at frame 50.
You can use the following image for guidance if you need to: click at point 1, then shift-click at point 2.
 Just like selecting files in the import dialog box, you can Shift-click sprites in the Score to select an entire contiguous range.
Note You can also select a non-contiguous range of Sprites in the Score by Ctrl/Command-clicking them instead. | 12. | With the group of six sprites selected, click and drag the entire range up in the Score so that the sprites occupy channels 10 and 11the channels of the temporary buttons.
With the button sprites in place, you can swap out the normal buttons in the appropriate sections in order to indicate those sections to the user.
| 13. | In the Score, select just the project1 button sprite. This should be the sprite in channel 10, beginning at frame 15.
Instead of the normal state that this button is currently showing, you want it to show the over state instead. That way, when users looks at project 1, the circle to the left of the button will be red, telling them what section they're in.
| 14. | In the buttons cast, click to select the btn_p1_over member. With just the single member selected, press Ctrl/Command+E to exchange the members.
As Emeril might say, "Bam!" The btn_p1_norm cast member being used by the Sprite is exchanged with the btn_p1_over cast member. In the project 1 section, the project 1 button is now marked with a red circle, indicating the current section to the user. Now, do the same with the Project 2 section.
| 15. | Select the Project 2 button sprite in the Score that begins at frame 50, in channel 11. Next select the btn_p2_over member in the cast and press Ctrl/Command+E to exchange the members.
You now have the buttons in both sections of the movie, indicating to the user what section they are in. It's now time to add a little Lingo to the buttons in order to make them work. This time, you'll go a little further than in Lesson 2, and allow for rollovers and down states.
Before continuing, this is a good point to save your progress.
|
Adding Lingo 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:
trace(sprite(10).member)
When you press Enter you'll see the results appear in the lower half of the window:
-- (member 2 of castLib 2)
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:
trace(castlib(2).name) -- "buttons"
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.
on mouseEnter me sprite(me.spriteNum).member = member("btn_p1_over", "buttons") end
Note A 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.
| 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.
on mouseLeave me sprite(me.spriteNum).member = member("btn_p1_norm", "buttons") end
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.
| 6. | Add the mouseDown handler under the existing handlers.
on mouseDown me sprite(me.spriteNum).member = member("btn_p1_down", "buttons") end
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.
| 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.
|
|
