Forum Discussion
Overlapping States
I've been noticing a randomly occurring, but frequent, issue since the newest update. On some objects, the Normal/Original state will overlap with any other state (Hover, Visited, custom states, etc.)
So when you hover over a button, the text might change color, or an image might change, but the original text or original image can still be seen underneath.
Here is a quick example, a side by side screenshot from a published example:
On the Hover state, the icon is changed so that the bars on the chart sit a little higher when hovered over, though you can still see the original icon being used underneath when this happens. Additionally, you can see the stroke thickness looks more intensified as the images are overlapping. If I did this with a lighter text color on the hover state, and made it bold, you could still see bits of the original text peeking out from behind. I've tried testing this with .PNG, .SVG, .GIF, and other transparent files, but it happens with Storyline assets as well.
Here's another example using an icon built into Storyline. On Hover, the icon should just rotate 90 degrees, however, when in Preview or Published mode - the icon overlaps, and instead of having horizontal lines, we're left with a waffle/grid. Each example was made using a new Storyline file.
What's strange (or stranger) is that I can make a new state, set it to hover, delete all the objects on that new state, copy and paste in place the original assets used, and then swap the icon - and it will still happen.
The only workaround I have is to paste in place the base of the button (in this case the white rounded rectangle) two or three times, depending on any shape effects (e.g. drop shadows), which adding a bunch of objects to one state doesn't always yield the smoothest results once published. Additionally, in some circumstances, doing this causes a flicker effect on the hover state where the new button base flashes in before the rest of the other objects do, or the drop shadow will flicker when hovered over.
Fixes? Workarounds? Is this a known issue that needs to be patched?
No workaround? Anyone? Anyone?
Someone's problem can be anothers persons solution. As far as I understand Storyline it looks like I have used this functionanlity (or is it a bug?) to solve a problem. Is this a fool proof method? Or is better to avoid this kind of solutions? See https://community.articulate.com/discussions/articulate-storyline/state-with-text-shows-the-text-in-other-empty-states-which-is-fine-but#reply-841771
Anyway... Storyline states are still a mystery box for me. Sometimes expected things don't happen and the other way round. It is not easy to follow and to understand. Room for improvement I would say.
I can confirm this is still an issue, and is not expected behavior. What I see in Edit Mode does not matched the previewed or published course. I just submitted a case.
I thought perhaps it was because anything outside the initial bounds of the button shape are ignored, but my attempted fix (starting with an oversized white box, and placing all additional layer objects on top of it) also shows this bug, See sample here (Storyline file also attached): https://360.articulate.com/review/content/89fc3706-9f38-4161-a5b1-bc4b7f684c3e/review
Hello Benoit,
Good call on opening a support case! I can see that my colleague Lianne is now testing your project file. You're in good hands, and we'll let you know about our findings through the support case that you opened.
I get the exact same problem. Is it solved?
Hi Dan,
Thanks for reaching out! I understand you are seeing both your visited and normal button states after returning to your base layer. I have opened a support case on your behalf. You may have seen the support email that was sent. Our support engineers will be in contact soon to help you through this issue.
Solution currently is to make sure objects in different states completely cover up objects from the "Normal" state. I added a filled circle under the checkmark in your "Visited" state to fix your particular issue Dan.
Hi Benoit, Thank you for the tip. I had already done that as a quick fix but this time I sent in to the forum/support. They shoild fix the problem, it's been around for a while.
Hi Benoit, I read your post a little to fast, but now I have just went through my email and read your post again. I did not solve it as you did. I just put an extra button on another layer. Your solution is much better. Really smart and easy, I will use that on every button. Thanks!
Caitlin, check Benoits exelent solution a couple of comments up and download the example file.
Yep, it's really bad and needs to be fixed. I've also escalated a case and here's my sample button file that shows something different on each state. When the learner clicks the button you can see 3 overlapped states (Normal, Over and Down).
It's a complete mess!!!
Hi Brett,
Great call opening a support case! I see that you're currently working with my colleague Philam. You're in good hands! We'll continue the conversation over in your support case.
Have a great start to your week!
Hi - Experiencing the same thing, in different files. This was not an issue previously.
Instead of everyone creating multiple individual support cases for the same issue, is there a general workaround that can be shared publicly? Or better yet, a solution in the next update?
Thanks,
Edited to add:
What I did as a workaround: In the "hover" state, I added a shape (colored the same as the block, with no outline) to cover the area of where the "normal" state text is. This allowed the new text to display without an overlay.
Hope this helps someone until the issue is resolved!
