Drag and Drop that Shows Slide Background

I want to create a slide in which the learner drags a shape (looking like a magnifying glass) across an image and reveals different items as they do it.

I am thinking a drag drop interaction with a slide background image containing the items, then the same image on top without the items and a shape set to show background.

When I preview, as soon as I click the shape it is permanently filled with the background image where it was placed. I can move it all over the screen but the image inside the shape remains the same.

Advice? Link to a slick tutorial?

Thanks in advance!

10 Replies
Ashley Terwilliger

Hi Ian,

Are you using the trigger "when mouse hovered over"? There is a check box there to restore on mouse leave, so that the item would not stay once the mouse leaves. If you're still having difficulty it may help to post your Storyline file (or a sample/mock up) here with us so we can take a look at what you've set up. 

Ian Minderman

Thanks for the reply.  I shifted gears here.  Now I am trying to just get the pics to appear when the black circle is dragged over the hotspot.  I have done this, but I would love for the coding you suggested to work.  It does not for me.  I'll post some pics.  Suggestions welcomed!!

Ashley Terwilliger

Hi Ian,

It may also be that the file is too large to upload in the forums, as Simon mentioned you could strip it down to that particular slide (do a save as for the file so you don't impact your original file). Or could you use a service such as Dropbox and then share the link here with us? 

I can also share directions on how to send the file to me privately. 

Ashley Terwilliger

Hi Ian,

Thanks for sending that along - and I've just replied with an update copy of your file, and wanted to share the workaround idea here for anyone else following along:

Thanks for sharing your file here with me. I took a look, and since you're using the "object dragged over" trigger, there isn't an option for "restore on mouse leave." What you could do, is create an additional hotspot that covers the whole slide. You'll want to send this to the back so that the other hotspots appear through. Then you'll need to add an additional trigger for each picture so change the state to hidden, when the object (your circle) is dragged over the large hotspot. I've set this up for the boat picture so that you could see how it works. 

Also, I noticed that you had your images changes states at the beginning of the timeline, and this may be because of a previous slide, but you can also set the initial state within the "States" tab for each image and you could choose hidden. One less (or in this case 5 less) triggers.