Lingo - Drop Down Navigation Menu

Created and designed by Vivienne Trulock for ilikecake, 2005

Application of previous page

This exercise shows how to create a dropdown menu in Director using the code we have learned in the previous section. See completed basic movie.

Import nav images.

Place the 'silver_nav' image onto the stage.

Place the smaller 'dropdown' images on the stage so that they appear as in the image shown. Be careful here. In order for the illusion to work, the images cannot even be a pixel out.

Select all the sprites and make the background transparent in the sprite properties window.

Lingo Scripts

We need to have the dropdowns 'off' (not visible) at the start of the movie. Assuming the highlighted images are on rows 3 to 10 of the score, place this script into the first frame:

Hotspots

In order to assign scripts to the various sections of the nav, we need to put 3 hotspots over the nav words. Create the hotspots with an empty text box, with the background changed to transparent.

To have the dropdowns turn 'on' when the user rolls over the 'Nav' buttons, script on the hotspots, that looks something like this

You need to do this for each of the 'Nav' buttons, turning on the appropriate rows when needed.

You also need the dropdown menu to stay on when you rollover it, so assign a script like this to each of the buttons:

We don't want the sprites to turn off until they leave the whole dropdown, not just individual buttons, so we don't have the mouseLeave script here.

Instead, attach the following script to a background image made in the vector window:

Loop Movie

To have the movie loop on the final frame, place this script in that frame:

If using unusual fonts, import them into the movie using 'Insert/Media element/Font'.

Completed Movie

The final dropdown movie should look like this.

Add Rollovers

This exercise shows how to add the rollover behaviour to the drop down navigation system. See finished movie.

Using the movie you created in the previous exercise, import the blue icons from the nav_images folder if they are not already imported.

Open the library palette and change to the interactive section.

Pull the 'Rollover Member Change' icon on to each of the dropdown menu sprites on the score.

Select the appropriate 'blue' rollover from the selection.

At this stage you should have 2 behaviors on each of the dropdown menu sprites.

Link Buttons

To link the dropdown buttons, just link them to markers as in the 'Animals' exercise.

Final Movie with Rollovers

The final dropdown with rollover movie should look like this.

• AA
• XHTML
• CSS