Spotlight Masking Effects for Discovery Activities 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.

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.

🏆 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.

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:

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:  https://bit.ly/ElearningChallengeForm.