Director Tutorials

 

Tutorial 10: Interacting with the Celebs - Creating Navigation Behaviors

In this tutorial, we will be using various media and techniques described in previous tutorials, including celebs.dir, hey.wav, gday.wav and morning.wav. Right click on the hyperlinks to save the files.

1. Open celebs.dir and import hey.wav, gday.wav and morning.wav.

2. Change the stating point for sprites 1 to 3 to frame 1.

3. In the Property Inspector, change the Stage size to 640 x 480. You will notice that Stage area appears to have been added below the sprites. Sprite location is referenced from the top right corner (which is 0,0). So by increasing the Stage size, sprites are still referenced to the top left corner and appear to move up on the Stage.


4. Select all the sprites and choose Modify > Tweak.

5.
Change the vertical field to 200 and press the Tweak button

The Tweak tool is useful to move sprites precisely vertically and horizontally (unites are measured in pixels).

6. Open the Vector Shape window and create a comic text balloon similar to the one shown below. Create three such balloons, one to be placed over each person on the Stage. Name the balloons balloon1, balloon2 and balloon 3

.

7. Open the Text window and create three members one with the text 'hey there’, the other 'g'day' and the third 'goodmorning everyone' using Arial 48 and Arial 36.

8. Place the hey sound in sound channel 1, extending over frames 6 to 14. Place the gday sound in sound channel 1, extending over frames 21 to 29 and place the morning sound in sound channel 1, extending over frames 36 to 44.

9. Move the JuliaRoberts, PaulHogan and DeanUtian sprites down 2 channels so they occupy channels 3, 4 and 5 respectively. Change the End Points of the sprites to 44.

10. Place balloon1 in channel 1 over frames 5 to 14. Place the balloon2 in channel 1 over frames 20 to 29 and place the balloon3 in channel 1 over frames 35 to 44.

11. Position each of the vector balloons directly above each person on the Stage.

12. Place the hey text in channel 2 over the same frame range as balloon1 and centred over the balloon sprite. Change the ink effect of the text sprite to Background Transparent. Do the same for the g’day text (pacing it over balloon2) and the morning text over balloon3.
Your Score should begin to look like the screenshot below.

When creating navigation, it is important to organise the Score with markers.

13. Place a marker in frame 5 by clicking on the white bar on the top of your Score (when the sprite toolbar is not visible). An inverted triangle appears as soon as you click the marker channel together with the text New marker. Name the marker in frame 5 Roberts talk. Create a marker in frame 20 called Hogan talk, frame 35 Utian talk (as shown below).



The next step is to add a pause to give the user time to interact with the movie.

14. Open the Library Palette, then click on the Library List button and select Navigation from the menu.

15. Click and drag the Hold on Current Frame icon to frame 2 of the scripting channel.

16. Place the Hold on Current Frame behavior into frames 14, 29, and 44. This can be done by dragging the behavior from your cast window (it should now live there) or by copying and pasting the sprite from one fame to another. Your Score should now look like the screenshot above.

17. In the Library Palette, click on the Library List button and select Animation > Interactive.

18. Click and drag the Rollover Cursor Change icon  onto sprite 3 (JuliaRoberts).
The parameters dialog box appears.



19.The Finger cursor is the default selection. Look at the cursors available, then select Finger and press OK.

You will notice that the behavior now appears as a cast member in the cast window.

20. Attach the Rollover Cursor Change behavior to sprite 4 and sprite 5 (drag and drop the behavior from teh cast window onto the sprites).

21. In the Library Palette, click on the Library List button and select Controls from the menu.

21. Click and drag the Jump to Marker Button behavior onto 3 (JuliaRoberts).

22. In the Parameters dialog box for the behavior, you will see a drop-down menu next to On mouseUp, jump to marker. Select Roberts talk from the menu, then press OK.

mouseUp represents an event when the left mouse button is released.

As with the Rollover Cursor Change behavior, the Jump to Marker Button behavior appears in your cast window.

23. Drag and drop the the Jump to Marker Button behavior from teh cast window onto sprite 4 (PaulHogan) and linking it to marker Hogan talk. Repeat the process for sprite 5 (DeanUtian).

24. Rewind and play the movie. Now would be a great time to save your movie as tut10.

In this tutorial, we created basic interactivity of jumping from one position in a movie to another by using existing behaviors. The interactivity is coded in Lingo scripts (behaviors) . In tutorial 12, we will look at the Lingo and learn how to write scripts.You can see the completed tutorial 10 here - tut10_fin.dir