A Storyline Image Carousel
Creating an image carousel from scratch is an instructive learning project for a frontend web developer. I had a feeling the same would be true of Storyline 360.
Accessible
I added keyboard support to expand usability beyond those able to control a mouse or trackpad.
Indicators
Every carousel worth its salt includes image indicators, but how can this be done in Storyline 360?
Automated
Most carousels use a timer to automatically advance images, and this one is no different.
A Carousel in Storyline?
Storyline 360 has three features that ought to make an image carousel possible…
- Triggers
- Logic
- Animation paths
Having created carousels in Javascript, I felt Storyline 360 couldn’t provide all the features expected of a carousel “out-of-the-box,” and so it proved.
For example, Storyline 360 allows custom animation paths, but finding a motion path that allows bidirectional image movement may be impossible.
Even if I’m wrong and overlooked something, the sheer fiddliness of motion paths means we may as well use the GSAP animation library. After all, that’s what Storyline 360 is using behind the scenes.
Image Name
I wanted to display the name of each image in the carousel without adding it to the underlying image.
For convenience, I loaded the names into a Javascript array and wrote a function that retrieves the name of the current image and sets it to the value of a Storyline variable.
Flexible Image Size
A web developer expects a carousel to be able to accommodate any image without having to resize.
Having images of different sizes multiplies the problem of finding an entry position on either side of the carousel and working it into a motion path.
Why waste time fiddling with Storyline’s frustrating positioning system when some simple maths in Javascript offers a robust solution?
The result is a carousel that doesn’t require “just so” image sizing, saving considerable time, both now and in the future, when changing out images or setting up a new carousel.
The Image Indicators
Image indicators are an expected component of a carousel. When the user changes an image, Javascript updates a Storyline 360 variable. I then use this variable to change the state of the indicators.
I wish Articulate would provide direct access to its components via the Player object, but until they do, updating Storyline variables and firing a trigger gets the job done.
Automating Image Change
A fully specified image carousel automates the movement of an image and then stops automatic scrolling if the user clicks on a control or image.
I use Javascript’s setInterval() function to handle this, canceling the instance if the user clicks or presses one of the keyboard controls.
Accessibility
A carousel ought to be as accessible as possible. One way to enhance accessibility is to automate the change of images.
Implementing an image change on keypress is another way to increase the number of users who can enjoy carousel functionality in a project.
- Storyline 360
- The Gimp
- Envato
- Javascript
- The GSAP animation library