Anti-Aliasing causes some edges to be visible when they should not be

Mar 22, 2019

Hi,

I have attached a demo file.

The demo has three stacked rectangles (mouse-out, mouse-over and mouse-clicked) on a high-contrast background. A hotspot over the rectangles is used to trigger mouse-over and mouse-click events to determine which rectangle becomes visible.

When the hotspot is clicked, the uppermost rectangle becomes visible, but the edges of the rectangle beneath it are still visible. This is especially noticeable if you move your mouse in and out of the hotspot after clicking - you'll see dark edges appear and disappear. I believe it is anti-aliasing that is causing this. I'm not a graphics expert so could be wrong.

I have repeated the test using JPG images rather than native Storyline shapes and get the same issue.

Is this behavior considered a bug?

Many thanks in advance.

4 Replies
Noel Read

Hi, interesting problem. It seems the blue box is still flashing under the orange box and this means you can see a blue line around the orange box when you roll your mouse over the orange box. I made the blue box a few pixels smaller and then centered it and tried it again and the blue line 'flash' isn't there. The orange box is static - in that it doesn't change when you do a mouse roll over. But you could set up a state for that if you wanted the orange box to change state on mouse roll over. Noel

Matt C

Thank you for your reply.

Making the lower rectangle smaller is not really a solution. If these rectangles all depend on pixel-perfect alignment with neighbouring objects, this difference in size will be impossible to hide.

The problem with using states is that they don't behave as expected, and the "solution" does not work for all use-cases (I am planning on starting another thread on that subject). The only solution to my exact use-case is to use hotspot triggers with totally independent objects for each state.

This discussion is closed. You can start a new discussion or contact Articulate Support.