Combine Two Sliders to Build an Interactive Infographic in Articulate Storyline
The best part of releasing new software features is that users always come up with exciting new ways to implement them. Take sliders. When they were introduced to Articulate Storyline, they opened up a whole new realm of interactive possibilities.
One of my favorite innovative implementations was when Articulate Super Hero Steve Flowers demonstrated that you can control one slider with another. This launched sliders into a new dimension, where designers could create new types of interactions, such as the parallax effect featured in this E-Learning Challenge.
At last year’s Learning Solutions Conference in Orlando, I demonstrated how you can leverage this trick to build this interactive infographic.
The core of the interaction is the combination of two sliders, one of which is hidden. The main slider (the oil can) controls a slider that is hidden behind the background and “fills” the United States image. This hidden slider has a large custom thumbnail that slides up and fills the blank space.
Pro Tip: The image of the United States was actually cut out of the colored rectangle using PowerPoint’s shape combine tool.
Add a few layers, a little trigger magic, and some basic design work, and the next thing you know you’ve got a really cool, interactive infographic. In the following video, I’ll show you how I created it. If you’d like a quick slider review, this video will provide you with some slider basics to get you started. And here are some items to help you build along with the video.
Do you have experience using sliders to create interactive infographics? Tell us about it in the comments below. And don’t forget to follow us on Twitter and come back to E-learning Heroes regularly for more helpful advice on everything related to e-learning.
17 Comments
Hi Mike, Thanks for the great tutorial! I am following your video and trying to cut-out the shape of a wine bottle using the 'Merge Shapes' feature in PowerPoint, but am unable to do so. I don't know what I am doing wrong. First, I used a PNG image with a transparent background, but everytime I subtracted the shapes, I got a rectangular cut-out instead of the wine-bottle shape. Then, I tried using an SVG image, but that didn't help either. Lastly, I even tried converting the SVG image into a shape using the 'Convert to Shape' feature in PowerPoint, but that didn't work either. However, when I try it with basic shapes in Powerpoint, such as circles and stars, it works. Will this feature only work if I have a shape, and not an image?? If so, how did you make the shape of the U... Expand
Hi Anuradha, I think PowerPoint may have changed the way it works with these items (such as .pngs) since I first recorded this video in 2015. I've been playing in PowerPoint today and it appears that .pngs are always cut along their outer boundaries (the square) vs. their non-masked boundary. And .svgs won't work after you convert because they are grouped objects, and it appears that PowerPoint will only combine/subtract/etc. individual (not grouped) shapes. So, the answer, at this point, is that you'd need to convert that wine bottle .svg into a single shape. Here's how: 1. Insert the .svg into PPT 2. Convert into a Microsoft Drawing Object (at least that's what it's being called in PPT365 right now) 3. Ungroup the resulting image into its various shapes 4. Select all... Expand