Preparing Graphics for Multimedia: Setup for Interactive Elements Between Photoshop and Director (Part 2)
Arriving Safely at Your Destination
The other important aspect when dealing with interactivity is the destination. Where does the user wind up when the set of instructions "sends" him somewhere within the Score? These destination points are often identified by Markers. Creating unique and identifiable markers in your timeline also aid in the speed and accuracy of developing navigational links. One thing to remember when working with the interactivity of Director is that although the Score acts as a timeline, you can program your interactive links to perform in a non-linear fashion. That means functionality does not need to "happen" in order. As a developer, you will not know which selection the end user will make (unless you have developed a linear application, giving the user only one interaction per page), so pages or sections of your interactive application can be placed literally anywhere in your Score as long as you clearly identify them. So go ahead and add markers in your Score. Give yourself enough space (number of frames) to add the appropriate content.
For argument's sake, let's create four markers. The first one will be called MainMenu. This will be where the first sprites start, our list of interactive text links. The next ones will be appropriately named Sections1 through Sections3.
Markers work best as single words with no spaces.
Add a marker and label it MainMenu in the first frame in which you have placed your normal state text sprite (let's assume it starts at frame 10). For this example, add new markers and label them for Section1 at frame 100, Section2 at frame 200, and Section3 at frame 300.
With the first text sprite (normal state) already in the Score, you can begin to apply the desired behaviors to that sprite to start giving it its life and functionality.
Right mouse click on the sprite (or Option-click on the Mac).
A pop-up menu should appear.
Select Behaviors from the list.
The Behavior Inspector window should open.
Click the Behavior popup menu (it looks like a plus sign) in the upper-left corner of the window.
Select New Behavior from the popup menu and name this behavior.
I recommend developing a naming structure that will allow you to quickly and easily identify the behavior and its functionality. I'll call this one Section1link. This navigational text element will be used to "jump" the user to content in Section1 of the application, as identified by the marker.
Now, you need to add the various events. Click on the Event popup menu.
Select the desired event: mouseEnter.
This event will identify what action takes place once the user moves the mouse within the bounding box area (pixels defining the area of the sprite) of the text.
Select the desired action for that event from the Action popup menu.
These actions are broken up into groupings based on what they do. For this example, select Sprite, Change Cast Member.
Select the desired cast member from the Specify Cast Member window.
This is where you would select the "rollover" state for your text.
This command is telling Director that when your mouse enters within the bounding box area of this text, instantly switch or swap cast members from the normal text to the rollover text, signifying the user's interaction. A problem would occur if you were to leave this as your last command and begin playing your application; once the user rolls over this text, the command tells it to switch to the rollover state (which may have been set up to change font color). But what happens when the user rolls off the text? Well, nothing. The rollover state will remain visible. Since you want the text to return to its normal state, you need to add in the functionality to change the cast member back to the normal state once the user moves his mouse off of the text.
Go back to the Event popup and add a new event by selecting mouseLeave.
This is the command that gives Director the functionality to react once a user moves his mouse out of the area of a cast member.
In the Action Popup, select Sprite,Change Cast Member.
Select the "normal" state for your text.