Help Topics Version 2.0

Style Action

You can use Style actions to change the appearance of a component by switching the currently applied style to another style. Style actions are some of the most versatile and powerful features in Touch Creator.

Note: To use Style actions, you need to understand Styles and how to create them. We recommend you refer to the Understanding Styles section before proceeding with this one.

Creating a Style Action

Select the component to trigger the action. Go to the Actions tab in Inspector and click the button below the Actions list. Then select the Style action from the pop-up menu.

You can now select the Event, Receiver, and other general settings for the action. For more information on general settings of actions, see Using Actions.

Style Action Settings

The Style action offers the following settings:

Note: The Enable, Disable and Toggle options are exclusive, i.e. you can choose only one of them.

Using Style Actions

By changing a component's style, you can modify all settings that are available in the Original style: You can change its layout, touch behavior, and scale, you can make a component inactive, create rotation effects or display different content.

Style actions have an lead role in the creation of user interaction. They can provide a stylish and smooth flair to your multi-touch scenario.

Work Example

In this example, a Style action is used to change the layout of a Media Player component when it is clicked. 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 scene, a Media Component is to be scaled and to be moved to another position when clicked. Please proceed as follows:

  1. Start by selecting the "Media Player 1-t" component in the "Layer Touch" layer.
  2. Go to the Actions tab in the Inspector.
  3. Click the button and select the Style action.

Now that we have created a Style action, we need to make some adjustments to it.

  1. Go to the Properties tab of the Inspector.
  2. Click on the button to the right of the Style tabs. Rename this style to "Scale".
  3. The position in the Original style is X=384 px, Y=831 px and the scale is 100%. To make it scale twice as large, enter 200% into the Scale property of the Scale style. Change the Position property of the Scale style to X=960 px, Y=540 px.

To test the Scale style, switch the Stage to Preview mode. Hold the ALT key and click on the tab of the style. This will turn off all other styles and toggle the style clicked on. Holding the key while clicking the style tab will toggle just the style clicked on, leaving all other styles unaffected. Now return to the Style action for further modifications.

  1. Select Clicked as the triggering event.
  2. The receiver is in this case the component itself. The remaining general action settings are not relevant for Style actions.
  3. Enter the name of the style that the component should change to, in this case Scale.
  4. Select the Enable setting for Action, meaning that the "Scale" style will be enabled when the action is carried out.

The action has now been set up and can be tested.

Related Topics

© ~sedna gmbh 2016