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
- Two students should work together at one workstation.
- 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
- Start by opening "002 Moving_Sprite.kpl" from the OSU folder.
- Immediately Save As New Program with name "Lively_Sprite.kpl"
in folder "0) My Own".
- Change the author name(s) and the date appropriately.
- Change the program name to "Lively_Sprite" (if you haven't
already done so).
- 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.
- 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!
- 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.
- 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).
- 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
- 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
- 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
to stop the program and close its
window. No matter what, close the program's window.
- 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.
- 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.
- 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 }
- Run the program. Is the flag still waving? Oh, my
heart! (Close the program window.)
- 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!
- Now uncomment the remaining three lines inside the While loop and
watch the flag move to the left.
- 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!
- 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.