Generate Interactive Prototypes
Learn to customize, generate, and share interactive prototypes.
Contents
Interactive Prototypes Overview
Configure and Generate the Prototype
Using the Prototype
Share and Distribute the Prototype
Send a Compressed Zip File
Publish to a Shared Server or Web Server
Generate and Send a CHM File
Video
Interactive Prototypes Video (2:04 min)
Interactive Prototypes Overview
Prototypes are an effective way to simplify documentation, get user feedback, identify missing requirements, and minimize extraneous requirements. After you design, annotate, and add interactions to your wireframes in Axure RP, you can turn them into an interactive, browser-based prototype without any coding.
Axure RP prototypes are made up of HTML, JavaScript, and image files, which can be viewed in popular web browsers like Firefox or Internet Explorer. You do not need to install Axure RP or a player to view the prototype.
The generated code is not generally meant for production use. However, there is an API available that gives you programmatic access to the data in Axure RP files if you'd like to create a custom generator. Learn more about the API.
Configure and Generate the Prototype
To configure and generate the prototype, select Generate->Prototype (F5) in the main menu or click the Prototype button in the editor toolbar.
This opens the Configure HTML Prototype dialog with the default configuration. The options are divided into the following sections:
General: Choose the Destination Folder for the generated prototype. The prototype has many files so it is best to choose a folder just for the prototype. By default, prototypes are generated to the My Axure RP Prototypes folder in your My Documents (in the Mac version, the default folder is ~/Documents/Axure/Prototypes).
Tip: To reset the Destination Folder to the default folder, delete the specified path and close the dialog. The next time the dialog is opened, the default folder will be specified.
Notes: Select and order the page notes to display in the prototype.
Annotations: Select and order the annotation fields to display in the prototype.
Interactions: Specify behaviors for interactions (i.e. whether case descriptions should always show or only when multiple cases exist).
Distribution: Option to generate a .chm file in addition to the prototype.
Advanced: Option to render text panels as images and to choose the units for font sizes.
When you're done configuring the prototype, click “Generate”. This generates all the prototype files to the destination folder and opens the prototype in your default web browser.
Tip: After generating the prototype the first time, if you make edits to a single page and do not want to regenerate the entire prototype, select Generate->Regenerate Current Page to Prototype (Ctrl+F5) from the main menu and refresh the page in the browser.
Using the Prototype
The prototype is divided into three frames:
Sitemap Frame (Left): Navigate the pages in your design. Click the page links to open in the main frame. To view the prototype without frames, click “Close Frames”.
Page Notes Frame (Bottom): View the page notes you added to the wireframe pages.
Main Frame (Center): Interact with the wireframe and diagrams. The interactions in the wireframe behave as you’ve defined them in the Interactions pane in Axure RP.
Widgets with annotations have a yellow note icon next to them. Click the note icons to view the annotations.
Tip: If you're using Internet Explorer, you may see a pop-up warning about allowing ActiveX content to display. To disable this warning, go to Tools->Internet Options in the main menu. In the Advanced tab, scroll down to the Security section and check the box next to “Allow active content to run files on My Computer”.
Share and Distribute the Prototype
There are several ways to share or distribute the prototype without requiring your audience to install Axure RP or a reader.
Send a Compressed Zip File
To create a zip file of the prototype, right click the folder that contains the prototype files (usually in the My Axure RP Prototypes folder in My Documents), and select Send To->Compressed (zipped) Folder. This creates a zip file of your prototype that you can email to the viewer.
Once the viewer receives the file, they can unzip the file and extract the prototype folder to their computer. To do this, open the zip file and select "Extract All Files," or drag and drop the prototype folder from the opened zip file onto the desktop.
To view the prototype, open the file “[Filename]_Start.html”. This launches the prototype in the web browser. Please note, you cannot open the prototype directly from the zip file; you must extract the files first.
Publish to a Shared Server or Web Server
To publish the prototype to a shared or web server, either generate the prototype locally first and move the files to the server afterward, or (with the appropriate access) generate directly to the server. To transfer the files to a server, use an FTP program like Flash FXP to upload the prototype folder. If you don’t know whether or not your organization has a server set up, your IT folks may be able to help.
After uploading all the files, you can send the recipient the location or link to the prototype. This allows anyone (as long as they have permissions) to browse to the prototype in their browser.
Generate and Send a CHM File
*CHM is the format for Microsoft's HTML Help file. Most Windows machines have the player installed. Like zip files, this option enables you to distribute a single file and typically does not require the recipient to install any software to view it. It’s a little easier on the recipient since they do not need to unzip and extract the files.
To generate a .chm file for the prototype, go to the “Distribute” section of the Configure HTML Prototype dialiog (F5), and select the option to generate the CHM file. This creates a .chm file in the prototype folder when you generate the HTML prototype.
If you don’t have the HTML Help Workshop from Microsoft installed already, you will need it to generate CHM files. It is available as a free download here (click the Download button for “htmlhelp.exe”). Once installed, there is an hhc.exe file in the folder you installed it to. Click "Locate hhc.exe" in the “Distribute” section of the Configure HTML Prototype dialog to tell Axure RP the location of the program on your computer.
*CHM generation for prototypes is not available in the Mac version.
Summary
You did it! You can now bring your wireframes to life in an interactive prototype and share them with others. If you have any questions, let us know by sending an email to support@axure.com.
