Proto.io Player

Viewing in a web browser - Proto.io Player

The Proto.io Player is accessible from the 'Preview' button on the top right of the Editor. It opens a new tab in which you preview your project to experience how it looks and feels. You can try out your interactions and animations by using your mouse. You also have the option to navigate between the various screens, using the list or thumbnail view of the screen browser on the right.

The vertical toolbar provides tools related to the Player: show/hide sidebar, zoom, refresh preview (reload project), change device orientation, show/hide interaction hotspots, show/hide click effect, change device skin color and enter fullscreen. The show interaction hotspots feature, which can also be activated by pressing the SHIFT key, highlights the interactive areas on the screen and indicates what type of trigger event has been applied to them.

The various icons shown, depending on the trigger event are seen in the table below.

Tap, click, delayed tap
Tap hold, force touch, press, press up
Touch, release
Swipe, pan, pan start, pan end
Swipe left, pan left
Swipe right, pan right
Swipe up, pan up
Swipe down, pan down
Pinch, pinch out, pinch in
Container page enter, container page change, container scroll, container scroll end, container scroll to
Keydown
Mouse over, mouse out
On drag, on drag start, on drag end, on throw update, on throw complete
On rotate, on rotate start, on rotate end, on rotate throw update, on rotate throw complete
On state enter, on state leave, on state transition start, on state transition end
On input focus, on input blur, on input key up
On change, on checkbox change, on picker change
On slider drag, on slider drag start, on slider drag end, on range drag, on range drag start, on range drag end

Just below the screen browser, you have 4 options: a toggle for Editors’ comments, Send to mobile, Share (see Sharing your project), and Export to PDF/PNG.

The Editors’ comments toggle button enables and disables the comments and annotations feature among the users who have edit rights (see Setting up Users). Comments and annotations facilitate the communication and collaboration between team members.

Send to mobile is a quick way to send a link to your phone (via SMS) for previewing your prototype. You will be prompted to open it in the Proto.io app.

You can also watch the relevant video tutorial.

 

 

Have more questions? Submit a request