Controllers and States

Controllers and states are the building blocks for transition animations in ZapWorks Studio. A controller stores a user-defined set of node properties and acts as a holder for states and timelines.

The values of these properties can be edited within any states that belong to the given controller. For example, a node's position property can be assigned to a controller and any states within it would be able to alter the value of the node's position.

Adding Controllers and States

Both Controllers and States can be added and managed from the Controllers Panel, located in the bottom left of Studio's UI.

The Controllers Panel

To add a controller, click on the plus (+) icon in the Controllers Panel and select New Controller.

Adding a Controller

To add a state to a controller, right-click on a controller and select New State.

Adding a State

Giving your controllers and states brief but descriptive names makes them easier to manage, especially when activating them with an Action or from within a script.

Assigning Properties

Properties can only be modified from within a controller that explicitly manages them. By default, all properties are managed by the root base controller.

To assign a property to a new controller, select the controller first, then a node in the Hierarchy. Clicking the plus (+) icon to the right of a property in the Properties panel will add it to the controller.

Assigning a property to a Controller

The value of the property will then be editable from any states within the controller.

Remember to select the base controller when you're done editing properties within a state to return to the default behaviour.

State View Panel

While a state is selected, and if it has properties assigned, the state view panel is shown.

State View Panel

This panel has five columns:

Diagram ID Description
1 The node(s) from the Hierarchy which has properties assigned to this controller.
2 The specific properties of the node managed by this controller. Clicking the (x) will remove a property from the controller.
3 Sets the speed at which a transition between states in the controller will occur.
4 Sets whether a property will transition to the value in the selected state at the beginning or end of its activation. This is only applicable to properties that transition over time, such as position or color.
5 The current value of the properties stored in the selected state.

Activating States

States can be activated via user interaction (e.g. a button) or event triggers (e.g. on target seen) using one of two methods:

  • Either code-free with Actions
  • Or through code within a script node.

Default States

The first state added to a controller will be marked as its default state, meaning it's the initial state that will be active when the experience is scanned.

To set a different state in a controller as the default one, right-click it and select Make Default.

Changing the default state

Next article: Timelines

zapcode branded_zapcode i