Flashcard interactions - Articulate 360 Tutorial

- [Instructor] Flashcard interactions are a quick and easy way to turn static bullet points into something more dynamic. So unlike traditional bullet points or slides full of static text, when you have flashcards, you can actually create, click, and reveal interactions that require active participation from your learners. So they actually lean forward, touch the screen, and interact with the content, making this experience more engaging and memorable. So let's take a look at how to build this in Storyline. Okay, so we're starting here in story view. Let's just jump into our practice file. So the only thing I did for us to kind of kickstart the project was to add three just basic vector shapes. There aren't any states or anything in here, but I just added the initial card layout for us to kind of get things going. So for this first card, we'll add the easy icon, we'll add the icon for that easy trail. So selecting the shape, we'll come down to states, edit states, and let's just add one of those icons here from content library, so picture, media library. Did I say content library? I meant media library. And resize it down here. Now, if I were going through this, you know, a little slower, I'd want to make sure that the same margin was equal for each of these shapes, each of the flashcards. But as long as this is centered here, I'll be happy. But that's essentially what I would do if I were spending a little bit more time on it. Now I want to create that selected state. That's how we get that flashcard flip effect. So just add a new state, and we'll call it selected. Selected is the built-in state, which means as soon as you click it, it's selected, but then if you click it again, it's not selected. So there it is, now here's the thing. If I were to a little color this real quick, I'd probably want the same color as the icon, but I don't think that's part of my color palette. Yep, that's fine, here's the thing. If I preview this real quick, it's doing what it's supposed to, and 9 times out of 10, this is exactly what we want, which is I have the image on top of the vector shape for the normal state. I click it, and then there's the selected state, and the image or text carries over. 9 times out of 10, that's exactly what you want. This is that 1 out of 10 times. I don't want the icon to carry over because I need some space to put some text. So what we need to do is I'm going to go back into edit the states, select it, and I just need to duplicate this square, this shape. So I can do that a lot of different ways. Control D, control D, I was duplicating the state, not the actual object. So control D, but select the state first. So I just make a copy of it and then just position it right back in there. And you can see my position's the same, zero, zero, and that's all I need to do, and I won't see that shape. So let's add some placeholder text here real quick. Really good shortcut for that is equal sign. Actually zoom in here so you can see it. It's equal sign, and I'm making that text really big, but I just want you to see it. Equal sign, lorem, open parentheses. And I'm just going to type in a one, which means one paragraph, and close parentheses. If I didn't type in the one, it would give me I think three as a default, and then I press return and there's all my text, but I better, you know, make that a little bit smaller. Okay, so that gives me some placeholder text. I would probably, you know, obviously customize it like you saw in the example, but you know, that's good enough for now, and click done. Okay, so here's how we can work now to quickly update these other cards, is I can select this first card, come over to Format Painter and click, and even though it's putting the same color and the same icon, that'll be easy for us to swap those out. So let's just dive into the second one, open it up, and then select the graphic and replace it. So right click, and then we'll say, just replace picture with another one from media library, and that'll be the moderate, the blue one. And look at that, the sizing all keeps in there. Select the selected state, and I just need to, you know, update that color. There we go, and that'll work. And then let's do it for the last one right here. So you know, having that normal state carry over, I can say most times that's what you want if you're using text and you just want to have a hover effect or a color change, but if you're changing the entire visuals that you see in that normal state, then that's where we have to duplicate that shape. Now, some folks will go and work a lot harder by creating images for everything, and that works really well if you want to control every aspect of it. But I think you work a little harder than you have to if all you're doing is something like what we're showing here. You don't have to use a graphics program to create all of those as editing. Let's take a look at this. There's going to be two last things we want to do, but one main thing, and that is the way the selected states work. Notice how they're all selected, and actually you may want them all to be selected and show that, so the learner can kind of see or maybe compare and contrast. But for what I want to do in this example, I would only want one of these to show selected. So we drag a selection around everything. Just make sure you select them, right click, and then choose button set, button set one. So button set basically means, make this behave as though it were a series of radio buttons. Okay, so we try one, and then there it is if I try another one, and notice how it creates that toggle effect where only one is selected. That's kind of what I wanted for this example, but it doesn't mean that's the only way to do it. So you might want to have everything be selected at one time. All right, so we select it, and we'll go ahead and add an animation. Just to finish this off, we have these new emphasis animations. Have it do a little pulse. Let just test it now, so just go ahead and preview one more time here and see how these animations look. Really like the emphasis animations. They're just enough to do something to add a little extra eye candy, but not enough to overwhelm learners. But there you go, that's how you can create a flashcard interaction to really replace a series of bullet points on your slide and create more of a touch the screen type or explore type activity for your learners.