I have been researching hardware and software options for low-cost multi-rotor drones for a while, my inner-geek can’t wait to fly and program one soon. If I could only find the time! There I was on a Friday afternoon, waiting for an open source flight planning software to download, when I happened to see a tweet about Articulate’s weekly E-Learning Challenge: Interactive Screenshots for Online Training.

So I thought why not take one sample screen from the Mission Planner software and ‘bring it to life’. The Mission Planner (I still can’t believe this awesome software is free, open source!) software UI is very complex, with lots of dropdown lists, subwindows and parameter selections. For the E-Learning Challenge I picked one element; a flight planner window that allows the user to select a waypoint and then zoom in and out of a Google map display. I quickly set up a sample flight plan with six waypoints and captured the screen.

All the logic and objects are contained in a single screen, no additional layers or slides were used. Just like the actual software, the Storyline simulation allows a user to select any of the six waypoints and then use a slider to the right of the flight plan window to zoom in and out of a Google map. For example, if you select waypoint#3 and then use the slider, the map zooms to that specific waypoint. At least one waypoint has to be selected for the zoom slider to work.

Based  on the selected waypoint, different maps are displayed. The zoom effect was created with states of custom objects that are changed as the zoom slider is moved up and down the vertical scale.

I could have used hotspots, markers and captions to provide information about the flight plan window, but thought that using a zoom interaction would add more realism to the screen. I was thinking about making the Gauges panel on the left an interaction as well, but then I realized that I would need a connection to an actual drone to get input values for the various gauges. I might come back to this screen at some point and add more functionality.

Here is the finished sample. Can you guess which city my flight plan is for?

Edit 05/2018: I created a similar example in Adobe Captivate 2017, see here.