Button Fades/Reverse Fades Help

Hi guys. Me and my co-worker were discussing a way to make buttons fade in and fade out between layers. I'll try and explain what I mean as best I can.

If we have a blue button on layer one, and an orange button on layer two. We can use the "mouse hovered over" parameter to change the blue button to orange. We can then place a fade in feature on the orange button. Then when the user hovers over, the button fades from blue to orange, lovely.

What we are having trouble with is fading back to blue from orange when the user is no longer hovering over. I've tried using Boolean variables but so far no luck. The logic is there, just for some reason the program won't do it.

We are using Storyline 2. If you guys have any ideas they will be greatly appreciated.

 

Thanks :) 

7 Replies
Jordan Defty

After a bit of digging I found out you can do it with an SWF file. However, since we will be outputting to mobile devices this is not ideal. I'll link a demo of what I want. The SWF file achieves it, but whenever you add text over to make it look like a button, the animation does not play properly. 

Ideally, I want to try and get a button to do exactly what the SWF does when you hover over and move the mouse away.

http://s3.amazonaws.com/tempshare-stage.storyline.articulate.com/stp19co1807f1cl8cbc1tce1ao9vep4/story.html

Matthew Bibby

No, it is more of an immediate hover behavior.  I don't believe that you can apply animations to state changes. Sorry, didn't realize the fade animation was imperative. 

Maybe the attached file will give you some ideas?

I've added a transparent shape behind the orange square on the layer with a trigger to jump back to the same slide (which is set up to reset to the initial state) when the mouse hovers over it.

This gives you the desired behaviour - although it looked at bit odd at first as when the slide reloaded the blue button went to white before fading in the blue. To get around this I added an orange button behind the blue one (with no fade in) so the transition is more seemless - but this makes it look a little odd when the slide initially loads.

While this will (almost) get you the result you are looking for, it will most likely create issues when used in an actual course as you won't always want a slide to reset to it's initial state.

I recommend just using the built in hover states, but depending on your course, this may work for you. 

Hope that helps.