Spotlight Masking and Exploring Effects in E-Learning #447

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

This week, we’re looking at a super cool way to create explore-type activities. Inspired by a recent example from Paul Alders, we’re looking at using draggable objects – think of a magnifying glass or a spotlight – and use them to explore specific parts of an image.

Check out this example and see what I mean.

Storyline: Room Exploration Interaction

Room Exploration Interaction by Paul Alders

Why is this interesting?

When you think about drag-and-drop, it's usually associated with sorting or sequencing interactions that mimic real-world actions. You know, like moving an object and dropping it onto a designated target. Pretty standard stuff, right?

But in this particular example, Paul’s doing something a bit different. 

The drag object isn't meant to be dropped onto any specific target. Instead, it's used to explore the slide and uncover hidden areas that trigger click events. Essentially, the act of dragging becomes a tool to uncover these clickable targets.

Now, let's talk about the masking effect.

How does it work?

There are various approaches you can take here. You could use external software like PowerPoint to create a hole-punch effect for your spotlight mask. And for 360 purists, you can even do it all right within Storyline 360 using the donut and frame shapes.

Using shapes in Storyline 360

🏆 Challenge of the Week

This week, your challenge is to show how a spotlight or masking effect can be used in explore-type activities.

You can go classic with drag objects for your spotlight effect. But if you're new to Storyline 360 or want to try something different, try using sliders, dials, or click-and-reveal interactions to reveal areas of an image.

How would I use sliders to create this type of effect?

Hey, that's a great question! Here's a clever idea Jodi shared in an earlier challenge. Now, imagine using multiple sliders combined with click events. Using Sliders to Magnify Parts of a Photo

View the example | Download the source

How can Rise 360 users participate this week?

No worries, we've got you covered. For all the Rise 360 users out there, this presents a fantastic opportunity to explore blocks in new and different ways.

For example, try using the labeled graphic block with a semi-transparent image, and add markers that, when clicked, magnify or highlight different parts of that image. 

As always, if you get stuck, or just want to bounce around some ideas for your demo, don't hesitate to ask in the comments or hit us up on the forums.

✨ Share Your E-Learning Work

  • Comments: Use the comments section below to link your published example and blog post.
  • Forums: Start a new thread and share a link to your published example.
  • Personal blog: If you have a blog, please consider writing about your challenges. We'll link to your posts so your great work gets even more exposure.
  • Social media: If you share your demos on x or LinkedIn, try using #ElearningChallenge so your peeps can follow your e-learning coolness.

🙌 Last Week’s Challenge:

Before you shine a light on this week's challenge, check out the interactive ways to rotate and explore 3D objects in e-learning:

20 Ways to Rotate & Explore 3D Objects in E-Learning #446

Rotating 3D Objects in E-Learning RECAP #446: Challenge | Recap

👋 New to the E-Learning Challenges?

The weekly e-learning 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.

Learn more about the challenges in this Q&A post and why and how to participate in this helpful article.

📅 Next Week’s Challenge

  • Challenge #448 (02.02): Tabs Interactions. It's a back-to-basics week and tabs are a great place to start.
  • Challenge #449 (02.09): Emphasis animations. You've been asking for this, and now it's here! Show us how you're pulsing, shaking, teetering your slide objects to life.

Got an idea for a challenge? Are you interested in doing a webinar showcasing how you made one or more challenge demos? Or do you have some comments for your humble challenge host? Use this anonymous form to share your feedback:

Jonathan Hill
David Anderson
Amy DeMarco
Paul Alders
Adam Zamczyk
Jodi M. Sansone

Bonjour Heroes. I'm a little stressed because for the first time, I've imagined and worked in advance on the topic David gave last week on "Magnifying glass and spotlight masking effects". I chose the Magnifier part and dived into the Zoom effect... which doesn't seem to be exactly the topic anymore (just "Masking Effects")? But some demos seem to explore the zoom effect as well, so... 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 JS code for the zoom effect. I know that the MISSION I'm giving you is difficult, may be IMPOSSIBLE, but please let me know if you succeed (without giving the answer). NB: the solution is available on the last slide. Expand

Chris Hodgson
Jayashree Ravi
Dana Kocalis
Dana Kocalis

Hi Nadia I think you could achieve something close in Storyline 360 Beta. It has a new Emphasis animation. One of the animation options is zoom. You could create or crop the zoom area (part of the image) to its needed size and lay it on top of its matching background. This top element is "invisible" to the naked eye. Next, add a trigger such as Emphasize with Zoom when learner hovers or drags item (magnifying glass labeled "Drag") over "Zoom Area". I tried something similar last night when I was playing around. If you aren't able to switch to beta, you can create this effect manually in Storyline 360. Instead of the new animation (Emphasis), you would create the Zoom effect on a separate layer by adding the "Entrance Zoom" animation to the state of the cropped elem... Expand

Paul Alders
Thaddaeus Smith
Thaddaeus Smith
Paul Alders
Thaddaeus Smith
Reuben Harper
Erin Parks
Ilona Winnemore