Articulate eLearning Challenge #84

Mt. Tsar is featured in my Image Slider.

Mt. Tsar is featured in my Image Slider.

This is my first eLearning Challenge for Articulate’s Community. What fun!

The challenge was to simulate an image gallery or slider using Storyline 2. I used my own photos from a mountaineering trip in the Canadian Rockies from 2011. I resized and cropped the images to be the same size and to fit the slide.

The Base Layer with the gallery buttons along the bottom.

The Base Layer with the gallery buttons along the bottom.

I started with a Base Layer. I added an image and flat buttons to indicate which image you’re looking at. Subsequent images are on individual layers. Each button has a main trigger: “show layer x when user clicks”. The buttons have two states: “normal” and “selected”.

All colours were sampled from the Base Layer image. The green trees were sampled then lightened to achieve the green button colour.

Here’s the simple gallery.

I wanted to add forward and backward arrows so users could click in a linear manner. I made the arrows in Illustrator, sampling the sky and gave them 75% opacity. Added the triggers… but then the gallery buttons (the dots) didn’t follow. I played around with variables to try to get my green dots to appear as expected. And this worked going forward but not backward.

Left and Right Arrows on images

These arrows worked to view the photos, but getting the dots to follow was another story!

Then I began to wonder if I should have created the dots on the master slide. I tried that and fouled everything up! I also started to think about the ‘slider’ part of the challenge and wondered how I might use transitions or motion paths to make that work.

The lessons I’ve learned from this challenge are:

  • Use larger photographs!
  • Variables are fun but require lots of testing and troubleshooting
  • Keep it simple (don’t think too much!)
  • Use master slides to better advantage

I’m looking forward to taking part in more eLearning Challenges! This one was easy until I tried to make it more complicated, but that’s when I did the most learning. J

Update: One week later…

The weather was pretty crappy today so I had a chance to tackle this again. Bigger images this time and I got the final solution to look and act like I wanted! I’m so relieved. In the end, no variables were necessary, just a lot of layers. Kudos to Michael Hinze for the inspiration!


Here's the solution I wanted to post last week.

Here’s the solution I wanted to post last week.

Click here to launch the new Image Slider/Gallery.

You can download the Story file here.




2 Responses to “Articulate eLearning Challenge #84”

  1. Jackie Van Nice

    Congrats on your very first challenge entry, Jane! The result is beautiful, and I agree with David that this post explaining your process and lessons learned is terrific – a good illustration of the trial-and-error process we all go through to learn more in pursuit of the results we want. Thanks for sharing it!

    • Jane

      Thanks for visiting, Jackie! While lurking, I certainly noticed your tremendous generosity and support in the community. “Hero” is an apt title. You and David go a long way to make us all feel safe and welcome. Thank you for your time here today, but also for all you do for the community. You rock! j

Comments are closed.