Animations and Tweening
151
PDesign4 Touch Panel Design Program
Provided you are not creating an image-based animation, the tweening process greatly simplifies
the process of generating each state individually by automatically creating a gradual transition
across all states based on the state properties of the first and last states.
Beyond simplifying the process of creating motion animations, tweening also generates very
smooth color transition effects that would be difficult or impossible to do any other way. When used
in combination with TPD4's ability to handle RGB colors (including the opacity setting), it is also
possible to use tweening to make buttons fade in and out on the page.
To illustrate, here's an example of how to create a simple button animation using just some of the
tweening options available in TPDesign4:
1. Create a new multi-state button. Note that even multi-state buttons initially have only two
states, as indicated by the State Manager window (FIG. 35).
2. Select Button > Add States, and add 10 states, for a total of 12 (FIG. 36).
3. Change the Fill and Border colors on the last state in the series (in this case State 12), via the
Properties Control window (States tab). In this example, text was also added to the first and last
states in the series ("ON" was applied to the first state in white, "OFF" was applied in black to
the last state). Ctrl + click to select only the first and last states in the series and do not select
the intermediate states (FIG. 37).
4. Right-click on either of the highlighted states to open the State Manager context menu.
Since transparent borders are not supported in this version of TPDesign4, to make a
button fade completely in/out on a page, you would have create the button without
borders.
FIG. 35 Tweening example 1
FIG. 36 Tweening example 2
FIG. 37 Tweening example 3
To Next Page
Loading...
Need help?
General
