InformIT: Sams Teach Yourself Visual Basic 6 in 24 Hours

Animating Pictures

You can create animated applications using the Picture Box control by duplicating the same techniques used in the stop-animation techniques that movie-makers use for space and monster battles. This section describes the development of a simple animated Form window. After you master these simple techniques, more extensive animation might take more time to develop, but the techniques don't change.

Figure 18.5 shows the running animated application. The application simply floats a changing image across the screen. You'll use an Image control and a Timer control to perform the animation.

Figure 18.5 The animation application sends an image across the screen.

The Timer control lets your application time the animation. After every time interval that passes (set in the timer's Interval property), the timer's Timer() event procedure executes. The Timer() event procedure can adjust the image's location (and picture if needed). If you adjust the location every half second or so, the animation will appear to move across the form.

Stop-animation techniques are techniques you use to make an image appear onscreen for a fraction of a second before you put a new image in its place or move the image to a different part of the Form window.

To build the application, perform these steps:

Create a new project and expand the Form window to a Height property of 6840 and a Width property of 5910.
Change the form's Caption property to Animated Cartoon.
Place an Image control on the form. Don't worry about the location or size because you'll adjust those values with code. You'll use an Image control for this application instead of a Picture Box control because the Image control is slightly more efficient and you have no need for the extra properties that come with the Picture Box control.
Select the Face02 graphic image located in your Graphics\Icons\Misc folder. Remember the full path to this file because you'll have to enter this same path a little later in the application's code.
Change the image's Height property to 1685 and the Width property to 1815, and change the image's Name property to imgHappy.
Set the image's Stretch property to True so the happy face resizes like the one in Figure 18.6.

Figure 18.6 The happy face is ready for display.
Add a Timer control to the form and name the timer tmrAni. Set the timer's Interval property to 500.

You must now add the code. Double-click the Form window to open the Form_Load() event procedure. Form_Load() will initialize the image's location. Type the following for the Form_Load() event procedure:

Private Sub Form_Load()
  ' Adjust the image's location
  imgHappy.Left = 0   ' Number of twips from
                      ' left of Form window
  imgHappy.Top = 3820 ' Number of twips from
                      ' top of Form window
End Sub

Add a Timer() event procedure to the Code window. To add the event procedure, you can click the Code window's Object drop-down list to select the Timer control. The Timer() is the only event procedure possible, so Visual Basic opens the Timer() event procedure. You can add code to the event procedure so tmrAni_Timer() looks like this:

Private Sub tmrAni_Timer()
  ' Adjust the Left and Top properties
  ' as well as the happy face shown so
  ' that the face appears to float up
  ' and across the Form window.

  ' The first time you declare a Static Boolean
  ' variable, VB initializes it to False
  Static blnFace As Boolean

    ' Add to Left and Top only if room is left
  If (imgHappy.Left < 4800) And _
     (imgHappy.Top < 500) Then
       imgHappy.Left = imgHappy.Left + 100
       imgHappy.Top = imgHappy.Top - 50
  Else
    imgHappy.Left = 0    ' Restore image's first
    imgHappy.Top = 3820  ' position.
  End If
 
  ' Change the image displayed

  ' You may need to edit the graphic paths you see below to
  ' match the graphic file locations of your VB installation.
  ' In most cases, simply changing the drive letter from K:\...
  ' to C:\... (or whatever drive VB is installed) will do.

  If blnFace = True Then
     imgHappy.Picture = _
       LoadPicture("K:\Program Files\Microsoft Visual Studio\" & _
          "Common\Graphics\Icons\Misc\Face03.ico")
     blnFace = False
  Else
     imgHappy.Picture = _
       LoadPicture("K:\Program Files\Microsoft Visual Studio\" & _
          "Common\Graphics\Icons\Misc\Face02.ico")
     blnFace = True
  End If

End Sub

Be sure to put the complete pathname for your computer's Face02.ico and Face03.ico files in the Timer() event procedure's LoadPicture() function calls.

Save your project and run your application to see the happy face move across and up the screen. The happy face smiles and grins all along the way.

This animation application is simple, but you now have all the tools you need to produce animation effects. You can smooth the animation by displaying images that don't change as rapidly between time intervals as the two happy faces shown here. In addition, if you compile your application, the animation wwill run more smoothly than if you run the application from within the development environment. (Compile the program by selecting File | Make. Hour 23, "Distributing Your Applications," explains more about application compilation.)

In addition, you can make the image's movement appear slightly less jumpy if you set the image's Visible property to False at the top of the Timer() event procedure and then set the property back to True before leaving the procedure. Hiding the control before adjusting its location properties seems to improve the control's movement. You might not notice a difference, however, if you run the application on a quick computer, especially if you compile the application.

This application uses the Image control for efficiency, but you would probably see only a little efficiency decrease if you used the Picture Box control instead. Today's computers are fast, and the difference between the controls is not as critical as it once was.

Static Variables

This happy face animation application demonstrates a different variable declaration from the ones you've seen so far. The Static statement declares static variables. Although static variables are local to their procedure, they don't lose their values between procedure calls as regular local variables do. Therefore, if blnFace is True when the tmrAni_Timer() event procedure finishes, the next time Visual Basic executes tmrAni_Timer(), the blnFace variable will still be declared and still be True. Visual Basic creates and initializes a static variable only once per program execution, and the static variable retains its value between procedure calls.

The animation application uses the static variable to test which happy face image is showing. If blnFace is True, the event procedure loads the Face03.ico picture into the image and changes blnFace from True to False. On the next event procedure execution, blnFace will still be False, so the event procedure loads the Face02.ico image and changes blnFace to True for the next cycle. The static blnFace variable ensures that a different face shows every time interval.

Summary | Next Section

Previous Section