The Moon Program

This project uses a series of eight images that will be "flipped" (placed one after another) in an image box. You will place the 8 images on the form and make them invisible. They will be placed, one after another, in another image box.

The eight images will be stored in an array called imgMoon(). The cycling of each image is controlled by a timer control. The Start Button (called cmdStartStop) turns the timer on or off and toggles the caption from "Start" to "Stop" and back. Below are seven images found on the web.
moon0.gif moon1.gif
 
moon2.gif
  		moon3.gif
 
moon4.gif
  		moon5.gif
 
moon6.gif
  		   

Step 1: Design the Form

The form will consist of a 8 image boxes. Seven of the boxes will contain the moon graphics shown above. Each image box will be invisible (that is, the visible property is set to False). These images will be stored in a control array (an array of controls). This will allow each to have the same name (imgMoon) but different indices (0 - 7). The last image box will contain the moon being show (imgCurrentMoon).

To design the form, first copy each of the graphic above into the project folder. To create a control array:
  1. Add an image control
  2. Name it imgMoon
  3. Add another control
  4. Again (and this is important) name it imgMoon
  5. You should see the following dialog

The correct response is Yes, you want a control array. Now add 5 more image controls, naming them all imgMoon. VB now understands what you are doing, so it will not ask again. You should now have seven imgMoon images, numbered imgMoon(0) through imgMoon(6).

Now add an additional image and name it imgCurrentMoon. You also need a timer and two command buttons. Place imgCurrentMoon in the middle of the form and put the other images off to the side. Remember, they will be invisible when the program runs. The form looks like this:

 

Step 2: Set the Properties
Object Name Properties
Form FrmMoon Caption The Moon Program
Timer Timer1 Interval 250
Enabled False
Command Button CmdExit Caption E&xit
Command Button CmdStartStop Caption Start
Image ImgCurrentMoon Picture moon0.gif
Stretch True
Image imgMoon(0) Picture moon0.gif
Visible False
Image imgMoon(1) Picture moon1.gif
Visible False
Image imgMoon(2) Picture moon02.gif
Visible False
Image imgMoon(3) Picture moon03.gif
Visible False
Image imgMoon(4) Picture moon04.gif
Visible False
Image imgMoon(5) Picture moon05.gif
Visible False
Image imgMoon(6) Picture moon06.gif
Stretch True
Visible False

The form should looks something like this. 

When you run the program, the control array is invisible (like the timer!)

Step 3: Write the Code

To keep track of which moon is displayed, we need a Global Variable (CurrentMoon) (Declare as integer in general declarations.)

Pseudocode for StartStop button

if the timer is on

turn it off
toggle the button caption

else

turn the timer on
toggle the button caption

Pseudocode for the Timer

place current moon into current image box
increment current moon index

if the current moon index is > 7 then

reset the current moon index to 0

Pseudocode for Form Load

initialize current moon to 0
 

To make your project more realistic, change the background color of the form to black.

Homework

For homework, you will use the skills you learned in both the Pong and Moon programs. Start your moon on the left hand border of the form. When the Start button is clicked, the moon should move slowly across the screen. When it hits the right edge of the form, it should reverse course! Of course, it should change phases as it moves!

Demo