Picture Button

Overview

A picture button is similar to a standard button. However unlike a standard button (which accepts three states: enabled, disabled and clicked), a picture button has a different image to represent each state.

Picture buttons can be used in two ways:

• As command buttons in a form. In this case, the picture button generally includes four different states: enabled, disabled, clicked and rolled over. For example, a table of thumbnails that has one row of four columns, each thumbnail corresponds to the Default, Clicked, Roll over, and Disabled states.

  Property	JSON name	Value
  Rows	rowCount	1
  Columns	columnCount	4
  Switch back when Released	switchBackWhenReleased	true
  Switch when Roll Over	switchWhenRollover	true
  Use Last Frame as Disabled	useLastFrameAsDisabled	true

• As a picture button letting the user choose among several choices. In this case, a picture button can be used in place of a pop-up picture menu. With Picture Pop-up Menus, all choices are displayed simultaneously (as the items in the pop-up menu), while the picture button displays the choices consecutively (as the user clicks the button). Here is an example of a picture button. Suppose you want to give the users of a custom application the opportunity to choose the interface language for the application. You implement the option as a picture button in a custom properties dialog box:

Clicking the object changes the picture.

Using picture buttons

You can implement a picture button in the following manner:

1. First, prepare a single graphic in which the series of images are arranged in a row, a column, or a row-by-column grid.

   

You can organize pictures as columns, rows, or a row-by-column grid (as shown above). When organizing pictures as a grid, they are numbered from left to right, row by row, beginning with 0. For example, the second picture of the second row of a grid that consists of two rows and three columns, is numbered 4 (The UK flag in the example above).

2. Next, make sure the image is in your project's Resources and enter the path in the Pathname property.

3. Define the graphic's Rows and Columns properties.

4. Specify when the images change by selecting appropriate animation properties.

Animation

In addition to the standard positioning and appearance settings, you can set some specific properties for picture buttons, especially concerning how and when the pictures are displayed. These property options can be combined to enhance your picture buttons.

• By default (when no animation option is selected), a picture button displays the next picture in the series when the user clicks; it displays the previous picture in the series when the user holds down the Shift key and clicks. When the user reaches the last picture in the series, the picture does not change when the user clicks again. In other words, it does not cycle back to the first picture in the series.

The following other modes are available:

• Loop back to first frame
• Switch back when Released
• Switch when Roll Over
• Switch continuously on clicks
• Use Last Frame as Disabled
• Use Last frame as disabled

The associated variable of the picture button returns the index number, in the thumbnail table, of the current picture displayed. The numbering of pictures in the table begins with 0.

Supported Properties

Bold - Border Line Style - Bottom - Button Style - Class - Columns - Focusable - Font - Font Color - Height - Help Tip - Horizontal Sizing - Italic - Left - Loop back to first frame - Object Name - Pathname - Right - Rows - Shortcut - Standard action - Switch back when released - Switch continuously on clicks - Switch every x ticks - Title - Switch when roll over - Top - Type - Use Last frame as disabled - Variable or Expression - Vertical Sizing - Visibility - Width