Trying to implement toggle buttons

Hi Ray, welcome to the Storyline camp!

If I understand the goal properly, one simple way to do it would be to leave the "Normal" state buttons alone, and on each additional layer copy/paste its "On" state button (or rather, a button whose normal state is the "On" treatment you referred to). The On state button will only be visible when its layer is active.

You may also find it cleaner to associate each of the Master slide buttons with a Boolean variable that toggles on clicking, and have each slide load its layers when a given layer's Boolean changes value; saves on unnecessary objects on your slides.

If you can upload the .story file somewhere (shared on Dropbox, maybe?), you can add the link to your posts in this forum.

Cheers,

Carlos

Hi Ray -

You can post your .story file to the forums by clicking the paper clip icon and attaching your file. There's a 2mb limit, so if you're working with a larger file, you'll need to post it to a server or Dropbox. If you have any questions on those options, let us know and we'll share some more info.

In the meantime, I'm attaching a toggle button demo you can look at. Not sure if this is exactly what you're looking to do, but it might help.

In this example, I moved the Play button (w/hover) away from the Pause button (w/hover) so you could see both buttons toggling. In a real project, you'd place the Play button directly above the the Pause button.

Demo

Published

Gentlemen, thank you so much for your suggestions! I would love to post the *.story file, but even with only 1 slide, it is 7.5-8 MB large (probably because of the large number of unused master slides that are left-overs from my imported PowerPoint deck). Just about every commercial file-sharing service is blocked by my company's firewall, so I can't reach any of them to upload the *.story file.

As a possible alternative, I'm uploading screen captures that hopefully show the relevant data, including the logic for my triggers and the organization of my layers and variables.

• toggle_btns_01.png: Shows the basic timeline layers and my trigger logic. Carlos, you can see that I tried re-implementing the trigger logic for the Chemical button using variables instead of states, but got the same "nothing happens" results.
• toggle_btns_02_states.png: Shows the two states for the click Mechanical 1 button (which is really a transparent shape placed over the actual button image, which is on the master slide). The states for the other three buttons are set up identically.
• toggle_btns_04_variables.png: At Carlos's suggestion, I re-implemented the triggers associated with a click on the click Chemical 1 button using variables instead of states. This screencapture shows how the project variables are set up. I created one for each button but only implemented the triggers this way for the Chemical button, so the other variables are unused.
• toggle_btns_05_layer_settings.png: Shows the layer settings. I want the four buttons to operate as checkboxes, not radio buttons, meaning I want the learner to be able to select more than one. Hence, I turned off Hide other slide layers in the layer settings for each layer. All four content layers are set up this way.
• toggle_btns_06_layer_content.png: Shows the contents of just one of the content layers. Here you can see that the checkmark and the text content below the button are on the content layer which should toggle between shown and hidden when the button is clicked.

Hopefully this is enough to give a clear picture of what I've done. I'm sure I must have made a bone-headed beginner's mistake somewhere, but like a lot of bone-headed mistakes, it's hard to find until you know what it is (then it's hard not to see).

Thanks for any insights!

    -Ray

OK, that didn't work. Apparently, I can only attach one file per post. Here's toggle_btns_01.png.

toggle_btns_02_states.png

toggle_btns_04_variables.png

toggle_btns_05_layer_settings.png (see my post with the description list for toggle_btns_06_layer_content.png).

Thanks!

Grr. I just noticed that the triggers panel's width was too narrow in my screen-grabs, causing some of the logic to get cut off. Here's a better screen-shot just of the triggers panel: toggle_btns_03_triggers.png. Sorry about that.

    -Ray

Sorry for the barrage of posts, but it occurs to me that the order in which the triggers are executed might explain the "nothing happens" results I'm seeing.

For example, in the variables implementation for the Chemical button, the chemical variable is initialized to "off" so the first click on it activates these two triggers:

click Chemical 1

    Show layer Chemical content

        When the user clicks

        If chemical is equal to off

    Set chemical equal to on

        When the user clicks

        If chemical is equal to off

I had been assuming these would be executed from top to bottom in the order listed. But if they are executed in the reverse order, the chemical variable would have its value changed first to on and then when the first-listed trigger executes, the "If" condition would no longer be true, so the layer would never get shown.

Could this be my problem? If so, what is the correct way to group mutliple actions together in response to a single trigger event, so that you can control the order in which they occur?

Cheers!

    -Ray

Hi Ray,

Storyline's got a bit of a learning curve, but you'll get there (I'm not there yet).

Here's a sample I think may help:

The Buttons on the Slide Master toggle their booleans to True when clicked. Event 'listeners' on slide 1.1, when a Boolean changes to True, show the corresponding layer, which has the 'Button Selected' overlay. When you close a layer with its 'X' button, or when you click another Master slide button, the layer hides and the buttons 'return' to Normal.

Hope this helps.

Carlos

P.S. You don't need to put the buttons on the slide Master, but it helps if you're templatizing. I just worked on a course demo where the same thing happens with Mouse Hover events, and the buttons were to be seen on every slide.

To answer your question about the order of triggers, top-down is first-to-last, but you also want to be sure the triggers are associated with the right thing. If you want a button-click to do something, put the trigger on the button. If you're waiting for an event like a variable value change, put the trigger on the slide (i.e., make sure nothing on the slide is selected when you create the trigger).  Experiment with putting triggers on different things, because Storyline will offer you different action choices based on where the trigger is.

I'm sure others know what tutorial to point you toward, but those are the basics. 

Cheers,

Carlos

Thanks Carlos! That's a smart workaround in that it achieves exactly what I am trying to achieve. Thank you!

It's not technically a toggle implementation, because we're no longer giving two different behaviors (show and hide a layer) to the same button depending on its current state. Instead, we're cleverly substituting a new button for the "hide" operation. This eliminates the need for the "If" condition and eliminates the need for keeping track of the button's current state.

It still seems like my original implementation should have worked, though. I am thinking that the order in which the triggers are executed is the source of the problem, but that only leads to the larger question of how to trigger a sequence of actions in a particular order.

For example, I want this behavior (executed in order from top to bottom):

click Chemical 1

    Show layer Chemical content

        When the user clicks

        If chemical is equal to off

    Set chemical equal to on

        When the user clicks

        If chemical is equal to off

But not this behavior (same actions as above, but executed in the opposite order):

click Chemical 1

    Set chemical equal to on

        When the user clicks

        If chemical is equal to off

    Show layer Chemical content

        When the user clicks

        If chemical is equal to off -- This condition will no longer be true if the previous action associated with this click runs first; hence, the Chemical content layer won't be shown! (and that is the behavior I was seeing).

The question is, in what order does Storyline execute two or more actions associated with the same trigger? 

Thanks to your work-around, I have a viable solution to my toggle button problem, but I am trying to learn Storyline, so I would still like to understand how Storyline chooses the execution order of a group of trigger actions that all respond to the same event.

Cheers!

    -Ray

Ray,

SL executes the triggers from top to bottom.  Unfortunately, toggling isn't possible with just states and triggers because both triggers end up getting executed.  It's sorta like super powers cancelling each other out!  

For example, let's say you have a Button with two states (On and Off) and it's initially set to off. 

And you add your conditional triggers.  Let's see what happens....

Button is Currently Off:

Trigger 01: Change state of button 01 to Off if state = On.  (button is off, so SL doesn't need to do anything here)

Trigger 02: Change state of button 01 to On if state = Off. (button is Off, so SL turns it On).  Button is now ON!

Now we click the button again, but the triggers are the same...

Trigger 01: Change state of button 01 to Off if state = On.  (button is On, so SL turns it off)  Button is now OFF!

Trigger 02: Change state of button 01 to On if state = Off. (button is OFF, so SL turns it back on)  Button is now ON!

So this is why we get the first trigger change to work, but it won't change back. And hence, the need for an outside party (a variable) to get involved and help the toggle situation.

I hope this helps!  I was in the same exact situation you were in during the beta testing and I wracked my brains for hours trying to figure out how to toggle a button back and forth with states and triggers.  It seems like it should be sooo easy right?  

I hope this helps!

Mike

Ray,

Here's an implementation that could work for you (see attached). Please take a look and let me know if you have any questions. It's basically evaluating the state of a variable (True or False) to decide whether to show or hide a layer and what state to change the button to.

As a side note, if you don't need to have all four buttons (or variations of the buttons) on at the same time, there are some pretty easy solutions using button sets and states.

Peace,

Mike

Here's an example I created to show two ways to toggle visibility and one way that doesn't work.