Blog Post

Articles
3 MIN READ

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

CommunityTeam's avatar
10 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 10 years ago
Version 1.0
  • PaulJohns's avatar
    PaulJohns
    Community Member
    Hi. Yes i'm trying to do something similar and looked at this example above. When i try it i can see a slight flash from the first question to the second.

    In my file i had about 6 states for an avatar but the second you move onto another slide theres a 'slight' flash as it defaults to the 'normal' state. I then hid the normal state and had all the triggers saying 'if avatar=2 then change state to 2' etc but there was still the flash.

    I dont get why the first avatar (normal state) would flash briefly before it shows avatar 2 as the initial state is 'hidden'.

    Has anyone got the file above working properly ?
    • CherylKent's avatar
      CherylKent
      Community Member
      Hello Paul,
      I seem to remember that I had a similar problem. Have you tried publishing your project and running the published course? I don't think the flicker occurs in the published course but does in the test environment for the course.
  • PaulJohns's avatar
    PaulJohns
    Community Member
    Hi, thanks for the reply. Yes i tested that and it still happens in the published version.

    In the example above they did have a fade on the avatar (perhaps to stop this issue) but it looks strange fading on every slide. So i took off the fade but see that slight 'flash'.

    The crazy thing is i've set it to initial state: hidden but even then i see the guy first for a split second and then the lady which doesnt make sense. (As its hidden and the code then has 'if avatar=1 then change state to man', 'if avatar=2 then change state to woman' but i still see a flicker of the man first before the woman picture.

    Arrrghhh ;)

    Thought it would be easy doing the avatar ! Even when i put the code in a master slide i still have the same issues
  • 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?
  • 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?