Animations and Tweening
158
TPDesign4 Touch Panel Design Software (v2.10 or higher)
Tweening
Short for in-betweening, "tweening" is the process of altering the display properties of intermediate
frames between two images to give the appearance that the first image evolves smoothly into the second
image. Tweening is a common concept in all sorts of animation software.
TPDesign4 supports multi-state buttons, which can have up to 256 states which are used to animate a
button push from Off to On and back again to Off. In TPDesign4, each state of a multi-state button can
be thought of as an individual frame. So, if you create a multi-state button with 256 states, you might say
that you have 256 frames available for the animation.
When the multi-state button is turned On it will display all the assigned states from first to last within a
specified time interval. This is called "Animate Time Up", and is definable in 1/10th second increments.
When the button is turned back Off, the states will be displayed in reverse order. This is called "Animate
Time Down", also definable in 1/10th second increments. The Animate Time Up and Animate Time
Down values are set in the General tab of the Properties Control window.
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. 71).
2. Select Button > Add States, and add 10 states, for a total of 12 (FIG. 72).
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
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 to create the button without
borders.
FIG. 71 Tweening example 1
FIG. 72 Tweening example 2
To Next Page
Loading...
Need help?
General
Weight and Dimensions
