Custom styles are styles you can create yourself. The difference between predefined styles and custom styles is that you determine the purpose, whereas the Original, Fade Out, and Pressed styles already have a defined function. However, the settings you can modify are mostly the same.
In order to apply Custom styles at playback time, you need to trigger them with Style actions. Learn more about that in the Style Action section.
Creating a Custom Style
Select the component to add a new style for. Go to the Properties tab in Inspector and click the button next to the Styles tabs.
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 the way you want it. 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.
Using Custom Styles
Custom styles allow you to give a component a new set of properties and then trigger that change by using a Style action.
The ways you can change a component by using a Custom style and its accompanying Style action is virtually limitless. Here are a few examples of how you could use a Custom style:
- Changing layout properties such as Size or Scale to highlight the component.
- Enabling or disabling Touch Behavior to direct the interaction of the users.
- Changing assets or background images to match a currently highlighted brand or topic.
Using a Custom style entails two things. First, you must know which properties to change in order to achieve the desired effect. Secondly, you'll need to set up a Style action to trigger the change. You can learn about these in their corresponding sections.
In this example, you can see the use of the Original and a Custom style applied to a Media Player component. These two styles differ in the layout of the components. 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.
In this multi-touch scenario, there are several components that make use of Custom styles. Let's take a look at "Media Player 1-t" for the purposes of this example.
- Start by selecting "Media Player 1-t" in the Scene Manager.
- Go to the Properties tab in the Inspector.
- There you can see the Original, Fade Out, Pressed styles, and a custom style called "Scale".
- Compare the properties in the Original style and the "Scale" style. The differences are visible in the Position and Scale properties.
To see the differences between the two style in the Stage, set the Preview mode of the Stage. Then click on the "Scale" style while holding the ⌘ key. The component will change according to the differences in the style settings.
This is a good example of a basic change in layout between two styles. You can change between these styles by way of a Style action, which is already set up for this project. Clicking on "Media Player 1" will switch it from its Original style to the "Scale" style.