Forum Discussion

Spencer's avatar
Spencer
Community Member
3 years ago

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? 

 

 

  • 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! 

  • 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. 

  • Hi everyone,

     

    I am having the same issue. What is the solution to this?

    I have a normal state (font size 12) and a highlight state (Bold, font size 14). When state is set to change from Normal to Highlight, it overlaps!

    • PhillipMcCrary's avatar
      PhillipMcCrary
      Community Member

      Did anyone ever answer your specific question about the states? I am also having a problem with the normal state showing while I have an object on a timer to show a new state. 

  • Hi Lon!

    I appreciate you contacting our support team as well and I'm glad that Mick was able to help.

  • 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 

  • JamiePaolo's avatar
    JamiePaolo
    Community Member

    I am having the same issue. Was this resolved? If so, what is the solution? Thank you!

  • Hi, Spencer.

    Thank you for opening a support case with our engineers! I see you're working with Lianne, so you're in great hands. 

    Please reach out through the case if you have additional questions. 

  • Spencer's avatar
    Spencer
    Community Member

    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.