Creating an image carousel in Storyline
Lately, it’s becoming a trend in my job, that interactions designed for eLearning modules are becoming more and more challenging each day, especially, since it was announced that browsers will stop supporting Flash altogether, which means that all those cool interactions or animations, that were originally developed in Flash, will have to be developed either directly in Storyline or in HTML5.
I admit that jumping into HTML5 development can be even more challenging an time consuming than figuring out how to create things directly in Storyline, especially when one doesn’t have a programming background.
That’s why I decided to put together a short tutorial (well, a 2-part tutorial) on how to create a carousel with images using Storyline. Here is what we are going to cover:
Setting up our scene
Importing images and arranging them on the canvas
Grouping objects
Motion paths
Creating triggers
Let us begin!
Setting up your scene
This is probably the easiest part, but be mindful that whatever you set here, cannot be changed later on, since it could affect the layout we develop.
For this type of activity, I prefer setting a scene with a widescreen resolution (16:9 aspect ratio), so let’s choose a size of 960x540 (a quarter of 1080p).
Importing images and arranging them on the canvas
So, this is where it gets real. Let’s start by selecting 5 different images, hopefully they have the same size, so that the interaction plays nicely.
Tip: Preferably, resize the images in Photoshop or any other photo editing software, so that you can ensure accuracy and consistency when applying the transformation to all the images.
Then, arrange them one after the other in Storyline, like the example below:
Like on the screenshot above, make sure the first image you want to appear on the carousel is centered on the slide. As you may have noticed, the slide here is zoomed out so you can appreciate how the images are arranged.
Grouping objects and ‘jazzing it up’ a bit
First, group all the objects since the motion paths will be applied to the group, not to each individual image. To achieve this, select all the images in any order and press CTRL + G.
Now, let’s add some details to make it look like this:
Notice that I moved the group by one image so that you can see all the elements that were added to the slide.
Stay tuned for the next part of this exciting tutorial and make sure to drop by our website (www.pathwaystrainingandelearning.ca) to learn more about eLearning modules, animations, learning videos and read some of our other interesting blog posts!
