Sleeping Habits of the Rich and Famous Slider
This Articulate Storyline slider interaction is based on the Sleeping Habits of the Rich and Famous infographic created by Big Brand Bed's. I found the infographic on Cool Infographics and thought it would it would be easy to convert into a slider interaction because of the repetitiveness of the content. Each famous person has a name, picture, description, circular icons showing how many total hours they sleep each night and a timeline of the specific times they sleep.
When I first starting thinking about how to create this, I thought I would put each person on a separate layer that would be shown and hid based on the location of the slider. So I inserted a slider onto the base layer and created the timeline using rectangles, lines and text. I created a new layer and titled it Winston Churchill. I turned off the dim feature and inserted his name, picture, description, circular icons and bars showing the times he slept on the timeline. I repeated this process for Nikola Tesla. Now that I had the content for the first two positions of the slider, I went back to the base layer to look at how to setup the triggers. I created a trigger to show layer Winston Churchill when the slider 1 is equal to 1 and a trigger to show layer Nikola Tesla when slider 1 is equal to 2. When I previewed the project, the interaction worked as long as you clicked and dragged your mouse. However, as soon as you let go of the mouse button, you could no longer move the slider. I played around with the triggers and did a Google search but it looked like this idea wasn’t going to work. So my next thought was to try using states. I deleted the two slide layers and went back to my base layer. The problem was that I needed a shape to change the state of. So I created a white rectangular box positioned below the slider but above the timeline. I added a new state to this rectangle and labeled it Winston Churchill. Here I inserted his picture, the circular hour icons, his name, description and bars for the hours he slept. I repeated this step for Nikola Tesla. Then I created two triggers. The first one changed the state of rectangle to Winston Churchill when slider 1 moves equal to position 1. The second trigger changed the state of rectangle to Nikola Tesla when slider 1 moves equal to position 2. This worked. My slider was now changing the content for each famous person as the slider moved. So I repeated this process for the rest of the people. Then I created a title slide and a slide with the key. |