WC.Project Builder 1.A5

The Ultimate Tours travel company has asked you to design a sample for its website.  The Sample Completed Project Builder – Assignment 5 shows a sample Cruises screen with a mask effect, as the spotlight rotates across the screen and highlights different ships.  Complete the following for the Cruises screen of the Ultimate Tours website:

Sample Completed Project Builder 1.A5

Add objects to the ultimatetours5 document:

  • Open fl5_10.fla from the Flash/Web Collection/Chapter 5 folder on the server, then save it as assets
  • Open ultimatetours4 from Assignment 4 and save it as ultimatetours5
  • Insert a new layer at the top of the Timeline and select frame 1 on the layer
  • Display the Library panel, then click the list arrow below the Library tab to display the list of open documents
  • Select assets and drag each of the following symbols [g_lighthouse, g_searchlight, g_ship-1, g_ship-2, g_ship-3 & foghorn.wav] in the Library panel to the Stage, delete the layer, click the assets  tab, then close the assets file
    [Note:  This will add the objects from the assets file to the ultimatetours5 Library panel
  • Display the Library panel for ultimatetours5

 Add layers and objects to the Stage:

  • Insert a new layer at the top of the Timeline, then name it background
  • Insert a keyframe in a frame that is higher than the last frame in the current movie (such as frame 100) on the background layer, then draw a dark gray rectangle (#333333) that covers the Stage
  • Insert a keyframe that is at least 30 frames higher on the background layer (such as frame 130), then lock the layer
    [Note:  All of the subsequent layers will use the same frames (such as 100 to 130), so be sure to add keyframes to these frames as needed]
  • Insert a new layer, name it heading, and create a Mystery Ships heading
  • Insert a new layer, name it lighthouse, then place the g_lighthouse symbol on the Stage

 Add a motion tween and mask effect:

  • Insert a new layer, name it searchlight, and place the g_searchlight symbol to the left of the lighthouse
  • Use the Free Transform tool to create a motion tween that causes the searchlight to rotate from the left to the right of the lighthouse
    [Hint:  The searchlight will rotate (pivot) around the transformation point (small circle) of the graphic – you need to move the transformation point so it is at the narrow end of the graphic – to do this, select the graphic with the Free Transform tool to display the transformation point, then drag the point to the desired location (narrow end) on the graphic]
  • Create a new layer for each of the three ships, name each layer appropriately (ship1, ship2, and ship3) and place them on the Stage so that the searchlight highlights them as it moves from left to right across the Stage
  • Insert a new layer above the ship layers, name it searchlight mask, and using the g_searchlight symbol, add a motion tween that duplicates the one created in step 2
  • Create a mask effect that has a searchlight as the mask and reveals the ships when the searchlight is over them
    [Note:  The two searchlight motion tweens are needed on different layers because one will become a mask and will not be visible in the movie]

Add a sound and interactivity:

  • Insert a new layer, name it sound, insert a keyframe in frame 100 (or the appropriate frame) on the layer, then drag the sound file to the Stage
  • Insert a new layer, name it home button, insert a keyframe in the last frame of the movie, then add the b_home button to the bottom center of the Stage
  • Add an action to the home button to have the playhead go to frame 1 of the movie when the button is clicked
  • Insert a new layer, name it stopaction, and add a stop action at the end of the movie
  • Drag (scrub) the playhead on the Timeline to locate the Galapagos text (cruise heading layer for example), unlock the cruise heading layer (or layer that has the Galapagos text)
  • Change the Galapagos text to “Mystery Ships,” then create a button that changes color for the different phases and that jumps to frame 100 (or the appropriate frame) when the user clicks the Mystery Ships text
  • Test the movie, then compare your image to the Sample Completed Project Builder 1.A5 file above
  • Save your work in your folder and the "Assignment" folder for your class period