AMX NXD-CV12 Technical Information download pdf (Page 357)

Animation Effects

323

TPDesign4 (v3.2 or higher)

For an example of a chameleon image, refer to the "Chameleon Demo" TPD4 file attached to Tech Note

TN733. This file can be viewed in G4 PanelPreview or on an actual G4 panel. To access AMX Tech Notes,

you must be logged into www.amx.com as a dealer.

Requirements for Chameleon Images

Chameleon images can be applied to buttons to create animated highlighting, glow and drop-shadow effects.

When used with multi-state buttons, chameleon images can also take advantage of TPD4's tweening tools to

easily create color transition effects. Furthermore, chameleon images may also use a companion bitmap which,

when placed on top (via the Draw Order state property), can add highlighting and shadow effects to

convincingly create an illusion of depth.

The basic requirements that allow an image file to be recognized as a chameleon image in TPD4 are:

It is a PNG image file

It uses RGB color (32 bits/channel)

It has an alpha channel defined

In order for a chameleon image to be applied to buttons or popup pages, the Border Name state property must

be set to none. When the border name is set to none, then the Chameleon Image property becomes available.

The Chameleon Image state property is available for all button types except Text Input, Computer Control and

TakeNote buttons.

Note that chameleon images are not necessarily different from any other PNG image file. Ideally, the image to

be used is one that either was created or was selected specifically with the concept of colorizable regions that

could be changed to suit different design needs. That is, while virtually any PNG file could be applied as a

chameleon image, some images make more sense and would give better results than others.

The characteristics that define any image as a chameleon image are:

1. It meets the technical requirements for a chameleon image (see above).

2. It has been applied to a button as the Chameleon Image (via the Chameleon Image state property).

Working With Chameleon Images

Here's an example of creating a simple chameleon image, for the purpose of illustrating the basic concepts

used:

1. Use an image editing program to create an image to use as the chameleon image:

Use the alpha channel to define the overall desired shape of the button (see Working with

Transparent Backgrounds for more information).

When creating an image to be used as a chameleon image, keep in mind that the Red and Green

color channels will be replaced by the colors specified as the Fill and Border colors in TPD4 for

each state of the button. The Blue color channel is not used for chameleon buttons.

2. Export the image as a PNG file. The exported file must be a 32-bit RGB Color (8 Bits/Channel) file in

order to be interpreted correctly by TPD4 as a chameleon image.

3. Import the image file into TPD4 (via the Import button on the Images tab of the Resource Manager

dialog).

4. In a Design View window, create or select a button to which you wish to apply the chameleon image.

Keep in mind that the Chameleon Image state property is not available for Text Input, Computer Control

or TakeNote button types.

5. In the States tab of the Properties window, set the button's Border Name to None. Note that at this point,

the Chameleon Image property becomes available (directly beneath Border Name).

6. In the Chameleon Image property, click the browse button (...) to access the Resource Manager dialog.

Select the chameleon image (in the Image tab) and click OK to apply it to the selected button.

Now that the image has been applied as a chameleon image, note that any portion of the image that exists on

the Red color channel now matches the color specified in the Fill Color state property.

Similarly, any portion of the image that exists on the Green color channel now matches the color specified in

the Border Color state property.

A few examples of color changes resulting from changing the Fill and Border colors for the button/state with

the chameleon image (FIG. 379):

1 ... 356 357 358 ... 430

Comments to this Manuals

No comments

AMX NXD-CV12 Technical Information Page 357

Comments to this Manuals

Related products and manuals for TVs & monitors AMX NXD-CV12