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 a 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 basics), 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.