Strange behavior with my button states
Mar 06, 2017
Hello, I am trying to create an interaction in Storyline 360 with 3 tabs on the left: Work Order, Site, and Tools:
The idea is that this could be a course for construction workers. They will click the Work Order tab to view their work order for this job. They will click the Site tab to get a look at the site where they need to perform the work. And then they will click the Tools tab to select the right tools for this job. At any time they can review the work order or look at the site again by clicking the appropriate tabs.
Whenever learners click a tab, it slides out to reveal a panel. For example, here's a "work order" I just faked up for this post:
When a tab is open, learners can close it by clicking it.
I have the slide-in/slide-out animations and triggers mostly working. They work fine on the first two tabs: Work Order and Site, but something odd is happening when I test the Tools tab. That's actually the most important tab because it is where all the learner decision-making takes place. It extends correctly the first time, then closes correctly the first time. But when I extend it a second time, the state of all the buttons on it inverts. All the unselected buttons become selected! When I close the Tools panel the second time, I do not return to the base layer with the 3 tabs in their closed positions, so at that point, the interaction is totally broken and unusable since no tabs are available with which to continue.
I've attached a silent Replay video that shows the behavior I'm seeing, and a copy of my *.story file. I suspect the problem is related to the fact that the checkbox buttons (and the Submit button) are grouped together with the panel. I think they have to be grouped that way, otherwise I won't be able to apply an animation to the whole panel to have it slide in and out correctly.
I noticed while testing that the hover states associated with the Tools tab and the Submit button are being triggered when I hover over any part of the grouped set of screen objects, not just when I hover over those individual objects (you can see this clearly in the attached Replay video). That seems like a bug to me, but I probably could live with it. But why are the button states inverting? And why do the entrance and exit animations fail the second time, but only on the Tools tab/panel? The layer setup and triggers are the same for all three tabs, as far as I can tell.
Anyway, I'm hoping someone here can take a look and help point me in the right direction to get these issues resolved.
Thanks!
-Ray
2 Replies
Set the layer properties for both Tools-related layers to 'Reset to Initial State'.
Michael, thank you so much for the fast reply! Yes, setting the layer properties to Reset to Initial State does prevent the strange button-state inversion.
Unfortunately, it also clears the learner's selections if he or she closes the Tools tab to review any of the other tabs. I do maintain the state of the learner's selections in an associated set of variables, though, so I was able to put layer triggers on each layer to reset the checkbox button-states as-needed to keep them in sync with the internal state of learner selections as recorded in the variables. I probably have to do this anyway to catch various exception cases (e.g., if the learner decides to visit the course menu in the middle of making his or her tool selections, I want the learner to return to tool layer with the selections intact).
It ends up requiring a lot of triggers, but it works.
I still have the problem with the hover states not being restricted to the button boundaries when the buttons are grouped with other screen elements. Any thoughts on if there's a simple way to ensure that the rollover state only triggers if I roll over the specific button? I could put a 100% transparent shape over each button and manually trigger a state change in the buttons via a trigger, but there are already a lot of triggers in this implementation. (I've attached an updated *.story file with only the first three checkboxes implemented--i.e., the ones for Drill, Hammer, and Paintbrush.)
One feature that would help simplify things is if Storyline supported a trigger action that would allow me to execute a Fly In or Fly Out animation directly. Right now, these animations are tied to the timeline start and end. But it would be much simpler to implement sliding panels if one could have a button trigger that did something like:
Play Animation "Fly In" on Object <name of object> when user clicks.
This would allow us to implement sliding panels on a single layer (indeed, on a single object), reducing the number of triggers necessary substantially. It would also be more intuitive, I think, than having to split up the slide-in and slide-out across two different layers (and hence, two different objects).
But now I'm digressing. Thanks again for your help.
Cheers!
-Ray
This discussion is closed. You can start a new discussion or contact Articulate Support.