Creating a Simple Button
In the next lesson you will use Lingo to create a more advanced button that highlights when rolled over and changes when it's clicked. For now, however, an advanced button isn't necessary. All you need is a means to test the interface to see how it's looking and working. Fortunately, Director provides a couple of different ways in which you can quickly do testing.First, let's have a quick peek at Director's Message window, an invaluable tool when you're developing a project. Within the Message window you can execute lines of code, see the output of debugging statements, or figure out the tip for the pizza you just had delivered.
|1. ||Open the Message window by clicking its icon on Director's toolbar, or by pressing Ctrl/Cmd+M.When first opened, the Message window will display "Welcome to Director" and the cursor will be flashing on the next line, ready for input.|
|2. ||Rewind and then play the movieit will pause at frame 10. Then, in the Message window, enter: _movie.go("project2") and press Enter.As soon as you hit Enter the playhead jumps to frame 40, which contains the project2 marker you created earlier. The curtains then open and the playhead pauses when it reaches the script in frame 59.As you can see, you just need to place that bit of Lingo onto the project 2 button so when it's clicked the playhead jumps to that marker. We haven't yet imported the assets for the buttons, so we'll create a temporary button for now.|
|3. ||Click in the Score to choose frame 1 of channel 10.You're going to create a simple rectangle to serve as the button, and you'll want to create it on top of your interface.|
|4. ||Choose Unfilled Rectangle in the Tool palette, choose black for the foreground color, and then draw a box on Stage that just surrounds the project 1 button.In the Score, the new sprite appears and spans frames 1 to 14. The span terminates at frame 14 because Terminate at Markers is turned on in Sprite Preferences. This is of no concern, because you will want the button to span the entire length of the movie anyway.In your cast the new shape member appears in slot 7.|
|5. ||Click in the Score to choose frame 1 of channel 11, and then drag the shape member from slot 7 of the cast and drop it over the project 2 button on Stage.This is all you need for a quick test, and it takes advantage of Director's rapid application development (RAD) abilities.|
|6. ||In the Score, choose both sprites in channels 10 and 11 by clicking the middle part of one, and then Ctrl/Command-clicking the second one. Now click frame 59 in the Score's frame bar to move the playhead while you keep the sprites selected. Finally, press Ctrl/Cmd+B to extend both sprite spans at once.You now have a couple of simple rectangles that can serve as buttons for interface testing. All you need now is a bit of Lingo on each button that will send the playhead to the appropriate location when the button is clicked.|
|7. ||In the Score, right-click the rectangle sprite in channel 10 and choose Script from the contextual menu.This time, the Script panel opens and instead of a default exitFrame handler, there is a default mouseUp handler. This is the handler for a sprite, as opposed to the default handler for a frame.|
|8. ||Complete the handler by entering line 2.|
When you're through you can simply close the Script panel. If there's an error in your typing, you'll be alerted. In that case, just press the Script button in the alert and correct your error.
1 on mouseUp me
|9. ||Rewind and play the movie. With the movie paused at frame 10, click the rectangle serving as the project 1 button.When you click the button Director generates a mouseUp event, which the on mouseUp handler you created intercepts. It sends the playhead to the project1 marker as instructed and the curtains open before the playhead pauses at frame 34.If you click the project 1 button again, the curtain animation will replay. So far, so good; the first button is working as expected.|
|10. ||Stop the movie, and then repeat steps 7 and 8 for sprite 11, the project 2 temporary button. Complete the mouseUp handler by using project2 for the marker name.Now when you play the movie you can click the buttons for either project 1 or project 2, and the playhead jumps to the appropriate section.Let's stop the movie and do one final thing to the temporary buttons to make them look a little betterlet's hide them! At the bottom of Director's Tool palette are four line type options: No Line, One Pixel Line, Two Pixel Line, and Three Pixel Line. We're interested in No Line.|
|11. ||In the Score, choose the button sprites in channels 10 and 11. With both sprites selected, choose No Line from the Tool palette.Both buttons disappear, but they will still be active when the movie is played. Go ahead and play the movie and click the buttons to verify that they indeed still function. Stop the movie when you're ready to continue.This is a good point to talk a little more about behaviors and the ability to reuse them as we did with the frame script being used to pause the movie. In the two scripts you just created, you used a specific marker name within each script, making the script unable to be used for anything but the particular button it's attached to. This is often fine, but for greatest ease of use, it's always bestLesson 3 you will do exactly that when you create a more advanced button.Right now, however, you're going to learn more about creating and manipulating keyframes while you give the interface a little more appeal. To do that, you'll need something to animate, and will use Director's Paint window to create it.|