Adding an Ending Screen

In this section you will add a simple ending to the game so that once you get all the matches, the clock will stop and you'll be able to see how long it took you. You will also make the game board fade to nearly black so the congratulatory text will be visible:


Create a gameOver marker at frame 15. Drag the loop on frame behavior from the internal cast and drop it into the Score's behavior channel at frame 45.

Because you will fade out the game board image using standard keyframes, 30 frames will make for a nice, slow fade.


Click cast member t8, the last texture, to select it. Press Ctrl/Command+C to copy it. Click the next empty slot in the cast. Press Ctrl/Command+V to paste the copied member. Name the new member bgFade.

You will use this new member as a temporary image holder, that will be replaced by the final image of the game board.


Drag member bgFade from the cast into the Score and drop it so it is channel 1 and its span begins at frame 15. Adjust the span to end at frame 45. Use the Property inspector to change the size of the sprite to 800 x 577, then move it down 12 pixels so that the sprite's bottom is at 600:


Click the last frame of the sprite's span to select it. Right-click the frame and select Insert Keyframe from the context menu. Use the Property inspector to change the Blend to 20%:

You now have a big, ugly, scaled bitmap fading out from frame 15 to 45. Don't worryyou'll replace the texture image with an image of the game board using a little Lingo.


Right-click the bitmap sprite in channel 1 and select Script from the context menu. Add the following:

 on beginSprite me  member("memory").defaultRect = rect(0, 0, 800, 577)  sprite(me.spriteNum).member.image = member("memory").image end 

You may have noticed back in Lesson 15 that when you initially placed the 3D game board on the Stage it was rather smallthis is because it defaults to a size of 320 x 240. Now, look at the second line of Lingo you just added in the beginSprite handler:

 sprite(me.spriteNum).member.image = member("memory").image 

This line takes the image from the 3D cast member and replaces the texture image with itchanging the background to the image of the game board. If you were to get the image from the 3D member at its default size, the image you get returned will be 320 x 240. That is, unless you first set the member's defaultRect property.

By setting the defaultRect to 800 x 577, you get an image the exact same size as the 3D Sprite on Stage. Once the default rect has been set, the image in the background sprite's member is replaced with the game board image. Because this happens in beginSprite, it occurs before the frame is drawn. All you see is the game board fading to nearly black over the course of 30 frames.


Name the script get game image, and close the script window.

Once you add the text that displays the finishing time, the ending will be complete.


Single-click frame 15 of channel 2 to select it. Select the Text tool in the tool palette and draw out a text area on the Stage. Enter the following text:


You finished in 00.00 seconds.


Adjust the text sprite's span so that it ends at frame 45. Double-click it to open the Text window. Press Ctrl/Command+A to select the text. Change the alignment to Align Center. Change the foreground color to white and the background color to black. Finally, make the font fairly large24 or 36 point Arial.

It doesn't actually matter what font, or size, you decide on as long as it's legible and looks good.


Close the text window, then adjust the sprite on the Stage so that it is centered left to right and top to bottom. Use the Property inspector to change the sprite's Ink type to Background Transparent. When finished, your Stage should resemble the following:


Right-click the text sprite and select Script from the context menu. Delete the default mouseUp and create the following:

 on beginSprite me  timerText = member("timeDisplay").text  spaceLoc = offset(" ", timerText)  myTime = timerText.char[spaceLoc + 1..timerText.length]    myText = "Congratulations!" & return & "You finished in" && myTime && ¬     "seconds."  sprite(me.spriteNum).member.text = myText end 

What this short handler does is parse the actual time out of the timeDisplay member in order to use it in the congratulatory text. First, the full string is retrieved from the member and placed in the timerText variable. Next, Lingo's offset method is used to find the location of the space within the string. This is needed because everything after the space is the time:

Let's assume timerText is "Time: 42.50"

You can count and find that the space is at position 6 within the string. Therefore characters 7 through 11 represent the time: "42.50"

Once you have the position of the space, within spaceLoc, the time is pulled from the string using the char property of the string:

 myTime = timerText.char[spaceLoc + 1..timerText.length] 

By using someString.char[x..y], you can pull out a section of the string from character position x to position y. In this case, because spaceLoc is 6, this line could be rewritten as:

 myTime = timerText.char[7..timerText.length] 

So we're pulling out characters 7 through the length of the string, which is 11, so you are left with the time: "42.50". This is stored in the myTime variable, then used to replace the text in the member.

But if you use Lingo to replace the entire contents of the text, why bother to enter it when creating the text sprite in the first place? Why not just create an empty text member, place that on Stage, and use Lingo to change the text? There are reasons for entering it into the member to begin with. First, this way you can visualize the placement, color, font, size, etc. Second, empty text members don't retain their formatting, so placing text in there (even a space) keeps your formatting options intact.


Name the script congrats and close the Script window. Select the Push Button from the tool palette, then draw a button near toward the bottom of the Stage. Enter the text Click to play again. Right-click the button, select Script, and modify the mouseUp handler to be the following:

 on mouseUp me  _movie.go(1) end 

Later, you can replace the button with a nicer one of your own design. For now this is just a quick and easy way to allow you to play the game again.


Close the Script window, then rewind and play the game.

When you find all the matches, the board fades out and displays your time.


Stop and save the movie before continuing.

Now let's add a little color to the game's background by way of a camera backdrop.

Macromedia Director MX 2004. Training from the Source
Macromedia Director MX 2004: Training from the Source
ISBN: 0321223659
EAN: 2147483647
Year: 2003
Pages: 166
Authors: Dave Mennenoh © 2008-2017.
If you may any questions please contact us: