FREE TRAINING – Get Instant Access
Double Your Results – Top 3 Strategies for Your Creating & Scaling Your Online Business

Interactive Screenshot E-Learning Challenge

A VPN is an essential component of IT security, whether you’re just starting a business or are already up and running. Most business interactions and transactions happen online and VPN


interactive screenshots

This e-learning challenge was first posted on the E-Learning Heroes blog on March 14, 2014. Challenge link

The challenge is to create an interactive screenshot for use in training. The challenge itself is pretty simple, and any can be accomplished in any e-learning authoring tool in a relatively short period of time. I used Articulate Storyline for this example.

The graphics I used were created outside of Storyline; just eye candy masking a pretty basic project. At the heart of this project it consists of: the primary screenshot, zoom-in shots of the areas of interest and interactive objects (buttons, in this case). You can capture and create all of these elements within authoring programs like Storyline and Adobe Captivate using their built-in tools.

For my screenshot I chose a program I’ve come to rely on quite a bit in my day-to-day work routine called Flamingo ( It’s a front-end for instant messaging services like Google Talk, and allows you to manage numerous messaging clients simultaneously within a streamlined interface.

To start I identified what I considered to be the five primary areas within Flamingo’s interface. I clipped those image areas out of the main screenshot and saved them as individual PNG files. Using Storyline’s master slide editor, I pulled in the screenshot and background composition I created earlier in a different program and set it as the default background for my slide. In addition to the main layer for my project, I created five additional layers that would serve as my individual pop-outs when the user clicked on the corresponding button.

Starting with the main layer, I added in five buttons in each area of interest on my screenshot. Then, one by one, I modified each of the five pop-out layers to include one of the zoomed-in images I clipped before, along with a caption (with exit button) explaining what the user was looking at. I also included a semi-transparent rectangle shape that functions as a “shade”, eliminating most of the visual noise and helping the user focus on the important content. All that remained was to add in a fade-in animation for some of the elements, and finally mapping each of the buttons from the main slide to their corresponding layer. Clicking a button from the main layer triggers the action of opening a new layer. Clicking the exit button attached to the caption within that layer triggers the action of hiding that layer. That’s it!

Interactive screenshots are really useful in training, particularly in helping users navigate through a software program. It’s an efficient alternative to using a video simulation to walkthrough an interface, allowing the user to navigate in a manner that suits them. Another common use of interactive screenshots is in the creation of interactive maps that identify areas of interest. Whatever the purpose, interactive screenshots are a simple and very effective way of creating a more engaging and immersive learning experience.

Tara L Bryan

Our mission is to inspire, educate and give business owners the strategies and skills to build an infinitely scalable online business that will allow them to make a bigger impact and income without sacrificing the customer’s experience or adding more time to their already full lives. 


New Episodes

Learn Academy Mentorship

Learn Academy Mentorship

Transform your impact and income – Create and Grow a scalable online business using the proven Infinite Scale™ Method.

50 Ways to Engage Your Customers

50 Ways to Engage Customers in Your Online Programs - Free ebook

Get 50 strategies to maximize your time AND deliver an amazing experience to your customers.