Everything You Need to Know About States in Storyline 360
The states feature in Storyline 360 is incredibly powerful. States allow you to alter the appearance of objects based on the learner’s actions. To illustrate this, take a look at the GIF below: See how the formatting of the buttons changes as I hover, and then again when I click on them? And did you notice that once I’ve clicked on the top three buttons, a fourth one appears? These formatting changes are made possible thanks to the states feature in Storyline 360. But this is only the tip of the iceberg when it comes to what’s possible with states. Let’s do a breakdown of this super-powerful feature to help you better understand how you can use states in your courses: Built-In Object States Custom Object States Drag-and-Drop States Character States Built-In Object States When you click on an object, open the States panel and click on the New State icon. You’ll notice that there are already a few built-in states: The great thing about these built-in states is that when you add them to objects in Storyline 360, most of them work automatically—without any triggers. Let’s take a look at how prebuilt states work and how you might want to use them in your courses. Normal This is what your learners see by default if they don’t interact with the object in any way. This state is created automatically when you insert an object. Any formatting that you apply to your object is automatically applied to the Normal state. Here’s a cool pro tip: you can actually add objects to the Normal state instead of adding them to your slide! There are many situations where this technique can be useful. For example, if you’d like to create a custom button by combining several objects, you’ll want to add the secondary objects to the Normal state instead of grouping them, because states can’t be added to a group of objects. To add objects to the Normal state, simply select an object, open the States panel, click on Edit States, select Normal, and insert the objects, as shown in the GIF below: As you can see, adding the icon to the Normal state instead of adding it to the slide itself allows you to interact with both the rectangle and the icon as if they were a single object. From here, you can add whatever other states you’d like! Speaking of, let’s take a look at the next prebuilt state. Hover This is what an object looks like when a learner moves their mouse over it. Adding a Hover state is a great way to signal to learners that an object is clickable. It’s up to you what formatting you apply to an object. Here’s an example of a Hover state that simply changes the fill color to a lighter shade of blue: Down The Down state appears when the learner is actively clicking on an object. This signals to the learner that their action is working. As always, the design of this state is your call. In the example below, the Down state simply changes the fill color to a darker shade of blue: Selected When you’ve added the Selected state to an object, it’ll appear when the learner clicks. If they click on the same object again, it’ll go back to the Normal state (unless they’re part of a Button Set). This state is great for interactions where you want learners to see which objects they’ve selected. Here’s an example of a couple of rectangles to which I’ve added Selected states with glow formatting: If you want to create an interaction where learners are supposed to select a single object from a set of options, you’ll want to use this state in combination with a Button Set, which automatically changes the state of a Selected object to Normal when the learner selects another object in the set, much like how radio buttons work in multiple choice questions. Here’s the same example you see above with a button set applied to the three rectangles: Visited Like the Selected state, the Visited state appears automatically when the learner clicks on an object. However, unlike the Selected state, which turns on and off automatically when learners click on the same object multiple times (unless they’re part of a Button Set), once the Visited state is activated, the only way to turn it off is by adding a trigger. This is because the purpose of the Visited state is to show that an object has been clicked on in the past, not to show that it’s currently selected. The Visited state is super-useful when you create custom menus or click-and-reveal interactions because it allows you to give learners a visual reminder of the buttons they’ve already clicked. Here’s an example of how that works: Disabled The Disabled state allows you to temporarily prevent an object from changing states or activating a trigger when learners interact with it. Unlike the other prebuilt states we’ve seen, you need to add a trigger for this state to work, unless you’ve set it as the initial state for an object. When the Disabled state is activated, nothing will happen when learners try hover, click, or drag that object. The Disabled state is useful in many situations. For example, if you’d like to create a custom menu that requires learners to view the different sections of your course in a certain order rather than allowing them to view the content in the order of their choosing, you can use the Disable state to unlock one button at a time, like in the GIF below: Notice how when I hover over the buttons, nothing happens? The Hover state doesn’t appear and the hand cursor doesn’t appear, making it clear that I can’t click on them. If you’d like to build a menu like this but are short on time, hop on over and download this template. Hidden As you may have guessed, when the Hidden state is activated, the object is invisible. Like the Disabled state, you need to add a trigger to activate this state unless you’ve set it as the initial state for an object. The Hidden state could be useful if you wanted to hide the quiz button until the learner completes all the sections of the course, as shown in the GIF below: Before we move on to Custom Object states, here’s another pro tip for you: if you’re creating states for an image, you can quickly create a series of states for it by bulk-importing image files. Find out how in this tutorial: Inserting Pictures as States. Custom Object States In addition to these prebuilt states, you can create an unlimited number of Custom Object states that can look and work any way you want. Adding a Custom Object state is super-easy! Simply select the object, open the States panel, click Edit States, and type the name of your Custom Object state, as shown in the GIF below: Once you’ve created your Custom Object state, go ahead and format it any way you’d like. Then, add a trigger to that object to show that state whenever you’d like it to appear. There are tons of situations in which it can be useful to create Custom Object states. One example would be to create different versions of the same object that appear as the learner interacts with a slider or a dial, as shown in the GIF below: To create the example above, I inserted a bunch of Custom Object states and changed the height of the rectangles in each one. Check out the screenshot below to get an idea of what my states look like: This is just one example of a situation where you might want to use Custom Object states—there are plenty of others! Let your imagination run wild. Drag-and-Drop States When we were looking at prebuilt states earlier, you may have noticed that at the bottom of that drop-down list there was another category of prebuilt states: the Drag-and-Drop states. As their name suggests, these states were specifically designed to be used with drag-and-drop interactions. They allow you to give the learner visual feedback as they’re interacting with the exercise. There are three Drag-and-Drop states. Let’s take a closer look at each one. Drag Over If you add this state to a draggable object, the learner will see it when an object is dragged over a drop target. If you have multiple drop targets, this state will be applied no matter which one it’s dragged over. Take a look at this GIF to get an idea of what that could look like: Instead of adding this state to a drag item, you could add it to your drop target(s). Here’s what that looks like: No matter which option you choose, the objective is the same: to give the learner a visual cue that they’re dropping the object onto a drop target—without letting them know if their answer is correct or incorrect. Drop Correct and Incorrect States The remaining two states are generally used together. The Drop Correct state is what your learner will see when they drop an object on the correct drop target, and the Drop Incorrect state is what they’ll see if they drop an object on the incorrect drop target. By default, these states won’t appear until the learner clicks on the Submit button, like in the GIF below: This is a great way to let learners know which answers they dragged to the right and wrong spots, instead of simply telling them they didn’t drag them all to the right spot. If you want the Drop Correct or Drop Incorrect state to display right away, simply go to the drag-and-drop options and uncheck the box marked Delay Item Drop States until Interaction Is Submitted, as shown in the GIF below: Once you’ve unchecked that box, your interaction will work as shown below: This option is great for practice exercises, where the score doesn’t matter. Pro tip: Did you notice that in addition to changing the color of the draggable items for the Correct and Incorrect states, I added icons to indicate whether they were correct? It’s a good practice to avoid using color alone to indicate correctness; this enables people who have trouble distinguishing colors or who come from cultures where green and red don’t indicate Correct and Incorrect to be able to understand. Character States Did you know that the illustrated characters in Storyline 360 come with a dozen prebuilt states? Well, now you do! There’s a prebuilt state for each of the 12 facial expressions included with each illustrated character. So if you want your character to suddenly look angry or disappointed, you don’t have to build out those states—they’re already there! All that’s left to do is insert an illustrated character and set up a trigger to change the state. Wrap Up And there you have it—you know everything there is to know about states in Storyline 360! Well, maybe not everything, but pretty close. If you want to dig even deeper, check out these great resources: Adding and Editing States Definition of Built-In States Want to try something you learned here, but don’t have Articulate 360? Start a free 30-day trial. And subscribe to our newsletter to get the latest product updates, e-learning examples, and expert advice directly in your inbox.Add Custom Interactions to Rise 360 Projects with the Storyline Block
One of the best things about Articulate 360 is that you always have the right tool for the job: you can create custom interactivity with Storyline 360 and build gorgeous, responsive courses with Rise 360. And with the Storyline block for Rise 360, you have the best of both worlds—custom interactivity with responsive output. Easily add custom interactions built in Storyline 360 to the beautiful, responsive courses you’re creating with Rise 360. And because it’s Rise 360, your interaction will look perfect on every device. Check out this video to see how easy it is to add Storyline 360 interactions to Rise 360: Sign in to Articulate 360 to try the Storyline block yourself. And if you haven’t tried Articulate 360, you’re missing out! Get a free 30-day trial to try out this new feature and much, much more.Create Interactive Videos with These Storyline 360 Features
Videos are a commonly used learning tool in e-learning because they easily demonstrate how to do physical or web-based tasks. Since Articulate 360 Content Library gives you access to thousands of videos, it’s never been easier to find the one you need for your e-learning project. Here’s the best part: Storyline 360 makes it super-easy to take your videos a step further and make them interactive using a few key features. Let's take a closer look. Cue Points Cue points are useful when it comes to creating interactive videos in Storyline. They are bookmarks you can place anywhere on the timeline to trigger events. Cue points are useful when it comes to creating interactive videos because they can be used to pause the video at certain points on the timeline. Here’s an example of an interactive video that uses cue points to pause the video at key moments to display a question the learner must answer. Medical Training: Interactive Video|Download Learn more about cue points: Get to Know Storyline Cue Points How to Work with Cue Points Layers Layers are another powerful feature e-learning designers frequently use to create interactive video. You can use layers to display additional information appearing on the screen while the video is playing or when it’s paused. Here’s an example of an interactive video that uses layers to display additional pop-up information for each step of the process. Barista Training: Interactive Video|Download Learn more about layers and how to use them: Storyline 360 and Storyline 3: Understanding States, Layers, and Triggers Storyline 360: Working with Layers Hotspots Hotspots allow you to create a clickable area on the screen. They can be used on top of videos to encourage learners to click on parts of the scene. Here’s an example of an interactive video that uses clickable hotspots to display additional information about this piece of heavy equipment. Heavy Equipment Training: Interactive Video|Download Learn more here: Working with Hotspots in Storyline 360 In Sum Hopefully these features and examples get you thinking about ways you can turn your video into something more engaging and interactive. What features do you use to create interactive videos? Let me know in the comments below! Want to try something you learned here, but don’t have Articulate 360? Start a free 30-day trial, 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.Storyline 360: What Are Triggers?
Want to build interactivity into your e-learning course—things like jumping to a slide, clicking tabs to show different information, playing media, submitting a quiz answer, and more? With Storyline 360 you have an easy no-code solution to help you build the exact interactivity you want: triggers. Triggers tell your course what actions to perform at specific times. And what makes them so simple to work with is they’re essentially just the answers to two basic questions: What action do you want to happen? When do you want it to take place? Let’s say you want to create a Home Button that takes learners to the main menu of my course. To decide what trigger to use you need to know: What action doyou want to happen: The course jumps to the main menu When do you want it to take place: When the user clicks the Home Button Or maybe you want some narration to start when a slide opens. For that, you need to know: What action do you want to happen: The narration audio file plays When do you want it to take place: When the timeline starts on the slide Once you have the answers to those two questions, you’re ready to create your trigger in Storyline 360! Now that you know how they work, let’s look at just how simple it is to set up any trigger you need for your courses. Creating a New Trigger There are two ways to get started: click Trigger in the Insert tab or select the Create New Trigger icon in the triggers panel. Either option opens the Trigger Wizard, which will guide you through the entire trigger creation process. When that Trigger Wizard pops up, you’ll probably notice that the first two sections in it feel pretty familiar. That’s because they’re essentially asking you the two questions we discussed earlier: Question 1: Action You’ve got 25 actions to choose from in Storyline 360, which means a lot of possibilities. And thankfully, they’re labeled with clear, conversational names that make it easy to browse the drop-down menu in the Trigger Wizard to find the exact action you want. Once you’ve picked your main action, additional drop-down menus appear, which allow you to further refine what you want to happen. For example: if you select Jump to Slide, the next dropdown will ask you which slide you want to go to. if you choose Play Media, the dropdown will list the media files on the slide you can pick from. Question 2: When Once you’ve identified what action should take place, then it’s time to specify when you want it to happen. Again, you’ll make your choice from a straightforward drop-down list. Just as you saw with the Action section, once you’ve picked an option from that list the Trigger Wizard will show you any additional fields you need to fill out to ensure your trigger works. This feature is a huge help for making sure important information isn’t accidentally left out. For instance, if you choose User Presses a Key, a new field will ask you to identify which key. Or, if you select Object Dropped On, you’ll then be asked to choose one of the available objects on the slide or layer. Conditions There’s also an optional section in the Trigger Wizard: Conditions. Conditions are a powerful feature for enabling actions to happen ONLY IF something else in the course has already occurred. For example, if you want your course to show a slide with remedial content only to learners who got an earlier quiz question wrong, a conditional trigger can help you do that. The possibilities and combinations are endless when it comes to conditional interactivity! Find out more about how to work with conditions in this article. Does Storyline 360 Build Any Triggers for Me Automatically? Absolutely! To save you time, some Storyline 360 slides and objects have common triggers included with them by default. Here are a few places you can expect to regularly see these automatic triggers. Previous and Next Buttons There’s no need to set up triggers for the Previous Button and Next Button every time you add a new slide. That’s taken care of for you—automatically! Quiz Slides You’ll notice quiz slides have a Submit Button by default instead of a Previous and Next Button. That button has a trigger automatically attached to it that submits the interaction when it’s clicked. Quiz Results Slides When it comes to the Graded Results slide, the prebuilt triggers do a lot of the heavy lifting for you. They check the quiz passing score and automatically show either the Failure or Success layer based on the learner’s performance. They also give learners the option to use the Review Button to revisit the quiz slides and answers. Of course, even though all the triggers listed here are prebuilt for you, you can always edit or delete them to customize your course as needed. Wrap-Up As you can see, triggers are as powerful as they are easy to use, making creating a wide variety of interactivity in Storyline 360 a snap. Looking for even more ways to work with triggers effectively? Give these articles a try: Storyline 360: Working with Triggers 4 Things You’ll Want to Know About the Triggers Panel in Storyline 360 Want to try something you learned here, but don’t have Articulate 360? Start a free 30-day trial, 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.How I Built This Recycling Parallax Interaction in Storyline 360
If you’ve ever been on a road trip and gazed out the side window (hopefully only as a passenger 😉), you’ve probably noticed that objects close to you—like trees—appear to zip by really fast, while objects further in the distance—such as mountains—seem to barely move. This phenomenon is known as motion parallax. In the digital world, the parallax effect gives the illusion of depth and movement. Combine that with a realistic learning scenario—like in this Recycling Guide example—and you’ve got yourself a truly engaging interaction. View | Download Let’s take a look at how to create this interactive parallax example in Storyline 360! Create layered components To create a parallax effect you need several layered components that move at different speeds. So, the first thing I did was create all my slide elements with the different layers in mind. Using a combination of shapes in Storyline 360 and Content Library 360 assets, I ended up with six layered components. Component 1: Recycling bin For this example, I wanted the recycling bin to be the main focus—after all, that’s what the course is all about. Since I planned to tilt the bin and make the wheels spin, having it front and center would give the optical illusion that the bin was rolling as the background moved. Component 2: Park Next, I needed to create the main interactive piece—the park. This is the only component that learners engage with to reveal additional content, so I was very intentional about how I designed the space. Since the graphics were going to move horizontally, I made sure to extend those designs past the slide size. I carefully placed each object—such as buttons and litter—in different parts of the park and in a specific order to help guide the experience. And because I used only Content Library 360 icons/illustrations and simple shapes, it was easy to move things around and reposition them as needed. Pro tip: Before duplicating a button, create all the states beforehand so they copy over. Big time-saver! Component 3: Mountains (light) To add a sense of depth and movement, I included mountains in the background. I combined several different mountain-shaped icons to create the extra-wide graphic. I made the first mountain layer a light tan color since objects up close are generally lighter in color. Component 4: Mountains (dark) Behind the lightly colored mountains, I added a darker version for contrast. To save time, I copied and pasted some of the shapes from the lighter mountain. Since not all mountains look alike, I flipped and resized some of the shapes so that when they moved, they didn’t line up exactly the same. Component 5: Sky The scene wouldn’t be complete without a sky! I added a sun for reference. I mostly kept this component simple to save time and to keep the main focus on content. Component 6: Frame (optional) Okay, so this is where it gets a little tricky. I could’ve made things easier by extending the sky and ground to fill the slide. That way, I wouldn’t need a frame and objects could freely animate on and off the rectangular slide. But I really wanted to create a unique learning experience. To give this course a custom look and feel I designed a frame to show content within a unique shape. The frame is comprised of the title, a white border, arrow buttons, a background, and two side shapes to match so that the other components only show inside the unique shape. Pro tip: To make the slide look seamless with the player background, go to your Player settings and change the background color to match. And here’s how it all looks together. Save static objects Once I created all the components, I realized there were a lot of objects on my slide. So, I decided to make my file easier to manage by saving some of the layered components that had a lot of objects—such as the Park, Mountains (Light), and Mountains (Dark)—as their own image and then replacing them with a scalable vector graphic (SVG) to keep image quality. For example, I selected all the objects in the Mountains (Dark) component, right-clicked, and selected Export Shape as Picture. I saved the shapes as a PNG. For the best image quality, I simply opened that PNG file in Adobe Illustrator and saved it as an SVG. I went back to my Storyline 360 project, inserted and resized my SVG to match the objects on the slide, and then deleted all of the Mountains (Dark) objects. I repeated this process with the Mountains (Light) component. For the Park component, I took a few extra steps before exporting it as a picture since it had a lot of interactive elements and I only wanted to save the static parts of the image. On the timeline, I clicked the eye icon to hide objects with states, animations, and text so I could still edit them or assign triggers at any time. Here are all of the static components I exported as a shape to save as an SVG. And for context, here are all the elements I did not include in the export. After inserting and resizing the Park SVG, I moved it beneath the hidden park objects on the timeline. I selected the eye icons to make all the Park components visible again where they remained in the same location as designed. Then, I grouped them and renamed the group “Park.” Saving some of the components as an SVG really sped up my workflow. With fewer objects on my timeline, it was easier to select the ones I wanted to edit or add triggers to. It also reduced the file size so content could load faster. To learn more about scalable vector graphics (SVG), check out this article: Storyline 360: SVG Support. Get things moving With all the graphics on the base layer in place, I created several additional layers to reveal content and help tell the story. Now it was time to connect everything with movement. To explain how to create the parallax effect, let’s roll through the example.😊 Background When you move right, the background moves left, making it look like the recycling bin is rolling forward. If you move left, those same background components move right, making it look like the recycling bin is rolling backward. To create this parallax effect, I added motion path animations to move some of the background components—Park, Mountains (Light), and Mountains (Dark). And in case you didn’t already know, you can add more than one motion path to the same object. That feature really came in handy here. For each component, I added a Left and Right line motion path. Since I wanted the components to all move at the same pace, I edited the easing direction to None for each motion path. I also selected Relative Start Point to ensure each component always moved from its current position. Next, I changed the duration of the paths to one second. I chose this duration because I planned to have the recycling bin roll left or right for one second as well. That way, all the animations would stop and start at the same time. To make it easier to manage triggers later on, I also renamed the motion paths to include the component name and the direction of the path. For example, I named the motion path that moves the park group right “Park Right.” Next, I changed the length of the paths. This is where it differs for each component. Since I wanted the background objects to move at a slower speed than the foreground objects, I edited the left and right motion path lengths for each component to the following. Park: 180 px Mountains (Light): 90 px Mountains (Dark): 40 px Using these settings, the furthest-away component, Mountains (Dark), would only move left and right 40 px during the one-second duration. Whereas, Mountains (Light) would move about twice the distance, at 90 px, during that same time. And that was it for the motion path settings! Now it was time to add triggers to make these components move in the right direction. By default, when you add a motion path animation to an object, a trigger is automatically created. Since I wanted the components to move based on the user selecting Right or Left, I deleted those triggers from the base layer and instead added them to the Bin Right and Bin Left layers. On the Bin Left layer, I added triggers to move the components right when the timeline starts. And on the Bin Right layer, I added triggers to move the components left when the timeline starts. Now, when the learner selects Left or Right, they’ll see the background move accordingly. Recycling bin Now for the recycling bin. I put it front and center to make it appear like it was rolling when the background moved. When you go right, the bin tilts and rolls forward. When you move left, it tilts and moves backward. After one second, the animations stop and the recycling bin returns to its upright position. To create this optical illusion, on the Bin Right and Bin Left layers I hid the recycling bin that was on the base layer so it was no longer visible. In its place, I added a tilted bin with dirt paths depending on the direction it was going to move. Bin left layer Bin right layer Next, I added a Spin entrance animation to the wheels. Just like a regular wheel, if you go left, the wheel’s direction moves counterclockwise. If you go right, the wheel’s direction moves clockwise. As for the amount it spins in each direction, I landed on a quarter spin since that looked the most accurate. To emphasize the direction the recycling bin was moving, I included dirt paths and added Wipe and Fade animations. And because both the duration of the background components and the timeline on these layers are set to only one second, all the animations come to a stop at the same time. To ensure the recycling bin returned to its original upright position, I added a trigger to hide whichever layer you’re on—Bin Left or Bin Right—when the timeline ends. The learner automatically returns to the base layer, where they can continue the learning journey. Set boundaries With the freedom to move the recycling bin left and right as you please, you may be wondering how I stopped the background components from moving too far. If you go left at the very beginning, you’ll see a little tortoise and a deactivated Left button so you can’t move any further. To keep learners from navigating outside of the main area, I needed to set some boundaries. To achieve this, I added a Deactivated button over the Left button that only shows when you navigate to that side of the screen. To make the button visible, I added a transparent shape and pasted it inside the existing group, “Park.” When you navigate left, the Park group moves right, causing the bin and the transparent shape to intersect, which changes the Deactivated button to Normal (visible). When you navigate away, it stops intersecting and returns to its original hidden state. I used this same technique at the end of the learning experience. When the recycling bin intersects with the transparent shape next to the house, it shows the final layer. This allowed me to end the parallax learning experience at the end of the graphic. Wrap-Up And that’s all there is to it! Using the parallax effect can create an engaging learning experience that truly brings your content to life. If you haven’t already, download this Recycling Guide project to take a closer look at how I built it. For more advice on working with motion paths, head on over to this article: 7 Pro Tips for Working With Motion Path Animations in Storyline 360. If you want to see more ways to create a motion effect, check out this webinar: Create Parallax Effects With Sliders in Storyline 360. Want to try to create your own parallax example, but don’t have Articulate 360? Start a free 30-day trial, 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.How to Create a Custom Lightbox Effect in Storyline 360
Lightboxes are pop-up windows that dim out the webpage or slide you were viewing before they appeared. Like this, for example: View interactive version|Download the template In e-learning, they’re a great way to show learners additional content without navigating away from the current slide, which could make them forget where they were in the course. In Storyline 360, you can easily create lightboxes by simply adding a trigger (learn more in this article: All About Lightboxes). The rest is all done for you, automatically. However, if you want to have more control over the way the lightbox looks—you may want to change the size of the lightbox window, the color used to dim the slide in the background, or swap out the X icon—you can create your own custom lightbox effect. To see what I mean, check out this custom lightbox effect I created: View interactive version|Download the template Thankfully, that’s also super easy to do in Storyline 360. Let me walk you through the steps. 1. Add a Slide Layer Start by adding a slide layer to the slide you want the lightbox to appear on. To add a slide layer, simply click on the New Layer icon in the Slide Layers panel. 2. Design Your Lightbox Then, add a semi-transparent rectangle that covers the entire slide. In my example, I set the transparency to 32%. For the fill, choose a color that’s slightly darker than the color of your slide. This will create an illusion that your slide is “dimmed.” The easiest way to find a darker shade of your fill color is to open the Format Shape settings. In the Color dropdown, select More Colors and slide the arrow on the right-hand side downward to choose a darker shade of the selected fill color, as shown in the GIF below: From there, add a solid-color rectangle to serve as the background for your content. You can use the same color as your slide—like I did—or another color. It’s up to you! Next, pop in your content. This could be text, images, video … really anything you want! Finally, add a shape or button to close the lightbox. I chose to go with a simple X shape. 3. Add a Trigger to Close the Slide Layer The last thing you’ll need to do on the slide layer is to add a trigger to close it when the learner clicks on the Close button (in this case, the X). If you’re planning on creating multiple lightboxes on the same slide, duplicate this layer as many times as necessary. For my example, I created four duplicates, for a total of five slide layers. 4. Add Buttons to Show Slide Layers Now, back on the base layer (your main slide), you’ll want to insert buttons that, when clicked, open the slide layers (your lightboxes). In my example, I’ve inserted five circular images that will serve as my buttons. The next step is to add triggers to your buttons to show the appropriate layers when the learner clicks. The easiest way to do this is to add the trigger to your first button, then copy and paste it onto your other buttons. From there, you can simply update the layer each button opens in the trigger panel, as shown in the GIF below: You can also add a Hover state to your buttons so learners intuitively know they’re clickable, and a Visited state so they know which buttons they’ve already clicked on. Here’s an article that walks you through how to set that up: Storyline 360: Adding and Editing States. 5. Add Transition (Optional) To give your lightbox a more polished look, add a fade transition to your layers. To do that, simply select each layer, click on the Transitions tab, and choose Fade. More Resources And that’s all there is to it! In just a few minutes, you’ve created your own custom lightbox effect. If you like my example, you can download the template here. I’ve even thrown in a second version for good measure! And if you’re looking for more resources on lightboxes, check out the links below: All About Lightboxes in Storyline 360 (Article) How Are Designers Using Lightbox Slides in E-Learning? (E-Learning Challenge) Want to try something you learned here, but don’t have Articulate 360? Start a free 30-day trial. And subscribe to our newsletter to get the latest product updates, e-learning examples, and expert advice directly in your inbox.7 Tips for Creating Immersive Learning Experiences with Interactive 360° Images
If you’re like many course authors, you’re constantly looking for ways to make your e-learning more immersive. And while there’s no one-size-fits-all solution, your focus should always be on creating learning experiences that entice learners to mentally and emotionally engage with the content. One way to do that is with 360° images—sometimes referred to as panoramas or photospheres. Working with interactive 360° images in Storyline 360 gives you endless opportunities to create immersive learning experiences that let learners explore a realistic environment, like in this demo. If you’re intrigued by all the creative possibilities of working with 360° images in Storyline 360 and want to learn effective ways to use them, you’re in the right place! In this article, I’ll walk you through 7 pro tips for creating 360° image interactions that capture learners’ attention as efficiently as possible. 1. Save time by customizing project settings upfront When I start any new e-learning project, I like to spend a few minutes customizing the course settings to save time in the long run. This is a good general practice, especially if you plan on adding interactive elements like 360° images to your project. That way, if you need to change your colors or fonts later on, you won’t have to worry about manually editing each object. I always start by creating theme colors and theme fonts to ensure that the navigational elements I add to my 360° images—such as hotspots and markers—will maintain the design scheme I’m using for the rest of my project. Then, if I need to make changes, all I have to do is edit the project’s theme colors and fonts and all markers and hotspots will update automatically. 2. Use images that capture every angle Adding 360° images to Storyline 360 is super easy. The key to building a really cool and immersive experience is to focus on making a really great image. The good news is you don’t need any specialized equipment to create a 360° image. Some phones, such as the Pixel, have a built-in feature that allows you to capture your own 360° images. But not all phones have this feature or are built the same. For example, an Apple device’s camera with panoramic mode enabled captures 240° cylindrical panoramas. And although you can still add 240° images into Storyline 360, the way they render isn’t as immersive as the experience you’ll get when using a 360° image. (You can see an example of a 240° image here.) If your phone doesn’t include a built-in feature that allows you to take 360° equirectangular images, no need to worry. There are a growing number of 360° camera apps you can download to create your own. Either way, for the best learning experience you’ll want to use images that give a full 360° field of view. If you’re unsure where to find or how to create 360° images for your e-learning projects, check out these ideas to get started. You can also dig into this article to learn more about supported 360° image formats in Storyline 360. 3. Set the initial view to create a realistic scene They say first impressions are everything, and it’s especially true when you’re working with 360° images. Thankfully, Storyline 360 makes it super easy to adjust the initial view so learners see something inviting and relevant right from the start. For example, if you were creating an office tour for your new-hire onboarding course, you wouldn’t want the camera facing the ground when the learner first launches the interaction. Instead, you’d want them to be able to look straight into the office. To do that, simply open the 360° image editor, navigate to the Interaction tab, click Edit, and move the image to your preferred angle. 4. Choose how learners will navigate As you design the 360° learning experience you’d like to create, consider how you want learners to move through content. Do you want them to be guided around the space or invited to explore freely? With 360° images, it’s up to you. You can choose between free navigation and guided tour options to help learners make the most of the interaction. As an example, let’s say you want to give your new employees a way to tour the office before their first day. Using free navigation, learners can explore interactive objects in any order and familiarize themselves with the surroundings. Now let’s say you want to guide the learner through the office from room to room so they know what to do and where to go on their first day. In that case, you might want to use the guided tour option so you can take learners through the space in a specific order. 5. Add markers and hotspots to encourage engagement With a high-quality 360° image in your project and a vision for how you want learners to experience it, you’re now ready to add some navigational “nudges” learners will need to immerse themselves and start interacting with the content. Those navigational elements take the form of markers and hotspots in Storyline 360. You can use markers to reveal text, insert images, import audio, or add video content. You can even customize markers by changing their icon, color, and placement. Using our office example, let’s say you want to add a welcome video to the 360° interactive experience. Simply add the video to a marker and learners will see this content when they click on it. If you’ve added a video, you can personalize the video play button color within a marker by going into the player settings and choosing an accent color. Another great option to test learners’ knowledge or to help them learn more about their surroundings is to create hotspots. With hotspots, you can either give learners a hint that part of the screen is clickable or hide them so learners discover additional content on their own. You can draw hotspots anywhere on the slide and in any shape and color. 6. Build more immersive interactions by adding triggers You might be wondering: what if I want to add a knowledge check to my 360° image? Storyline 360 has you covered. One way to accomplish this is to just add a trigger to any marker or hotspot. With triggers, you have several options—such as Show Layer, Lightbox Slide, and Adjust Variable. By simply creating a trigger, you can easily open a layer with an ungraded knowledge check or display a graded quiz slide in a lightbox. And you’re not limited to just knowledge checks. If you wanted to add a checklist to your office tour to ensure learners complete their onboarding tasks, you could add a button that opens a layer where you’ve created a checklist, as shown in the .GIF below. 7. Personalize the interaction with variables One of the great things about custom e-learning built in Storyline 360 are all the options to personalize the experience with variables. When you combine the power of variables with 360° images, there are almost infinite possibilities! For instance, there might be times you want to show learners their progress, display a lightbox slide when a certain number of markers have been visited, or ensure learners visit all markers before moving on—just to name a few ideas. In these instances, using triggers to track variables is a good way to go. To learn more about using the built-in tracking variables in Storyline 360, check out this article. What are you going to create with 360° images? Adding 360° images to your Storyline 360 courses is a great way to invite learners to explore and engage with your content. And with these tips, you’ll be creating immersive 360° learning experiences like a pro. One of the best ways to come up with new ideas for using 360° images is to look at what other e-learning pros are doing. To see some inspiring designs, check out this recent challenge on Interactive 360° Images in E-Learning. And while you’re at it, create your own 360° example to add to the mix. We love seeing your creative ideas. For more details on using 360° images in Storyline 360, check out the following helpful articles: How to Find and Create 360° Images for Your Storyline 360 Projects New in Storyline 360: Create More Immersive Interactions with 360° Images Storyline 360: Working with 360° Images What tips do you have for creating immersive learning experiences with interactive 360° images? Please share your ideas in the comments below. Want to create your own 360° Storyline 360 project, but don’t have Articulate 360? Start a free 30-day trial, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning.How I Built This Dial-Driven Map Activity in Storyline 360 (With Help from ChatGPT)
Despite our increasingly ‘touchscreen’ and ‘hands-free’ world, dials are still a big part of everyday life. If you need to emulate a dial in your e-learning experience, this feature can make your interaction more realistic, tactile, and relevant for the learner. For the Using Interactive Dials E-Learning Challenge, I created a Storyline 360 example that used dials as a sort of drag-and-drop. Along the way, I tried out some creative techniques that helped this project work in unexpected ways—including using the dial feature to animate an object and an unconventional approach to enable the dial to spin in both directions. Here’s a behind-the-scenes look at how this project works. Project Overview This demo project teaches people some simple map navigation techniques. You can try it out for yourself here and download the Storyline 360 project file here. To complete the activity, you end up interacting with three ‘picture as dial’ controls: To start the course, you need to turn the compass so its edge connects Point A and Point B Then, you have to turn the compass housing to the correct orientation to get your bearing While you’re doing this, the compass needle—which is also a dial locked in a disabled state—will oscillate slightly Creating my dial graphics I created the compass in PowerPoint and exported it as a large, hi-res PNG image. I doubled its height using Pixlr and used Storyline’s Convert to Dial feature to create a custom dial. Using the dial as a drag-and-drop This dial has four states, which are triggered by changes to the associated Compass_Base variable: Changes to the same variable also trigger events within the demo, effectively making this a drag-and-drop activity, but with a fixed axis. Unlike most drag-and-drops, though, it is accessible via the keyboard. Allowing the dial to turn in both directions In its default setting, a dial can only make one complete turn, which is limiting when you are trying to mimic a real-life object that can turn in both directions. To overcome this, the second dial in my demo has a 1440° rotation and its starting position is 687°—about halfway, just left of center—to match the appearance of the compass base. This dial can turn clockwise or counterclockwise for two rotations in each direction before coming to a stop. But that does make it quite tricky to use its position to calculate a bearing, as positions 0, 360, 720, 1080, and 1440 all point north. To compensate for this, I asked ChatGPT to write some custom JavaScript for me: // Function to calculate the heading function calculateHeading(compass) { // Calculate the heading with special handling for multiples of 360 var heading = 360 - (compass % 360); // Adjust heading for cases where it's 360 but should be 0 if (heading === 360) { heading = 0; } return heading; } // Function to adjust heading to 0 whenever it becomes 360 function adjustHeading(heading) { if (heading === 360) { heading = 0; } return heading; } // Get the value of the Storyline variable Compass and calculate Heading var Compass = player.GetVar("Compass"); // Assuming "Compass" is the name of your Storyline variable var Heading = calculateHeading(Compass); // Adjust Heading to 0 whenever it becomes 360 Heading = adjustHeading(Heading); // Set the Storyline variable "Heading" to the adjusted value player.SetVar("Heading", Heading); // Assuming "Heading" is the name of your Storyline variable And this is the result: With this code, I can tell if the compass housing is upside down even if it has been turned more than once. Pointing the compass housing south is a common mistake for novice navigators, but my demo will spot this and provide correction. Using animation to enhance the dial experience The third dial is purely for decoration. During the second part of the activity, I wanted the compass needle to move gently as you were turning the compass housing—just as it does in real life. This dial has a more limited rotation and range: I used ChatGPT again to create some custom JavaScript that makes the compass needle oscillate each time the compass housing is turned: // Function to randomly adjust Compass_Needle between 8 and 15, returning to 11 within 0.50 seconds function adjustCompassNeedle() { var randomValue = Math.floor(Math.random() * 8) + 8; // Generates a random number between 8 and 15 player.SetVar("Compass_Needle", randomValue); setTimeout(function() { player.SetVar("Compass_Needle", 11); // Return Compass_Needle to 11 after 0.50 seconds }, 500); } // Variable to store the previous value of Compass var previousCompassValue; // Function to handle changes in the Compass variable function handleCompassChange() { var currentCompassValue = player.GetVar("Compass"); // Get the current value of the Compass variable // Check if the Compass value has changed if (currentCompassValue !== previousCompassValue) { // Call the function to adjust Compass_Needle adjustCompassNeedle(); // Update the previous value of Compass previousCompassValue = currentCompassValue; } } And here’s a close-up of the result: Wrap-Up As you can see, there are lots of creative ways to use dials to produce all sorts of fascinating interactions! And I hope these insights about my project creation process give you ideas to try in your own work. As you might imagine, there’s quite a bit more going on in this demo beyond just dials—notably some Jump to Time–powered animations and an approach for controlling a Zoom panel with pause/play timeline triggers. So be sure to check out the project Storyline 360 file to see how the whole experience comes together. And please dial me up if you have any more questions! Want to try something you learned here, but don’t have Articulate 360? Start a free 30-day trial. And subscribe to our newsletter to get the latest product updates, e-learning examples, and expert advice directly in your inbox. If you have questions, please share them in the comments.4 Pro Tips for Working with Sliders
When you’re looking to up your e-learning game and give learners more control over how they interact with information, sliders are a fantastic option. Sliders are an interactive element you can add to your Articulate Storyline projects, and you’ll find that e-learning pros use them for all sorts of things, including: Illustrating cause-and-effect relationships, like in this safe lifting example Controlling objects on the screen like images or characters, as in this space-themed download Capturing and manipulating data and numeric values, like in this self-assessment for paramedics If it seems like you can use sliders for a lot of different things, you’re right! So let’s plant some seeds of creativity by walking through a few slider basics. Along the way I’ll share some handy pro tips to make working with sliders even easier. Adding Sliders First things first! Adding a slider to your project is easy. You’ll find sliders on the Insert tab in Storyline 3/360, grouped with dials and buttons and other interactive objects. Once you’ve selected Slider, you’ll see three slider styles to choose from: Regardless of the style you pick, the process of customizing and working with sliders is all the same. With your slider inserted and selected, you’ll find that a Slider Tools menu becomes available with two tabs: Design and Format. The Design tab contains options for customizing the function of your slider. The Format tab has options for customizing the look and feel of your slider. Let’s focus on some of the options under the Format tab first. Later we’ll dive into the options on the Design tab. Customizing the Look and Feel of Sliders One of my favorite things about sliders is how flexible they are. You can easily blend them into your project by changing the appearance of your slider using the options under Slider Tools > Format tab. Sliders are composed of two basic parts: the track and the thumb. To interact with the slider, learners drag the thumb along the track. As I mentioned, you can integrate sliders into the look and feel of your project (or make them stand out from the background if you prefer) by customizing the size, color, and effects of both the track and thumb. You can even swap out the built-in thumb and track for images of your own—opening up a load of creative possibilities! Let’s walk through some of the ways you can format and customize your sliders. Resizing & Rotating The track and thumb can be resized individually or together. To resize the whole slider (both the track and thumb), drag a corner sizing handle. To change the length of the track, drag the left or right sizing handle. To change the thickness of the track, drag the left yellow handle up or down. To resize only the slider thumb, drag the top yellow handle up or down. Wishing your slider could be vertical? No problem! Although sliders are added to your Storyline project in a horizontal orientation, you can easily change that to any orientation you’d like by grabbing the rotation handle on the top of the slider, or by accessing the Rotate drop-down on the ribbon. Recoloring Changing the color fill for the track and thumb is also easy. Just select the slider and go to the Format tab, located under Slider Tools. Change the color of the track fill by selecting Track Fill. Pro tip: Coordinate your slider colors with the objects or images on your slide by using the eyedropper tool to select specific colors. This is a super-simple way to make your slider look and feel customized and fully integrated with the other objects on your slide! Changing the Thumb A lot of folks like to use their own images in place of the default thumb and track options available in Storyline. This can come in handy when you’re trying to give your project a cohesive look and feel that really blends the slider into your slide. You can see an example of how cool an integrated slider can be in this recent e-learning challenge on drug safety and awareness. To change a thumb to an image, simply select the slider, go to the Format tab under Slider Tools and select Thumb Fill and then Picture. Similarly, to change a track to an image, simply select the slider, go to the Format tab under Slider Tools and select Track Fill and then Picture. Pro tip: If you’re trying to use a picture for the track fill and struggling to get the right look, you might find it’s easier to make the track translucent or transparent and then just place it over the image on your slide. You can control the transparency of the color fill by selecting Gradient from the Track Fill options and then selecting More Gradients. From there, just drag the transparency slider (or enter a value) to adjust transparency from 0 (no transparency) to 100 (totally transparent). Setting Up Slider Properties Now that you’ve seen how to add a slider and a few ways to customize the look and feel of sliders, let’s get into the nitty-gritty of how to work with them. That means we’re going to dig into the options available under Slider Tools > Design tab. Controlling Slider Behavior When you add a slider to a project, Storyline automatically creates a variable associated with that slider and labels it Slider1. You’ll find this slider variable under the Slider Properties group on the Design tab. This slider variable is a number variable that Storyline automatically creates. Storyline creates a new number variable for each slider in your course. If you want to change the number variable that’s controlled by the slider, simply use the Variable drop-down to select another number variable in your course. If you want to change the name assigned to your slider (e.g., Slider1, Slider2, etc.) to something more intuitive or easily recognizable, just right-click on the slider and select Rename. Enter a new name and click OK. You can also change the name of your slider on the timeline. To do that, just double-click on the slider in the timeline to open it for editing. Enter the new name for your slider and press Enter. I find that taking the time to rename my sliders makes it a whole lot quicker and easier to select the correct slider when I’m assigning triggers—especially when I’m working with multiple sliders in my project. When a slider is added to your project, by default, it’s inserted as an object with a starting value of 0 and an ending value of 10. This means there are 11 “steps” as you drag the slider from left to right. Let’s take a closer look at how you can control the number of steps and the value for each step, as well as other slider properties on the Design tab. Update Storyline gives you the ability to control when the slider variable is updated. You can update the variable as the learner is dragging the slider (which is the default setting) or only after the learner releases it. Start This is the starting value for your slider. In other words, this is the value assigned to the step where the thumb initially appears on the track (also see initial, below). By default this value is set to 0, but the starting value can be any value up to two decimal places. The minimum value is -9999 and the maximum value is 9999. For most projects this value can be left at 0, but for some projects it makes more sense for this value to match what your learners are seeing on the screen. For instance, if you’re using a slider to create an interactive thermometer that scales from 32°F to 100°F, you’d probably want that starting value to be 32 to avoid confusion. Initial This is the initial position for the slider thumb on the track. Again, Storyline defaults to 0 (left), but you can designate any value of up to two decimal places. For instance, if you wanted the thumb to initially appear in the middle of the slider, assuming a total slider value of 10, you’d set the initial value to 5. End This is the ending value for your slider. It defaults to 10, but again you can make it any value of up to two decimal places. The minimum value is -9999 and the maximum value is 9999. Much like the starting value, for certain interactions it might make sense to change this value to reflect what your learners are seeing on the screen. Step This is the incremental value for the slider thumb as it moves to each step along the track. By default, Storyline sets this to 1, but it can be given any value of up to two decimal places. Folks often add more steps to their slider when they’re trying to use it to fluidly change the state of an object, like in this example. Triggering Actions So you’ve got your slider looking good and set up the way you want—now what? Well, sliders are a tool for interaction, so you'll probably want your slider to do something when the learner uses it! That’s where triggers come into the picture. You’ll need to add triggers that execute when the slider moves or the variable changes. Let’s say you want to show a series of layers to progressively reveal an image as the learner drags the slider, like in this water treatment process example. Here’s what the layer trigger on the triggers panel looks like for this project: Of course, this is just an example of one type of action you can trigger with sliders. There are tons more! To learn more about triggers, check out this handy user guide. Pro tip: One common use of sliders is to capture the slider value and display it in a textbox or a shape. This can be a really cool way for learners to rate themselves. For instance, you could ask them to drag the slider to reflect their comfort level in performing a new task they've just learned, like in this example below. Building something like the above interaction is easily done by adding a variable reference to a textbox or shape. A variable reference is simply text that reflects the variable name surrounded by the % sign. So typing %slider1% into any textbox or shape will display the value of slider1 when previewed/published. Likewise, typing %slider2% will display the value of slider2 … and so on. The really cool thing is that this reference can be automatically updatedto show the value as your learner moves the thumb along the track (assuming you've lefttheupdate setting in itsdefault). You can see an example of this idea in the gif below. More Tips and Resources By now you’re probably seeing all the interactive potential of adding sliders to your projects. This article touched on a lot of information and tips, but there’s much more to learn. Here are a few more bonus tips and resources to check out. Not quite sure how you’d use a slider in your course? No worries! Our community is super-generous about showing their work. Check out some of their creative ideas for using sliders in this recent e-learning challenge and in this round-up of slider interactions. Love the idea of capturing slider value to display to learners, but want to limit their input or prevent them from changing their selection? Check out this discussion for a brilliant tip from our very own Superhero Wendy Farmer. So clever! One cool idea for using sliders is to create an interactive bar graph that changes as the learner drags the slider. Here’s a gif to illustrate the idea: This effect is super-cool, right? The trick to making this work is to add lots of states to your bars and lots of steps to your slider. These incremental changes give the slider and the bars that nice, fluid movement. To see what’s under the hood of this slider interaction, grab this free bar chart download. As I mentioned above, inserting a slider automatically adds a slider number variable to your project. Obviously, renaming the slider variable to something more relevant is a big win for a lot of reasons, but particularly when you’re troubleshooting your project. There are even more helpful troubleshooting tips for all sorts of Storyline interactions in this must-read article, Troubleshooting Advanced Interactions by Nicole Legault. Are you just looking for a general guide on sliders? We’ve got you covered there too. Check out our Storyline 360 User Guide. What are your tricks for working with sliders? Share your tips, ideas, and questions below or strike up a conversation with your fellow e-learning pros in our Building Better Courses forum. Did you find this article helpful? If so, don’t forget to follow us on Twitter and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning.
