Overlapping States

Apr 05, 2022

Spencer Wolf
By Spencer Wolf

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:

Example of Issue/Glitch

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.

Example of Issue/Glitch 2

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? 

 

 

61 Replies
Spencer Wolf
2 years ago04/05/22 at 12:57 pm (UTC)

So in short;

  • Any custom button's Normal state will overlap with any other state (hover, visited, down, custom, etc.)
  • This happens regardless if I use SL-library icons, .SVG files, .PNG, .GIF, etc. 
  • Copy/Paste in New State does not work.
  • Copying and pasting the base object multiple times (so 3 rectangles instead of 1 for a new state) and then the other assets (icons, text, etc) does work, but causes some odd behaviors on the states (slow/delayed reactions, shape effects acting abnormal, flickering layers, etc) 
  • This issue started with the latest Storyline update.
Lon Goldstein
2 years ago04/16/22 at 7:30 am (UTC)

I think I'm having the same issue, or a slight variation. I'm using the hover state on 99% transparent rectangles to show popup text boxes. The text boxes are set with white fill that should cover anything below it. But in preview/publish some of them have lines showing through them that appear to be from other rectangles below them. This happens for some but not all of the rollover rectangles so I'm not certain if its this bug or if I'm missing something. 

See the behaviour here: https://360.articulate.com/review/content/0a29792f-ea1e-4eb8-9728-680648671cba/review

Storyfile is attached also. 

Thanks for any ideas. I guess I'll submit this to tech support also as it might be the same issue. 

Lon 

Andrea Koehntop
almost 2 years ago06/03/22 at 6:37 pm (UTC)

Hi Chantall, and welcome to the E-Learning Heroes community! ✨

I apologize for the issues you are having with states overlapping.

It would be helpful to take a look at your project file so we can investigate further and try to replicate the behavior you are experiencing. You can do that publicly here, or privately in a case. We will delete it from our systems when troubleshooting is complete. 

Andrea Koehntop
almost 2 years ago06/06/22 at 8:40 pm (UTC)

Hi again Chantall! Thanks for sharing the .story file with us. 

You have great states set up on your timeline for the Normal and Highlight states for each of the different menu options on your timeline.

However, the only triggers I see are to jump to the next slide when the menu reaches 8.5 seconds and change the state of Rectangle 19 (which is #3 on your menu) to Highlight when the Timeline reaches 3 seconds.

I tested this on my end by adding another blank side. As your trigger currently says to do, it jumps to the next slide after 8.5 seconds, even though I did not click on anything on your slide. I'm not sure if you want it to do that automatically.

Also, the highlighted state automatically overlapped over Rectangle 19 (also known as #3 on your menu) when the timeline reached 3 seconds. 

I think you will want to set up a trigger to jump to the corresponding different slides when the user clicks on other menu options. This article on using Triggers in Storyline should get you started in the right direction. 

If you want to use the built-in menu option in Storyline instead of a custom-made slide, you can learn more about customizing the Storyline player menu here. 

Let us know if you need additional assistance; we are here to help! 

Maria Costa-Stienstra
almost 2 years ago06/16/22 at 7:56 pm (UTC)

Hi, Professional Development Unit.

Thank you for reaching out!

I don't see a case opened by Chantall, but I looked at the file they shared. In that specific scenario, re-creating the states (by cutting/pasting) on the shape fixed the issue.

If you can share a .story file, I'm happy to take a look and help you troubleshoot. If you prefer to send it privately, you can open a support case with our team. 

Kelly Auner
over 1 year ago09/13/22 at 1:27 pm (UTC)

Hi Maria, and welcome to the E-Learning Heroes community! ✨

Are you having a similar issue? If you can provide some details about what you're experiencing or share your project file with us, we'll be happy to take a look! You can upload your file here, or privately in a support case. We'll delete it from our systems once troubleshooting is complete.

Katie Birdwell
over 1 year ago09/14/22 at 11:06 pm (UTC)

Hello, I'm having the same issue with states overlapping. I have attached an example file. I've included notes on each slide within the Storyfile, but I'll include them here too:

  • Slide 1 - My clickable objects are rectangles that have a text box pasted into their states. On the "Disabled" state, the text from the "Normal" state is still visible. I have built interactivity this exact way for years, but have not had an issue with the text from the "Normal" state showing on the "Disabled" state until the most recent update of Storyline 360.
  • Slide 2 - I used the "Visited" state on the 4 Rectangles on the base slide to signify the user has completed the requirement of viewing the associated layer but they are still able to view the info again if needed. The text is typed within the shape itself, not an additional text box pasted into the state like I did on Slide 1. The issue occurred on each of my 4 Rectangles: the text/number from the "Normal" state is still visible on the "Visited" state, and the check mark from the "Visited" state is visible when the "Hover" state is reengaged after being changed to Visited.
  • Slide 3 - The issue did not occur on this slide. I used stand alone text boxes instead of rectangle shapes. The text from the "Normal" states was not visible on the "Disabled" states of my clickable text boxes.
  • Slide 4 - I used text boxes again, but an issue occurred: the blue glow from the custom "active" state is appearing around the letters on the "Disabled" state. The blue glow around the text that is showing when the text boxes are changed to "Disabled" is not formatting on the Disabled state, I'm guessing it is a remnant from the glow applied on the custom "active" state.

I tried to be thorough, but please let me know if I need to provide any additional information! Thank you!

-kb

Admin Qulturum
over 1 year ago09/15/22 at 7:04 am (UTC)

I have the same problem :(

It seems like my states works like they should if I only use text, but when I add an icon both "check" and "hover" state is shown when "check" is active.

I think it is related to the latest version of Storyline cause I have never experienced this problem before - it has always worked.

Jose Tansengco
over 1 year ago09/15/22 at 2:55 pm (UTC)

Hi Katie, 

Sorry to hear that you ran into this issue. I can confirm that I was able to observe the behavior on my end as well, and troubleshooting steps such as importing the slides to a new project file didn't help fix it. 

We are currently tracking a known issue that causes non-normal state to show all objects from the normal state even if the non-normal state does not contain them. I went ahead and opened a support case on your behalf so we can verify if this is the same bug that is affecting you, as well as discuss possible workarounds for the issue. Thanks for raising this with us, and someone from our team will be reaching out to you shortly.

Hi Admin Qulturum,

It looks like you shared the same file as Katie's. If you're experiencing a similar behavior, please open a support case here so we can check what's happening. 

Diarmaid Collins
over 1 year ago10/12/22 at 12:20 am (UTC)

Hi Articulate. I also experience this issue. I have mentioned it a few times in the past and seem to get fobbed off with a "that's expected behaviour" response.

Great to see that there seems to be an admission that "We are currently tracking a known issue that causes non-normal state to show all objects from the normal state even if the non-normal state does not contain them."

This has been an issue for a very long time. What does it take for it to become an issue? When a certain amount of users complain? When an indefinable amount of time passes? When development budgets allow for troubleshooting?

Douwe Harder
1 year ago03/07/23 at 6:23 pm (UTC)

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.

Benoit Doidic
11 months ago05/11/23 at 3:22 pm (UTC)

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

 

Sign In to Reply