Animations and Tweening
162
TPDesign4 Touch Panel Design Software (v2.10 or higher)
Chameleon Images
TPD4 supports a 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
colorizable regions that could be changed to suit different design needs. That is, while virtually any PNG
The position-oriented tweener options only work when the selected elements are set
to use absolute positioning.
When creating an image to be used as a Chameleon image in TPD4, set the image
properties to RGB Color and 8 Bits/Channel.
Содержание Modero NXD-1200VG
Страница 20: ...xviii TPDesign4 Touch Panel Design Software v2 10 or higher Table of Contents ...
Страница 130: ...List Box Buttons 110 TPDesign4 Touch Panel Design Software v2 10 or higher ...
Страница 160: ...Working With States 140 TPDesign4 Touch Panel Design Software v2 10 or higher ...
Страница 166: ...Working With Function Codes 146 TPDesign4 Touch Panel Design Software v2 10 or higher ...
Страница 174: ...Colors and Palettes 154 TPDesign4 Touch Panel Design Software v2 10 or higher ...
Страница 186: ...Animations and Tweening 166 TPDesign4 Touch Panel Design Software v2 10 or higher ...
Страница 208: ...Working With Templates 188 TPDesign4 Touch Panel Design Software v2 10 or higher ...
Страница 236: ...File Transfer Operations 216 TPDesign4 Touch Panel Design Software v2 10 or higher ...
Страница 248: ...Program Preferences 228 TPDesign4 Touch Panel Design Software v2 10 or higher ...
Страница 266: ...Appendix B G4 PanelBuilder 246 TPDesign4 Touch Panel Design Software v2 10 or higher ...
Страница 272: ...Appendix C TakeNote 252 TPDesign4 Touch Panel Design Software v2 10 or higher ...
Страница 273: ...Appendix C TakeNote 253 TPDesign4 Touch Panel Design Software v2 10 or higher ...