Transitions determine the way properties changes are carried out at playback time. Property changes can be the result of a component being rendered invisible, the ending of a scene, or the activation of a style.
By default, every relevant property has a transition that is carried out when the corresponding style is activated. Too see the current one, click on the icon to the left of the corresponding property. There you select a transition type and customize it to a degree.
To begin with, choose a Transition Type. Click on the icon to the left of the property, then click on the little triangle next to the Transition Type label and select one of the entries from the drop down menu.
The following transition types are available:
- None: The transition takes place with immediata effect.
- Linear: The transition starts immediately, doesn't change speed and reaches its end position abruptly.
- EaseIn: The transition starts slowly and accelerates towards the end, reaching the end position abruptly.
- EaseOut: The transition starts quickly and slows down at the end.
- EaseIn-Out: The transition starts slowly, accelerates and then slows down towards the end again.
- Bounce: The transition starts slowly, accelerates, but then it reverses a few time a little bit giving the impression of a bouncing ball.
- Elastic: The transition starts quickly and overshoots a bit, only to swing into the end position.
- Delayed: The same as None but with a delayed start.
Once you've chosen the transition type, you can adjust how much time the transition will take. Drag the red line with a mouse click to change the end time, drag it with a right click to change the start time. Figures at the start and end points show the corresponding time in seconds.
As a general rule, components that move into the field of view should reach their end positions in a smooth fashion, e.g via EaseOut, EaseIn-Out, Bounce or Elastic. The other transition types look somewhat too abrupt.
Components that exit the stage can be removed quicker, but you should consider if you want them to just rush out as in the None or Delayed transition types. Use these two types only if a prompt change is really needed. However, it is completely up to your how you want the scenario to appear.
In this example, a transition is changed to adjust the way a Media Player component changes to another style. You can find this example project as part of the Screencast 2.0 project, which is also treated in the screencasts on the same page. Since the settings have already been made in the demo project, you can follow these steps to see how it was done.
"Media Player 1-t" has an action style that changes it to its "Scale" style when it is clicked. The way in which it transfers to the next style is affected by a transition. Let's see how.
- Go to the Properties tab of the Inspector. Click on the custom style called "Scale".
- Notice that the only properties that have been adjusted are Position and Scale.
- Click on the transitions icon to the left of the Position properties.
- The initial transition type is None, i.e. the transition takes place with immediate effect. Click on the Transition Type label to change the type to Bounce. Set the upper value to 1.05 seconds.
The combination of these settings will make "Media Player 1-t" bounce for the specified time when it makes the transition to the "Scale" style.
To test the effect of the changes made, set the Preview mode of the Stage. Then click on the "Scale" style while holding the ⌘ key. Note the way the position and the size of "Media Player 1-t" changes when "Scale" is activated.