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.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.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.How are You Using Drag-and-Drop Interactions in E-Learning? #468
Using Drag-and-Drop in E-Learning #468: Challenge | Recap If there’s one e-learning interaction that belongs in every instructional designer’s toolkit, it’s drag-and-drops. Drag-and-drop interactions are a fun way to engage learners and encourage them to interact with the screen. They’re also one of the most flexible interactions you can create. So, whether you’re designing straightforward question slides or custom freeform slides, drag-and-drop interactions are one of the best ways to get learners to stop, think, and interact with the content. And that’s what this week’s challenge is all about. 🏆 Challenge of the Week This week, your challenge is to share a drag-and-drop interaction to show how they can be used in e-learning. You can use any authoring tool you like and make it as simple or custom as you have time for. Note: Since Storyline’s drag-and-drop interactions aren’t currently keyboard accessible, they can create serious barriers for learners who rely on keyboard navigation or use screen readers. Check out the following on-demand training for some ideas on creating accessible drag-and-drops: How to Create an Accessible Drag-and-Drop Interaction in Storyline 360 🧰 Resources User Guide Storyline 360: Drag-and-Drop Questions Related Challenges: Drag-and-Drop Practice Activities #380: Challenge | Recap Drag-and-Drop Sorting Activities #439: Challenge | Recap Webinars: How to Build Drag-and-Drop Interactions in Storyline 360 5 Ways to Customize Drag-and-Drop Interactions 6 Ways to Customize Drag-and-Drop in Storyline 360 Discover six creative techniques every course designer needs to know to customize their drag-and-drop interactions in Articulate Storyline 360 View on YouTube ✨ Share Your E-Learning Work Comments: Use the comments section below to link your published example and blog post. Forums: Start a new thread and share a link to your published example. Personal blog: If you have a blog, please consider writing about your challenges. We'll link to your posts so your great work gets even more exposure. Social media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can follow your e-learning coolness. 🙌 Last Week’s Challenge: While you're dragging through the ideas for this week's challenge, check out the 360° image interactions your fellow challengers shared over the past week: Using 360° Images in E-Learning RECAP #467: Challenge | Recap 👋 New to the E-Learning Challenges? The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos. Learn more about the challenges in this Q&A post and why and how to participate in this helpful article.42 Interactive 360° Image Examples in E-Learning #337
Using 360° Images in E-Learning RECAP #337: Challenge | Recap This week's challenge asked course designers to work with Storyline 360's new public beta feature called 360° images. The projects shared this week were some of the best we've seen all year. Check out the examples below to see how 360° images can be used to create more engaging and interactive courses. Gokcenur Inan Example | Gokcenur Inan Mike Schwind Example | Mike Schwind | Website | @slivo6 Coniqua Abdul-Malik Example | Coniqua Abdul-Malik Mostafa Faieq Example | Mostafa Faieq Chantal Dumont Example | Chantal Dumont | Website Sarah Lotà Example | Sarah Lotà Correy Adams Example | Correy Adams Angie Carter Example | Learn more | Angie Carter | Website Jim Brown Example | Learn more | Jim Brown | Website Rebecca Govin Example | Rebecca Govin Jonathan Hill Example | Learn more | Jonathan Hill | Website | @DevByPowerPoint Melissa Meyers Example | Learn more | Melissa Meyers Paul Alders Example | Paul Alders | Website | @paulalders Jodi Sansone Example | Jodi Sansone | Website | @jodimsansone Ron Katz Example | Ron Katz | Website Example | Ron Katz | Website Chris Hodgson Example | Learn more | Chris Hodgson | Website | @skriss Sandy Henderson Example | Sandy Henderson Nancy Woinoski Example | Nancy Woinoski | Website Samuel Apata Example | Download | Samuel Apata | Website | @afrostem Tracy Carroll Example | Learn more | Tracy Carroll | Website | @1tracycarroll Karlis Sprogis Example | Download | Karlis Sprogis | Website | @fastercourse Katie Riggio Example | Katie Riggio Emmalyne Willoughby Example | Emmalyne Willoughby Dominik R Example | Dominik R Priyanka Rastogi Example | Priyanka Rastogi Natalie Evans Example | Natalie Evans Brenda Barley-Kay Examples | Brenda Barley-Kay Janie Liz Sampaga Example | Janie Liz Sampaga | Website Bela Gaytan Example | Learn more | Bela Gaytan | Website Fay Hsueh Example | Fay Hsueh Katy Montgomery Example | Katy Montgomery Jennifer Vigil Example | Jennifer Vigil Montse Example | Download | Montse Anderson | Website | @mLearning Hilla Schlegel Example | Hilla Schlegel Ang CM Example | Ang CM Marie Maurannes Example | Marie Maurannes Rise Admin Example | Rise Admin Kristoffer Høgberg Example | Kristoffer Høgberg Reggie Jose Example | Reggie Jose Iris Schlabitz Example | Iris Schlabitz Evangelina Theobald Example | Evangelina Theobald | Website | Twitter Lauren Hopkins Example | Lauren Hopkins New to the E-Learning Challenges? The weekly challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos. If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure. If you share your demos on Twitter, please include #ELHChallenge so your tweeps can track your e-learning coolness. Share Your Interactive 360° Image Examples! The 360° image challenge is still open! If you have one or more ideas you'd like to share, please jump over to the original challenge and post your links in the comments section. I'll update this recap page to include your examples.Using Interactive Dials in E-Learning #453
Using Dials in E-Learning #453: Challenge | Recap Interactive dials are a great way to simulate real-world objects and tasks in your e-learning courses. Dials are similar to sliders, but where sliders move along a straight path, dials move in an arc or a circular path. Dials also use less space than sliders, so learners can quickly scroll through large amounts of data. The best part? Dials are super easy to use and customize. With just one click, you can easily format pre-made dials or convert any object, graphic, or image into a unique dial. Here are a few ways dials are commonly used in e-learning: Reveal or step through a process Choose avatars or e-learning characters Create draggable menus 🏆 Challenge of the Week This week, your challenge is to share an example that demonstrates how you're using interactive dials in e-learning. 🧰 Resources Downloads Storyline: Rotating Objects Template Storyline: Dial H For Help Storyline: Stacked Dial to Create a Gauge Storyline: Monarch Metamorphosis Dial Storyline: Dial Infographic User Guide Storyline 360: Working with Dials Storyline 360: Adding Variable References On-Demand Training Using Dials in Storyline 360 Using Dials to Create Menu Navigation in Storyline 360 ✨ Share Your E-Learning Work Comments: Use the comments section below to link your published example and blog post. Forums: Start a new thread and share a link to your published example. Personal blog: If you have a blog, please consider writing about your challenges. We'll link to your posts so your great work gets even more exposure. Social media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can follow your e-learning coolness. 🙌 Last Week’s Challenge: Before you dial into this week’s challenge, check out innovative ways course designers are using AI to help build better e-learning: Using AI in E-Learning Design #452: Challenge | Recap 👋 New to the E-Learning Challenges? The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challengesanytime you want. I’ll update the recap posts to include your demos. Learn more about the challenges in this Q&A post and why and how to participate in this helpful article. 📅 Next Week’s Challenge Challenge #454 (03.22): Using variables in e-learning. This variables challenge will be different because you'll be asked to share a demo that uses all three variables. 🚨 Contact Information Just a quick heads up – if you want your blog, website, or LinkedIn included in our recap posts, could you do me a favor and add or update those links onto your ELH profile sometime this week? I found some broken links last week when I pulled the recap together. You spend a lot of time building creative examples, and your work deserves all the attention it can get. If you make changes, please let me know in the comments below. Thanks!Using Tabs Interactions in E-Learning #448
Using Tabs Interactions in E-Learning #448: Challenge | Recap Tabs interactions are one of the most popular features in e-learning. They are very flexible and can be designed in many different ways. Tabs are popular because they let learners explore groups of content without leaving the current slide. There is no need to jump around between different slides or scenes. 2022 tabs examples | 2023 tabs examples If you are new to e-learning or just starting with Articulate Storyline 360, tabs interactions are a great way to learn the basics. You will get to know slides, states, layers, and triggers while building something fun. We use tabs-style activities all the time in our workshops, webinars, and tutorials. They are simple, flexible, and very effective. This week’s challenge is all about creating your own tabs interaction. 🏆 Challenge of the Week This week, your challenge is to share an example that shows how tabs interactions can help organize and group related content in e-learning. Share Your Project Files! It’s no secret community members love freebies! It’s also no secret that the challenges are one of the most visible ways course designers get their work in front of the community. If you’re up for it, please consider including a download along with your example this week. E-Learning Challenges Creating Tabs Interactions in E-Learning #401: Challenge | Recap Webinars How to Build Tabs Interactions in Storyline 360 ✨ Share Your E-Learning Work Comments: Use the comments section below to link your published example and blog post. Forums: Start a new thread and share a link to your published example. Personal blog: If you have a blog, please consider writing about your challenges. We'll link to your posts so your great work gets even more exposure. Social media: If you share your demos on x or LinkedIn, try using #ElearningChallenge so your peeps can follow your e-learning coolness. 🙌 Last Week’s Challenge: Before you get started on this week’s tabs interaction, check out the creative examples from last week’s spotlight masking challenge: Draggable Spotlights in E-Learning RECAP #447: Challenge | Recap 👋 New to the E-Learning Challenges? The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos. Learn more about the challenges in this Q&A post and why and how to participate in this helpful article. 📅 Next Week’s Challenge Challenge #449 (02.09): Emphasis animations. You've been asking for this, and now it's here! Show us how you're pulsing, shaking, teetering your slide objects to life. Challenge #450 (02.16): Using Themes, Templates, & Slide Masters. Another basics challenge, only this week we're looking at under-the-hood features to help us work faster in Storyline 360 and PowerPoint. Rise 360 users can show their before-after examples using themes and block templates. Got an idea for a challenge? Are you interested in doing a webinar showcasing how you made one or more challenge demos? Or do you have some comments for your humble challenge host? Use this anonymous form to share your feedback: https://bit.ly/ElearningChallengeForm.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 do you 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.Using Accordion Interactions in E-Learning (2023) #403
Using Accordion Interactions in E-Learning #403: Challenge | Recap Challenge of the Week This week, your challenge is to share an example that shows how accordion interactions can be used to group and organize content in e-learning. What are accordion interactions? Accordions are similar to tabs interactions. They’re both commonly used to present large blocks of content into shorter pieces that learners then click to explore. But there are some key differences. Tabs interactions consist of buttons (tabs) that remain in a specific location on the slide, while accordions use expandable panels that open and close to reveal content. Generally, tabs are easier to build because the navigation buttons and content don’t change for each button. On the other hand, accordions are the next-level interaction and require more planning to accommodate the changing panel positions and content placement. Can I see some examples of accordion interactions? Sure you can. We've hosted three accordion challenges over the past 10 years and the results are always amazing. Here are some recent challenges, recaps, and community roundups to help you get started. Using Accordion Interactions in E-Learning #350: Challenge | Recap Accordion Interactions in E-Learning #227: Challenge | Recap 4 Accordion Examples to Inspire Your Next E-Learning Project Make E-Learning That Sings with these 6 Accordion Interaction Downloads 9 Accordion Interaction Downloads for Arranging Courses Awesomely Are these interactions difficult to build in Storyline 360? Like most things in Storyline, there are multiple ways to build the same interaction. If you're new or just getting started, you can use Storyline's core building blocks (states, layers, and triggers) to build click-and-reveal accordions. Intermediate and advanced users can take advantage of variables and motion paths to animate the panels. Regardless of your skill level, we want you to be successful in this week's challenge. If you get stuck or have questions, please let us know in the forums. To give you an idea of the three common ways to build accordions, check out the following examples. Basic Accordion This accordion from Montse is a good one to build when you’re first getting started with Storyline. The expanding panels are manually repositioned on slide layers to reveal each panel’s content. View the example | Download Semi-Animated Accordions In this example from Jonathan, motion paths are used to open and close the accordion’s panels. I like this example because it’s an excellent way to simulate advanced accordions without using variables. In addition, because there aren’t multiple panels, there’s no need for variables and multiple motion paths to track each panel’s position. View the example Animated Accordion In this accordion example, multiple motion paths combined with variables are used to expand and contract each panel. You can download the source file and view a video tutorial to learn more about the project and how it was built. View the example | Download the source | Learn how it was built More Examples of Accordion Interactions Using Accordion Interactions in E-Learning #350: Challenge | Recap Accordion Interactions in E-Learning #227: Challenge | Recap 4 Accordion Examples to Inspire Your Next E-Learning Project Make E-Learning That Sings with these 6 Accordion Interaction Downloads 9 Accordion Interaction Downloads for Arranging Courses Awesomely Require Learners to Click All Panels Before Continuing Functionally, accordions are similar to tabs in how they group and chunk related content. But unlike tabs interactions, accordions expand, collapse, and move around the slide. This requires designers to duplicate interactive objects across multiple layers. The good news is if you know how to do it with tabs, you can do it with accordions. Let me show you how it works. View on YouTube Share Your E-Learning Work Comments: Use the comments section below to share a link to your published example and blog post. Forums: Start your own thread and share a link to your published example.. Personal blog: If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure. Social Media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can track your e-learning coolness. Last Week’s Challenge: To help ensure your challenge demo goes "accordion" to plan, check out the creative ways course designers use subtle patterns and textures in e-learning: Patterns and Textures in E-Learning RECAP #402: Challenge | Recap New to the E-Learning Challenges? The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos. Learn more about the challenges in this Q&A post and why and how to participate in this helpful article. Next Week’s Challenge I'm hosting a how-to webinar next week on building accordion interactions in Storyline 360. I'll reference this week's challenge in the session and share any examples you've shared before the session. Next week's challenge (2/10/23): Creating E-Learning Interactions Inspired by Google Doodles << Thanks to Tom and Elizabeth for the idea! Upcoming how-to webinar (2/7/23): How To: Build Accordion Interactions in Storyline 360 It’s been a while since I’ve done the accordion webinar, so your latest accordion examples will help the session feel fresh and current.Creating Animated Button Styles and Effects in E-Learning #285
Animated Buttons in E-Learning #285: Challenge | Recap Animated button effects are one of the best ways to prompt learners to touch the screen. From animated submit buttons to the despised next button, there are countless designs, styles, and effects to choose from. You can pack a lot of engagement into three basic states: How to Create Animated Button Effects in Storyline 360 By default, animations can’t be added to existing states. To enable animation effects, you first need to add an extra shape to the state you want to animate. If this sounds confusing, don’t worry. I recorded a quick video to show you everything you need to know. View the tutorial on YouTube Animated Button Example and Practice Slide Here’s a simple example to help get you started. I included a practice slide with ready-made shapes that you can use to practice adding different animation styles. View the example | Download the source Using Animated Button Effects with Characters Guess what? You’re not limited to using the animation effect on buttons. The technique works really well when you want to create subtle or soft transitions between object or character states. Here’s a good example of how animated states works with characters in Storyline 360. View the example | Download the source When you check out the source file, you’ll see the timeline example doesn’t use the animated states effect. The animation effects are created by applying entrance and exit animations to multiple characters on the slide. This is a good example of where it’s easier to create and manage everything on the timeline rather than adding the animation to each state. Challenge of the Week This week, your challenge is to show one or more examples of animated button effects. Play with different shapes, styles, and effects to show how you can use buttons creatively in e-learning. Be sure to include the Normal, Hover, and Selected states in your work. Using Storyline for this week’s challenge? Please consider sharing your .story files. Button graphics make popular giveaways and the source files will help a lot of users get up to speed with more advanced button concepts. Not using Storyline? No problem! You can mock up your 3-state buttons designs in PowerPoint or any other tool. I'm mostly interested in seeing your creative button ideas. How are Animated Button Effects Used in E-Learning? Animated Button Effects #89: Challenge | Recap Looking for more ideas and source files? Check out the creative examples shared in our first animated buttons challenge. The challenge is almost five years old but the examples are still amazing. Resources The Ultimate Guide to Buttons in Storyline 2: Fantastic resource on using buttons in Storyline 2. Tips for Creating Great Buttons That Stand Out: Bookmark this article for tips on common button characteristics and ideas for creating engaging buttons. E-Learning Icons: Show and Share Your Favorite Styles #78: Icon challenge with some great tips and examples for creating your own graphics. In Defense of Eye Candy: Great article that makes the case for design and beauty in web interfaces. The same research applies to the types of graphics we build in e-learning. Articulate Training Webinars Tom recently hosted a training webinar that shows you everything you need to know about creating animated buttons in Storyline 360. View the Articulate Training webinar recording Share Your E-Learning Work Comments: Use the comments section below to share a link to your published example and blog post. Forums: Start your own thread and share a link to your published example.. Personal blog: If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure. Social Media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can track your e-learning coolness. Last Week’s Challenge: Before you dive into this week’s animated button challenge, check out the interactive ADDIE examples your fellow challengers shared over the past week: Using the ADDIE Model in E-Learning #284: Challenge | Recap New to the E-Learning Challenges? The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.
