A few weeks back, I shared an article and download that showed how to use a number variable to control an avatar in Articulate Storyline 2. In response, I got a great question from a community member: Could they achieve the same functionality with a slider?

The answer is yes! That’s what I’m going to show you today in this article. First, let’s have a look at what the end product will look like:

View Demo | Download

See that as you drag the slider, the various characters become selected one at a time. Let me give you a quick overview of how to accomplish this:

Step 1: Place your characters on the slide. My example uses four illustrated characters cropped at the torso. (Tutorial: Adding Characters.)

Step 2: Create a selected state for each character. My example uses a light gray glow effect. (Tutorial: Adding and Editing States.)

Step 3: Select all of your characters and create a button set for them. This needs to be done to ensure only one character can be selected at a time. (Tutorial: Adding Button Sets.)

Step 4: Insert your slider and adjust the properties. In my example, the slider has four stops, so I put a 1 in Start and I put a 4 in End. The initial slider position is 1 and the slider increases by one as it’s dragged.

It’s important to understand that a number variable is auto-created when a slider is added. This variable adjusts automatically as the slider moves. For example, when the slider is at stop 1, the variable is equal to 1; when the slider is at stop 2, the variable is equal to 2; and so on. (Tutorial: Adding Sliders.)

Step 5: Your next step is to add triggers. Insert a slide trigger that will “Change the state of Character1 to Visited when the slider variable is equal to 1.” Copy and paste this trigger three times and update the character and variable value each time. (Tutorial: Adding Triggers.)

Step 6: At this point the slider is working, but you’re also able to click directly on the characters to select each one. This is because they are in the button set; however, I only want the slider to be used to select a character. An easy way to disable learners from clicking directly on the illustrated characters is to place a hotspot over them, with the “Display hand cursor on hover” option disabled. (Tutorial: Adding Hotspots.)

And there you have it: a fully functional slider that lets you select a character for your course.

In my example, my slide has four additional layers: one for each character. The Submit button below the slider has a trigger with four conditions attached to it. Depending on the value of the variable, the appropriate character layer is displayed.

Another option is to use the idea from my previous avatar article and create a character with multiple states (one for each character). You can then trigger the appropriate state to display according to the value of the slider variable.

Have any other ideas for how to accomplish this? Please share them in a comment below! And don’t forget to follow us on Twitter for all the latest e-learning news.

Want to try something you learned here, but don’t have Articulate software? Download a free 30-day trial, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning.

8 Comments
Nicole Legault