• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 5. Adding Interactivity > Creating a Destination Screen

Creating a Destination Screen

Now you'll create the Credits screen that will appear when the Credits button is clicked. In other words, the playback head will branch to the Credits screen when a user clicks the Credits button in the movie. The Credits screen will consist of a background and text. You imported this text into the cast in Lesson 3so it's already available for you in the movie's cast.

Drag cast member 14(Credits 1) to channel 2, frame 135, in the score.

Make sure you drag the cast member to channel 2. Channel 1 will contain a sprite for a background upon which the Credits 1 and Credits 2 sprites will appear. You don't always have to begin placing sprites in channel 1, but you must always be aware of the channel number order of sprites and how it affects the appearance of sprites. For instance, if you placed the Credits 1 sprite in channel 1 and then placed a background sprite in channel 2, you wouldn't be able to see the Credits 1 sprite on the stage because the background is large enough to hide the sprite in channel 1. Since sprites are drawn from the lowest-numbered channel first to the highest-numbered channel last, the first channel is often used for the background image.

This cast member is a text cast member you imported in Lesson 3. Notice that you didn't drag the cast member to the next available frame in the channel, frame 133. Skipping a few frames makes a visual break in the score that helps you read the score. For instance, this break helps you differentiate between the flow of the movie and a screen that users will branch to.

Figure .

Drag cast member 15 (Credits 2) to channel 3, frame 135.

Now you need to use an ink effect to remove the white backgrounds of these sprites.

Select the Credits 1 and Credits 2 sprites in the score. Then from the Ink menu, choose Background Transparent.

Drag cast member 13 (Bknd2) to channel 1, frame 135.

Figure .

All of the elements of the Credits screen are now on the stage. It's time to position them so everything looks symmetrical and centered.

Choose View >Grids and Guides >Show Grids (Windows Alt+Ctrl+Shift+G, Macintosh Option+ Command+Shift+G).

A grid overlays the stage; you can use the lines to align sprites.

Figure .

On the stage, click the Credits 2 sprite and move it toward the bottom of the stage. Then align the sprites on the stage so the screen looks like the following illustration.

Clicking a sprite on the stage selects the whole sprite in the score. This is another way of selecting sprites. You can easily select the Credits 2 sprite, which contains a list of names, because it is in front of the Credits 1 sprite. Remember that Director layers sprites in channel order, placing sprites in higher-numbered channels in front of those in lower-numbered channels. Once you have the Credits 2 sprite in place, drag the text of the Credits 1 sprite toward the top of the stage.

Figure .

In this step, you are simply using the grid lines as guides to position the sprites. If you prefer to have the sprites snap to the grid, you can choose View >Grids and Guides >Snap to Grid. This will make the sprites automatically jump, or snap, to the nearest grid line. Snapping sprites to the same grid line is one way you can be sure the sprites are exactly aligned.


You can also set the color and spacing of the grid by choosing View >Grids and Guides >Settings. This brings up the Property Inspector with the Grids and Guides tab selected. Here you can modify grid settings or create guides. Guides allow you to drag lines to the stage to any location you want. The default spacing in the grid is 64 by 64 pixels.

Choose View >Grids >Show to turn off the grid.

Next you'll change the length of the sprites that make up the Credits screen. Right now, the Bknd2, Credits 1, and Credits 2 sprites take up 28 frames in the score. Since the Credits screen doesn't have an animation or sound file that requires a number of frames to play, you can conserve frames by shortening the sprites; then you can add a pause to the tempo channel so the credits stay on the screen long enough for people to read them. Note that you could leave the sprites in the score as they are, but the pause gives you more precise control over the length of time they remain on the stage because you can set a specific number of seconds for the pause.

Select the Bknd2, Credits 1, and Credits 2 sprites in the score and change their end frames to frame 139.

This change to the sprites'end frames makes them shorter, but there are still enough frames to set a 2-second pause in the tempo channel and display the credits just a bit longer before returning users to the menu. Assigning three or four frames to movie segments like this one gives users time to recognize that there is new information on the stage; the tempo setting you add next will give them the time they need to read the text.

Double-click the tempo channel in frame 136 to open the Tempo dialog box.

You're going to set a delay for only this frame. Place the tempo setting in frame 136, instead of frame 135 where the new sprites appear. This limits the processing Director has to perform to in a single frame. Once the playback head passes frame 136, the tempo will return to the one you originally set in the tempo channel: 10 fps.

Figure .

Select Wait, use the arrow keys to set the wait time to 4 seconds, and click OK to close the dialog box.

Figure .

Rewind and play the movie to see what you've added.

After the digital video plays, the playback head waits in frame 130 for 2 seconds due to the tempo setting you added in the last lesson. Then the menu screen you built appears as the playback head moves through frame 131 and into frame 132. Then the playback head remains in frame 132 because you added a go to the frame script in this frame. There's no way to see the screen you've just built when the movie plays!

You want users to be able to choose to go to the Credits screen by clicking the Credits button on the menu. In the next few tasks, you'll set up the navigation for the Credits button and the Quit button. Once you've finished adding the scripts to the buttons, users will be able to branch to the Credits screen by clicking the Credits button when they play the movie.

Save your work.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint