Linking Screens

Screen links let you create simple interactive prototypes for your website or software application. Linked screens then can be arranged into storyboards to present and export them together.

To link two screens select a widget and then specify the linked screen using the Links view. Widgets with multiple items allow you to specify a link target for each of them. Certain text widgets also let you use link syntax to highlight parts of text that you can then specify a link for. A small yellow overlay icon lets you quickly see where your links are. You can click on it to open the link.

Links

Linked screens can be located in any folder or even in another another project. To choose the linked screen, click the Link to Screen… icon and search for the desired screen.

Clicking on the drop-down arrow icon besides the Link to Screen… icon will present you with more linking options:

Another way to link screens is to drag & drop .screen files from the Project Explorer view into the Screen Editor. This is done by dragging screen files while holding the modifier key (Alt or Ctrl+Shift on Windows, Ctrl on Mac, Ctrl+Shift on Linux). When you do this the mouse cursor changes to indicate linking mode and widgets that can be linked are highlighted under the cursor while you drag over them. Drop the screen file to create the link. Note that you may have to uncheck the Link with Editor option (Link with Editor) in Project Explorer view first.

Normally links will show through other widgets in presentation mode and in exported documents. In some situations it’s desirable to be able to emulate the behavior of overlapping windows and hide links that are behind other widgets. The following widgets allow you to achieve that:

To remove a link for an item use the Remove Link icon.

To test your prototype launch the full-screen presentation mode. Clickable areas are highlighted and clicking on them takes you to the linked screen. You can disable link highlighting from the context menu. Use Arrow keys to go back to the previous screen in the navigation history.

You can also create clickable, multi-page PDF and HTML documents. To do so, put all the linked screens of your prototype into a storyboard and then export it.


Next: Keyboard Shortcuts