From the course: Articulate Storyline 360: Advanced Elearning

Working with Content Library characters - Storyline Tutorial

From the course: Articulate Storyline 360: Advanced Elearning

Start my 1-month free trial

Working with Content Library characters

- [Instructor] One way you can ditch the one size fits all course design model is by giving learners more control and options to personalize their learning experience and letting learners choose their own characters to represent them is a fantastic start. Okay. So I'm starting here in story view, and I just have this simple slide started. I'm going to double click it to open. It just has a background. And what we're going to do is let learners help solve one of the great debates, any learning and that is what type of character? Is it a photographic character, modern illustrated or classic is the best style? So I'm going to choose a couple of characters here. This is the classic illustrated character. You might remember that if you've been around storyline for a little while, and then we'll also bring in a modern illustrated, which are the newer style. And then we'll of course bring in a photographic character just to even it out. So we have the three types represented. I'm going to come down here real quick and just say photographic name these in the timeline. Not that we can't tell the difference by looking at them, but I think it's always better just to name them in the timeline if we can. Okay. So there they are. I'm going to apply just some basic formatting here, just so when we click each one, the selected one stands out a little bit better. So with Maryland here, I'm going to jump down here. Actually no, I'm not going to do that before I do anything. I'm actually going to change her to a gray scale. So from the format tab, I'm going to open up my picture effects. You can click the little format shape button down there, and I'm going to choose for picture to set her as gray scale and by doing that, when I edit her states, I'm just coming in here, choose edit. I'm going to create a selected state because what we want to do is sort of deemphasize the characters. And then upon selecting each one, we want them to be in full color and full paucity rather than kind of dimmed out. So that'll highlight it and emphasize the selected character just a little bit better. So selected is a built in state and for selected, we'll just say recolor and bring her back to normal color. Great. I don't want to do that manually for the remaining two characters. So what I'll do is just go to the home tab, choose format painter, click the next character, choose format painter and choose Valerie. So now they are all gray scale sort of deemphasize and then when we click them or select them, there'll be in color. One thing we could also do is just have a little bit more fun with them. I like when users do this, where they take the character and actually change the pose. So from the design tab, we'll just change her pose to make it just a little bit more animated. We'll do the same thing for each of the other two characters. One little trick I like to do is to quickly drill down into a specific state. I can just double click that here in the states panel. I don't have to choose edit states each time. It can save time, especially if you have a lot of states in you're way out off to the side and for hers let's just change her pose something different maybe the hands out. And then we'll do Valerie here and give her something else. A double clicker state. Now with the photographic characters, I don't know if you know this, but one thing that'll happen is they tend to have a different registration point. So when I insert this next pose, notice how the character, when I click insert, you'll see that she actually moves over. And that's because this registration point in the top left remains consistent. So what I'm going to do is move her over until I see that center align guide. Let's see how that looks. I'm going to double click now went too far over didn't I? So I'm going to come back right there and make sure it's even so now it looks a little bit more natural when she does her change the illustrated characters don't because they're illustrated and drawn a certain way, but photographic characters, they always have that registration point in the top left. Okay, this is good. Just a little bit of formatting. If I preview this slide, you'll see that there's still one last step we need to do to kind of complete our initial formatting. And that is, we only want one of these characters to be selected at a time, but as I click each one, they're now showing their selected state and it has no effect on the others. So for that, we need a button set. So what a button set does is it allows only one object to be in that selected state. One of the benefits of using the built in states is that they have these built in super powers and selected state is one of them. So what I'm going to do is just, multi-select all three characters by holding down the shift key with them all selected. I just need a right click anywhere on one of the out bounding boxes of them, or actually with this characters, I can click anywhere, just make sure all are still selected, right click, and then just choose buttons set and button set one. Now by adding these to a button set, it means that they are all going to work together now and listen for whichever character is in the selected state. That's aligned to the bottom real quick too, and then align horizontally right. Now watch what happens. They look the same here. There's no indication that these are part of a button set, but when I preview the slide Valerie selected. Now watch what happens with the other ones. Now the classic is highlighted and then Maryland's highlighted the nice little effect, right? Just to really reinforce the character that the learner has selected. Okay, cool. So we've set up our characters. We added the selected states, did a little bit of formatting and pose changing for the states as well as some visual formatting and added that button set to create the toggle effect for the selected character.

Contents