With Proto.io, you can easily add interactions to your prototypes. All interactions have a trigger event (that causes the interaction) and an action (the result of the trigger event). Trigger events may be mouse events like click or touch events like tap, swipe, etc., or screen events like orientation change, on-screen show, etc. You can also set keyboard events on each screen. Actions are related to navigation, containers, item visibility, audio, video, animations and more.
Interactions can be added through the Interactions tab in the Inspector of any UI item, screen or state.
When clicked, you are prompted to edit and save your interaction. Each interaction can then be later edited or deleted. You can also sort interactions for better management purposes.
Interactions setup forms differ based on the event and action. They, however, share common properties.
- Title – The title of the interaction
- Trigger – The event that will trigger the action
- Action – The action to be executed
- Delay – The delay in milliseconds for the action to be executed
- Callback – Another interaction that can be set when the current interaction is complete
Even though interactions can be sorted, they are called simultaneously with no delay unless otherwise specified (in the ‘Delay’ field, upon choosing an action). A variety of interactions can be set on one UI item (or screen action). For example, when I ‘tap’ on a button, I want one item to hide and an audio file to start playing simultaneously.
Similarly, you can use the callback function to create another interaction when your current interaction is complete, in other words, to create a chain of interactions. For example, you can set an interaction to a button for it to animate an item and when the item finishes its animation, to go to another screen.
The interaction builder is an advanced, yet intuitive user interface, that lets you create various interactions for your prototypes. Based on the event and/or the action of your interaction, a new form with different attributes and settings will appear. If you choose a “Go to screen” action on a “Tap” event, you will be prompted to select the target screen and the screen transition. Or if you choose a “Hide an Item” action on a “Tap” event, you will be prompted to select which item is to be hidden and on which screen.