Disable Hover state on custom button until timeline ends or interactivity complete

I have created a trigger for the next button to be enabled once the timeline has ended or once all interactions have been completed, however the hover state is still active while the button is disabled. Please could you let me know how I completely disable the button so the user is not able to hover over it. See attached file for an example of the button.

7 Replies
Ned Whiteley

Hi Qasem,

You currently have the initial state of the Next button set to Disabled, however this will not prevent the Hover state appearing when the mouse hovers over the button. If you set the initial state to Hidden, the Hover state will not be activated and the button can still be made visible when the timeline completes.

Qasem Parvez

Hi Ned,

Thank you for your reply. By doing this the button will get hidden. I do not want the button to be hidden.. just want it there that the user cannot click on it until timeline ends or all interactivity is complete.. Is there a  trigger I can use or something to stop the hover over state.

Ned Whiteley

Hi Qasem,

I don't believe that there is a way to temporarily disable the Hover state; however, there is a way that you could achieve what you are after. It's not a particularly pretty solution, but it would work:

a.  Create a copy of the Disabled state of the Next button image as the Normal state of a new button and place it underneath the Next button.

b.  Set the initial state of the original Next button to Hidden (all you should now see is the new Next button image, which will look like the Disabled state of your original Next button).

c.  Change the state of the original Next button to Normal when the timeline ends. You should now see the Next button and the Hover state should also now work.

Note:  You shouldn't have to hide the new Next button image as it sits underneath the original Next button and so should no longer be visible.

Hope this helps and isn't too confusing!

Qasem Parvez

Hi Ned,

Thank you very much for this, it worked perfectly, exactly what I was after.

Also I have another issue with the next button when using layers. Would you be able to assist please. 

I have got a hotspot on each layer. The user clicks hotspot1 on layer1 this then goes to layer2 and the user clicks on hotspot to (on layer2) go to layer3 and so on... This issue I am having is that the next button does not work and I do not know how to setup that once all layers have been visited the next button is then in the normal state.

Thank you

Ned Whiteley

Hi Qasem,

If you create a new True/False variable for each hotspot (initially set to False) and change them to True when the hotspot is clicked, you can then keep track of which layers have been visited. I assume you also have a button or hotspot to close the last layer, which can be used to confirm the final layer has been visited.

You then set up a new trigger that changes the state of the Next button to Normal when the final button / hotspot is clicked and all the other hotspot variables are True.

If your Next button is already in the Normal state, but you can't access it because the last layer overlaps it, all you need to do is have a button that closes the last layer. Also, make sure that when you are using the hotspot to show the next layer, that you first close the current layer. Otherwise, they will simply stack up on each other and hide your Next button.

Qasem Parvez

Hi Ned,

Thank you very much for your kind assistance.

I am confused on as to how to enable to next button after all hotspots on the various layers have been visited..

Please see attached example of table with hotspots on various layers..

I want the user to visit all of them before they can click on the next button.

 

 

Ned Whiteley

Hi Qasem,

In version 2 of your Storyline file I have added three True/False variables for finitialVisited, Test3Visited and Test4Visited and then used the selection of Test5, when on layer Test4, to return the user to the base layer by simply hiding the current layer. I have basically included enough variables and triggers to enable you to understand how to complete the slide depending on how many test layers you wish to include.

At each step I have included triggers to change the appropriate variable to True, hide the current layer and then show the next layer. The final trigger changes the state of the Next button (Rectangle 8) to Normal when the final hotspot (in this case Test5) is selected, provided the three new variables are all True. Note the order of the triggers as this is important.

The other thing I have done is to include your arrow and text in the Normal state for Rectangle 8. This avoids you having to double up on triggers for when the Next button is selected.

If your intention is to only allow the user to select the next test layer on the list, you could avoid using all the new variables and simply change the state of the Next button (Rectangle 8) to Normal when the final hotspot is selected as the only way to get to that position is by first visiting all of the layers in turn.