Animations And Tweening; Using The Animation Wizard - AMX MIO-R4 Operation/Reference Manual

Animations and Tweening

Using the Animation Wizard

The Animation Wizard is a powerful tool included with TPDesign4. It guides you through the steps of
generating an animation sequence that can be applied to a multi-state button. Use animation to apply
impressive visual effects to your buttons. Multi-state buttons can have up to 256 states, all of which are
available to be used as "frames" in an animation.
You can create an animation sequence for a multi-state button manually, by creating a series of states and
applying a different bitmap or icon to each state and treating each state as an individual frame. This
however, would be a very tedious and time-intensive process. The Animation Wizard automates most of
the process and makes the task easy.
If you select a General (two-state) button to use with the animation wizard, the wizard
will allow you to add the necessary number of states to the button to accommodate
the animation sequence (and automatically change the button type to Multi-State
General).
To create a simple button animation using the Animation Wizard:
1. Select Button > Animation Wizard to start the wizard. This opens the first of six dialogs
(Animation Wizard - Select Type (Step 1 of 6)). Use the radio buttons in this dialog to specify the
type of animation to create (Bitmap, Icon or Chameleon Image).
2. Click Next to proceed to the Animation Wizard - Create Sequence (Step 2 of 6) dialog. Use this
dialog to specify the images to be included in the animation, and set the sequence of the images.
3. Click Next to proceed to the Animation Wizard - Size & Position (Step 3 of 6) dialog. Use this dialog
to specify the size and position of the animation relative to the button that will contain it.
All position (X-Y) values in TPDesign4 are zero-based (measured in pixels), meaning
that the upper-left corner of each page is represented by the X-Y value of 0, 0.
4. Click Next to proceed to the Animation Wizard - Assign Frames (Step 4 of 6) dialog. Use this dialog
to create enough states to accommodate the number of frames in the animation sequence.
5. Click Next to proceed to the Animation Wizard - Appearance (Step 5 of 6) dialog. Use this dialog to
adjust the button's border style and fill color as desired.
6. Click Next to proceed to the Animation Wizard - Finish (Step 5 of 6) dialog. This dialog lists the
actions to be taken to generate the button animation.
7. Click Finish to generate the animation.
Remember, many other animation effects can be achieved via the Tweening tools of TPDesign4.
The following sections offer more detailed descriptions of each of the Animation Wizard dialogs:
TPDesign4 Touch Panel Design Software (v2.10 or higher)
Note that the animation is displayed in the State Manager window (if it is open).
Use the Button Preview window to view the animation (select View > Button Preview, and
click Push).
Animations and Tweening
155