6 Steps to Creating a Beautiful Interactive Timeline (with Download!)
I frequently share interactive e-learning timelines in the downloads section of E-Learning Heroes (here and here, for example) because they’re a popular and versatile item to use in e-learning courses. I recently added Interactive Timeline for Storyline 2, and thought it might be helpful to share the process I used to create it in Articulate Storyline.
Looking for Inspiration
When I want a starting point for a design I often look to my trusted friend, Google Images. In this case, I wanted to create a timeline so I Googled “timeline infographics” and one of them caught my eye. Can you guess which one inspired my design from looking at the image below?
The History of Hosiery, in the bottom right hand corner, has a beautiful, colorful design that appealed to me, so I decided to use that as my visual starting point.
As you can see, Google Images is a great way to look at beautiful designs and get inspired—the key is to take some of the elements you like about a design and modify them to become your own, not to copy exactly.
Background and Player
Once I had my design inspiration, I started by editing my background to make it a solid dark gray. On my slide, I also added a rectangle with rounded corners, with no fill and a white stroke. This creates a frame around my content. At this point my slide looks like this:
Next, I hopped into the player properties window and edited my player to remove the resources link, menu, volume icon, and other extras, to make the player “invisible.” I also adjusted the colors of the player to the same dark gray as my slide background, and then set the browser background color to the same color. The player properties window gives you a preview of how the player and the background fill will look with your settings, as you can see below.
Title and Timeline Bar
Next, I popped in my title and subtitle. For my title I wanted a nice thick, chunky font, so I used a custom font called ZalamanderCaps. For the subtitle, I used Open Sans, a default font available in Storyline. Next, I inserted shapes: First, a white line across the slide to act as my timeline; then, a few ovals to serve as the stops on the timeline, which I distributed evenly among my line shape using the align feature available on the format tab.
I wanted the ovals on my timeline to become completely white when moused over or visited, so I gave them a few new states: hover, selected, and disabled.
My next step was to create the colorful text boxes that appear on the timeline. For this, I inserted rectangles, and edited them to be nice, bright colors. For each box, I added my text directly into the shape. I also added small white lines connecting an oval to each rectangle. Now it’s all starting to come together!
I set the initial state of all of the shapes (white lines and rectangles) to hidden, so that when the screen is first displayed, the text boxes will not be visible. They will only be visible once the learner clicks the associated oval stop on the timeline. Once I’ve set all the initial states of those shapes to hidden, the slide looks like this:
Triggers and Animations
Now that everything on my slide is in place, the only thing missing is the interactivity. So I inserted triggers and the animations, which truly help to give this interaction a polished, professional effect.
I added three triggers to each stop in the timeline. The first changes the state of the line shape from hidden to normal; the second changes the state of the rectangle shape from hidden to normal; and the third changes the oval shape to the disabled state once it’s been clicked. I used Storyline’s copy-and-paste triggers feature to duplicate all of these triggers (one at a time) for each oval.
My last step was to adjust the timing of my objects on the timeline and to add animations all around. I added some fade-in animations for the title and subtitle text, and made the timeline fly in from the left side. I also added a grow animation to each line shape that connects the timeline to the rectangles, and the rectangles themselves all got a fade-in animation. Finally, I adjusted the timing of all the animations from .75 to .50 to make it all flow a little more quickly. These small details can make a big difference in the final output.
Previewed and Published
With everything in place, I click through the entire interaction to make sure it works exactly as it should. This usually leads to some tweaks and changes—for example, after I previewed the first time, I decided to adjust the animation timing. When my preview was perfect, I published and—voila!—a fun and colorful interactive timeline, built in about 15 minutes. Here’s the final output:
I’d love to hear your feedback on this timeline, or on the process that went into it. Is this similar to your process? What do you do differently? Did you learn anything interesting from this example? Leave your comments below; we love to hear your thoughts!
Want to try something you learned here, but don’t have Articulate software? Download a free trial, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning.