Working With Palettes and Colors
143
PDesign4 Touch Panel Design Program
Chameleon Images
TPD4 (v2.4 or higher) supports a new button state property called Chameleon Image.
A chameleon image is a PNG image file that, when applied to a button/state, uses the Fill and
Border colors assigned to the button/state to determine the colors in the image. PNG images consist
of four separate color channels (Red, Green, Blue and Alpha), and chameleon images use the
button/state's Fill and Border color assignments to determine the colors used in the image as
follows:
 The Alpha channel of the Chameleon image defines the overall shape mask for the state.
 The Red channel defines the area that will be filled with the state’s Fill Color.
 The Green channel defines the area that will be filled with the state’s Border Color.
 The Blue channel is not used.
As a result, if the Fill and/or Border colors are changed, then the colors used in the chameleon
image will change accordingly. Refer to the Working With Chameleon Images help topic for more
details.
One possible benefit of using chameleon images is that, when used in conjunction with custom
palettes, they enable the ability to create multiple color schemes that can be applied to a single
template in the G4 PanelBuilder application.
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
TPDesign4 are:
 It is a PNG image file
 It uses RGB color (8 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
When creating an image to be used as a Chameleon image in TPD4, set the image
properties to RGB Color and 8 Bits/Channel.
To Next Page
Loading...
Need help?
General
