Help Topics Version 2.0

Transitions

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.

Creating Transitions

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:

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.

Work Example

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.

  1. Go to the Properties tab of the Inspector. Click on the custom style called "Scale".
  2. Notice that the only properties that have been adjusted are Position and Scale.
  3. Click on the transitions icon to the left of the Position properties.
  4. 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.

Related Topics

© ~sedna gmbh 2016