Storyline button states

May 05, 2020

Greetings -

I have a button with four states (normal, hover, incorrect drop, correct drop). I have four images: one man in four different poses (inserted from SL library). Each button state has one of these images. 

When the states are activated, the normal image stays and displays on top of the other image (e.g., hover image).

The image in the normal state of the button is nowhere else but in the normal state. I don't understand why it's not being hidden when the other button states are triggered. 


Thank you!

11 Replies
Leslie McKerchie

Hi Amy,

Thanks for sharing your .story file so that we could take a look. It took me a bit to realize that you'd manually added the individual characters to your states vs. adding them to the slide timeline.

It sounds like you've found a workaround, but I created a second slide in the attached sample to demonstrate the behavior when the character is added directly to the slide and then the states do not overlap.

Amy Nicholson

Hi Leslie - Very cool - thank you. So, was it because I had a second object, the rectangle, in the button that caused the behavior I was seeing? Seems like that is the only difference. A couple of things I like better about my approach: 1) the character is part of the button and so is clickable, and 2) the triggers are a bit simpler (which is not a big deal, but to note). 

It does not seem intuitive (to me anyway) that this would be the case - I have states with graphics - why are they not being correctly activated? (Rhetorical question here, unless of course you know.) Perhaps it's just a SL bug/quirk. 

Anyway, I did build it with layers, so that seems to work. 

If you have more info (re, my questions above or other) I'd love to hear. But either way, thank you!

Lauren Connelly

Hi Amy!

I'm happy to help! I used Leslie's file to include the changes you've listed here.

To make sure both the character and rectangle are clickable, I added the Character first and then changed the states of the character to include the rectangle.

By doing this, you'll also not have to use as many triggers! 

I've explained how to create this in this short screen recording.

Amy Nicholson

Hi Lauren - Thank you for the video and explanation. Seems like a good work around. I don't get why the graphic (the rectangle) from the normal state still appears in the hover. I do understand what you are saying and that if aligned, the new rectangle (mustard color) will cover the normal version so as to seem like is not there. And that works if they are exactly the same size/shape and aligned. Not sure why it is like that though - shouldn't it just change to what my button states contain? Is that a SL bug? Thanks again. 

Amy Nicholson

Hi Walt - actually, I think what you said is not true. I just did another test. The hover state graphics do not display over the normal state graphics. See attached. 

My work on the original file is complete, but I would still like to understand how SL works and if this is a bug or by design. Thanks. 

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