*** 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
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?
Hi John,
I've uploaded a file of what Kristin explained. If you want the learner to hover over the "dirt" for a while I think a bit extra Java Script is needed.
Hope this is useful.
Hi John,
Here's a sample I worked on during the beta. It should get you going in the right direction:
Scratch and Win: view
Source: download
Tutorial: view
Here's a variation I did based on David's example erasing writing on a chalkboard. You need a font named eraser.
Eraser sample story file
Oh how I hoped Gerry wouldn't see this thread.
I never thought to do a counter. That's exactly what i'm looking for. Thank you everyone for getting me going in the right direction!
This is awesome...
Has or can anyone do a quick tutorial on how to set everything up in a basic form?
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.
Hi David,
Love the ScratchAndWin interaction, but I can't figure out how you created the states for each star. How'd you do that? Especially the final state, that's just a red outline...
Norma
Hi Norma,
I don't know for certain, but I suspect he modified the image in another image editing software and then added them into Storyline as the state changes.
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.
:-(
Norma
I know he's a big fan of Photoshop - but you may want to send him a private message as well to see if he could share more information with you. Also, those images in his demo file, you should be able to copy them out and reuse the images if they'd fit within your design.
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:
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.