The Graphic Image
Take a time-out to have some fun! Almost everybody enjoys working with graphics,
and Visual Basic's graphic image controls let you add graphics to your applications.
The two primary graphic image tools, the Image control and the Picture Box control,
work almost exactly alike to add graphic images to your applications. The tools don't
give you the ability to draw lines and circles (other controls do that, as you'll
see in the next hour), but you can add graphic images to your applications and manipulate
those images with what you learn in this hour's lesson.
The highlights of this hour include
- Which controls display graphic images
- What types of graphic files you can display
- How the Image control differs from the Picture Box control
- When the Toolbar control provides animation techniques
- How to adjust the image's size in the Picture Box or Image control
- How to improve the animation's efficiency so the movement runs more smoothly
across your screen
The Image Control
The Image control displays graphics on your Form window. The graphics reside in
a file, and the Image control determines how that file's graphic image will appear
on the screen.
When you add the Image control to your application's form, you will not see an
image of any kind, but rather the outline of a rectangle, as shown in Figure 18.1.
18.1. The Image control does not look
like much when you first place it.
TIP: It's been a while
(Hour 1, "Visual Basic at Work") since you saw the location of all the
Toolbox window's tools. If you cannot locate the Image control or the Picture Box
control for this lesson, remember that all of VB's development environment supports
tooltips, so you can find the correct controls by hovering your mouse pointer over
the tools on the Toolbox window. The Picture Box control icon looks like a desert.
The Image control icon contains the sun overlooking mountains.
Preparing the Image
A placed Image control does not look like a graphic image until you set appropriate
properties. The most important property setting is the Picture property
because the Picture property determines which image appears inside the Image
control's boundaries on the form. When you click on the Picture control, Visual Basic
displays an ellipsis button you can click to display a Load Picture dialog box that
displays a dialog box similar to a File Open dialog box.
The Load Picture dialog box displays a list of files with the graphic-related
filename extensions shown in Table 18.1.
Table 18.1. The file types supported by the Image control.
||A Windows bitmap image file
||An animated cursor file (not available for NT programmers at this time because NT
does not support animated cursors that move)
||An older bitmap image format
||An enhanced Windows metafile extension
||A Graphic Interchange Format file often used on Web pages
||An icon file
||The JPEG image format that stores graphics in a highly compressed format
||A Windows metafile
As long as an image contains one of Table 18.1's filename extensions, you can
display that image on your form with the Image control.
NOTE: Visual Basic
comes with several supplied graphic image files that take on Table 18.1's formats.
These files are stored in VB's Graphics folder and further subdivided into
categories and file types. When this lesson discusses using one of these graphic
files, search the Graphics folder for the image file to load.
You can select a graphic file that you want to load into the Image control's Picture
property, and Visual Basic displays that image on the form. If you were to select
the Coins.wmf file located in the Graphics\Metafile\Business folder,
you would see the coin metafile appear like the one shown in Figure 18.2. In the
figure, the BorderStyle property is set to 1-FixedSingle so you'll
know where the Image control edges appear in relation to the image.
Sizing the Image
If the metafile had been smaller, the Image control would have decreased its size
to capture exactly the image's measurements. The Image control shrinks or enlarges
to display the entire image. Therefore, the typical sizing properties such as Width
and Height don't always mean much when you place an Image control on the
form. The Image control will adjust to hold the entire image that you want to display
18.2. The Image control enlarges to hold
the entire metafile image.
NOTE: You can try
this yourself: Place an Image control on the form and load one of the Bitmap
folder images into the Image control's Picture property. The Image control
shrinks down to the size of a toolbar button to hold the small image.
Once you place an image on the form, you can resize the Image control just as
you can other controls by dragging its sizing handles out and in. Therefore, after
you load an image such as the Coins.wmf image, you can adjust the sizing
handles to make the Image control smaller.
WARNING: When you
adjust an image's size after you load a graphic image into the Picture control, the
image itself does not really shrink or grow, but the Image control shrinks and grows.
If you make the Image control's borders smaller, the control will simply truncate
or clip the image that does not fit in the Image control boundaries. Therefore, not
all of the image may appear if the control is not large enough. If you expand the
Image control again, however, the rest of the image reappears so the truncation occurs
only visually, but parts of the image itself are not cut off when you shrink the
edges. You can enlarge and shrink the image itself; however, you must use a different
property, as you're about to see.
The Image control's resizing capability can also make the Image control a nuisance.
For example, other images and controls might be in place and an oversized image would
overwrite some of their form area. Therefore, you need a way to control the image's
size without clipping the image.
New Term: To clip or to truncate means
to hide part of an image with a control's border.
The Stretch property controls the Image control's automatic sizing capabilities.
When Stretch is False (the default value), the Image control will
expand or shrink to display whatever image you load, but the image inside the Image
control does not change but is only clipped as just described. Instead, if you set
the Stretch property to True, the image does enlarge or shrink,
depending on the size of the Image control. Therefore, if you want to fit an image
into a small space, be sure to turn on Stretch before you adjust the Image
Figure 18.3 shows a form with two Image controls. One is large and one is small,
but they both use the same Coins.wmf image you saw earlier. With both controls'
Stretch properties set to True, the images themselves grow and
shrink inside their boundaries.
18.3. The images themselves adjust to
the Image control borders.
Loading Pictures at Runtime
When your application needs to change the image shown inside an Image control,
you cannot simply assign a filename to the Image control's Picture property
imgMyFace.Picture = "C:\Handsome.wmf" ` Not allowed
The Picture property needs more than a simple assignment. To store a
new image in the Image control's Picture property, you must use the LoadPicture()
built-in function. Here is the format of LoadPicture():
strFile is a string literal, variable, or control that contains the complete filename
and pathname. The graphic image can reside on another computer your application computer
is networked to. When the application gets to the LoadPicture() function,
the graphic image loads and the picture displays.
Therefore, to load the Handsome.wmf graphic image, you could specify
the following line:
imgMyFace.Picture = LoadPicture("C:\Handsome.wmf") ` Allowed
If you want to change the image's size before the image appears, you can set the
image's Visible property to False before loading the picture and
adjusting the Height and Width properties. Remember to set the
Stretch property to True if you want the image to resize and not
be clipped. Once you adjust the size, you then can set Visible to True,
and the image will appear in the size you prefer.
TIP: You can remove
an image from an Image control by assigning the LoadPicture() function to
an Image control's Picture property without specifying a filename argument.
The Picture Box Control
If you applied everything you knew about the Image control to the Picture Box
control, you could use the Picture Box control. The Picture Box control works almost
exactly like the Image control, with these exceptions:
- The Picture Box control supports more properties, events, and methods than the
- The Picture Box control consumes more resources than the Image control and, therefore,
is not as efficient.
The Picture Box control automatically clips the image if the image will not fit
within the Picture Box control's borders that you set when you placed the Picture
TIP: You use the Picture
Box control to group option buttons into a set just as you can with the Frame control.
You then can display a graphic image in the option button background.
Suppose that you placed a rather large Picture Box control on the form but then
loaded a graphic file image into the picture box that was much smaller, such as an
icon. The Picture Box control would not resize, so the image would appear inside
the Picture Box control, such as the one shown in Figure 18.4.
18.4. The Picture Box control does not
always shrink to fit.
The AutoSize property, normally set to False, determines how the
Image control responds to a loaded image's size. If AutoSize is False,
the control does not resize to fit the image. If, however, you change AutoSize
to True, the image control does resize to the image's measurements. If you
set AutoSize to True, the image resizes and does not clip. Therefore,
the image will always shrink or expand as needed to fit the Image control's size
when you set AutoSize to True.
TIP: Once you set AutoSize
to True, you can manually adjust the Picture Box control or adjust the control's
Height and Width properties in the code. The image will resize
along with the picture box's measurements.
Use the Align property to determine where on the form the Picture Box
control appears. You can dock the control to any side of the Form window control
using the Align property values described in Table 18.2.
Table 18.2. Possible Align property values.
||The Picture Box control appears where you place it in the Form window.
||The Picture Box control appears at the top of the Form window.
||The Picture Box control appears at the bottom of the Form window.
||The Picture Box control appears at the left of the Form window.
||The Picture Box control appears at the right of the Form window.
TIP: You can use the
Picture Box control to create toolbar buttons, so the Align property lets
you dock the toolbar buttons to the top of the form. By changing the Align
property, your code can move the toolbar elsewhere.
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. Once 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.
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.
New Term: Stop-animation techniques
are techniques you use to make an image appear on the screen 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.
18.5. The animation application sends
an image across the screen.
To build the application, perform these steps:
- 1. Create a new project and expand the Form window to a Height
property of 6840 and a Width property of 5910.
2. Change the form's Caption property to Animated Cartoon.
3. 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
4. Select the Face02 graphic image located in your VB\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.
5. Change the image's Height property to 1685 and the Width
property to 1815, and change the image's Name property to imgHappy.
6. Set the image's Stretch property to True so the happy face
resizes like the one in Figure 18.6.
7. Add a Timer control to the form and name the timer tmrAni. Set the
timer's Interval property to 500.
8. 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
18.6. The happy face is ready for display.
- 9. 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 for
a Toolbar control, 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
imgHappy.Left = 0 ` Restore image's first
imgHappy.Top = 3820 ` position.
` Change the image displayed
If blnFace = True Then
imgHappy.Picture = LoadPicture("C:\Program Files\DevStudio\" & _
blnFace = False
imgHappy.Picture = LoadPicture("C:\Program Files\DevStudio\" & _
blnFace = True
- Be sure to put the complete pathname for your computer's Face02.ico
and Face03.ico files in the Timer() event procedure's LoadPicture()
10. 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 will 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 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.
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 do not 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 only creates and
initializes a static variable 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, bmlFace will still be False, so the event procedure
loads the Face02.ico image and changes bmlFace to True
for the next cycle. The static blnFace variable ensures that a different
face shows every time interval.
You probably had some fun working with the graphic image tools shown in this lesson.
You now know how to display graphic file images with the Image control and the Picture
Box control. Both controls do basically the same task: Both controls display images
from graphics files. Their differences lie in the way they display the images when
image size becomes an issue; also, the Picture Box control is slightly less efficient
but offers more properties, events, and methods.
The next hour further improves your artistic skills. Instead of using prepackaged
graphic images, in the next hour you will use Visual Basic's drawing tools to draw
your own lines, circles, boxes, and other shapes.
- Q Can I use graphic images other than the ones that Visual Basic supplies?
A Certainly. Both the Image control and the Picture Box control load images from
any file that uses one of Table 18.1's graphic file formats. As a matter of fact,
Visual Basic's images are fairly limited, and most of them are useful for command
button pictures and toolbars but very little else.
Q Did you just say command button pictures? When I click the command button's Picture
property, no picture appears on the command button, so what's wrong?
A This is as good a time as any to describe how to put pictures on command buttons.
Once you set the command button's Picture property, you must also set the
Style property to 1-Graphical. Only a graphical command button
can display pictures. The command button works just like before, but now a picture
appears. (Erase the Caption property if the caption overwrites the picture's
image.) You did not learn about command button pictures in earlier lessons because
you were not yet familiar with the LoadPicture() function. You can use LoadPicture()
to insert a picture on a command button at runtime if you need to do that. Often,
programmers will display a slightly different picture on a command button after the
user clicks the button, and you can use LoadPicture() to do the same.
Q If speed is no longer an issue, why should I ever use the Image control?
A Although the Image control is slightly more efficient, you are correct in remembering
that today's computers are generally fast enough to handle both the Picture Box control
and the Image control for any application. If, however, you work in a networked environment
or if you set up your Windows desktop to run several applications simultaneously,
you will want to utilize all resources as efficiently as possible. Therefore, you
might prefer to use the Image control to lessen your computer's load if you don't
need the Picture Box control's extra properties, events, and methods.
The quiz questions and exercises are provided for your further understanding.
See Appendix C, "Answers," for answers.
- 1. Which two controls display graphic images?
2. Which control is more efficient?
3. What happens if you load a picture into an Image control and the Image control
is too small to hold the entire picture (assume default property values)?
4. What happens if you load a picture into a Picture Box control and the Picture
Box control is too small to hold the entire picture (assume default property values)?
5. What happens if you load a picture into an Image control and the Image control
is larger than the picture (assume default property values)?
6. What happens if you load a picture into a Picture Box control and the Picture
Box control is larger than the picture (assume default property values)?
7. What is wrong with this assignment (assume that the filename and pathname
imgFace.Picture = "C:\DataPics\Flower.Ico"
- 8. Which control helps control animation effects?
9. True or false: A static variable is a global variable because its value does
not change from a procedure's termination to the same procedure's next execution.
10. When does a static variable first get initialized?
- 1. Add a command button to the animation application so that the animation
does not begin until you click the button. The solution to this exercise might not
be obvious at first. (Hint: Consider activating the Timer control in the command
button's event procedure.) Put a happy face on the command button and hide the command
button so it disappears when the application starts animating the happy face.
2. Change the animation application so that the happy face bounces off all four
sides of the Form window.