A few years ago, before I was working with Articulate Storyline, I saw this cool interaction where you could spin a group of on screen images around in a circle. I later found out that this was referred to as a ‘carousel’.

While I liked the carousel when I first saw it, I haven’t see it around much – the closest I’ve come is where the images scroll from side to side. So I thought I’d try and build a circular carousel in Storyline 2. In my head, the way I saw the interaction working was by using a slider and as you move the slider along the images would rotate in a circle.

I was on the train on my way into work the other day and I started to sketch out my idea on paper. I always like to start this way no matter if it’s for a client project or a simple demo like this was going to be. I find that I can jot down ideas quickly and play with them on paper as I try to arrange and re-arrange my thoughts. So this is how it started:

Then once I have a bit of a clearer idea of where I’m going (it’s never usually finished or fully formed at this point) then I’ll start playing in the tool however I’m still experimenting at this point and I don’t actually know if my idea will work!

To start with I inserted a slider and four coloured rectangles onto a new slide just to get an idea of the layout. To help with the look of the interaction, I made the two rectangles behind the front one slightly smaller and the back one slightly smaller again to give the look of perspective – as the objects move around the carousel they’ll appear to move closer and then further away.

Initially, I thought I’d use a change of state and what would happen is that as you move the slider along, each rectangle would change its state and the new state would be the rectangle in the next position. I started with just two different coloured rectangles (so that I could keep track of which was which). Plus if I started with two and could get it to work, then I could add the other two. It turned out to be a good plan because using states proved to be unsuccessful.

The first two moves worked just fine:

But the next two didn’t:

The problem was that objects on a slide sit at different ‘levels’ depending on where they are in the timeline and in this case the blue rectangle is always going to be above the red one:

So it was back to the drawing board.

This time I thought I’d try it again but using separate layers for each position of the rectangle. That way I could control how the rectangles were arranged as each layer is shown. Thankfully, this way worked much better. Each time the slider moved a position, a different layer would show and because the rectangles are in a new position on each layer it gives the effect that they are moving in a circle:

The next step was to replace the shapes with images and see how it looks. I also decided to add a couple of extra pictures – meaning two extra layers. I wanted to make the front picture stand out so I increased the brightness of the front image and changed the back images to black and white and decreased their brightness. I did this on one image and then used format painter to apply the changes to the other images. I also adjusted the layout and sizing of the images slightly and in the end it turned out like this:

Click the image to view the working demo.

While it isn’t exactly how I envisaged it originally (in my head I wanted the movement from position to position to be much smoother but would be much more complex to create given the objects change size as they move) this method does give a revolving effect and I was happy with the end result. Maybe I could try using motion paths next time…

I reckon the slide could be used for images or videos or even as a different type of menu where you could click on the front image and jump to a topic. You can download the source file from here.

Note: I also want to develop more of a habit of working out loud so I tweeted my progress as I went. It’s the first time I’ve done that as I went along and not just at the end. It’s my habit in progress.