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 Customize This Storyline 360 Flexible Quiz Scoring Template
Have you ever needed to create a self-assessment, a personality test, or another quiz type that requires custom feedback depending on the score (e.g., What type of manager are you?)? If so, this Storyline 360 Flexible Quiz Scoring template is the perfect starting point. In this article, I’ll walk you through how to customize this template to fit your needs. I’ll show you how to: Add questions Edit the point values of each choice Add more feedback options Display a score or percentage on the results screen What’s the fastest way to add questions? The template includes a total of five questions. To add more questions, simply: Right-click a question slide Select Duplicate That’s it! I also included the question number along with the total number of questions in the quiz. I personally like adding this detail so learners can see their progress. And because I used the built-in slide number variables, there’s no need to update the numbers manually. When you duplicate a slide, you’ll see both the question number and the total number of questions in the quiz update on all slides—automatically. Pro tip: If you want to customize the look and feel of the quiz slides, making these changes before you duplicate them will save you time. Can I change how many points each choice is worth? Absolutely! By default, Storyline 360 lets you assign a point value for getting the question right and another point value for getting it wrong. But did you know you can also assign a different score to each answer choice? That’s exactly what I did for this template. For each question, I assigned a different point value to each choice—one choice is worth one point, one is worth three points, and the other choice is worth five points. If you want to edit the point value for each choice, simply: Select a question slide Click Form View In the Points column, edit the number value for each choice You’ll notice I included the point values for each choice in Slide View. This can be helpful for development or review purposes. Just remember to delete the point values before publishing your course so the learner is focused on their options rather than on how much each option is worth. Pro tip: If you edit the point values and want to keep the same scoring for all quiz questions, delete the other question slides in the template, and duplicate the one you customized. How do I add more feedback options? For this template, I decided to use a blank results slide so I could design the slide from scratch. I created three custom feedback layers: low score, medium score, and high score. If that works for your project as well, then simply edit the feedback text as needed and you’re all set! But what if you want to include more than three possible outcomes? No problem! Just follow the steps below. 1. Duplicate layers Start by duplicating the existing layers as many times as needed and editing the text. It’s always a good idea to rename the layers so they’re easy to identify. For template purposes, I included the text—high/medium/low score—in the results to indicate which layer is showing. You can customize it or delete it altogether so it’s not visible to learners. 2. Add/edit triggers on the base layer Once you have your layers in place, you’ll need to add/edit the triggers on the results slide (base layer). Since my template has three possible outcomes, I created three triggers to show the appropriate layer depending on the score. If you have four possible outcomes, then you’ll need to add one more trigger so that you have a total of four triggers. For five outcomes, you’ll need five triggers, and so on. Once you’ve added your additional triggers, make sure you edit each trigger to show the correct layer. You’ll also want to edit the point values that display each layer to match your own scoring rubric. What if I want to display a score or percentage on the results screen? If you’re creating a quiz that requires you to display a score or percentage at the end, you’ll want to add variable references or the following text to the results slide (base layer): Display Type Add the Text Score %Results.ScorePoints% Percentage %Results.ScorePercent%% Pro tip: Since the feedback text is on the layers, make sure you place the score/percentage text where it will be visible. One idea would be to replace the icon at the top with your chosen scoring method. Before After Wrap-Up I hope this article helps you to easily create a more personalized experience for your learners by customizing this Storyline 360 Flexible Quiz Scoring template. If you need help or have any additional questions on updating this template, please leave a comment below. Want to see more customizable quiz templates? Check out these free downloads: Storyline: Gamified Quiz Template with Timer Storyline: Countdown Quiz Game Storyline: Risk Assessment Quiz Storyline: Unconscious Bias Quiz Storyline: Timed Quiz Challenge Storyline: Around the World Quiz Want to try customizing this Storyline 360 quiz, 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.5 Ways You Can Advocate for Your Value to the Business as a Course Creator
In an ideal world, leadership would always have a clear view of the impact of your e-learning projects and your unique value to the organization. But that view can be much foggier in real life than we’d like it to be. When our company or leadership doesn’t get what course creators like us do or how it benefits them, we can end up on shaky ground. That lack of understanding makes it hard for us to push back against training cuts. It makes it tricky to get budget increases for tech investments or team expansion. And it can even lead to the mistaken belief that we can easily be replaced by new technology or people without e-learning expertise. Thankfully, many of these issues stem from an easy-to-address source—a lack of awareness. Tipping the balance back in your favor is often as easy as advocating for your work and yourself. Not sure how to do that? Here are a few good places to start. 1. Find your champions It’s possible to do this self-advocacy work on your own. But you’ll probably reach more ears and shift perceptions faster if other people are talking up your work too. Think of it like how you might decide where to eat when traveling to a new city. Intriguing social media posts from a restaurant might get your attention. But chances are a trusted friend telling you about their favorite dining spot in town is more likely to influence your decision. Who might step up to champion your work or team? Consider tapping into people like: Subject matter experts (SMEs) that you have a strong working relationship with. Learners who’ve given your e-learning glowing reviews. Stakeholders who’ve seen the impact your past projects made on the business. Trusted coworkers who know how great your work is—and why it should matter to others. If you’re feeling awkward about asking people to praise your work, just keep your requests small at first. For instance, if an SME emails you a compliment about how easy you’ve been to work with, ask them to forward it to your manager as well. 2. Be loud and proud about your successes We sometimes get siloed off in learning and development. As a result, other teams may have no idea what we’re working on and why it’s so important to the company. If you’re feeling a bit invisible, a good solution is to put on your marketing hat and pursue opportunities to share what you’re doing. This is a great time to tap into your manager and champions to help you find ways to share your work. Large-scale efforts—like presenting at a department meeting, sharing an eye-catching infographic about the impact of a course, or making a year-in-review video highlighting your team’s biggest wins—can all help. But even smaller actions—like asking someone who gave a glowing review of your course to tell their team why they should take it too—can get the word out there. While you’re doing this promo work, don’t just focus on the final project. Also talk up the unique skills and ideas you and your team contributed to make it succeed. That way people don’t just get excited about the finished content—they’ll also get excited about what you and your team bring to the table. 3. Share how what you do connects to broader business goals The people we work with may have a vague sense that e-learning benefits the company in some way. But they may not know precisely how. Or sometimes they understand the surface benefits of our e-learning—like how compliance training checks off a legal requirement—but may not see the deeper, more meaningful impacts it makes in the long run. The best way to turn this situation around is to help these colleagues make those connections. Look for opportunities to call out the specific ways your projects contribute to key company goals. For instance, maybe that compliance course also helped reduce workplace injuries or prevented costly fines. And be sure to be direct about these links so there’s no ambiguity about the impact of your work. 4. Talk to your audience in terms they care about While you’re talking up what you do, also think about how you’re framing that information. When you’re chatting with other learning professionals, eyes will often light up when you share how a project met your learning objectives, used a development tool in a creative way, or tied into learning research. But that likely won’t mean as much—or sometimes anything—to people outside our field. Instead, promote your work in ways that will speak to your audience. For instance, if they’ve complained to you about the boring and useless e-learning at their last job, tell them about all the ways you're making your courses interesting and practical. If your project can help with their team’s goals, tell them how it does that. Or, if you know they’re constantly feeling crunched for time, play up the key ways you’re streamlining your projects. That way, they’ll know you’re making a difference on things that matter to them personally. 5. Do the math to connect your successes to the bottom line Want a measure of success that’s easy to get people excited about? Focus on money. In some cases, financial numbers are easy to uncover—for instance, if you launched training on upselling a new product and the sales numbers immediately went up. Other times, though, you might need to break out your calculator to convert one kind of win into a financial one. For example, if you shaved ten minutes off of your company’s annual compliance training, that may not initially sound like a big deal. But if you have 60,000 employees that have to take it, that’s 10,000 hours of saved work time. If your company’s average hourly salary is $25, that ten-minute trim saved the company $250,000. And those are numbers that can impress! Have a situation where your training wasn’t the only factor at play? You can still frame the final savings or profits as something your work contributed to. That way, you’re acknowledging the other factors but not downplaying that your work had an important part to play in the mix. Wrap-Up Advocating for yourself and your work may not solve all the challenges you face in your professional life. But it’s a good first step toward boosting your visibility and ensuring your organization knows just how much you have to offer. Not only that, but it can even open doors for your career that you didn’t know were possible. Want more ideas on building buy-in for you and your work? Check out these articles: 2 Ways To Show the Value of Online Training Here’s How To Prove the Value of Training to Your Organization Use KPIs To Demonstrate the Value of E-Learning Subscribe to our newsletter to get the latest e-learning inspiration and insights directly in your inbox. You can also find us on LinkedIn and X (formerly Twitter). And if you have questions, please share them in the comments.Five Overlooked Timesavers for Working with the Timeline in Storyline 360
When I need to create richly interactive, custom learning experiences, my go-to Articulate 360 app is Storyline 360. With features like the timeline, Storyline 360 makes it simple to work with objects on my slides—making them appear and disappear in tandem with audio narration, for instance. So let’s take a look at one of the most low-key, powerful features in Storyline 360—the timeline—and five overlooked timesavers for making the most of it. Managing Objects with the Timeline When you’re building highly interactive e-learning with lots of audio and animations, it’s not unusual to end up with a number of objects on a slide. And when you’re working with so many objects, it’s also easy to get confused. Here are some timeline features and tips that can help you avoid that confusion and stay organized! Rename Objects Every object on your slide also appears on the timeline. So when you’ve got, say, 12 rectangles on your slide, Storyline 360 will number each rectangle on the timeline as Rectangle 1, Rectangle 2, etc. One of the fastest ways to confuse yourself is to leave these default labels in place. That’s because later on when you’re adding triggers to your project or building things like a drag-and-drop, you’ll waste precious time trying to figure out which of the many pictures on your slide is “Picture 27.” Save yourself a lot of trigger troubleshooting time and headaches by simply renaming objects on the timeline. To do that, just double-click on the name to the left of each object and type in a more descriptive name then hit Enter on your keyboard. It looks like this: That’s all it takes. And while it might seem a bit tedious to name every object on your slides, I guarantee it will save you loads of frustration! Undock the Timeline When you’re working with a lot of objects, scrolling through the timeline to find the ones you need can get challenging. That’s why it’s so helpful that Storyline 360 lets you undock the timeline panel and even place it on another monitor. To undock the timeline panel and place it elsewhere, just click Timeline and drag it to a new spot. I like to drag mine over to my bigger monitor so I can expand it and see everything. Ready to redock the timeline? Select Redock icon, in the upper right corner of the panel. Here's a gif showing how to undock and redock the timeline: Working with Grouped Objects on the Timeline One of my favorite timesaving tricks is to group objects on my slide so there are fewer individual items on my timeline. You can group objects by holding the CTRL key while you select the assets you want to include in the group. With all the items selected, simply right-click and choose Group. Grouping objects is especially helpful when you have a lot of assets like textboxes and shapes. I find it makes it easier to adjust timing when I can grab and place the entire grouping rather than each individual object. Expand an Object Grouping Need to make a change to an object that’s part of a group? Just click the triangle next to the group name to expand it so you can see all of the individual objects nested beneath it. Then, make your changes and click the triangle again to collapse the grouping. In short, not only does grouping assets keep your timeline looking tidy, it also makes it easier to hide/show or lock a group of objects so you can remove distractions and focus on other objects on the slide. Let’s take a look at how hiding and locking objects works. Hide and Lock Objects on the Timeline Sometimes it’s helpful to temporarily hide some objects so you can focus on others. To hide an object, click the eye icon to the left of its name on the timeline. Click the eye icon again to unhide it. There are also times when you want to see objects on your slide, but you’d rather not accidentally grab them when you’re working with other adjacent objects. To prevent one element from being moved or modified while you’re working with another, click the box before its name on the timeline. Clicking that will change it to a padlock icon. Simply click it again to unlock it. Here’s what hiding/unhiding and locking/unlocking looks like: Pro Tip: If you’ve hidden objects on the timeline, they won’t appear in your published output, so remember to unhide them before you publish! Syncing Objects on the Timeline I like to think of the timeline as a director, the objects on my slide as actors, and the slide as my stage. Thinking in these terms helps you see how the function of the timeline is to orchestrate your entire slide. By positioning and dragging the “actors” (objects) on the timeline, I can control when they’ll appear on stage (my slide) and when they’ll exit the stage in concert with other actors or my narrator. One way to orchestrate all of this activity is to use cue points. Let’s take a closer look at how cue points work. Quickly Add Cue Points To quickly add cue point markers, click Play, in the lower left corner of the timeline, then press C on your keyboard at any point where you want to insert a cue point, like this: To remove a cue point, right-click the cue point marker you want to delete and select Delete Cue Point or right-click anywhere in the timeline and select Delete All Cue Points. More Timeline Timesavers As you’ve seen, the timeline in Storyline 360 is pretty awesome. It’s hard to believe that something this simple is so powerful! In this article, I’ve covered five of my favorite overlooked timeline features, but there’s much more to learn! For more tips and tricks about using the timeline, don’t miss these articles: 3 Time-Saving Storyline Timeline Tips 11 Awesome Things You Can Do with the Storyline Timeline Storyline 360 User Guide: Working with the Timeline What’s your favorite Storyline 360 timesaver? Do you have a best tip or trick for working smarter? Share them with us in a comment, 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.
