Tutorial #1 ‹ Director Basics

Multimedia Tutorial #1
Fifty Steps toward mastering Director

This tutorial teaches the basics for:
• Motion tweening animation
• Difference between cast members & sprites
• Interactivity, navigation and rollovers
• Importing and placement of graphics
• Altering graphics in the Paint window
• Importing and running video
• Importing and playing audio
• Looping with "go the frame" scripting
...and more!

We will go (quickly) through this tutorial in class, but you very much need to do it on your own. For additional help, be sure to use the Director Help menu.

1. Quick Review:
Command 1 = Stage
Command 2 = Control Panel
Command 3 = Cast
Command 4 = Score
Command 5 = Paint Window
Command 6 = Text Window
Command 7 = Tool Palette
Command 8 = Field Text Window
Command 9 = Video
Command 0 = Lingo Scripts

2. Choose a new background color for the stage, something light:
MODIFY / MOVIE / PROPERTIES and then click and hold down the solid color chip. Move the mouse to choose a background color for your stage.

3. Open the Paint window = COMMAND-5. At the bottom of the tool box, you will see a foreground-background color chip. Choose a bright foreground color to contrast with your stage color, but make sure the background color chip is white.

4. Use the text tool (A) to type in your name, but don't click anywhere else: with the bounding box still around your text, choose MODIFY / FONT to change the size to 72 points or thereabouts. In the same window, change its type style to BOLD. Also feel free to switch to a funkier font! Close the Paint window.

5. Click FILE / IMPORT (or simply COMMAND-R) to import two graphics to use as buttons in your movie. They are "UpSwitch" and "DownSwitch" and they are located in your class CD-ROM in the Assets for Intro Tutorial folder, which is inside the Unit 1 / Tutorial folder. Click OK when it asks you if you want to keep it at 32-bit.

6. Open the cast window = COMMAND-3. If you are in "list view," click the second icon from the left (under the words "CastInternal") to switch to icon view. If you can see thumbnails of each castmember, you're in icon view.

7. Your name will be cast member #1 and your new imported graphics should have become cast members 2 and 3. In addition to an Up and Down button, we will create a slightly darker button to use when the mouse is not over it. The idea is that when we roll over the button, it lights up! Select cast member #2 ("UpSwitch"), copy it to the clipboard (COMMAND-C) and paste it (COMMAND-V) into the empty cast member #4 slot. In the blank box at the top of the cast window, type in the name "NormalUpSwitch" and press Return.

8. Right now members 2 and 4 are identical, so now let's darken #2. Double-click cast member #2 ("NormalUpSwitch") to open it in the Paint Window. We now want to select the switch and darken it. The darken control only works on 8-bit images, so first you will need to downsample this cast member to 8 bits. From the MODIFY pull-down menu, choose Transform Bitmap. If the image is not 8 bit, change it to 8 bit and click OK. (You will notice that it's appearance is a little grainier.)

9. Now, back in the Paint window, in the toolbox, hold the mouse down over the marquee tool (top right) and choose "Shrink." With the marquee tool still selected, draw a rectangle around the switch. Your selection will shrink to the borders of the Switch graphic.

10. Save your work!

11. To darken the graphic, click once on the Darken button. It is the third button from the right in the toolbar found at the top of the Paint window. (The word "Darken" appears as you pass the mouse over it.)

12. Close the paint window. A darker version of the switch should be visible as cast member #2. While we're in the Cast, let's rename our other two buttons. These are the images that will be shown when the mouse is over the switch, so rename #3 RolloverUpSwitch and rename #4 RolloverDownSwitch (by again editing these names in the box at the top of the cast window).

13. Open the Score = COMMAND-4 and then click on the cell in frame 1, channel 1 so that it is highlighted.

14. Click on FILE / PREFERENCES / SPRITE and set the span duration to 30. This setting is for animation and will bring in any new sprite over the number of frames you specify (in this case 30) rather than just for a single frame.

15. Drag cast member 1 (your name) to the center of the stage.

16. At the top of the score window, where it probably reads "Copy," choose Background Transparent for the ink effect. The white that surrounds your name on the stage should vanish.

17. Click in the last cell in channel 1 that this sprite occupies. (This should be frame 30.)

18. Create a key frame in frame 30.
INSERT / KEYFRAME
or COMMAND / OPTION / K
The rectangular shape in frame 30 becomes a circle. The circle indicates that this is a key frame. Save the movie! (Save, breathe, save, breathe.)

19. Click on the cell in frame 1, channel 1 again. It is automatically a key frame (remember: circle = keyframe). We will now change its position and size.

20. On the stage, with the sprite selected, shift-drag a corner handle to shrink its size to next to nothing. Next drag the body of the sprite sprite off the stage in the upper-left hand corner. The sprite is small and offstage left in the first frame but still large and centered in frame 30.

21. Now we will play the movie. If your Tool Bar is not visible at the top of the screen (right below the pull-down menus), then activate it by clicking on TOOLBAR from the WINDOW pull-down menu. In the middle of this toolbar you will see three VCR-style buttons: Go to Beginning, Stop, and Play. Click on Play. The text should zoom in. Because we created two keyframes, it automatically in-betweened the sprite's size and path for us. Save the movie! (Save, breathe, save, breathe.)

22. Stop the movie by clicking on the Stop button or by typing COMMAND . (period)

23. Just for fun, we will now make the name zoom back out of the picture as well. In channel 1, click somewhere between the keyframes (not on frame 1 or 30) to select the entire sprite span. Make sure all 30 frames are highlighted. Copy it to the clipboard, and then paste it into the same channel starting at frame 31.

24. With this new segment still selected (that is, frames 31 to 60), choose MODIFY / REVERSE SEQUENCE. Play all 60 frames. The type should zoom in and then out.
NOTE: The reason it is repeating this is that in authoring mode the default setting is to loop your movie. (Looping playback can be turned off in the Control Panel or from the CONTROL pull-down menu.) Once you made a final movie for distribution (a "projector") out of this, you would need to tell Director that you want to return to frame 1 after frame 60.

25. To pause the type before it zooms out, double click in frame 30 of the tempo channel and set a Wait of 2 seconds or so. The tempo channel is the top channel in the score and can be identified by the stopwatch icon. Note that you may have to click on those tiny up/down arrows in the upper-right-hand corner of the score window to open the channels above the script channel.

26. Still in channel 1, click on your next available frame, which should be 61.

27. Drag cast member "UpSwitch" to anywhere on the stage.

28. In the score, double-click in the transition channel of frame 61, choose the Wipe Left transition, and set its duration to 2.5 seconds. Play the movie. Save the movie! (Save, breathe, save, breathe.)

29. Because we are not going to move it over time, we don't need this button to extend over 30 frames. Instead we can have Director just keep looping on a single frame. Click and drag its last frame (probably 90) all the way to the left until it only appears in frame 62. (This is better than 61 because some transitions will keep repeating once we start looping on that frame.)

30. We will want to pause on frame 62 so they can use the button. Highlight frame 62 in the Script channel (the channel above channel 1) and type go the frame. "Go the frame" is Lingo for "keep playing the same frame until we tell you otherwise." Close the script box by clicking in the upper-left-hand corner.

31. We will want this button to take us to a screen where a video will play, so let's set that up first. Click in frame 70 or thereabouts. Click in the marker channel of frame 70. (The blank white space above the top channel.) Where it says New Marker, type in Video. We're creating a Video signpost to navigate to once the button is clicked.

32. To import the video, choose FILE / IMPORT or COMMAND-R and again navigate to the Assets for Intro Tutorial folder, which is inside the Unit 1 / Tutorial folde. on your class CD-ROM. Import cyclers.mov

33. From the cast window (COMMAND-3), drag the movie into channel 2, frame 70.
NOTE: It's usually a good idea to keep QuickTime video in a channel separate from other sprites.

34. Click on the last frame the movie occupies (probably 99) and drag it to the left so the video is only in a single frame. Click in that frame's script channel and then from the Behaviors pop-up list (upper-left-hand corner of score, next to gear icon) choose the already created "go the frame" script. Play frame 70 and it will play the entire (very short) video.

35. Okay, now that we have a video to go to, we will pull the switch to start the movie. Click on the button sprite in frame 62.

36. Open the Inspector window either by...
a) from the WINDOWS pull-down menu, choose INSPECTORS and BEHAVIOR, or
b) hold down the Control key as you click on the sprite and then choose Behavior
If you don't see Event and Action windows, click on the horizontal arrow on the left to open them.

37. Click on the + next to behaviors, choose New Behavior, and call this one Button Rollover

38. From the Events window choose On Mouse Enter. When you drag the mouse over the button you are "entering" its space. This is an event that will trigger an action, in this case the button highlighting.

39. With On Mouse Enter still highlighted, go to the Action window and choose SPRITE / CHANGE CAST MEMBER and then select RolloverUpSwitch from the pop-up list.

40. If you were to test the highlight effect now, it would highlight (lighten) when rolling over, but it would stay that way. Now we have to tell it what to do when we leave its space. From the Events window choose On Mouse Leave.

41. With On Mouse Leave still highlighted, go to the Action window and choose SPRITE / CHANGE CAST MEMBER and then select NormalUpSwitch from the pop-up list.

42. From the Events window choose On Mouse Down.

43. With On Mouse Down still highlighted, go to the Action window and choose SPRITE / CHANGE CAST MEMBER and then select RolloverDownSwitch from the pop-up list.

44. From the Events window choose On Mouse Up.

45. With On Mouse Up highlighted, go to the Action window and choose SPRITE / NAVIGATE / GO TO MARKER and then choose "Video" from the pop-up list. That's it! You can now close the Behaviors window and test the button. Notice that you no longer see the switch return to the up position because you are already going to the Video section.

46. Finally let's add some music to our masterpiece Again navigate to the Assets for Intro Tutorial folder, which is inside the Unit 1 / Tutorial folder on your class CD-ROM, and import the musical selection "Mission Impossible."

47. Drag this new cast member from the cast into frame 1 of Sound Channel 1. The sound channels are above the script channel. Note again that you might have to click on those two little arrows at the right of the score to open the channels above the scripting channel.

48. Drag the right side of the audio sprite all the way to the right until ends in your last frame, which should be frame 70.

49. Play your movie! Notice in the score that we keep looping on that final frame until the music ends (it's 52 seconds long) or we stop the Director movie.

50. Save your work as a Director file. Please keep a copy of this on your zip disk.

Return to Multimedia Tutorial Page