Help Topics Version 2.0

Button Component

The purpose of Button components is to suggest users to push them and so trigger actions. For instance, buttons are used to start videos, send network messages or end scenes. Therefore, buttons are usually associated with other components of the scenario. This kind of association is established by Actions.

Creating a Button Component

Simply drag and drop the Button component from the Library into the Stage. Also, a corresponding entry will be created in the Scene Manager. You can drag the entry to its place in the Scene Manager.

Using a Button Component

A Button component allows you to place a button in the scenario inviting users to trigger one or multiple actions that affect other components. Although there are various other ways of triggering actions, such as double-tapping on the target component, buttons offer an intuitive way for user interaction. A button can have a text label describing its function, and its appearance can be customized to fit your brand.

Work Example

This example uses a button to reset a layer and its child components to a designated reset 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 this project works.

In this multi-touch scenario, some of the components can be scaled, rotated and moved about in the scene. Two media players are available that play back videos when triggered to do so. To quickly reset the components to a reset style, a button is provided that allows user to trigger the reset.

Here's how you create the button and implement its designated functionality.

  1. Start by adding a Button component in the layer named "Layer Touch".
  2. Select the button component and go to the Properties tab in the Inspector.
  3. A special image asset has been prepared for this button component called "buttonResetNormal.png". Select it from the drop down menu in the Background property.
  4. Now adjust the size of the button to match the image asset. You can find the size of the asset in the information displayed to the right of the Library when the asset is selected.

Next comes the action assignment that is a bit more complex. Since the Reset action was discontinued as of ~sedna touch version 2.0, another way ist needed to emulate its working. Here are the steps needed.

  1. For each component that you wish to implement a reset function for, you need to create a custom style named "Reset". Modify the property settings of this style as you wish the component to appear after the reset.
  2. In addition to any other actions that the above button is to carry out, you need to add at least two further actions: first one that disables the above "Reset" style, and another one that consecutively enables it. Make sure to create both actions in the order mentioned above.
  3. You need to create the actions above for each component that is to be reset. If you want to apply the reset to all components of a scene, it suffices to create the reset actions just for the scene. Then you need to check the Send to Children option in the action properties.

Now the button is ready. A click on it will change the corresponding components to their "Reset" style.

Related Topics

© ~sedna gmbh 2016