A few weeks ago, I took part in one of the Weekly Challenges, called Creating Virtual Tours for E-Learning. I knew right away that I wanted to create an interactive map of Paris using Articulate Storyline. Now—voilá!—I’d like to share a few tips on how I built this fun map of the City of Lights.

View the published version.

Set the Scene

I had already imagined the visual layout with the screen short and wide, similar to a wall map. So, I adjusted the size of my project by going into the Design tab and changing the story size. Then, I found this great map of Paris with really cool colors and icons. I inserted it as an image and cropped it so it fit just right.

I also wanted to give this course an ”invisible” player that matched the blue on the map. So I customized the player colors and edited the background to make it the same as the map color.

Add the Interactivity

Next, I added the interactive elements to my map. For each of the icons I wanted to feature, I created a rectangle shape on the map with the name of the landmark.

Then, I created a new slide layer for each landmark that had an image of the landmark and a paragraph of text. To add a bit of pizzazz, I added entrance animations to the objects on the slide layers.

In general, I like my interactions and demos to have a clear start and a clear finish. So I created some variables that track when viewers visit each landmark on the map, and then added a trigger that displays the “Fin” (End) feedback window once viewers have visited them all. At that point, viewers can choose to exit the course or keep poking around the map.

Final Touches

With the functionality built, I wanted to add a few enhancements to really polish off the interaction. I found this very French-sounding accordion tune, which I dropped into the intro screen as an introductory song. Then, I added this very elegant font, which fits in well with the design.

Finally, I added what some in the Community call an “Easter Egg.” It’s a little surprise for viewers to find that appears at some point in the project. Can you find the one in this demo? If you do, post a comment below and let me know that you found it!

You can always sign up for a fully functional, free trial of Articulate software. And don’t forget to post your questions and comments in the forums! We’re here to help. For more e-learning tips, examples, and downloads, follow us on Twitter.

9 Comments
Nicole Legault