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.
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.
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
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!
Click here to launch the new Image Slider/Gallery.
You can download the Story file here.