SNAPSHOT WIDGETS

REFERENCE

LEARNING AND

RESOURCES

Intro to Axure RP

Viewing and Sharing HTML

     Output

Organizing Widgets

Interactions

WIDGETS

Shape

Image

Line

Hot Spot

Dynamic Panel

Inline Frame

Repeater

Text Field and Text Area

Droplist

List Box

Checkbox

Radio Button

HTML Button

Tree

Table

Menu

Snapshot

Groups

Connectors

Vector Drawing

LIBRARIES

Widget Libraries

PAGES

Pages

Grids, Guides, and

     Snapping

MASTERS

Masters

Raised Events

STYLES

Page and Widget Styles

DOCUMENTATION

Flow Diagramming

Widget and Page Notes

Word Specification

Print Settings

GENERATED HTML

HTML Generator

Sidebar

AXURE SHARE

Basics

Security

Mobile App

Mobile Settings

Website Hosting Tutorial

Slack App

Hipchat Integration

Troubleshooting

     Connection Issues

AXURE SHARE ENTERPRISE

User Guide

Installation Guide

Accounts and Permissions

TEAM PROJECTS

Creating and Using

SVN Troubleshooting

ADVANCED INTERACTIONS

Variables

Conditional Logic

Math, Functions, and

     Expressions

Adaptive Views

INSTALLATION

TROUBLESHOOTING

GUIDES

Mac

Windows

MORE RESOURCES

© 2002-2017 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

RECOMMENDED USAGE

DYNAMIC DOCUMENTATION

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.

EDITING

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.

OFFSET

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.

SCALE

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. Note: widget opacity is a separate property from border opacity, which can be set in the Line Color picker.

INTERACTIONS

APPLIED ACTIONS

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.

LINKS

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.