Timers and Arrays: Animating a Picture

Timers are heavily used in games and graphic programs to control the behavior of objects.

A timer in VB sets up something to happen automatically. You can think if it as an infinite loop, one that runs every so often (maybe every second, every few milliseconds, etc.) In fact, this is exactly what a timer is; an infinite loop that iterates after an interval of time has passed.

So, whatever you want the timer to do, it will repeat automatically after waiting a certain time interval. You put the code in the timer's event procedure and it will automatically execute, repeatedly, according to the time interval.

For example, I can set a timer interval to once a second and then write a subroutine that changes an image on the screen to make it look animated....

Step 1. First, in a new project (PictureArrays), create 6 pictures boxes in a groupbox on the form.

Change the Size Mode property to AutoSize so the picture box will automatically fit to the size of the image.

Step 2. Recall that to use images in our program we need to define them as a Resource. Add the PacMan ghost images (in your Resources folder) as resources for your project.

To use these images in our program, we will put them into an array so we can randomly grab using the array.

Declare a form-level array called myImages and makes its data type "Image."

Then, in the Form Load routine, use an initialization list to set the array to the 7 ghost images from your project resources (be sure to use all 7 images.)  For example:

myImages = New Image() {My.Resources.ghost_blue, My Resources.ghost_green, ' etc. etc

Now, the array myImages is filled with all of the images you will need.

Step 3. You need to code the picture box click event procedure so that when a user clicks on a picture box, it's image changes.

Create an "all_picClick" event procedure, like the allButton_click from TicTacToe, to handle all of the picture box click events.

Step 4. When you click on a picture, make the image change: Use the myImages array (and an array index) to cycle through all of the images. The array index should be from 0 to 1 less than the size of your array.

What should happen when you get to the end of the array?

Step 5. Once you get the click event working, get the pictures to change automatically:

Create a timer. The timer object is part of the Components set in the Visual Studio toolbox.

In the timer event procedure, change the pictures using your image array, but this time use a For Each loop to change all of the picture boxes. Because the code is in the timer_tick event procedure, this code will execute automatically, forever, until you stop the timer (or end the program.)

To control how quickly the timer runs, change the timer property "Interval" which is specified in milliseconds. So to get a one second interval, or pause, use 1000.

Step 6. Create a single start/stop button that will start and stop the timer. Use the timer's enabled property to do this.

Extra Challenge Features

Use a TrackBar control to change speed, either increasing or decreasing according to the value of the trackbar.

Create a "Change Images" button to load new images and make those change with the start/stop button.   

Make this button have a "Change Back" capability to load the original.