Speaker 1: Hey everyone, today we're going to learn how to take video inside of Articulate Storyline and add some interactive components and questions and jumping to different parts of the video. So I'm going to show you all the different various ways that you can make your video more interactive. So let's go ahead and get started. All right, welcome back and welcome to my new studio. My name is Jeff Batt with Learning Dojo and if you haven't checked out my website already, go ahead and check out my website. Everything you need to know for learning developments, if you go to the blog section here, you can see all previous blog posts, everything about Articulate Storyline, tips and tricks, everything about e-learning production, how to get custom animations as well, how to work with JavaScript and Storyline and different production tips and tricks. So a lot of different previous blog posts that you can check out there. You can also check out templates under the template section. You can download templates for Articulate Storyline 360, all free templates. You can also download templates for XAPI and video. And then if you're new to any of these tools, you can go and find full courses, everything from A to Z on Articulate Storyline 360, Adobe Captivate, XAPI Fundamentals, Camtasia, Articulate Rise, Custom Scorum and HTML5 Video. Now in previous blog posts, I've shown you some tips and tricks for how to take a video and make it interactive, but that was using other tools or custom templates in order to do that. Today, I wanted to explore how to actually make a video interactive right inside of Articulate Storyline. So without using any other tools, how to bring that in and how to make it interactive. Now, one thing, if you're going to embed video inside of Articulate Storyline, one thing you want to keep in mind is you want to make that video as compressed and as small as possible. So I use a free tool called Handbrake. So if you go and find this handbrake.fr, you can download this and you can convert it and make your video files really small. This will help when you bring it into Storyline to not have your course be really large and slow when the user tries to view it, which is key here. So download that. And I do have a previous video that you can watch on how to use that if you're not familiar with it at all. All right. So I'm going to go ahead and close that and we're going to go into Articulate Storyline. Now I have a video. Let me come back into here. I have a video already to go. Now this is a video from a previous course that I have from my XAPI course. And so I'm just going to use that as an example. You can use any video, any MP4, any video file that you have to follow along here. So it doesn't have to be this exact video. So I'm going to go ahead and inside of this blank page, I'm going to insert some media. So I'm in the insert tab and I'm going to go ahead to the video section here. I'm going to find that video, which is on my desktop here and click open. Now you can see the video files, the types of formats that are allowed here. So you can import these types of video files here and click on open. Now, because I already adjusted my stage size to be 16 by 9, which is a video format, a little bit longer format. It automatically fits really well when I bring it inside of here. If you don't know how to do that, you go into the design tab and click on story size, and then you can adjust it to a 16 by 9. And I always up it to at least a thousand and then click. Okay. So we have our video in place. It automatically stretched out the timeline. So you can see here, this is about a three minute video and to automatically stretch that out. So I want to do a couple of different interactive elements here. I want to have at certain points of the video, a little pop-up to happen. And then also depending on the choices of that pop-up, I want to jump them forward in the video, or I want to jump them back in the video to make it more interactive. And then at certain points of the video, I want to create a hotspot. So just think of the different ways that you can add different interactions. You can even add markers or anything like that to make it more interactive. So I'm going to go ahead and add a few cue points inside of my timeline here, where I want these points to happen, or these, these things to happen at certain points of my video. So let's go ahead just so we don't have to wait very long. Let's go ahead and add a cue point at five seconds. Now you don't have to use a cue point. You can actually trigger something to happen right at five seconds, but there is a benefit to using a cue point that I'm going to talk about. I'm going to go ahead and right click and go to add cue point. Or if I just move my, my little yellow line scrubber, my blue line scrubber here, I can just hit the letter C and that would add a cue point as well. So I'm going to add another cue point at about 10 seconds. And so we have these two cue points and the first cue point is where something is going to pop up. The second cue point is where I'm going to jump the learner to if they get it correct, or I can jump them back to the beginning if they get it incorrect as well. So start to add those cue points of where you want to jump the user forward or backwards, or if you are, are important parts, you can also create like a menu or something like that. There's a lot of different possibilities here. So what we're going to do next is we're now going to add a trigger. As soon as they get to this first cue point, we're going to add a trigger that will pause the video and then it will show this layer. Now storyline compared to other tools is really useful when it comes to layers. So I'm going to go ahead and add a layer down at the bottom right hand side here, and this will be my first question. So I'm going to go ahead and say On this layer, there's a few things in the settings that I want to do in order to get this to react and look how I want it to look. So you can go into the properties when you're on a layer, you can see everything on the base layer kind of grays out. However, when the learner sees it and they go to this layer, it doesn't actually gray out. So there, let's go ahead and talk about a couple of things here. So I'm going to go into the gear icon. And the first thing I want to do is come down to the behavior here and it's going to present this. I have two options. I have it presented as a layer or present it as dialogue. Now, if I present it as dialogue, you'll notice that it actually grays out completely. It adds like a little fader in the background, which is, this is a new feature. This is a feature that I, or something I did manually where I had to add like a square and fade it out. But this happens automatically now, which is really nice. You can add labels, but there are no labels here. You can add a description, but there are no descriptions on the layer so far. So I'm just going to leave it as is for now. But the other key part right here is to pause the timeline on the base layer. We want the video, as soon as this shows, we want the video to pause because now we're going to have the learner interact with this layer, this dialogue basically. So I'm going to go ahead and click on close here and let's style this a little bit. So I'm going to click on insert, go into my shapes, and I'm going to do this rounded rectangle here. So selecting the rounded rectangle, let's just drag out the area. Now I like to make sure that this is centered. So I'm going to go into the format tab, click on the center horizontally, and then center vertically as well. And then I like to remove the outline. So I'm going to go down to no outline, just stylistically. I don't like the outline. You'll hear that a lot in my course, so I apologize. But I'm also going to go into the shape fill and add a white shape fill there. And then just to make it pop a little bit from the background, I'm just going to add a shadow. So this shadow is going to go all around and it's not incredibly visible, but I like the how it just defines it a little bit differently than that bottom layer basically, or that bottom shadow. From here, what I'm going to do is insert some text. Let's not do the caption. Let's do a text box. I'll drag out the width here. Oops, it accidentally selected the other thing. So let's go ahead and re-center that. And I'm going to go back into inserts and let's do text box and drag out that area here. Let's call this one question one. And then I'm going to add some lorem ipsum text. If you're not already familiar with this, if you add an equals and then lorem, open close parentheses and hit enter, it's going to automatically insert some samples, some placeholder text basically. So I'm going to get rid of the last two paragraphs. We don't need it that long. And in fact, I might get rid of just, you know, some of this other part here, just add a period there, or actually a question mark, because this is a question. Now I want this question one label to pop out a little bit more. So I just selected that and I'll click on the pop out here and then I'll click on increase. So that increases that a little bit more. So this is going to be a question. We need to have a couple different choices here. So I'm going to click on insert here and let's just make our choices shapes here. So let's drag out the area for choice one and you can just type in choice one there. And I'm going to stylize this just slightly different by getting rid of the outline here. And let's make the color just be, let's do a little bit darker there. There we go. So once I have my choice one, I can go ahead and just copy and paste it and then change this to choice two. So there we go. We have choice one choice two. I also like to make sure that this is labeled. So I'm going to say choice one here on the timeline and then choice two. Now you can style this however you want it to look like. I do cover a lot of how to style different things inside of my course. And so if you check that out, you'll learn a lot more about stylizing here. But for now, what I want to do is if they choose choice one, I want to basically just go on with the quiz or if they choose choice two, I want to jump them to a different part in the video here. So there's a couple things that I need to do. So I'm going to add a trigger here and we're going to jump them to that cue point on the main timeline. Sometimes it helps to actually just kind of talk through exactly what you're wanting to do because that is typically in code. That's something called pseudocode where you write it out in human language of what you want exactly to happen because that helps you translate when you're starting to add these triggers, that helps you translate into, okay, first of all, we need to have a trigger, we need to have a layer, we need to have a variable, other things like that. So it kind of helps to talk it out through first and then to add it inside of storyline. So the first step I want to do is I want to go ahead and jump to a cue point or a time. And again, I'll talk to you about why I'm using cue points rather than time here in a second. But we're going to go to right here. I'm going to change this to cue point instead of time. You'll notice that I have a little bit of an issue. If I select this dropdown box, there's no cue point because it's looking for a cue point in this layer, which we don't have. So what we need to do is flip this out. Instead of on this layer, we need to flip this over to the video. This slide is named video. So we need to flip that over to video. Now what we can do is select the dropdown box and select the cue point. So cue point two or cue point one. I only have two really created, so I'm going to jump to cue point two. Now here is the benefit about jumping to cue point two. If I go ahead and click okay here and I go back to video one or the video base layer here, if I move the cue point, I don't have to go back into that layer and adjust the time. If I was jumping to a certain time in the video, then I would have to go in and adjust that trigger to now go to the new time or anything. So that's why it's a little bit better to use cue points rather than using the time. We forgot to actually show that layer at that first cue point here. So we do need to add on the base layer, add a trigger to show that layer. So let's go ahead and add a trigger. Now we're going to select the dropdown box to be show layer, and then it's going to be question one. But we're going to do this not when the user clicks on anything, but we're going to do this when the timeline reaches a certain point. Well, what is it going to reach? Instead of it doing a time, which you could do, we're going to do it on cue point one. As soon as it reaches cue point one, it's going to go ahead and show that layer. Now I can move cue point one to any point, and that trigger is still going to work. Again, one of the benefits about using cue points over the time. So I'm going to go ahead and preview this again, and now we should be able to see that layer, but we still may run into an issue, and I'll talk about that in a second here. So there is my question. It paused the video in the background. It has my question, and I've only set up choice two to do anything. We'd have to do that for choice one as well. But if I click on choice two, nothing happens. Why does nothing happen? We have that trigger, but nothing is happening. The reason why is because we're not hiding the layer. We need to hide the layer at a certain point. So I'm going to go back into question one, and I'm going to go ahead and add a hide layer trigger here, and it's going to happen as soon as the user clicks. Now the order of the triggers does matter. If I go ahead and move this up here, we might run into an issue. I'm going to go ahead and preview this because we're going to hide the layer first, and then try to jump to the video second. So there's going to be an issue here. So the issue is it doesn't still do anything because the hide layer is trying to hide the layer, but it's also trying to run into this, which is to jump to the cue point. So there's some issue with that. So let's jump to the cue point first, and then let's hide this layer. So let's go ahead and preview this again now. So I'm going to now hit choice two. Now the screen doesn't actually change because I stay on that first video or that first screen for a while. So I'm going to move the cue point to some part where I know for sure the screen will change. So let me go ahead and move this. There we go. So I'm going to move it to about 37 seconds, and now I know that the screen has changed. I heard the audio, but you probably didn't hear the audio here. Let's try this one more time. Okay, so I'm going to click on choice two, and there we go. It jumped me to this other screen. Everything is working, and so it allows me to jump to different parts of the video, and it allows me to make the course a little bit more interactive. What we could do is come back into question one, and on choice one, let's say the learner needs to review something if they get it wrong. Let's take them back to the very beginning. So this is where we can use a time because we're taking them always back to zero. So I'm going to go ahead and go in to jump to cue point or time here, and we're going to use time here because we know zero is always going to be zero. Let's go on the video layer, and it's going to be zero seconds. I would also have to add a hide layer to this as well, but now if they choose this, it's going to take them back to the beginning of the video. So that is one way of making your videos interactive. Another way is to add hotspots that the learner can then click on, and it will take them to different layers as well. Some more information. So this is more of like exploratory. Hey, do you want to learn more about this? You see like a scene or you see a software, and if the learner clicks on that part of the software, maybe it pops up with some information about that. So let's go ahead and go into our video, and I'm going to go into just so it pops up, you know, a little quicker here. I'm going to go into about, let's do six seconds here. Now I'm going to insert a hotspot. So I'm going to come over to the hotspot section, and then I can drag out a hotspot here. Now what I need to do is have some informational layers. So I'm going to add a layer, and this is going to be info, and we need to do the same thing we did with the question. I want to make it as a dialogue, so it fades out the background, and I want to make sure that pause the timeline also happens as well. So let's go ahead and add a shape. I like the rounded rectangle as a shape here, and let's go ahead and center that. Let's go ahead and change the fill color to white as well, and let's add a drop shadow right here, and let's go ahead and center that as well. Now if it's just displaying some text, I actually like to write the text right inside of here. So I'm going to say equals lorem open close parentheses. Now I can't actually see the text because it has the text as white. I'm not sure why. So you can change the text, select it all, and change the text back to black. All right, so now I'm going to hit enter. There's my text. This is going to be information that pops up on the screen as soon as they click on that hotspot, but we need to have the ability to hide or to dismiss this layer to go back to the video. So I'm going to insert in this section. I'm going to insert an icon. Now that icon, I'm just going to search for the letter x, or I can do close or something like that, but searching for the letter x gives me a bunch of nice options. So I'm going to insert one of these options here, and I'm just going to drag that option to the top right hand side here. I don't like, I've seen people do this where it's outside of the shape, but it makes it harder to see. Usually with the UI, it's inside of the shape. So that's what I like to stick with, but we need to add a trigger to this. So I'm going to go ahead and add a trigger of close layer or hide layer. So let's go ahead and select this dropdown box to be hide layer. And that's as simple as what we need to do here. So I'm going to go ahead and hide the layer because it's just information. We're not jumping them to different points of the timeline down the base layer. We're just displaying some information so they can learn about it. And then we are having that go away. So I'm going to go back to the base layer here, and I don't want the hotspot to run the entire time. I'm going to go ahead and right click and uncheck where it says show until end. Now, what I can do is drag this back over. Now, if you have this at a couple minutes, it might take you a while to sit here and wait for it to move over. So you could do click and drag there, or you can actually right click and go to, I mean, instead of duration, be two minutes and 15 seconds. Let's go ahead and change that to zero. And let's change this to five, just so it's five seconds there. And then we can scroll over and there we go. So I don't have to drag it all the way over as well. There is my hotspot. It's going to show up at this point, and then I can click on it at that point. But at this point, it's going to go away. We need to add that trigger on that hotspot to show the information layer. So I'm going to click on show layer, and then I'm going to click on the info. It's already kind of selected for me, which is great. So when the user clicks on that hotspot, it's going to show the info layer. So that is going to start out at about, let's have it at about five seconds here. So let's go ahead and preview this here. So my video is playing. It's not clickable yet. There's my choice. I'm going to go ahead and say choice one for, let's do choice two. And I think we actually jumped them past that hotspot. So let's have this hotspot happen at two seconds here. Let's go ahead and preview that one more time here. So one, two, I'm going to click on that. And there is my information. It did pause the video at the, in the bottom here. And then I can go ahead and close that. It will continue. And as soon as it hits the five seconds, that pop-up will still happen. Now, obviously I wouldn't want it to happen like right after the other one. So it's a matter of timing, but it shows you hopefully that you can do the interactive video with hotspots, or you can do it with the cue points. And also one more thing, you could even do it with the markers. So if I click on insert and go into markers, I could have like a little pop-up right here. Let me just insert a marker over here. And I could even have that. If I add a trigger to that marker, I could have that even without this little pop-up. So let's preview that. I think I need to move that marker over a little bit. Let's have that marker show up right at two seconds there, or a little bit before. All right. So let's go ahead and preview this again. There's that marker. It just kind of lets them know I could have this be the clickable area, or I could keep the hotspot as well and just use the marker as a pointer, or it could have like a little shape outline of something or a little note to say, click here. And the learner clicks there and it pauses the video. So hopefully this gives you some ideas of how you can make video interactive inside of Articulate Storyline and add different elements to it. Pause the video, jump them to different parts of the video, have them review, maybe even create like a chapter menu that if they click on the menu icon, it pulls up. But instead of these being choices, they're different parts of the video. So they can jump to those different parts of the video as well. Or you could always just come in here. Let me close this. You can always come in here and split up the video and use the menu on the left-hand side to jump to different smaller portions. So hopefully it gives you a couple of different ideas, couple of different ways to explore here inside of Articulate Storyline 360. Now, if you want to see more things like this, go ahead and go back to my website, go into the blog section. I do post once a week on different tips and tricks on Articulate Storyline 360. You can also download templates, my memory game, quiz time game as well. And you can check that out and adjust those templates. You can also check out full courses. If you're completely new to these tools, you can check out full courses, everything from A to Z on Articulate Storyline 360, Adobe Captivate, XAPI Fundamentals, Camtasia, Articulate Rise, Custom Scorum, and HTML5 Video. And if you haven't already, go ahead and go to my YouTube channel, click that like button and then subscribe to my channel and then hit the bell notification. So you get notified of all future videos as they come out. That really helps my channel so I can keep producing these videos and getting them out for you to help improve yourself and improve your development inside of these various learning tools. That's all that I have for today. So thanks everyone. And I'll see you next time.