Visual Basic 6 Black Book
(Publisher: The Coriolis Group)
Author(s): Steven Holzner
ISBN: 1576102831
Publication Date: 08/01/98

An example will make this clearer. Here, we’ll use a picture clip control to hold the three images from the previous topic in this chapter, and flip through them when the user clicks a command button. We’ll need a picture clip control, PictureClip1; a command button, Command1, labeled “Clip next image”; and a picture box, Picture1, to display the images in (set Picture1’s AutoSize property to True so it will resize itself to match the images).

We start by storing the dimensions of each of the three images in the entire bitmap as constants and storing the currently displayed image in an index, intImageIndex:

Const intImageWidth = 137
Const intImageHeight = 70
Dim intImageIndex As Integer

To use coordinates to specify images in a picture clip control, you use ClipX and ClipY to indicate the upper-left point of the image, and ClipWidth and ClipHeight to indicate the image’s width and height. When the form in our example loads, then, we can display the first image by setting these properties to match that image, and then set Picture1’s Picture property to the picture clip control’s Clip property:

Private Sub Form_Load()
    PictureClip1.ClipX = 0
    PictureClip1.ClipY = 0
    PictureClip1.ClipWidth = intImageWidth
    PictureClip1.ClipHeight = intImageHeight
    Picture1.Picture = PictureClip1.Clip
End Sub

Now the picture box displays the first image. When the user clicks the command button, Command1, we increment the image index, intImageIndex:

Private Sub Command1_Click()
    intImageIndex = intImageIndex + 1
    If intImageIndex >= 3 Then intImageIndex = 0
…
End Sub

Then we reset the ClipX property to point to the new image and display it in the picture box (note that we’re just working with a strip of images here; if you were working with a grid of images, you’d also have to calculate ClipY):

Private Sub Command1_Click()
    intImageIndex = intImageIndex + 1
    If intImageIndex >= 3 Then intImageIndex = 0
    PictureClip1.ClipX = intImageIndex * intImageWidth
    Picture1.Picture = PictureClip1.Clip
End Sub

That’s all we need. Run the program now, as shown in Figure 19.6. When the user clicks the Clip Next Image button, the next image appears in the picture box. Our picture clip example is a success.

Figure 19.6  Using coordinates in a picture clip control to retrieve images.

The code for this example, picclip.frm version 1 (version 2, which appears on the CD-ROM, will include the use of rows and columns and will be developed in the next topic), appears in Listing 19.1.

Listing 19.1 picclip.frm version 1

VERSION 6.00
Object = "{27395F88-0C0C-101B-A3C9-08002B2F49FB}#1.1#0"; "PICCLP32.OCX"
Begin VB.Form Form1
   Caption         =   "Form1"
   ClientHeight    =   2370
   ClientLeft      =   60
   ClientTop       =   345
   ClientWidth     =   4680
   LinkTopic       =   "Form1"
   ScaleHeight     =   2370
   ScaleWidth      =   4680
   StartUpPosition =   3  'Windows Default
   Begin VB.CommandButton Command2
      Caption         =   "Get next cell"
      Height          =   495
      Left            =   3120
      TabIndex        =   2
      Top             =   1560
      Width           =   1215
   End
   Begin VB.CommandButton Command1
      Caption         =   "Clip next image"
      Height          =   495
      Left            =   240
      TabIndex        =   1
      Top             =   1560
      Width           =   1215
   End
   Begin VB.PictureBox Picture1
      AutoSize        =   –1  'True
      Height          =   975
      Left            =   1200
      ScaleHeight     =   915
      ScaleWidth      =   2235
      TabIndex        =   0
      Top             =   240
      Width           =   2295
   End
   Begin PicClip.PictureClip PictureClip1
      Left            =   120
      Top             =   2040
      _ExtentX        =   10874
      _ExtentY        =   1852
      _Version        =   393216
      Picture         =   "picclip.frx":0000
   End
End
Attribute VB_Name = "Form1"
Attribute VB_GlobalNameSpace = False
Attribute VB_Creatable = False
Attribute VB_PredeclaredId = True
Attribute VB_Exposed = False
Const intImageWidth = 137
Const intImageHeight = 70
Dim intImageIndex As Integer

Private Sub Command1_Click()
    intImageIndex = intImageIndex + 1
    If intImageIndex >= 3 Then intImageIndex = 0
    PictureClip1.ClipX = intImageIndex * intImageWidth
    Picture1.Picture = PictureClip1.Clip
End Sub

Private Sub Form_Load()
    PictureClip1.ClipX = 0
    PictureClip1.ClipY = 0
    PictureClip1.ClipWidth = intImageWidth
    PictureClip1.ClipHeight = intImageHeight
    Picture1.Picture = PictureClip1.Clip
End Sub

Selecting Images In A Picture Clip Control Using Rows And Columns

In the previous topic, we saw how to select images in a picture clip control using coordinates in the single large bitmap that picture clip controls use to store images. You can also divide that bitmap up into rows and columns and access images that way.

In fact, using rows and columns is often much easier than using coordinates, because you don’t have to figure things out using actual pixel values. Let’s see an example. We’ll just add some code to the picture clip control example we developed in the previous topic (picclip.frm). To start, we divide the picture clip control’s bitmap into rows and columns with the Rows and Columns properties. Because there are three adjacent images in our bitmap (see Figure 19.5), we have one row and three columns, so we set the Rows and Columns properties this way when the form loads:

Private Sub Form_Load()
    PictureClip1.ClipX = 0
    PictureClip1.ClipY = 0
    PictureClip1.ClipWidth = intImageWidth
    PictureClip1.ClipHeight = intImageHeight
    PictureClip1.Rows = 1
    PictureClip1.Cols = 3
    Picture1.Picture = PictureClip1.Clip
End Sub

Now we add a new command button, Command2, to the form, and label it “Get next cell”. When the user clicks this button, we can increment the image index, intImageIndex:

Private Sub Command2_Click()
    intImageIndex = intImageIndex + 1
    If intImageIndex >= 3 Then intImageIndex = 0
   …
End Sub