Images

The Images tab of the Resource Manager dialog provides a convenient way to import and preview all image files to be used in your project. Use this tab as a "library" of every image file that will be used in your project - for pages, popup pages, and buttons

(FIG. 17):

FIG. 17 Resource Manager dialog - Images tab

TPD5 uses one concept for image files: Bitmaps.

The term "Bitmap" is a generic term that describes any pixel-based image file. In TPD5, a Bitmap can be any supported image type (not limited to BMP files). Bitmaps and Dynamic Images are applied to Pages, Popup Pages, Sub-Pages and Buttons via the Bitmap (State) Property (see

page 251

).

Multiple Bitmaps can be applied to Pages, Popup Pages, Sub-Pages and Buttons. When multiple bitmaps are assigned to an element, they are displayed in a "stack" in the order specified in the Bitmaps dialog. See

Assigning Bitmaps to TPD5 Elements on page 33

By default, bitmaps are drawn beneath Text.

To use images in your project, they must first be imported into the project via the Resource Manager. See

Importing Image Files

Into the Project on page 32

    • Static Images (bitmaps) that have been imported into the project are listed in the Images tab of the Resource Manager.
    • Dynamic Images that have been imported into the project are listed in the Dynamic Images tab of the Resource Manager.

Supported Image File Types

TPD5 supports the following image file types:

    • BMP
    • IFF
    • JPG
    • PCT
    • PNG
    • TGA
    • WMF

NOTE: Of all the image f ile formats supported by TPD5, only one accommodates transparency as a color: PNGs. For the transparent color to be interpreted correctly by TPD5, the PNG f ile must be saved with RGB colors. Unless you are actually using transparency, JPGs are recommended over PNGs, since they are usually slightly smaller in size.

Importing Image Files Into the Project

  1. Select Panel > Resource Manager (or click the toolbar button) to open the Resource Manager dialog.
  2. Open the Images tab.
  3. Click the Import button to invoke the Open dialog.

Click the Overwrite resources with duplicate names checkbox (at the bottom of the dialog) to automatically overwrite any existing files that have the same filename. If this option is selected, anytime a file with a duplicate name is imported, it will replace the original file on every button or page that referenced that filename in the project.

  1. Locate and select the file(s) to import.
  2. Click Open to import the files to the Images tab.

Notes on Importing Image Files

    • When images of any supported file type (except PNG) are imported into a project, the files are automatically converted to JPGs. For this reason, if you import (or paste) a file that has the same name as a previously imported file (even if it has a different extension), TPD5 automatically adds the "copy of" prefix to the file.

PNGs are not converted because they are already compressed.

    • The largest image size supported on the panels is 1280x1024. Any image files that are imported to the project that are larger are automatically scaled down to fit.

Exporting Image Files From the Project

To export image files from Resource Manager dialog to a specified directory:

  1. Select Panel > Resource Manager (or click the toolbar button) to open the Resource Manager dialog.
  2. Open the Images tab.
  3. Select one or more files to export (Ctrl + click to select multiple files individually, or Shift + click to select a range of files).
  4. Click the Export button. This opens the Choose Directory dialog.
  5. Use the Browse button to locate a target directory for the files.
  6. Click OK.

Renaming Image Files

  1. Select Panel > Resource Manager (or click the toolbar button) to open the Resource Manager dialog.
  2. Open the Images tab.
  3. Select an image to rename.
  4. Click the Rename button to invoke the Rename dialog.
  5. Enter the new file name in the New Name text field.
  6. Click OK to close the Rename dialog.

Deleting Image Files From the Project

  1. Select Panel > Resource Manager (or click the toolbar button) to open the Resource Manager dialog to the Images tab.
  2. Select one or more files to delete (Ctrl + click to select multiple files individually, or Shift + click to select a range of files).
  3. Click the Delete button.
    • The files are not deleted from the hard drive, just from this project.
    • If any of the files selected for deletion are used by the active project, the Resource(s) In Use dialog is displayed, with a listing of all files targeted for deletion, as well as the Page(s) on which each file is used (FIG. 18).

FIG. 18 Resource(s) In Use dialog

By default, the Resource(s) In Use dialog is set to display any time a used resource is deleted. However, you can toggle the display of this dialog either by selecting the Don't show me again checkbox, or by selecting When deleting resources in use in the Application tab of the Preference dialog.

Assigning Bitmaps to TPD5 Elements

TPD5 uses one concept for image files: Bitmaps. Bitmaps can be applied to Pages, Standard Popup Pages, Sub-Pages and Buttons.

NOTE: The term Bitmap is a generic term that describes any pixel-based image f ile. In TPD5, a Bitmap can be any supported image type (not limited to . BMP f iles). Bitmaps and Dynamic Images are applied to Pages, Popup Pages and Buttons via the Bitmap (State) Property.

Unlike TPDesign4, TPD5 supports assigning multiple (up to five) bitmaps to each state of an element.

When multiple bitmaps are assigned, they are displayed in a "stack" according to the order specified in the Bitmaps dialog. This concept replaces the concept of Icons that were used in TPDesign4 (icons were necessary in TPD4 to control the Draw Order so that an icon could be displayed on top of a bitmap graphic).

As an example, the figure below indicates three simple bitmaps (FIG. 19):

Bitmap 3 image Bitmap 2 image Bitmap 1 image

FIG. 19 Example - 3 bitmaps

Using the Bitmaps dialog, these three bitmaps can be assigned to a single state of any TPD5 element. As an example, these three bitmaps can be assigned to a Page and arranged to display like this (FIG. 20):

FIG. 20 Example - 3 bitmaps displayed on a Page

Each of the bitmaps has it's own justification settings. In this example, all three bitmaps are set to "Center-middle (see the

Adjusting Bitmap Position section on page 36

for details).

    • Text is drawn on top of bitmap images.
    • Static Bitmaps (Images) that have been imported into the project are listed in the Images tab of the Resource Manager.
    • Dynamic Images that have been imported into the project are listed in the Dynamic Images tab of the Resource Manager.

In buttons where the bitmap state is set to "Absolute", the presentation may be adjusted either through the Bitmaps dialog, or through the Image/Text Positioning dialog. See

Adjusting Bitmap Position on page 36

for details.

Assigning Bitmaps to a Page, Popup Page or Button

NOTE: In order to apply Bitmaps to Pages, Popup Pages or Buttons, the image f iles must be pre-loaded in the Resource Manager. See the

Importing Image Files Into the Project section on page 32

for details.

  1. In a Design View window, select the Page, Popup Page or Button to which you want to add or change the image.
  2. In the States tab of the Properties window, click on the Bitmap property to enable the browse (...) button.
  3. Click the browse button to open the Bitmaps dialog (FIG. 21):

FIG. 21 Bitmaps dialog

  1. Click Add to open the Select Resource dialog where you can select an image (or Dynamic Image) to apply to the selected page (FIG. 22).

FIG. 22 Select Resource dialog - Images tab

Note that only images that have been imported into the project are listed in the Select Resource dialog (see

Importing Image

Files Into the Project section on page 32

for details).

  1. Select an image and click OK to close the Select Resource dialog and return to the Bitmaps dialog. The selected image is indicated as Bitmap 1 in the Bitmaps dialog (FIG. 23):

FIG. 23 Bitmaps dialog - Bitmap 1 configured

  1. Set the Bitmap Justif ication setting as desired (default = center-middle).

To add additional bitmaps to the selected Page, click Add again and select another bitmap and set it's justification. Repeat this process to add as many bitmaps to the Page as you need.

When multiple bitmaps are assigned, they are displayed in a "stack" according to the order specified in the Bitmaps dialog: "Bitmap 1" is drawn first, then "Bitmap 2", "Bitmap 3", etc...

For example, the Bitmaps dialog shown in FIG. 24 has three bitmaps assigned

FIG. 24 Bitmaps dialog - three bitmaps configured

In the Add Bitmap dialog, the bitmaps are ordered as follows: "Bitmap 1" is drawn first, followed by "Bitmap 2" (which appears on top of Bitmap 1), and "Bitmap" 3 is drawn last, so it appears on top of the others (FIG. 25):

FIG. 25 Example of a Page with three bitmaps

Use this ordering to control the "Z-Order" (or draw order) for multiple bitmaps that are layered on the selected TPD5 element.

  1. Click OK to close the Bitmaps dialog.

Adjusting Bitmap Position

In Pages, Popup pages, Sub-Pages or Buttons that have images with a Justification setting of "Absolute" (as specified in the

Bitmaps dialog), the positioning of the Bitmap(s) can be adjusted either via the Bitmaps dialog or the Image/Text Positioning dialog.

Via the Bitmaps dialog

  1. With a Page, Popup page, Sub-Page or Button state selected, click the browse button (...) in the Bitmaps (State) property to open the Bitmaps dialog (FIG. 26).
  2. Use the Bitmap X Offset and Bitmap Y Offset fields to adjust the position of the selected bitmap with pixel values.

The default values for Absolute Justification are X=0, Y=0. These values will position the selected bitmap in the upper-left corner of the Page, Popup page or Button (the upper left corner of the bitmap is placed at pixel position 0,0 of the element - see FIG. 26):

FIG. 26 Bitmaps dialog

Via the Image/Text Positioning dialog

  1. Right-click on a Page, Popup page or Button state in the State Manager window and select Image/Text Positioning... to open the Image/Text Positioning dialog (FIG. 27):

FIG. 27 Image/Text Positioning dialog

  1. Click on a bitmap to enable the Nudge and Justif ication controls. You can also simply drag and drop the selected bitmap to it's new position. The controls in this dialog also allow you to adjust the draw order of bitmaps (if there are multiple bitmaps) and set justification via drop-down.
  2. Note that if there are multiple bitmaps assigned to the selected element, each one can be adjusted individually.
  3. When you finish making your changes, click OK to save them and close the dialog.

Editing Image Files

In order to edit image and sound files via the TPDesign5 UI, default image and sound editor applications must be defined in the

Editor Selection tab of the Preferences dialog. See

Adding an External Image Editing Program on page 45

.

  1. Open the Images tab of the Resource Manager dialog.
  2. Select the image file that you want to edit.
  3. Click the Edit button to launch the external program specified as the default editor for image files.
  4. When the edit session begins, the image or sound file is opened in the default editing program, and control is returned to TPD5. Any saved changes to the resource made in the external editor will be immediately reflected in TPD5.

NOTE: Any action taken in TPDesign5 that would change the state of the image or sound f ile being edited (e.g., delete, rename, undo/redo, etc.) will cause the link between TPDesign5 and the external application to be broken. Any subsequent changes made in the external editor will not be reflected nor applied.

results matching ""

    No results matching ""