back


Intro to Two-Dimensional Animation in Visual Basic

It is easy to create animations using Visual Basic. The basic idea is that you place a series of images on your form and then you control which image is displayed in the order you wish. Creating animation in Visual Basic starts with using the timer. The technique is simple. You place a series of images on your form. You set the visible property to FALSE on all but the first image. Then, the timer controls which image is visible by looping through the images. The effect is just like an animation flipbook. When the timer flips through the images fast enough, it looks like the image is moving.

Animation is made possible by two important programming principles: the loop and the control array. A loop is a part of the program which keeps repeating itself for as long as you tell it to do so. The flickering of an animation is nothing more than a series of images that are looping.

A control array is a special type of "shortcut" that you as a programmer can use to make the computer process faster. In Visual Basic, you automatically create a control array when you copy and paste the same object on your form. Let's say you have just made a picture box named "picture" and placed it on your form. If you copy and paste the picture again, Visual Basic will stop you and tell you that you already have a picture by that name. It then asks you if you wish to create a control array. If you go along and paste the picture, you will see that you have started to create a sequence that looks like this:

picture(0)
picture(1)
picture(2)

All that's happening here is that the computer is using the same name (picture) over and over with the addition of index numbers so that it can tell them apart. That's really all there is to creating a control array.

Now, the processor can operate more efficiently because the array allows the computer to refer to all the pictures (called elements) under the same name by referring to each element's index number. You may be thinking, "what's the big deal? Why bother creating a control array?" Imagine an animation that contained a thousand pictures--or ten thousand pictures--would you want to come up with different names for each? A video game can have hundreds of thousands of images. Without arrays, it would impossible to control all the images. Animation depends on using arrays, so it's important to get used to using them. Okay, let's create a simple 2D animation:


  1. Click the timer icon on the Visual Basic Toolbox
  2. Click and drag the timer onto your form
  3. Change the name property of the timer to "tmrTimer1"
  4. Change the interval property to 150
  5. Create an interesting shape on your form
  6. Change the name property of the shape to "shape"
  7. Copy and paste the shape four times
  8. Notice the names of the elements in your array
  9. Change each of the shapes so that they are all a little different
  10. Open up the code editor (double-click on the form)and add the following code:

    Option Explicit
    private increment As Integer

    Private SubForm_Load()
    shape(0).Visible=True
    shape(1).Visible=False
    shape(2).Visible=False
    shape(3).Visible=False
    shape(4).Visible=False
    increment = 0
    End Sub

    Private Sub tmrTimer1_Timer()
    Shape(increment).Visible = False
    If increment = 4 Then
    increment = 0
    Else
    increment = increment + 1
    End If
    Shape(increment).Visible = True
    End Sub

  11. Add a command button to your form
  12. Change its name property to "cmdStop"
  13. Change its caption to "Stop"
  14. Double click the command button and type the following code:

    Unload Me
  15. Run the program
Assignment
Create an animation that displays eight shapes (or pictures) in a circle