• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 12. Sprite Properties and Palette... > Creating a Behavior for Navigational...

Creating a Behavior for Navigational Elements

In this task, you will create a new behavior that you'll assign to the menu options you've just aligned with the grid. These menu options will be the navigational elements that users click to see the artwork. Later you'll assign scripts to these sprites that will move users to other screens in the multimedia art gallery. When you finish this task, the dimmed text in each sprite you have already placed on the stage will change to a readable selection when you move the cursor over it.

Double-click frame 27 in the behavior channel. In the Script window, type go to the frame. Then close the Script window.

Figure .

Figure .

From your experience with Lingo scripts in Lesson 5, you know this script makes the playback head stay in the frame where it encounters the script. For users to be able to see the result of the behavior you're going to create, the playback head needs to stay in one place. When you assign a script to a cell in the behavior channel, you create a frame script. These scripts are different from other scripts you've created for sprites and cast members. Frame scripts do not require that users do anything. Director carries out the instructions in the script when the playback head is in the frame that contains the script.

You should not put the script in frame 15, because later you will add a transition to this frame in the transition channel. When a transition and a go to the frame script occur in the same frame, Director keeps playing the transition over and over. Otherwise, where you place the frame script is largely a matter of preference. Because no animation or transitions occur in frames 16 through 27, you can pause the playback head in any of those frames and achieve the same effect. One standard convention, however, is to place the script at the end of the sprite's duration, which is why frame 27 was chosen here.

With the script in frame 27, the transition occurs and then the playback head moves into frame 27, where the script holds the playback head in place. This makes the menu remain on display for your viewers so they can choose one of the menu options.

Next you need to provide a behavior that will make the menu items visible when the mouse passes over them. The menu items are currently in a dimmed state and largely unreadable. Included among the cast members that you imported, however, are undimmed versions; cast members that contain readable versions of the dimmed text. Switching between the cast members as the mouse passes over a sprite is a method of indicating that the sprite is clickable.

In the score, select the PrivationDim sprite in channel 5; then click the Behavior Inspector button in the sprite toolbar or Director's toolbar.

The Behavior Inspector opens. If the Events and Actions panels aren't already visible, click the arrow to expand the Behavior Inspector's editing panels, so that the Behavior Inspector window looks like this:

Figure .

In the Behavior Inspector, choose New Behavior from the Behaviors menu. In the Name Behavior dialog box that appears, name the new behavior Button1. Then click OK to close the dialog box.

Once you name the behavior, it appears in the Behaviors panel of the Behavior Inspector.

Figure .

Open the Events menu and choose Mouse Within.

The mouseWithin event occurs repeatedly while the user's mouse cursor is inside the boundaries of the sprite. The boundaries are those lines and handles you can see when the sprite is selected on the stage. Next you'll define the action Director should take when the mouseWithin event occurs.


The Events menu shows event names in a generic form, such as Mouse Within. The Events list shows the event as it would be referred to in a Lingo script, such as mouseWithin.

Open the Actions menu and choose Sprite > Change Cast Member. Then select the Privation cast member from the menu and click OK.

Figure .

This action you're pairing with the mouseWithin event allows you to select a cast member that will be used to replace the currently selected sprite. A sprite of the cast member you select will appear in place of the original sprite when the mouseWithin event occurs. By selecting the Privation cast member, you're selecting the clear text version of the sprite rather than the blurred version.

Figure .

Now you've created one event and action combination for a behavior that applies to the sprite you selected in step 1. When users move the cursor within the boundaries of the sprite on the stage, the dimmed text sprite will be exchanged for a clearer version of itself.

Figure .

Now you will add an event and action to the behavior that will redisplay the dimmed text sprite when a user moves the cursor off the sprite.

With the Button1 behavior still selected in the Behaviors panel, choose Mouse Leave from the Events menu. Choose Sprite > Change Cast Member to Member from the Actions menu, select the PrivationDim cast member, and click OK.

Now two events are assigned to the Button1 behavior: mouseWithin and mouseLeave. Director detects a mouseLeave event when the cursor leaves the boundaries of the sprite to which that behavior applies.

Figure .

You can assign as many events as you like to a behavior and then apply the behavior to any sprite. Director can detect the differences between the events you assign to a behavior and then perform one or more actions in response.

The Sprite Overlay for the selected sprite now displays its Button1 behavior assignment next to the Behavior Inspector icon.

Figure .

Save your work.

Rewind and play the movie. Move the cursor over the sprite to which you assigned the Button1 behavior and then move the cursor off the sprite.

You can read the menu option when you move the cursor over the sprite because of the mouseWithin behavior you defined. Then, when you move the cursor off the sprite, the text returns to its original, dimmed state, because of the mouseLeave behavior you defined. In the next steps you'll create behaviors for the other two works of art in the multimedia art gallery: lineament and reserve.

On the stage, click the 12:LineamentDim sprite. With the Behavior Inspector still open, create a new Button2 behavior with a mouseWithin event and a Sprite > Exchange Cast Member action that exchanges the sprite with the Lineament cast member. Then add a mouseLeave event and an action that exchanges the sprite with the LineamentDim cast member.

Click the 16:ReserveDim sprite and create a Button3 behavior. Assign mouseWithin and mouseLeave events to the Button3 behavior that exchange the sprite with the Reserve and ReserveDim cast members, respectively.

Now all three of the menu options that represent works of art have similar, but separate, behaviors assigned to them. In Lesson 13, you will define the actions that occur when these menu options are clicked.

For now, the behaviors you've assigned change only the way these navigational elements appear when users explore the main menu.

Close the Behavior Inspector and save your work.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint