Interactive Maps Storyline 360 – An Example

And yet again we decided to spice up our days and participate in the weekly Elearning Heroes challenge. The theme was interactive maps in Elearning. Obviously, we couldn’t miss such a great opportunity to draw some nice visuals!

Interactive maps

As the name says, this Elearning interaction contains clickable or differently interactable maps. They can be a great way to present various content. For example, locations of stores, routes, territory borders and as well as any other information that can be put on the map.

Our example

At first, for us, the maps primarily associates with travelling and journeys. You can see, travelling and adventures are close to our hearts, we already have a few adventure games in our portfolio. This time we wanted something historic. Therefore, we chose two unique historic travels and…one modern one to give the challenge more of today’s breath. Moreover, as we are proud of our Latvian roots, it seemed very fitting to praise one of our own.

FasterCourse_Interactive_Maps_Example

How it’s built?

The template has three main views:

  • intro
  • selection view
  • map view.

Keep reading to find out more about them in detail!

Intro pages

Intro view has a slide transition to move to the next slide – selection view. Then, the selection view contains three clickable icons with normal, selected and visited states.

FasterCourse_Interactive_Maps_Example

Maps

The map contours are pre-made images. However, the routes are drawn in Storyline, using the Curve tool and then styling them as needed.

FasterCourse_Interactive_Maps_Example

On the mouseover, markers display a piece of popup information. Popups are made with Storyline built-in shapes and adjusted as the content demands.

FasterCourse_Interactive_Maps_Example
Everything is styled with some custom ship (or boat) images and Storyline animations to give it a nicer transitioning effect.

Feel free to explore the full template and use it for your own adventures!

Download for free

Want to learn more about how we built this example? Feel free to download the source file, explore it and use it for non-commercial purposes. If you would like to use this Storyline template for commercial use, please consider subscribing to the FasterCourse Storyline template library.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *