17 Examples of Draggable Spotlight Effects in E-Learning #447
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.
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.
Example | Thierry 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.
Amy DeMarco
Can you find where the pirate's left their treasure in this activity?
Julie BIGOT
Embark on the seven islands archipelago: a preserved ornithological paradise in northern Brittany.
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).
Example | Thierry 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!
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.
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.
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.
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.
