Puzzle Project: Improving the User Interface

| ACG home | SaneDraw home | Instructor home | learning resources home | class home | handouts index |

Outline of the third phase of the project

After completing the layout and logic of the game, we need to add the basic "niceties" that will make it usable.

  1. Find and re-open the Director movie with your puzzle.

  2. Edit the initialization movie script created in the previous session to support the new features we will add now.

  3. Add a button to scramble the gamepieces.

  4. Add a button to reset the pieces to their correct locations.

  5. Add a text cast member with help on how to use the game, and a button to show and hide this info.

  6. Add another text cast member with the credits for the game, and a matching show / hide button.

  7. Import sounds for the various gameplay events.

  8. Modify the scripts to play the sounds at the appropriate time.

  9. Run and test the movie. When done, use the Afterburner Xtra to convert the movie to Shockwave for Director format.

If you have the Shockwave plugin properly installed in your browser, you can see a working example of this third version of the puzzle. You can also download an editable copy of the original Director movie (Director 5 for Macintosh format, Stuffed and BinHexed, 60,485 bytes).

Step-by-step instructions for the 3rd phase of the project

Re-open your movie

After the movie is up on the screen, you may need to again position and size the stage:

  1. File-->Preferences-->General, uncheck "Centered".

  2. Modify-->Movie-->Properties, enter 240 x 240 for the size, 0 and 20 for the location.

| return to outline |

Edit the Initialization movie script

The Initialization script is the cast member that contains the 'on startMovie' handler. If you have trouble locating it, you can ask Director to find it for you:

  1. Use the Edit-->Find-->Handler command to display a list of the handlers in the current movie. Double-click on the startMovie entry (there should be only one) to open the script window with the initialization movie script.

  2. Edit the text so that the entire script reads: 

    ---------- Puzzle 03 -- phase 3 of the Puzzle project ------------
--------- Copyright 1996 by Sandro Corsi (corsi@ibm.net) ---------
--The scripts in this movie assume that the cast members with the 
--images of the gamepieces are arranged sequentially at the 
--beginning of the internal cast. The cast member for the missing 
--piece (an unfilled, unstroked box shape) is the last gamepiece
--cast member.
--It is also assumed that the gamepiece sprites are arranged
--sequentially in the score, after any mumber of sprites used
--to create the background of the gameboard. The sprite for the
--missing piece comes right after the gamepiece sprites.
------------------------------------------------------------------
on startMovie
  --------------- declare global variables ---------------
  -- game size specifications
  global gNumberOfSquares, gSquaresPerRow
  -- Squares (= available positions for gamepieces)
  global gSquareList, gSquareChannelStart, gHoleColumn, gHoleRow
  -- how extensively should the gamepieces be scrambled
  global gScrambleRepeats
  -- names of sound cast memebers
  global gFrameSnd, gNoMoveSnd, gMoveSndList
  -- sprite numbers of help and credits text
  global gHelpSprite, gCreditsSprite
  
  --------------- initialize global variables ---------------
  put 16 into gNumberOfSquares -- total available Squares
  put 4 into gSquaresPerRow -- how many Squares wide is each row
  put [] into gSquareList -- list of child objects representing Squares
  put 2 into gSquareChannelStart -- first channel containing Square sprite
  put 20 into gScrambleRepeats -- number of random moves when scrambling
  put "Metal" into gNoMoveSnd -- sound for click on piece that can't move
  put "Penalty" into gFrameSnd -- sound for click on gameboard frame
  -- sounds chosen at random for clicks on gamepieces that can move
  put ["Gabing","Pavel","Swhish","Whip"] into gMoveSndList
  put 47 into gHelpSprite -- channel for help text
  puppetSprite gHelpSprite, TRUE -- put help text under script control
  set the visible of sprite gHelpSprite to FALSE -- initially hidden
  put 48 into gCreditsSprite -- channel for credits text
  puppetSprite gCreditsSprite, TRUE -- put credits text under script control
  set the visible of sprite gCreditsSprite to FALSE -- initially hidden
  -- initialize missing gamepiece position to be the last Square
  put (gNumberOfSquares-1) mod gSquaresPerRow+1 into gHoleColumn
  put (gNumberOfSquares-1)/gSquaresPerRow+1 into gHoleRow
  
  --------------- create Square objects ---------------
  repeat with SquarePosition = 1 to gNumberOfSquares
    append gSquareList, new(script "SquareParentScript", SquarePosition)
  end repeat
  updateStage -- force redraw
end

  3. Press <Enter> (on the numeric keypad) to close and recompile the script. If any errors are reported, double-check your spelling.

| return to outline |

Create button to scramble the gamepieces

Since we want to keep file size as small as possible, consider creating a small design that can be enlarged on the stage. Also, it is possible to colorize 1-bit castmembers and create a colorful effect with very little memory use.

  1. Use your favorite method to create a blank new bitmap cast member (e.g., Window-->Paint, then click the '+' button)

  2. Use the painting tools to create an icon for the scrambled gameboard. Keep your design simple so it will work at a small size and with few colors.

  3. Experiment with lower bit depths (=fewer colors, smaller file size):

  4. Drag the cast member to the score, in a frame 1 channel after the game piece cells (the exact channel number does not matter in this case). Reposition and/or resize the button on the stage so that it does not block the view of game pieces.

  5. Experiment with colorizing your button (this works best at 1 or 2 bits):

  6. Select the button in the cast window, then click on the script button at the top-right of the window to attach a script to the cast member. The Script window will open with a blank new script. Enter the following: 

    on mouseUp
  global gSquareList, gScrambleRepeats
  repeat with counter = 1 to gScrambleRepeats
    -- invoke the move handler for randomly selected square
    movePiece getAt(gSquareList, random(count(gSquareList)))
  end repeat
end

  7. Verify and close the script.

| return to outline |

Create button to reset the gamepieces

This button will be very similar to the previous one. You could duplicate the 'Scramble' cast member (use Edit-->Duplicate), then make the necessary modifications.

  1. Follow the directions above for the creation of this button's bitmap cast member, or modify the copy of the previous button.

  2. When done, attach to the new cast member the following script (if you started from a copy of  another cast member, make sure to delete the old script first): 

    on mouseUp
  global gSquareList, gNumberOfSquares, gSquaresPerRow
  global gHoleColumn, gHoleRow
  repeat with counter= 1 to count(gSquareList)
    -- invoke the setPicture handler for each square with
    -- the default cast member number
    setPicture getAt(gSquareList, counter), counter
  end repeat
  -- initialize missing gamepiece position to be the last Square
  put (gNumberOfSquares-1) mod gSquaresPerRow+1 into gHoleColumn
  put (gNumberOfSquares-1)/gSquaresPerRow+1 into gHoleRow
end

  3. Verify and close the script.

  4. Drag the cast member to an available channel after the game piece cells in frame 1 of the score (the exact channel again is unimportant). Reposition/resize the button on the stage as needed.

| return to outline |

Create button and text to display help

This step requires both a bitmap cast member for the button, and a text cast member for the help display. Note that the text sprite must be in a specific channel for the scripts to work:

  1. Follow the previous instructions to create the bitmap cast member for the button. The icon for the button should indicate that a help message will be displayed (the most widely used symbol for this is a question mark).

  2. Attach the following script to the new cast member: 

    on mouseUp
  global gHelpSprite
  set the visible of sprite gHelpSprite to not the visible of sprite gHelpSprite
end

    Notice that there are only four lines in this script. The third one is rather long and it may have wrapped if the web browser's window is not wide enough--make sure it is entered as a single line in Director.

  3. Verify and close the script.
  4. File-->Preferences-->General. Set the text units to 'Pixels', then click 'OK'.
  5. Use Insert-->Media Element-->Text to open the text window with a blank new cast member and enter the instructions for the operation of the game:

  6. Drag the new text cast member to channel 47, frame 1 of the score.

  7. While the text sprite is still selected on the stage, drag its handles to resize it (or use Modify-->Sprite-->Properties and enter the desired size and location).

  8. Drag the bitmap cast member for the button to the score, after the game piece cells in frame 1 (any channel will do). Reposition/resize the button on the stage as needed.

| return to outline |

Create button and text to display credits

The starting point for these two elements can be duplicates of the previous two, though the text cast member in this case will likely be smaller.

  1. Follow the directions above for the bitmap cast member for the button. This time the icon should indicate that info about the author of the game will be provided (in HyperCard, this is often done with a speech balloon icon).

  2. Attach the following script to the new bitmap cast member: 

    on mouseUp
  global gCreditsSprite
  set the visible of sprite gCreditsSprite to not the visible of sprite gCreditsSprite
end

    Notice again that there are only four lines in this script. The third one may wrap on multiple lines if the web browser's window is not wide enough--make sure it is entered as a single line in Director.

  3. Drag the new bitmap cast member to the score, after the game piece cells in frame 1 (any channel is OK). Reposition/resize the button on the stage as needed.
  4. Follow the drections above to create the text cast member.

  5. Attach the following script to the new text cast member: 

    on mouseUp
  global gCreditsSprite
  set the visible of sprite gCreditsSprite to FALSE -- hide me
end

  6. Drag the new text cast member to channel 48, frame 1 of the score.

  7. Drag/resize as needed on the stage. To allow for simpler scripts, make sure that the new sprite does not overlap the help sprite.

| return to outline |

Import sounds to highlight game events

Director for Macintosh will import sounds of types AIFF and System 7 'snd ' (only the 'snd ' resources can be in compressed format, and only for Macintosh playback).

  1. File-->Import. In the dialog, uncheck 'Linked', and make sure that the 'Show' pop-up menus indicates 'All Files' or 'Sounds'. Find and select the file containing the sound you want to use, and click 'Import'.
    import dialog with Sounds selected

  2. The new sound appears in the cast window. Select its name in the Cast Member Name field at the top of the window, then use Edit-->Copy Text.

  3. In the on startMovie handler, find the global variable that corresponds to the event highlighted by this sound, and change its value by pasting in the name of the sound.

  4. Repeat the process for additional sounds.

| return to outline |

Modify scripts to play imported sounds

No new handlers are needed, but two of the existing ones must be modified to replace plain beeps with the sounds you imported.

  1. Find the click handler in SquareParentScript (again, you can use the Edit-->Find-->Handler command).

  2. Edit the text so that the entire handler reads: 

    on click me
  global gNoMoveSnd, gMoveSndList
  if pieceCanMove(me) then
    -- play a randomly selected sound
    puppetSound getAt(gMoveSndList, random(count(gMoveSndList)))
    -- invoke the move handler for this same object
    movePiece me
  else
    puppetSound gNoMoveSnd -- bad choice
  end if
end

    Note that the other handlers in this script need not be changed.

  3. Find the gameClick handler in the gameplay movie script.

  4. Edit the text so that the entire handler reads: 

    on gameClick whichSprite
  --this handler responds to user input based on the part
  --of the game board clicked
  global gSquareChannelStart, gSquareList
  global gFrameSnd
  if whichSprite < gSquareChannelStart then
    puppetSound gFrameSnd -- that's the frame of the gameboard!
  else
    --find which Square location was clicked
    put whichSprite - gSquareChannelStart + 1 into position
    --tell the Square to respond to the click
    click getAt(gSquareList, position)
  end if
end
  5. Make sure that the scripts are correct, then close the script window.

| return to outline |

Use the Afterburner Xtra to convert to Shockwave for Director format

The cmmands used in this step of the project will only be available if the Shockwave XTras are properly installed.

  1. Xtras-->Shockwave for Audio Settings. In the dialog, choose the following settings, then click 'OK':
    Shockwave for Audio Settings dialog

  2. File-->Save and Compact.

  3. Xtras-->Afterburner. You will be prompted for a filename: type it in, then click 'Save'.

  4. The file created by Afterburner can be referenced from an HTML Web page using the following tag: 

    <EMBED SRC="somename.dcr" HEIGHT="heightInPixels" WIDTH="widthInPixels">

    where the actual name and size of your movie replace the italicized placeholders.

| return to outline |

Copyright by Sandro Corsi.
Last modified 17 OCT 96.