Can I Use a Slider to Page Through a Document?

When we teach sliders in our hands-on Storyline 360 training, we can see learners thinking of possible use cases, like “can I use a slider to page through a document?” Maybe you have a policy document that must be read, or a clinical reprint that needs to be reviewed. These are great use cases for using a slider to page through the existing documentation! Let’s explore this “as heard in training” question today.

The Document

First, we need to ensure the document is in an image format for use in Storyline 360. One way to obtain image files of a document is to take the PDF version and convert it with the aid of a handy conversion tool. The web has a plethora of options! The one I prefer is pdf2jpg.net, as it allows you to control image quality. In the site, select Choose a PDF file, bring in the .pdf version of your document, and then select Convert PDF to JPG.

Once you have the necessary images, we’re ready to move into Storyline 360!

The Slider

From the Insert tab, insert a slider in Storyline 360 to act as the learner’s means of navigating the document. (As shown in our example, you may want to rotate your slider 90 degrees to the right (to make it vertical) and move it over to the side (to allow more space for the document image).

Use the slider’s Format settings to tweak the visual design. (If you want to take more time here, be sure to check out our blog post on making sliders engaging!)

Now, modify the slider’s Design fields to “fit” your document. The slider End value should equal the total number of document pages you’ll display. For this build, simply type that total number into the End field. (Leaving the Start as “0” provides us a “home position.”)

Tip: To help make development a breeze, remember to name the slider in the Timeline panel and name the slider variable in the variable manager (the blue “x” icon on the Triggers pane).

The Layers

Next, we’ll create a layer for each page in the document. Use the New Layer button (the blank page icon) on the Layers panel to create a single layer.

Tip: Double-click or right-click to rename layers so you can identify which layer is which!

In each layer, use the Insert tab to insert the image for a page of the document. (Add any additional elements to specific pages that you like, from narration to animation!)

Now, to activate the layers, we’ll create a trigger for each on the Base Layer. The concept of these triggers is to show a layer when the slider is equal to a corresponding numeric position. Think: “show ‘Page 1’ when the slider’s equal to 1.”

Final Touches

Finally, for pretty much any slider interaction, we complete the build with two triggers on the Base Layer to (A) clear the content when the slider moves back to the home position, and (B) reset the slider to the home position if a learner leaves and revisits the slide.

A: To allow the learner to close the document and return to the base slide when the slider moves back to the home position, create this trigger: Hide layer [the layer equal to the “1” position] When the slider moves [name of slider] If its value = value 0.

B: To reset the slider any time the slide opens, build this trigger: Adjust variable, Set [name of slider variable] to value 0 When the timeline starts on this slide.

Tip: Set your Slide Properties to “Reset to initial state” so the interaction always begins anew.

We’re done! Preview your course to make sure that each page shows correctly, you can slide back to home position to clear the content, and the slider resets when you revisit the slide.

How do you use existing documents in your e-Learning? Let’s collaborate, whether one-on-one or in the comments below! Stop by our blog post that includes creating motion with sliders if you’re curious about the document in our example. Also, feel free to copy our homework on this blog exercise and download this build.

~ John B.