Styles are sets of properties that define the appearance and behavior of a component. In other words, a style can be seen as a stored version of the current property settings in the Inspector. However, this is a simplified statement. Please read the How Styles Work section below for a more detailed description.
Styles are changed by triggering Style actions. In this you have a wide range of possibilities for interaction available. For more information on actions, see Using Actions.
All components have an Original style, which is the default style for the corresponding component when the scene begins. Depending on the type of the component, there are two other basic default styles: Pressed and Fade Out.
The Pressed style is the style that is applied to a Button component when it is clicked and the Fade Out style is the style that will be used when a is being rendered invisible or when the scene ends.
Creating a Style
To create a new style, go to the the Properties tab in the Inspector and click on the button. There you can also find the already existing styles of the component.
When you add a new style, it gets an automatically created name that you might want to change. Give your styles names that are both relevant to their purpose, and simple to remember, as you will need the name to configure the corresponding Style action.
Once you've added a new style, you can change its properties to differ from the original style in the way that you want. Knowing which properties to change is the basic skill for creating a style, and you can learn more about them in the Using Properties section.
In conjunction with Style actions, styles give you great possibilities to create dynamic scenarios with lots of user interactivity. For instance, when a Media Player component is clicked, you may want to increase its size, and place it at a more prominent position to draw attention to the content.
You may also want to change the background image of a scene to emphasize the brand currently shown. You could also enable additional touch behavior for a component when it is interacted with in a certain way. All this you can do by giving elements a custom style and enabling those styles with a Style action.
To test new styles, switch the Stage to Preview mode. Hold the ALT key and click on the tab of the style you want to check. This will turn off all other styles and toggle the style clicked on. Holding the ⌘ tab while clicking the style tab will toggle just the style clicked on, leaving all other styles unaffected.
How Styles Work
To have full control of your components, it is crucial to understand what happens when you activate and deactivate multiple styles of a single component. A style stores only the changes you apply. You may create a style that changes the size of a component. In this style you adjust only the corresponding size parameters and leave all other values untouched. With another style you might change only the rotation.
The application of multiple styles on a single component works in an additive way. If you activate the size style and then the rotation style, both changes will be applied. With multiple styles applied, note that the last activated style "wins". If you activate ten different styles of which three modify the size, then the last activated size-changing style wins. If you deactivate that last one, the size settings of the second winner will be applied, and so on.
Note: By using the Exclusive option of Style actions, you can have the settings of an individual custom style override all other custom styles. The other styles stay active, but their settings take effect only after the exclusive style is deactivated again.
Activating a style that is already active has no effect. Therefore, to ensure a style is having effect on the scenario, deactivate it and activate it again. You can deactivate each custom style, but the Original style can't be deactivated. It stays permanently active, so if you deactivate all custom styles, the settings of the Original style still apply.