Director Tutorial 5- Building Destination Screens

We have reached the stage where we have a functioning main menu. Clicking on active links bring us to reserved frames within the score, however these frames do not contain any information.

An important consideration for your movie will be consistency as your user moves from screen to screen. There will be a number of common page elements throughout your movie, good examples are BACK and NEXT buttons or page titles. These common elements need to be in exactly the same position on screen as your user navigates from page to page.

To achieve this we are going to plan and create a master page layout. Once we are happy with the layout of the master page we will copy and paste it to produce a page for each section of our movie.

Build a master screen

1. The first step is to create a master screen that contains all the required elements for the pages in your movie, these would be page title, company logo and other company details, a text field to display text information, navigation buttons for BACK, NEXT and MAIN MENU.

2. Figure 5.1 below is how the NMTC master page could look like, create the Company Details page use that as a master layout.

Figure 5.1: Master Destination Page

3. Happy with the master page you need to open the score (Ctrl. 4) and select the sprites that make up the master page (see figure 5.2).

4. Once selected, copy those sprites to your clipboard (Ctrl. C) and paste them into each of the remaining sections of your card (Department Details and Personal Details sections)

Figure 5.2: Select the master layout sprites, copy and paste

Now you will have three identical destination pages. We are now going to use the "Exchange Cast Member" tool to make light work of producing three different yet very consistent destination pages.

Some sprite we will not want to change, these would be the navigation buttons and company logo/address. The others, however, need to be changed to suit the section of your movie. The most obvious are the page titles and text fields.

By producing three identical pages we have three identical layers of sprites, and we know that a sprite is an instance or child of a cast member. If we changed the parent of a sprite we would only change what the sprite displayed on stage, we wouldn't alter the position, ink effect or other sprite attributes.

5. To exchange the parent of a sprite you must first select the sprite (this may be done either in the score or on stage but I recommend you work in the score, it gives you much more control).

6. With the sprite selected, open or bring the cast to the front (Ctrl. 3) and select the cast member that you'd like to replace as parent to the selected sprite, see figure 5.3.

In this example we are going to change the parent cast member of the Page Title sprite from "Company Details Page" to Department Details Page".

Figure 5.3: Select the sprite AND the new cast member

7. With both the sprite and cast member selected click on the Exchange Cast Member tool, see figure 5.4.

Figure 5.4: The Exchange Cast Member tool

This action will, for this example, change the parent of the sprite selected above from Company Details Page to Department Details Page.

8. Work through your Department Details Page and Personal Details Page, exchanging relevant sprites as required. Another example would be the text box.

In the last tutorial you created your first lingo script, a behavior that told the playback head to go to the marker "Main Menu" when the playback head tried to exit the frame (on exitFrame). This script existed in the last frame of each section, so there are three instances of this script in your score.

This script is no-longer needed as we do not want the playback head to return to the main menu soon after arriving at one of the destination pages. What we do want is the playback head to remain at the destination page until the user wishes to move on.

Since the behavior sprites are already in place it makes sense to change code of the parent, this will affect all sprites from this parent or cast member that exist in the score.

9. The code to prevent the playback head from moving onto a new frame is go the frame, see figure 5.5.

Figure 5.5: Wait on the current frame script

10. Before we complete this section, create a cast member script for the "Main Menu" cast member (part of the navigation bar at the bottom of the screen) that will return the playback head to the Main Menu marker when the mouse button is clicked UP:

on mouseUp

go to frame "Main Menu"

end

Figure 5.6: The Project so far

In the tutorial you have learned how to:

  • create destination screens with a consistent look and feel
  • exchange cast members
  • edit or re-code a frame script to pause the movie on a specified frame

Click here for the .DIR file for this tutorial

Back to director tutorials