Adding Page Navigation

Creating navigation within iRise is a simple yet powerful way to give your audience a solid understanding of the flow from page to page within a simulation. In this tutorial, you will create several different types of navigation, including internal page navigation and external navigation to a website. You will also have the option of linking to an embedded file or using the Window Controls option to print a page.

Watch a Video

Watch this video for a brief demonstration of the topics covered in this tutorial.

How navigation works in iRise

Navigation is represented by blue lines in the simulation and can be added to almost any widget on a page. Navigation is defined by a source, trigger, and destination.

Navigation

The source widget is typically a widget on a page from which the navigation in invoked. This is the widget the reviewer interacts with in the simulation.

An event trigger is the user interaction that initiates the navigation. While most interactions typically occur when a widget on a page is clicked with the mouse, you can create interactions for many other triggers, the most common of which are On change, On right-click, On mouse over and On blur (focus loss).

Link typesThe destination is the end result of the navigation, whether it is actual navigation to another page in your simulation or a page action it invokes. The most common destination is a Link widget, which can be configured to launch other pages in your simulation, external websites, embedded files, email messages, and window controls such as close and refresh.

Create simple page navigation

Let’s start out by creating three pages in a new project in iRise Studio: a Welcome Page, a Registration Page and a Registration Confirmation page. Open the Welcome Page and add a line of text that says ”If you are a new customer, register.”

Drag the Registration Page from the Directory to the Welcome Page’s canvas. This will create a new Link widget that leads to the Registration Page. To invoke the navigation, we want the reviewer to click the word “register” on the Welcome Page. Double-click the Text widget to make it editable, highlight the word, and then drag and release it on the Registration Page Link widget on the canvas. A blue navigation line will appear connecting the source (the new hyperlink) to the destination (the Link widget).

Selecting text to create a link

Creating the navigation

Move to submenuYou might notice that the trigger for the navigation defaults to On click, which is fine for our simulation. For different types of interactions, you can right-click the blue line to access the ‘Move to’ submenu, which enables you to change the event trigger.

Navigate to a pop-up window

Now let’s move over to the Registration Page. Create a registration form that looks something like the image below. Note that the terms and conditions is an imported image. Find a similar example online, because it will help us cover a key concept later in this tutorial.

Registration form

Right-click the Connect button next to Facebook and choose Add Event > Link in the context menu.

In the Set Destination dialog box, choose Link to Website on the left. On the right, enter the URL http://www.facebook.com. Then you can choose to have the window open in a pop-up window, and configure your pop-up window settings by clicking the ‘pop-up window’ link.

Configuring a link to a pop-up window

Click OK, and then Done, and you will find that a new Link widget will have been created on your canvas with the blue navigation line already connecting it to the source widget (the Connect button).

Tip

You can postpone the launch of a Link by setting a delay.

Navigate from an invisible “hotspot”

You can layer interactivity over an image in iRise, whether imported as an Image widget or a background image, by adding an invisible hotspot on top of it, and then linking that to page navigation. In this case, we want to give our reviewer the ability to print out the terms and conditions by linking to an external PDF file.

Invisible hotspots are created in iRise by using Section widgets. In our case, we drew a small Section on top of the word “print” in the image, and then connected that to a Link widget that we configured to launch a PDF file.

Section as invisible hotspot

You could also link to another page in your simulation that contains the terms and conditions, and then connect a Print button on that page to a Link widget configured to use the Print option under Window Controls.

Print option under Window Controls

Navigate through a page action

Finally, we’ll create navigation from the Submit button to the Registration Confirmation page. Generally, whenever you are submitting data and navigating at the same time, you will navigate from the source widget through a Submit Form action and then onto your destination. Capturing data will be covered in a later tutorial. For now, let’s just set up the navigation.

First, navigate from the Submit button to a Submit Form action by right-clicking the Submit button and choosing Add Event > Action, and then choosing Submit/Reset Form in the Set Page Action dialog box. Then drag the Registration Confirmation page from your Directory to the canvas to create a new Link widget. Finally, create navigation from the Submit Form action to the Registration Confirmation page by dragging the Action widget onto the Link widget.

Navigating through a Submit form action

Test your simulation

Test your simulation by launching the Welcome Page in the Reader. Clicking the “register” link should open the Registration Page in the same browser window. On the Registration Page, clicking the active Connect button will open Facebook in a pop-up window, and clicking your invisible hotspot will either launch an external file or navigate to a Terms and Conditions page, depending on how you set it up. If you chose the latter, you should have a Print button on your destination page that invokes your browser’s Print command.

Finally, clicking the Submit button on the Registration Page should open the Registration Confirmation page.