© 2002-2017 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.
Snapshot widgets let you set up references to pages and then show their diagrams on other pages in thumbnail images. You can configure a snapshot to display either an entire diagram or just a portion of a diagram. You can also set up a snapshot to apply interactions in the referenced diagram before capturing the image.
If a referenced diagram is updated, the thumbnail shown in the snapshot widget will automatically update to match.
Snapshot widgets can be used to diagram the step-by-step progress of an interaction or to add thumbnails to a flow diagram.
REFERENCE PAGES (OR MASTERS)
To select the page or master to be displayed in the snapshot, either double-click the snapshot or use the “Add Reference Page” control in the Properties tab of the Inspector. The “Add Reference Page” control will change to show the name of the referenced page or master. Click the page name to choose a new reference page. If the snapshot is in "scale to fit” mode (see below), double-clicking the snapshot on the canvas will also open the Reference Page dialog.
The snapshot will update automatically when the referenced page or master is edited.
SCALE TO FIT
Snapshots start in “Scale to Fit” mode, which scales the image of the referenced page to fit inside the bounds of the snapshot widget.
You can turn off this option in the Inspector or by right-clicking the snapshot on the canvas. After unchecking “Scale to Fit”, you will be able to adjust the offset and scale of the captured image.
The snapshot's offset values let you shift the portion of the referenced page shown in the snapshot. You can set offset values in the Properties tab. Alternatively, you can double-click the snapshot widget and then drag the image within the widget.
You can also scale the the image of the referenced page in the snapshot widget. This is helpful if you want to zoom in on a particular part of the page. To set the scale, use the Scale property in the Properties tab. You can also double-click on the snapshot widget and then use the scroll wheel on your mouse to zoom in or out. If your mouse doesn’t have a scroll wheel, you can hold [CTRL] / [CMD] while scrolling.
LOCATION AND SIZE
To move a widget, drag and drop it into place or use the arrow keys to nudge. You can also choose the exact location of a widget using the "x" and "y" fields in the top toolbar or in the Inspector’s Style tab.
When a widget is selected, a green border is drawn around it. Handles on the border can be dragged to resize the widget. To maintain the aspect ratio of a widget when resizing via the handles, hold the [SHIFT] key while dragging.
Widgets can also be resized to a specific pixel value. Use the “w” and “h” fields in the top toolbar or in the Inspector’s Style tab to set the widget size in pixels. To constrain the widget’s proportions, click the “Maintain aspect ratio” icon between the “w” and “h” fields.
BORDERS, SHADOWS, AND CORNERS
Editable properties of a snapshot widget's formatting include border color and thickness, outer shadows, and widget opacity. These properties can be controlled from both the Style tab of the Inspector and in the Style Toolbar at the top of the interface.
Borders can be added and customized. You can set the thickness, color, and pattern of the widget border.
Outer shadows can be added. Open the outer shadow menu and click the checkbox it. The offset (measured in pixels) can be specified in both the "x" and "y" directions. The blur and color of the shadow are also set here.
Change the corner radius either via the Style tab or right on the canvas, by dragging the triangular handle near the top-left corner of a snapshot widget. In the Style tab, you can also choose which corners are curved and which maintain right angles.
Specify the opacity of a widget in the Style tab. By default, widgets are 100% opaque.
Applying an action in a snapshot widget triggers that action in the snapshot's thumbnail image. It does not affect the referenced page. To apply an action, select a snapshot widget on the canvas and then click the "Applied Actions" control at the bottom of the Properties tab. In the resulting "Snapshot Applied Actions" dialog, you can customize your own actions to fire.
One action you can apply is the "Fire Event" action. This action can be very useful here if you want to present a snapshot or series of snapshots that result from interactions already built in to the referenced page. For example, if you fire the OnClick event of a button widget on the referenced page, you’ll get a snapshot of the referenced page in a state after the button click has occurred. If you fire the OnPageLoad event of the referenced page, you'll see the page state as it initially appears in the browser after any OnPageLoad cases have been evaluated.
To use the "Fire Event" action, click "Fire Event" in the left column of the "Snapshot Applied Actions" dialog. In the right column, click the widget name or click "Page" to get the page events. At the bottom of the right column, click whichever event should fire.
Snapshot widgets have interactions just like other widgets. However, by default, clicking a snapshot will open the referenced page in the HTML output. You can turn off this behavior in the "Interactions" section of the HTML generator. If you add an OnClick interaction to a snapshot widget, that interaction will be performed instead of the link to the referenced page.
Note: Widget opacity is a separate property from border opacity, which can be set in the Line Color picker.