Click to Reveal Interaction
May 27, 2016
By
Maia Wintrob
I am new to using storyline and am trying to make a "click to reveal" activity. Is there any easy way of doing it besides making 40 different triggers?? I've attached a picture to what I'm trying to achieve along with a demo. Or if you know of any good tutorials that would show me how to do it, I would really appreciate it!
The triggers get really confusing once I have so many inside the interaction.(This is the website that it's on. Go to the Click to Reveal section on the menu to see a live demo)
13 Replies
The picture
I'm not sure what you think you would need 40+ triggers to achieve an interaction like this. To me it looks like a button set and one trigger per button that displays a layer. You can always upload your .story file here so that someone can have a closer look.
I've uploaded the file and it is the last slide. There are two version because I didn't want to mess up the first one in case I added too many triggers and get confused! Take a look and let me know if I made this more complicated than it should be. Thank you!!
See attached. I revised slide 1.9 by:
- adding the buttons at the top to a button set. Here is some info on button sets.
- editing the slide layer properties to Hide Other Slide Layers.
Hope that's what you wanted.
Yes that's what I wanted!! :) But how do I make the buttons go back to the "normal" state of grey once they move to another click. I don't want them all to stay blue. Only turn blue when they are clicked on.
Never mind!! I figured it out!! Thank you very much!!
Maia, I am new as well and trying to create a click to reveal like this one. How did you get the buttons to return to their original state?
Hello Steve and welcome to E-Learning Heroes. 😊
Thank you for reaching out to share what you would like to create with your project as well.
I'm not sure if Maia is still subscribed here, so I wanted to pop in to help.
You can set triggers to manually adjust the buttons to return to the Normal state when another button is selected, but it may be easier to build your using the built-in states and taking advantage of their behavior.
For example:
Let us know if you have any further questions!
Thanks, Leslie. What I'm really aiming for is a set of buttons or images that change when you hover over them, but not permanently.
And when clicked, they will reveal content using a layer. But what is difficult to map out is the ability to hover over and for instance show a highlighted drop color border of sorts and then when you click the image display that changed "selected look" image until a different image is clicked on.
I'd like to have it Return to its original state if a different button is clicked. Not sure if that makes sense, but so that only the presently clicked image would have the selected look of the drop-down color border, no matter if you've clicked all of them numerous times.
Hi, Steve.
Thank you for the additional details!
It sounds like a Button set would work for what you're looking for! You can adjust the states, so each button has Hover and Selected states that differ from the normal state.
Then you can select all your buttons, right-click, and choose to create a Button set.
What this does is allow only one button to be selected at a time.
Let me know if this helps!
These are all actions built into SL. They will work if you let them, but if you create triggers to make them take these actions, you will mess them up.
Change when you hover over them, but not permanently. This will happen if you give the object a state called Hover. It returns to original state when hover leaves it.
Display different state when clicked. This will happen if you give the object a state called Selected. Selected is a toggle state; when you click, it is selected, when you click again, it is Normal.
Reveal content when clicked. This will happen if you create a trigger: "Show Layer 'XXX' when learner clicks on object 'YYY' if state of object 'YYY' is = Selected. Layers default to hiding all other layers, so a layer will show only until another object is clicked.
Return to original state if different button is clicked. This will happen if you select all the objects, right-click, select Button Group, and select a name, making them a group. Only one button in a group can be selected at any one time, so all others will return to original state when another is clicked..
Thanks for this information, Walt, greatly appreciated!
Absolutely! I now have two really great ways to accomplish this, button sets and the additional information Walt provided. Thank you both!