Tutorial 8

Creating an Image map in Director


1. Create a new 200X200 movie.

 2. Import the pie.gif image.


3. The gif should show up in the cast.

4. Drag the pie image onto the stage- it will appear in the score as well

5. Create this script in the script channel for frame one.


 6. Go Window--> Tool Pallette to bring up this window.

Choose invisible line and unfilled rectangle as shown at the left at top and bottom.

 7. Draw an invisible rectangle over the upper left quadrant of the image. A new castmember will appear in the cast and a new sprite on the score.  

8. By double clicking the castmember you can bring up it's Shape cast Member Properties dialog box.Ckick on the "script"button.

9. Type a script that will send the user to a new marker named "hardware" when the mouseUp occurs over the cast member.

 10. Create a new marker in the score and name it "hardware". Repeat the process for "software" "techsupport" and "net"  

   11. Repeat steps 7 thriough 9 for the other three quadrants, altering the script for each to send the user to the appropriate marker you just created in step 10.

 12. Create an appropriatte labe for the stage that will show the user what marker they have navigaterd to . Create a back button that will take the user back to the image map.  

   13. Open the castmember for the back button and click on the script icon.

 14. create a script to take the user back to tthe image map when they click the "back"button.  

15. Now duplicate the back button to the frame associated with each destination marker. Create a "main" marker for the first frame of the movie. The score should look like this.

 16 . Save and play your movie. It should function like the example to the right.



back to TOC