Behind the Scenes: The Interactive Timeline Challenge

About the Challenge

‘Interactive Timeline’ was the core of Challenge number 250 posted in the Articulate Storyline Community.


My Entry

The Thinking
Timeline depicts either a change or an evolution.  I decided to create an entry focusing on ‘change’. To elaborate, I thought of creating a timeline showcasing the actors who’ve played ‘James Bond’.
James Bond intrigues me. That’s because James Bond is one of the few characters with whom I don’t share a direct connection.  I’ve never watched a James Bond movie; my dad has watched all the installments and hero-worships James Bond.
The Idea
I wanted to present the timeline from ‘somebody’s perspective’. The first candidate my mind proposed for this ‘Somebody’ slot was a ‘James Bond fan’. Visually, the idea was to have kiosks lined up alongside a walkway. As the fan moves forward, the kiosks were to display image of the actor who has played ‘James Bond’.

glass walkway with interactive kiosks lined up. Kiosks displays James Bond

Timeline from a James Bond Fan’s Perspective

Having finalized my idea, I began browsing for the right images. This act of browsing resulted in an unexpected development:  ‘James Bond fan’ got dislodged from the ‘Somebody’ slot; ‘A Villain’ became the new occupant.

This development happened because when I was browsing for images of actors who had played ‘James Bond’, several of these images had a ‘gun barrel’ in the backdrop. That’s when my mind conjured a new visual: A villain rotating the gun barrel to take aim at James Bond and depending on the time frame, a new James Bond appearing.

This meant that my timeline was going to be from the perspective of an antagonist.

The Mechanics
To create a rotating gun barrel, I decided to use the Articulate Storyline’s dial functionality.
Layout wise, the time frame (that is the years in which a particular actor played the role) was to be placed over the gun barrel, and the center space was to be utilized for displaying the image and the name of the corresponding actor.
The Execution
The first task on my list was to create a circular time frame. I checked the Internet, and found a Youtube video that demonstrated how PowerPoint can be used to create a circular text.

Circular dial displaying time frame text.

Circular Time Frame Created in PowerPoint
Once the circular time frame was created, I placed it over an image of a gun barrel. Then, I grouped them to create one single image.  Next, I imported the image in Articulate Storyline and converted it into a dial.

Articulate Storyline dial showing circular time frame and James Bond mascot

Interactive Dial in Articulate Storyline
Now, it was time to get the dial to function the way I had visualized. This meant customizing the dial values. Next, using states and variables, I created triggers that mapped the time frame with the corresponding actor.

Storyline Trigger Panel and Storyline States

Triggers Mapping the Time Frame and the James Bond Actor

When compared with the character ‘James Bond’, my interactive timeline sorely lacked a style quotient. So, I started analysing ways to up the style quotient of my creation.

The first thing I noticed was that my interactive dial did not have a visual hierarchy. There was nothing on the dial that separated the active timeframe from the inactive ones. After much deliberation, I settled on ‘Stars’. That’s because a star is often used as a military insignia worldwide. Given that James Bond is supposed to be a part of the British Royal Navy, I thought a star would be a befitting way to create visual hierarchy.

Next, I decided to choose the colors for the background and the label displaying the actor’s name. I decided to use navy blue and red, the colors associated with the British Royal Navy.

Articulate Storyline dial showing James Bond actor and circular time frame.

Color Palette


The Final Take

The name’s Perspective, a Villain’s Perspective.

Leave a Reply

Your email address will not be published.