Creative and reliable instructional design services

Before and After (#100)

Articulate Storyline Slider example: Before and After

My mother-in-law owns a small island, off a larger island, off Vancouver island. We go there to unplug twice a year. We were on our way back when David posted the “Before and After” challenge, #100. How timely! We had just finished painting the inside of our little off-grid, rain-water and propane-driven cabin.

This interaction is for my family, so they can see the paint job we did in “Granpa’s Cabin.”

To save time, I tried to recreate Michael Hinze’s example of the Berlin Wall, which I thought was just brilliant! I’ve never worked with sliders before and this was a great introduction, although no triggers were necessary. That Michael is a clever dude. I’m sure I’ll be using more sliders in the future!

Articulate Storyline Slider example; screenshot

Before and After shot of Granpa’s Cabin, with a slider interaction.

To get this to work, I had to really study Michael’s screenshot and blog post.

The After picture goes on the bottom; on a regular slide. The Before picture is the fill for the slider thumb. That’s thinking outside the box! I love learning tricks like this.

Here’s the interaction.

And here’s the STORY file.

One Year Later…

We were back at the cabin again this September and I had a new camera! I wanted to try a timelapse video of the tide coming in. On sunny, warm days we sit on the dock, read and watch the tide come in. It’s a REAL vacation!

With the first photo and last photo, I thought I’d try to recreate the Before&After I made a year ago and it turned out quite well, I think. (The photography isn’t that great. I’ve signed up for a course to brush up on my photography skills.)

Here’s the Tide video and interaction.


6 Responses to “Before and After (#100)”

  1. Benedict Chia

    Hi Jane, this is cool, I see a potential way of using sliders to show before and after from a “waste management / lean thinking” example. May I use your example as a base template?

    Newbie articulate storyline community member -Benedict

    • Jane

      Welcome, Benedict! Absolutely, you can use my slider example. I’ll send you a link to the STORY file via email. Thanks for dropping by.

      • Ed Wilson

        Hi Jane. I loved the slider of the water tide. Would you mind sharing with me the storyline file. thanks.

        • Jane

          Thanks for dropping by, Ed. The time-lapse is a video I generated with new camera. I’ve sent you the file directly. Let me know if you have questions. j

  2. dani jones

    Hi Jane,
    I agree with Benedict. Very cool. May I also get a copy of your articulate story?

    • Jane

      Sure, Dani. I’ve had a few requests for this… there, I just posted it. But I’ll also send it to you directly. Good luck with it!


Leave a Reply to Ed Wilson Cancel reply

Basic HTML is allowed. Your email address will not be published.

Subscribe to this comment feed via RSS

This site uses Akismet to reduce spam. Learn how your comment data is processed.