FREE: Aviation-themed 4-part carousel interaction with gamified progress meter

Hey everyone!

For the upcoming #ELHChallenge, Showing Progress, I have built this aviation-themed carousel interaction.

Check it out!

On a recent business trip to Gibraltar, I got stuck in the British Overseas Territory when my flight home was canceled at the last minute. Fortunately, I was traveling with only a cabin bag.  I watched as the other passengers reclaimed their luggage, unable to 'move on' until they had collected every item, and inspiration struck.

My demo contains two progress meters: a traditional 'bar' meter and a 'gamified' progress meter in the form of a luggage trolley. You need to fill the trolley to move on. 

The demo will then automatically restart, but the idea is you would progress to the next section in a real course.

In this short write-up, I wanted to highlight a quick method of creating a 'progress bar' using Storyline's gradient settings and state changes.

This progress meter is simply two rounded rectangles grouped together:


The inner shape has 5 states, as there are a total of 4 items to collect from a starting point of '0':


For Steps 1, 2 and 3 I applied a 2-stop gradient of 25%, 50% and 75% to create a hard edge between the two colors:

This creates a 'bar graph' effect, which is triggered by changes to the 'progress' variable.

In a similar way, the trolley has 5 states - empty through to full - which reflect the user's progress:   

The trolley and each item of luggage are SVG images that I created in Powerpoint: 

As you will see in the master file, the trolley and progress meter appear in their own layer, which is triggered to reappear on top of the other layers without hiding these layers - to allow for a 1-second overlap and smooth transition between each step.

The entry and exit animation on each layer is controlled by the 'pause/resume timeline' trigger.   The timeline is paused once the group of items containing the text and luggage arrives, the luggage is hidden when it is collected (appearing on the trolley via a state change), and the timeline resumes  - allowing the remaining items in the group to continue their exit animation. 



Please contact me at jon@engagebraintrain.com if you have any questions about this demo.

Safe travels!

@DevByPowerPoint
Find me on LinkedIn
Visit my website