Blog Post

Articles
3 MIN READ

Allow Learners to Choose an Avatar Using One Variable With Storyline 360

CommunityTeam's avatar
11 years ago

In this article about Gamification techniques, we talk about using an avatar or character that follows you through an entire e-learning course. Why do this? Two reasons:

  1. It’s a good idea to choose characters that are relevant and that people “connect” with.
  2. Learners like to have control!

In this example, notice how you get to choose between a female or male character at the start of the scenario and then that character appears throughout the course.

View the demo | Download file

In this article, we’ll take a look at how to get this effect in Storyline 360 using a single variable, along with the appropriate triggers and states.

Add Characters and Button Sets

The first step is to create the slide where the learners will choose their character. Go ahead and pop a few illustrated characters onto that slide, along with a Continue button.

Now, because you’ll want the character you selected to show up later in the course, copy one of the characters you just inserted onto a few of your content slides.

For each character, create a new, custom state that displays the other avatar. The idea is to toggle between the male or female state depending on which avatar the learner selects on the first slide.

Next, back on the slide where learners choose their character, select both of your characters to create a button set. 

Putting items in a button set means only one of them can be selected at any given time. Learn more about button sets in this tutorial: Working with Button Sets.

Add Variables and Triggers

Now you need to add a variable that will control which avatar is visible throughout the course. To do that, create a new number variable with a default value of 0.

If you’ve never worked with variables before, don’t be intimated! It’s super easy once you get the hang of it. Here's a tutorial that’ll walk you through the basics: Working with Variables.

The next step is to add triggers to the Select button. The first trigger adjusts the number variable and makes it equal to 1 if the male avatar is selected when the Select button is clicked.

To save yourself time, copy and paste the first trigger. Then you can simply update the value to 2 and the selected character to the female avatar. 

Now when the Select button is clicked, the variable will adjust to 1 or 2 depending on which avatar is selected.

The last thing you need to do is add triggers on the content slides that display the appropriate avatar. Add a slide trigger that will show the male state on the character if the variable is equal to 1.

Then add a second trigger that will show the female state on the character if the variable is equal to 2.

And there you have it—a quick and easy way to easily use a single variable, states, and triggers to control a learner’s avatar in a Storyline course.

Want to try something you learned here, but don’t have Storyline 360? Start a free 30-day trial of Articulate 360, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments.

Published 11 years ago
Version 1.0

68 Comments

  • CherylKent's avatar
    CherylKent
    Community Member
    Sorry Paul I don't think that I can help you further. I've just checked the project file and I'm doing the same as you - set image to hidden, change to normal (Jaz) or Tom or Sara (I'm using 3 avatars) depending on the variable. It does flicker if I test within storyline but our html5 version currently on the web doesn't seem to have the flicker https://www.keele.ac.uk/hltutorials/informationskills/checkyourskills/story_html5.html

    Just checked the flash version and that does flicker!!!

    Can anyone else help?
  • Hi Paul,

    Something you might consider doing to remove the flash is to remove the character altogether from the "Normal" state (so that it's completely blank and empty, the normal state) and simply add a new custom state for each of the characters. If the Normal state has nothing on it, the flicker should stop happening. The reason the flicker happens is because it takes a second for Storyline to "read" the trigger and, for example, set the character to the Hidden state.
  • PaulJohns's avatar
    PaulJohns
    Community Member
    Thanks Nicole, great suggestion. I did have it showing 'hidden' at first before it shows man or woman and it still flashed.

    But like you say Storyline must first of all show the normal state for a split millisecond before it runs the triggers so i'll try that instead. Sounds like that should be better.

    Thanks
    • NicoleLegault1's avatar
      NicoleLegault1
      Staff
      You're welcome - it's a problem I've also run into and thats the solution that worked out for me! :)
  • Hey
    I haven't tried to see if I can follow this video yet but, if it is meant to show those who can't already do it, perhaps you could consider slowing down just a little - particularly when showing how to DO what the voiceover is INSTRUCTING. Just a thought.
  • TomOscar's avatar
    TomOscar
    Community Member
    Had a go and created slider and states and it works very well.

    Shame we can do it a slider for each area. Such as slider for hair style, Slider for outfit etc.
  • I am having trouble getting this to work. I've attempted to follow these steps but it appears to me that some are missing. Can I get a more detail instruction on how to go about setting up avatars? Thank you.
      • PamelaWakefield's avatar
        PamelaWakefield
        Community Member
        Yes, That was the article I was trying to follow but it breezes over some critical details I need as a novice designer. Mainly, how to have both characters available for each slide depending on which one is selected. He says, "For each character, create a new, custom state that displays the other avatar. The idea is to toggle between the male or female state depending on which avatar the learner selects on the first slide." I can't create a new, custom state like it says.
  • Yes, That was the article I was trying to follow but it breezes over some critical details I need as a novice designer. Mainly, how to have both characters available for each slide depending on which one is selected. He says, "For each character, create a new, custom state that displays the other avatar. The idea is to toggle between the male or female state depending on which avatar the learner selects on the first slide." I can't create a new, custom state like it says.
  • KatrinaBegley's avatar
    KatrinaBegley
    Community Member
    This article was extremely helpful, thank you! Has anyone figured out how to use audio that switches between a male and female voice depending upon which avatar is selected?