Creating Animated Bitmap Effects - AMX MIO-R4 Operation/Reference Manual

Animations and Tweening
2. Apply a color to the last state that is different from that of the first state. To create a fade effect,
leave the colors the same for the first and last states, but change the opacity on one of them to zero
(via the Colors dialog, set to RGB colors). An opacity setting of zero makes the button totally
transparent. An opacity setting of 255 (max) makes the button totally opaque.
3. Ctrl+click to select two states in the State Manager window that are separated by at least one state
(do not select the intermediate states). The color tweener(s) will generate a transition effect that
fades the first color into the second. The most basic type of color transition effect starts at the first
state (or frame) and ends at the last. However, the TPDesign4 tweening tools are not limited to one
tween effect per multi-stage button press. Experiment with applying multiple color tweens to the
same button, and with different combinations of tweeners.
4. Right-click on either of the highlighted states in the State Manager window, and select Tweeners
from the context menu to open the Tweeners sub-menu.
5. Select one of the color tweeners to apply the effect. You should see the results immediately in the
State Manager window.
6. Apply other color tweeners, one at a time as desired.

Creating Animated Bitmap Effects

Use the Icon Position and Bitmap Position tweeners to apply animated bitmap effects to multi-state
buttons.
Animated bitmap effects can be used alone or in conjunction with the other tweeners to create all sorts of
eye-catching visual effects.
To create animated bitmap effects with an icon:
1. Select (or create a new) multi-state button.
2. Add an icon to the button (via the Text field in the Properties Control window - States tab).
3. Set the Icon Justification field to Absolute.
4. Move the icon into it's starting position for the animation via the Image/Text Positioning dialog
(select Image/Text Positioning from the State Manager context menu).
5. Insert at least one state (tweeners require at least three states to work).
6. Duplicate the state that the tweening should begin across all states to be included in the tween.
7. In the last state included in the tween, place the icon in its end position in the animation via the
Image/Text Positioning dialog (select Image/Text Positioning from the State Manager context
menu).
8. Ctrl+click to select just the two states containing the icon start and end positions in the State
Manager window. They must be separated by at least one stage, and you should not select the
intermediate states).
To create animated bitmap effects with a bitmap image, follow the steps outlined above. The only
difference is that you will select and apply a bitmap rather than an icon to the button.
In order to apply motion tweening to an icon, bitmap or text, the justification for the
icon, bitmap or text must be set to Absolute.
160
The Icon Position tweener allows you to cause an icon to move around the button area when it
is pressed.
The Bitmap Position tweener allows you to cause a bitmap to move around the button area
when it is pressed.
TPDesign4 Touch Panel Design Software (v2.10 or higher)