*** HELP *** Creating a "SCRATCH OFF"

Aug 20, 2013

Good morning, Fellow Storyliners!  I'm seeking ideas on how to create a "scratch off" interaction.  Here's what I'm trying to do...  

The course I'm building is for a cleaning machine.  I've covered how to operate the machine and now I'm showing an item that needs to be cleaned (a refrigerator).  I want the learner to "grab" the handle of the cleaning machine and "scratch off" the "dirt" from the fridge (3 -4 different areas).  The user would click the cleaning attachment, hold it down, and drag it over the top of the dirty area until the "dirt" disappears.  They would then move to the next dirty area and do the same thing.  Once all the areas are "cleaned", it would show that the product cleaning is complete and allow the learner to move to the next interaction.

I've  tried several different approaches with layers, states, and triggers but the solution (probably something simple) keeps eluding me.

13 Replies
Kristin Augusta

I'm not sure this is what you are looking for - but I did something quick to test my theory and it seems to work ok -

Slide with Refrigerator and 3-4 "dirt" shapes on it.  Add a state to each shape called "Drag Over" it should be built in.  In that state, delete the dirt.

Use the triggers on the main layer - Change state of "Piece of Dirt 1" to "Drag Over" when the user drags "Cleaning Machine" over "Piece of Dirt 1".  Repeat with more dirt. 

It's not an elegant solution because it's chunks of dirt - but you could play with the shape fill  - gradient, pattern, etc and maybe make it a little nicer than my quick example.

See if that is what you are looking for?

Ashley Terwilliger-Pollard

Hi Rajiv,

This thread is a bit older, so I'm not certain that they're still subscribed. You may want to send a private message to one of the users who shared a file here. Also they shared the Storyline source file, so you may want to begin by playing around with those and trying to recreate the slide following the same triggers, layers, etc. that they used in those versions. 

Norma Miller

Hi Ashley,

Thanks for your reply.

Yes, I'd love to know what app David used. I first used SnagIt to erase bits, and then I tried blurring, but I was unable to duplicate his very effective "scratch off" effect. I finally decided to just use picture formatting in Storyline to increase the transparency bit by bit - but it wasn't 100% satisfactory.



David Anderson

Hi Norma - 

I really need to post more about that project. 

To fade the images, I used Photoshop so I could control the levels of transparency applied to each coin. But you can achieve the same effects using PowerPoint and shape fills.

Here's how:

  1. Insert your coin image on the slide.
  2. With the coin selected, insert a circle shape over the selected coin. Keeping the coin image selected helps you constrain the circle to the same size as the shape
  3. Copy the coin image (right click > copy)
  4. Select the circle shape and format > fill > picture > from clipboard. That pastes your copied coin image into the circle
  5. Adjust the transparency for the new coin/circle

Here's a quick screencast on the process in PPT '13: http://d.pr/v/qHue (no audio)

You have to do it that way in PowerPoint because PPT won't allow you to apply transparency to images--only shapes.

If you're working with another program, let me know and I'll help you figure it out.

This discussion is closed. You can start a new discussion or contact Articulate Support.