Screen and container states

States are a key feature in Proto.io in terms of giving you more control over your screens (or containers), as well as allowing you to build powerful animations. You can define a number of different states your screens and containers can be in. A single screen (or container) can move from one state to another using particular interactions/transitions.

You should use states when you want to make changes to some of your screen (or container) components only. States can be managed from the bottom pane in the Editor. You also have a thumbnail view option.

Classic_Movies_Demo_App___Proto.io_editor__1_.png

 Classic_Movies_Demo_App___Proto.io_editor.png

State properties

When you add a new state, an exact copy of the last created state is added. If it’s the first state for the particular screen or container, then that copy is the same as your original screen or container.

You can access state properties from the States menu.

Screen_Shot_2017-04-03_at_9.27.11_AM.png

Screen state properties include title and background (seen left) whereas container state properties also include dimensions (seen right).

Screen_Shot_2017-04-03_at_9.29.04_AM.png Screen_Shot_2017-04-03_at_9.27.39_AM.png

 

State interactions

You can add interactions to your states and trigger an action when the user enters the particular state, leaves the state, or presses a key while in the state.



You have a large selection of actions to choose from, the most common being 'Go to screen', 'Show item', 'Hide item', 'Animate item', 'Change Screen State' and 'Change Container State'. 

You can access the state interactions from the relevant state dropdown menu, the thunder icon that appears on hover when in thumbnail view, or by simply selecting the state thumbnail in the transition timeline view.

Screen_Shot_2017-04-03_at_9.45.34_AM.png

             

State transition interactions, namely 'On transition start' and 'On transition end' are seen separately from state interactions in Proto.io 6; as part of the relevant transition created (see Transitions). They can be accessed from the transition timeline, from the little thunders at the beginning and end of the transition (see image below).

 

 

Changing states

You can change screen or container states by adding the corresponding interaction on the UI item you wish. You can choose which state to change to (specifically by name, or first, last, next, previous or previously visited). Adding a transition is optional.

Screen_Shot_2017-04-03_at_11.52.04_AM.png

 

 

Videos

You can also watch the following video tutorials on States:

 

Have more questions? Submit a request