back


Understanding the Use of Arrays

I know a lot of you have been a bit confused by the concept of arrays and pointers. Today, we are going to switch gears and see now arrays can be used in creating animation. For the purpose of illustration, this project will use Visual Basic rather than C++. Click on the Visual Basic icon on the desktop, start a new project and follow the steps below:

  1. Click the shapes icon on the Visual Basic Toolbox
  2. Click and drag a shape on your form
  3. Notice that the shape starts as a rectangle
  4. Observe the "shape" properties for your rectangle

  5. Click on the arrow and select "rounded rectangle"
  6. Notice how the shape automatically changes
  7. Try the other shape properties
  8. Change the BackStyle property to "Opaque"
  9. Change the BackColor property to a new color
  10. Change the FillStyle property to "Vertical Line"
  11. Change the BorderWidth property to 4
Assignment Part 1
Create nine different shapes. Each should have its own BackColor, FillStyle, and BorderWidth.

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 of the timer 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 in the general section:

    Option Explicit
    private increment As Integer

  11. Type this code in the form_load section of the code window:

    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

  12. Double click on the timer and add this code:

    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

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

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