Blog Post

Challenge Recaps
3 MIN READ

17 Examples of Draggable Spotlight Effects in E-Learning #447

DavidAnderson's avatar
10 months ago

Draggable Spotlights in E-Learning RECAP #447: Challenge | Recap

This week’s challenge asked course designers to show how draggable masks can be used for interactive spotlight and magnification effects in e-learning.

Jonathan Hill

I've used Storyline's native features, including zoom regions, state changes and drag and drop, to show how spotlight and mask effects can be used to draw the eye and create drama.

Example | Jonathan Hill | Website | @DevByPowerPoint

Adam Zamczyk

This is a magnifying glass effect, combined with the Tilt.js function, that gives a more dynamic view of the main image.

Example | Adam Zamczyk

Jodi M. Sansone

I came upon the films of wildlife photographer Robert Fuller this week and used two of his videos to explore a Kingfisher nest through a "peephole".  I used a couple Storyline features—a drag and drop, motion paths, keystrokes to move my peephole around, and the soundtrack feature.

Example | Jodi M. Sansone | Website | @jodimsansone

Thierry EMMANUEL

My demo combines the zoom effect, the ability to move the image to search for details (a sort of "masking effect" I hope) and video control.  I use JavaScript code for the zoom effect. 

ExampleThierry EMMANUEL | Website

Chris Hodgson

Discover the different organisms that live on the surface of our skin by taking a microscopic-level zoom in this Articulate Storyline demo. Navigation can also be controlled by clicking on each hotspot as well as keyboard-only using the Tab key.

Exampl & learn more | Chris Hodgson | Website | @skriss

Jayashree Ravi

Dive into the 'Ruined Gallery Adventure,' where you, the art lover, explore a forgotten sanctuary armed with a torchlight. Collect four hidden masterpieces, use sliders to restore them, and witness the magic unfold.

Example | Jayashree Ravi

Amy DeMarco

Can you find where the pirate's left their treasure in this activity?

Example | Amy DeMarco

Julie BIGOT

Embark on the seven islands archipelago: a preserved ornithological paradise in northern Brittany.

Example | Julie BIGOT

Thierry EMMANUEL

I revisited the magnification effect to explore distant space. You can find my .story file attached in the comments, along with the JavaScript code provided by Jonathan Huguenin (thanks to him). 

ExampleThierry EMMANUEL | Website

Dana Kocalis

How good are your QA skills - can you spot the issues?

Example | Dana Kocalis | Website

Paul Alders

I worked on a different variation of the flashlight interaction. Probably because a mobile phone is more obvious to use than a flashlight.

Example | Download | Paul Alders | Website | @paulalders

Thaddaeus Smith

I combined last week's challenge with this one by using 3D objects in Drakehill's eerie study to solve riddles and escape. I programmed the flashlight to return to the center if moved off-slide and added hints for locating objects and solving riddles to prevent getting stuck.

Example | Thaddaeus Smith | Website

Melissa Wimbish

I created a simple interaction based on the example from Paul! Enjoy!

Example | Melissa Wimbish

Steven David Meikle

This slide, created in Storyline, is from a Rise 360 project about building and environmental considerations. The project was created in Storyline, and the graphics were designed in Illustrator.

Example | Steven David Meikle

Reuben Harper

My example involves masking objects using a spotlight. The learner must complete tasks to continue their journey on an experimental craft. This has gamified elements which involve the learner in problem solving. 

Example | Reuben Harper

Erin Parks

This is my first time posting but I thought these e-learning challenges might be a great way to learn more. This isn't exactly an 'exploration' activity, but I've included a few slides from a photography course I created, showcasing how I used masking in the activities.

Example | Erin Parks

New to the E-Learning Challenges?

The weekly challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I'll update the recap posts to include your demos.

If you have a blog, please write about your challenge example. I'll add links to your blog post so your examples get even more exposure. And for those who share your demos on Twitter or LinkedIn, please include #ELHChallenge so your network (and Articulate!) can track your e-learning coolness.

Share Your Interactive Spotlight Examples!

The spotlight and masking challenge is still open! If you have one or more ideas you'd like to share, please jump over to the original challenge and post your links in the comments section. I'll update this recap page to include your examples.

Published 10 months ago
Version 1.0