Using toggle button layers

Toggle button layer is an object that can have multiple toggle states you can use to create interactions with 2D content through clicking.

Toggle button layer does not have a visual shape, so you have to attach to it another layer, such as an image layer or a text layer to give the toggle button layer a shape. When a user clicks the layer attached to the toggle button layer, the action generates a message that travels to the toggle button layer where you can define the behavior for that message.

The Toggle Button: Toggled Off and Toggle Button: Toggled On message triggers are available by default, but you can add other message as well. For example, to show the difference between the on and off states of a toggle button, you can:

• Switch the color of a layer.
• Attach two different layers and switch their visibility.
• Attach two different layers and fade between the two by animating their Blend Intensity property value.

Creating a toggle button layer

To create a toggle button layer:

1. In the Project right-click the layer where you want to create a toggle button layer and select Create > Toggle Button Layer.
2. In the Project add a layer to the toggle button layer.
   For example, add a Text Layer.
3. In the Project select the toggle button layer and in the Properties in the Toggle Button: Toggled Off message click the Add drop-down menu and select one of the triggers. Triggers you set here are triggered when the state of the toggle button layer is set to off.
   For example, select Set Property and set its properties:
   • Target Item to the object you want to control with the toggle button layer
     If you created a text layer in the previous step, select that text layer.
   • Target Property to Font Color
   • Target Property Attribute to Whole property
   • Value From to Fixed Value

   • Fixed Value to the color of the text in the text layer you want to associate with the off state of the toggle button layer.

4. Repeat the previous step for the Toggle Button: Toggled On message. However, set Fixed Value to a different color.
   In the Preview click the text layer you added to the toggle button layer and as the state of the toggle button layer changes, so does the color of the text layer.
   

Adding states to a toggle button layer

You can set more than two states for a toggle button layer using the Button: Toggle State message. When a toggle button layer has more than two states, you cannot use the Toggle Button: Toggled Off and Toggle Button: Toggled On messages to register the state of a toggle button.

To add toggle states to a toggle button layer:

1. Create a toggle button layer and add a layer to it.
2. In the Project select the toggle button layer and in the Properties add the Number of Toggle States property and set it to the number of toggle states you need.
   For example, set 3 toggle states.

3. In the Properties add a Button: Toggle State message and select Trigger Settings.
   Trigger Settings Editor opens.

4. In the Trigger Settings Editor select Add condition.
   Trigger Condition Editor window opens.
5. In the Trigger Condition Editor window set properties:
   • Property to Button Toggle State
   • Condition to =
   • Fixed Value to the toggle state value with which you want to associate this message.
     For example, for the first toggle state value set Fixed Value to 0, for the second to 1, for the third to 2, and so on.
   Click Save in Trigger Condition Editor window and the Trigger Settings Editor.
6. In the message for which you set the toggle state click the Add drop-down menu and select one of the triggers. Triggers you set here are triggered when the state of the toggle button layer is set to the condition you defined in the previous step.
   For example, select Write Log and enter a message you want to write to the Log window when the toggle button layer reaches this toggle state.
7. Add as many messages as there are toggle button layer states and repeat steps 3 to 6.

See also

Using button layers

Using toggle buttons

Using buttons

Open topic with navigation