CSE 203 Closed Lab 3 Instructions

Table of Contents


1. Objectives

To learn about displaying animated graphic sprites in a window, including the idea of an array of integers, and to practice moving graphic sprites around a screen.


2. Set Up

  1. Two students should work together at one workstation.
  2. In one student's account, follow the instructions given below in section 3, Method.  Remember, trading roles (driver and non-driver) for each new session is a very good idea.

3. Method

  1. Start by opening "002 Moving_Sprite.kpl" from the OSU folder.
  2. Immediately Save As New Program with name "Lively_Sprite.kpl" in folder "0) My Own".
  3. Change the author name(s) and the date appropriately.
  4. Change the program name to "Lively_Sprite" (if you haven't already done so).
  5. Comment out the repeated action in the While loop.  What happens when it runs?  An hour glass?  That's a bad thing.  That means your program is not responding.  It's in a tight loop that is not allowing it to respond to mouse events.
  6. We can fix that by placing a call to DoEvents() inside the While loop: do so.  Do you not see the hour glass anymore when you run it?  Great!
  7. What we're going to do in the following steps is get Phrogram to display the six frames of the animated gif "ohio-flag.gif" at the speed of our choosing.
  8. After the declaration of flag_speed, insert the following declaration of an array of six integers:
    Define flag_animation_timeline As Integer [6]
    An array can be thought of as a collection of objects (in this case, six objects), all of the same type (in this case, Integer).
  9. These six objects are distinguished one from another by using the positive whole numbers 1 through 6.  For example (using a copy, paste, and change technique) give the value 100 to each of these six Integer objects right after the call to Load():
    flag_animation_timeline[1] = 100
    flag_animation_timeline[2] = 100
    flag_animation_timeline[3] = 100
    flag_animation_timeline[4] = 100
    flag_animation_timeline[5] = 100
    flag_animation_timeline[6] = 100
  10. Now the Sprite object first_sprite, like all Sprite objects, has a property called AnimationTimeline.  A property is part of its object's value.  For example, part of the value of a shoe is its size; another part is its color; still another part of a shoe's value is its style.  Size, color, and style are among a shoe's properties.  Anything we can do with an object we can also do with a property.  We can look at a property's value and we can change its value.  AnimationTimeline is an array of integers.  Its value tells Phrogram how many milliseconds each frame of the animated gif associated with the sprite should be displayed.  To tell Phrogram to display each frame for 100 milliseconds, we can assign flag_animation_timeline's value to first_sprite.AnimationTimeline.  A good place to do this is right after the assignment statements you made in step 9 above:
    first_sprite.AnimationTimeline = flag_animation_timeline
  11. Run the program.  Do you see the flag waving?  No?!  Maybe you even see the hour glass again!  If tapping the Esc key stops the program, great.  Otherwise, click the close button image of close button to stop the program and close its window.  No matter what, close the program's window.
  12. It turns out that, when sprites are animated, DoEvents() in a loop is not what we need.  What we need is RefreshScreen().  So replace DoEvents() with RefreshScreen(), and run the program.  Do you see the flag waving now?  Great!  The program is executing RefreshScreen() over and over again in that While loop to make this happen.  Tapping Esc stops the program, which stops the flag from waving.  Close the program window.
  13. Also having DoEvents() inside the while loop may help, so place it right after RefreshScreen().  Run the program again.  Is the flag waving again?  Good: we didn't break anything.
  14. The way we handled step 9 above was rather cumbersome.  There is a short-hand way of saying the same thing.  Delete those six lines from step 9 and change the declaration of flag_animation-timeline to the one shown below.  Note that the characters used below are curly braces "{" and "}", not round parentheses "(" and ")":
    Define flag_animation_timeline As Integer [] = { 100, 100, 100, 100, 100, 100 }
  15. Run the program.  Is the flag still waving?  Oh, my heart!  (Close the program window.)
  16. Try six different values in flag_animation_timeline, values of your choice, say, for example { 50, 100, 200, 200, 100, 50}.  That's some gusty wind!
  17. Now uncomment the remaining three lines inside the While loop and watch the flag move to the left.
  18. It turns out that, with the calls to Delay() and MoveTo() now inside the While loop, we don't need DoEvents() and RefreshScreen() anymore.  On the other hand, there's no harm in leaving them in!
  19. Spend the rest of the time in closed lab modifying this program so that it moves the flag in a different direction.  If there's still time, then get more than one sprite moving around on the screen in different directions.  To the right?  Up and down?  At different angles, such as from lower left to upper right?

4. Proctor Check-off

When you are satisfied that you have successfully followed the method, raise your hand and one of the proctors will check your work. Then you are finished with the closed lab.  It's usually better for your education not to leave the classroom very early.  Instead, start in on the homework that's due at the beginning of the next class.