This week’s Articulate ELH Challenge is to show ways learners can select avatars to personalize a course, plus show how an avatar is carried over from a selection screen to a content screen.

The Idea

I wanted to do something quick and easy by only using readily-available assets in Storyline 360. That led to playing with Storyline’s built-in characters (and an eggplant with character), then adding some customer service super powers for a bit more interest.

The Design

Visual Design

After playing with different characters and background images, I eventually arrived at a combo that gave me a color scheme I liked (purple, green, and orange), which I then used to create the rest of the screen elements. Oh – and the idea of mixing up character styles and species seemed way more interesting than pulling from one style.

Avatar Selection Design

First, I placed the avatars in the visual context they’ll be seen in for the rest of the course. Being able to see their environment (a restaurant), and knowing the topic (customer service) helps inform the learner’s selection.

Then I used Storyline’s button set feature to make my avatars act like buttons. To create a button set, highlight the images you want to make into buttons, then right click and choose Button Set. When the learner clicks on an avatar after it’s been buttonized, it’ll automatically display a selected state, and only one can be selected at a time.

To give the learner a chance to play with their selections I added a Done button that lets them move forward when they’re ready. If they select Done before making a selection, a prompt pops up (built on a layer) as a reminder.

Avatar Carry-Over Design

To carry the avatar selection to the next screen I:

1. Created a true/false variable for each avatar. The initial value is false.
2. Added a trigger to the selection screen’s Done button to adjust the avatar’s variable to true if the state of the avatar is selected.
3. Created one image with a state for each avatar on the following screen. A trigger on this image changes its state to display the image of whichever avatar’s variable is true.

I designed the super power selection and carry-over in the same way.

Ready to Personalize Your Avatar and Super Power?

You can check it out right here.