Using Emphasis Animations to Grab Learners' Attention #449
Using Emphasis Animation in E-Learning #449: Challenge | Recap What moves, gets noticed. And if you've worked in Storyline 360 recently, you likely noticed some movement in the Animations tab on the ribbon. Just like in PowerPoint, Storyline's new emphasis animation effects offer fresh ways to guide attention and highlight on-slide elements. You can apply them to pretty much anything – shapes, images, buttons, characters, markers, text boxes, even videos. So whether you’re trying to grab your learner’s attention or prompt them to touch the screen, emphasis animations can help learners focus on what’s important. And that’s what this week’s challenge is all about. 🏆 Challenge of the Week This week, your challenge is to show how Storyline 360's new emphasis animations can be used in e-learning. Your example can be a simple button starter kit showcasing the new animation effects, or you can create a more complete or polished. NOTE: Even without an active Articulate 360 subscription, you can participate in this week's challenge. For example, PowerPoint's emphasis animations give you similar functionality. 🧰 Resources Storyline 360: Emphasis Animations Storyline 360: Adding Animations Triggering Motion Paths Based on Learners' Actions Emphasis Animations Beta Feedback: Share your feedback, report a bug, or tell us how you’re using the new animations. ✨ 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: To help you build momentum for this week’s challenge, check out the growing list of tabs interactions your fellow challengers shared over the past week: Tabs Interactions in E-Learning RECAP #448: 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 #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. 🚨 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.How Can You Use This Motion Path Tip in Your E-Learning Projects? #445
Using the 0px Motion Path Trick #445: Challenge | Recap Happy New Year, E-Learning Heroes This week's challenge is a bit off the beaten path compared to what we usually do. Instead of diving into a popular feature (sliders, dials, variables) or a common interaction (tabs, timeline, accordion), we're zooming in on a more unique, lesser-known use of a feature. Think of this as a sandbox challenge. Check out this example and see what I mean. Sugary Drinks by Annabelle Grew Why is this interesting? Aside from the creative concept and visual design, what really grabbed my attention here is the approach Annabelle took to put this whole project together. Typically, drag-and-drops are set up with just a fixed number of draggable objects, right? That's perfectly fine if you're dealing with, say, under ten items. But here's where it gets juicy: imagine you've got dozens of objects, and you want them all to be draggable. Now, the standard move would be to create individual objects for each drag item. But let's face it, this method works, but it can make editing and managing the slide a real challenge. That's why knowing your tools can really help save you time and work quicker. How does it work? There's only one drag object in the project. The drag cube has a motion path with a length of 0 px and a duration of .10 seconds. Each time the sugar cube is dropped on the target, the trigger tells the sugar cube to move its motion path. Because the motion path is set to 0 px, it resets the sugar cube to its default starting position of the sugar cube. Brilliant, right? It's not just about what you create but how you create it that can make all the difference. And that's what this week's e-learning challenge is all about! 🏆 Challenge of the Week This week, your challenge is to share an example that uses the 0px length motion path trick. You can recreate an existing example or play with ideas that show potential uses for this technique. Two More Examples Reset an Object's Position In this example, Ron used the 0 px motion path in a way that's not just about duplicating objects. Instead, it's used to play multiple audio clips from multiple objects. The 0 px motion path resets the object's position after the learner drops the object on a single target. Ron's got a detailed forum post where he breaks down how he built his project. Casualty Incident Response by Ron Katz Drag-and-Drop RAID Storage Calculator I put together this example nearly five years back, right around the time we kicked off our online webinars. I've always been a fan of Drobo and especially liked their interactive capacity calculator. The project file is available for download and if you want to see how it works. Drag-and-Drop RAID Storage Calculator Video Tutorial of the 0 px Motion Path Technique ✨ 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 Year's Challenge: Before you tackle this week’s challenge, check out the colorful examples your fellow challengers shared in last year’s Pantone Color challenge: Pantone Color of the Year 2024 RECAP #444: 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. 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.Using Cinemagraphs and Video Backgrounds in E-Learning #428
Cinemagraph & Looping Videos in E-Learning #428: Challenge | Recap Using subtle, looping motion in your course can effectively add an extra layer of visual interest to the typical slide background. The key is finding the right balance in motion, pacing, and composition. And that's what this week's e-learning challenge is all about. Challenge of the Week This week, your challenge is to show how cinemagraphs or looping background videos can be used in e-learning. To help you get started, check out some ways motion backgrounds can be used in e-learning. Cinemagraphs Cinemagraphs are a creative way to animate isolated parts of an image. Unlike videos, cinemagraphs are more like static photos that include a small area of the looping animation. This approach works well for e-learning because it reduces the amount of on-slide animation that helps create depth and richness. Amazing Cinemagraphs from Around the Web Video Backgrounds in E-Learning Slide backgrounds are one of the easiest ways to create a sense of place and location in your course designs. Because backgrounds are the most significant on-slide element, they help set the context for your learning content more than any other object. So how can you improve on the perfect background? Try using full-screen videos as slide backgrounds. Companies like Wistia creatively use video backgrounds to engage their visitors the moment the page loads. View Wistia’s video backgrounds Natural environments, like offices, factories, classrooms, and other workspaces, help create a sense of authenticity. Like still photographs, videos can also add a sense of location and context to your slides. View an example of a video background in e-learning Resources 6 Types of Video You Can Include in E-Learning 4 Ways to Use Videos in E-Learning 3 Steps to Using Cue Points to Pause a Video and Display Layers 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 get started on this week’s challenge, check out the practical ways plain language can make complex information easier to read: Plain Language Examples RECAP #427: 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. 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.Using Motion Graphics in E-Learning #418
Using Motion Graphics in E-Learning #418: Challenge | Recap If you're looking for ways to quickly capture learners' attention, explain complex concepts, or promote your e-learning skills and portfolio, motion graphics might be the way to go. Motion graphics combine text, shapes, images, and other visual elements to tell a story or convey a feeling or mood. They're frequently used in films, commercials, websites, social media, and e-learning courses. Some common use cases for motion graphics in presentation and e-learning design include: Course intros and title sequences: Use motion graphics to add a visual appeal and capture the audience's attention at the beginning of presentations. Slide transitions: Use animations and motion graphics to transition smoothly into your course's main content. Branding and identity: Use animated title sequences to bring life to your organization's logo, colors, and branding elements. Data visualization: Use motion graphics to guide the learner's focus to present complex information that's easy to digest and understand. Setting the tone: Depending on your subject matter, you can use different visual styles, colors, and animation techniques to set the mood or tone of your course. Here’s a great example of what’s possible using motion path animations in Storyline 360 from Ian Monk. Challenge of the Week This week, your challenge is to create a demo to show how course designers can use motion graphics in e-learning. Resources Here are a few more examples and articles to help you get started working with advanced motion path animations: 7 Pro Tips for Working with Motion Path Animations in Storyline 360 Storyline 360: Motion Graphics Timeline PowerPoint: Onboarding Motion Graphics Template 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: To help set your creative wheels in motion, check out the accessibility makeover examples your fellow challengers shared over the past week: Accessibility Makeovers in E-Learning #417: 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. 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.Using Circle Menu Navigation in E-Learning #406
Using Circle Menus in E-Learning #406: Challenge | Recap Circular menus are a great option when you want to provide users with an intuitive and stylish way to present navigation options in a compact format or when screen space is limited. By using a circular layout, designers can present a large number of options in a compact space without cluttering the screen. This makes circle menus an ideal choice for apps (or e-learning courses) with a lot of features or options that need to be easily accessible to users. Let’s explore a few examples. Circle Menu Navigation In this example from Dave LeFevre, learners click the menu button to reveal the circular arrangement of menu options. View the example | Download the source Circle Menu with Masking Effect In this example from Montse, a folder graphic is used as the starting point for the menu options. I like how the folder graphic was layered to mask the animated menu items. View the example | Download the source file Circle Menu In this example, Jackie’s circle menu features menu items nested under the starting button. In addition, I like how the menu features a selected state that remains persistent even after the menu is closed. That’s a nice touch. View the example | Learn more about this project Challenge of the Week This week, your challenge is to create a circle menu example to show how they can be used in e-learning courses. Your example can be static or animated. In most cases, animated menus will require variables. If you need help or get stuck this week, jump into the forums and let us know. Related Challenge For more ideas of what's possible, check out challenge #189 and the recap post. 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 looking over this week’s challenge menu, take a few moments to check out the interactive audio examples your fellow community members shared over the past week: Interactive Audio in E-Learning RECAP #405: 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 Next week's challenge (3/4/23): New Feature Challenge: Microlearning in Rise 360. With the new microlearning feature in Rise 360, you can create bite-sized, single-objective training easier than ever. See this user guide article for more on this new feature. 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.Animated Masking and Cutout Effects in E-Learning Design #356
Masking and Cutout Effects in E-Learning #356: Challenge | Recap What Moves Gets Noticed Animations are effective ways to draw focus and attention to an area of your slides. Moving on-slide objects helps to create focal points, illustrate complex procedures, and help learners visualize change e-learning. Animation effects can also be used to set and control the pacing of your course. Combined with masking or cutout graphics, you can create animated effects that elevate your course designs. Take a look at the following examples. Meet the Team Animated Cards Notice how the images animate out of view? They disappear into the borders of the card instead of flying off the slide. This example is interesting because the animations appear constrained to the specific area of the profile card. View the project | Download How Does the Effect Work? The effect is created by using a cover graphic with a cutout area for transparency. The cutout can be created in just about any graphics app from Photoshop to PowerPoint. Animated Photo Collage Image Slider Here's another example that uses the same masking and animated effects. View the project | Download In this example, the cover graphic is the same size as the slide with a smaller area cutout for the larger character images. Masking effects combined with animation can help you create special effects that go beyond the defaults. And that's what this week's challenge is all about! Challenge of the Week This week, your challenge is to share an animated example that uses either a masking or cutout effect for one or more slide elements. Resources Storyline 360: Working with Layers Storyline 360: Working with Triggers Storyline 360: Adding Animations Triggering Motion Paths Based on Learners' Actions 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 animate your creativity, check out the ways course designers are using interactive dials for menu navigation: Using Dials for Navigation RECAP #355: 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.Using Google Doodles to Inspire E-Learning Activities #404
Using Doodles to Inspire E-Learning Design #404: Challenge | Recap Google Doodles are decorative changes made to the Google logo to celebrate a wide range of historical events and achievements. Doodles are a lot like e-learning courses. They can be static, illustrated, animated, gamified, or interactive. Doodles are a playful way to teach history, culture, and science. For course designers, they’re a great way to practice e-learning. And that’s what this week’s challenge is all about! Challenge of the Week This week, your challenge is to create an example using Google Doodles as your source of inspiration. Your entry can be illustrated, animated, or interactive. Here are a few ideas to help you get started: Use as a starting point: Pick one or more Doodle elements, such as colors, themes, or illustrations, and use them in your own design. Create your own Doodle: Pick an event or holiday and design your own Google Doodle based on it. Make a static Doodle interactive: Use a static Doodle as a starting point and make it interactive. Recreate a Doodle animation: Practice animation by recreating one or more Doodle animations. 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. Using Accordion Interactions in E-Learning RECAP #403: 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 & Webinar I'm hosting a webinar next week on using audio in Storyline 360. I'll reference this week's challenge in the session and share your examples in the session. Next week's challenge (2/17/23): Using Interactive Audio in E-Learning #405. Topics can include soundboards, language learning, podcast interviews, narrated slideshows, and more. Upcoming webinar (2/14/23): Using Audio in Storyline 360 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.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.Using Animation Techniques to Create Countdown Timers in E-Learning #298
Animated Timers in E-Learning #298: Challenge | Recap Timers are a common element in game-based learning where time constraints play a role in the success or failure of a task. Timers can be used for most decision-making activities that require learners to quickly process information. Animated timers can be used to: Create a sense of urgency, tension, or pressure Simulate real-world tasks that involve time constraints Gamify decision-making activities Create timed skill and drill exercises Timers can be created using a variety of techniques including video clips and basic entrance animations. The best part is that timers can be visually themed to align with your course content. Let's look at a few examples: Card Match Game Try your memory in this card matching game from Richard Hill. First shared in the memory game challenge, this game features an animated timer that puts learners under pressure to complete the puzzle. View and download the timer in action Wait! How’d he do that? The effect was created using Storyline’s wheel entrance animation and a 35-second duration. Using a longer duration, the entrance animation creates the visual countdown effect. Brilliant! One Creative Timer Begets Another Following up in the same memory game challenge, community member Ridvan Saglam used a similar technique for his airplane countdown timer. I really like the way he visually connected the design of his timer to the theme of his game. Ridvan shared a few more visual timers that you can download from this discussion thread. Using Timers to Gamify Existing Slides Here’s an example that Alexander Salas shared for a previous challenge where he took an existing template and gamified it by adding a simple countdown timer. You can download his source file and use that as a starting point for this week's challenge. View and download the timer Using Video Clips as Timers Animated timers can even be created with simple tools like PowerPoint. In this example, Tracy Parish created an animated loading bar effect in PowerPoint. Using a screencasting tool, she recorded the animation as it played back. Learn more and download the source file Because Storyline has a trigger to evaluate when a when a media clip completes, the video’s duration becomes the timer. Challenge of the Week This week, your challenge is to share an example that demonstrates how animated timers can be used in e-learning. NOTE: Your entry can be anything from a rough concept to a polished example. The challenges are open to everyone, regardless of experience or skill level. If you need technical or creative help with your project, please ask in our forums and reference the challenge number you’re working on. Last Week’s Challenge: Before you put the time squeeze on your learners, check out the interactive Tour de France examples your fellow community members shared in last week's challenge: Tour de France Interactive Examples RECAP #297: 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.
