Buttons under transparent PNG Are Not Clickable

Hey, Rusty.

Do you have the .story project to upload for reference for a visualization?

A transparent area will blocking interaction, object need to be on to of this to be clickable

Thanks, folks - I cannot share the storyline file for privacy reasons :-(.

This is for a client with a new product going to market and the learning environment + UI is designed like their soon to be released product. 

I was able to fix it by duplicating the layer 3 more times and cropping each one so there is a left frame, right frame, top frame and bottom frame. Thereby effectively removing the transparent part of the PNG.

I was really hoping there was a simple setting to allow buttons under other objects to be clicked.

In Flash the opposite was the issue - we had to specifically code things so they could not be clicked on if something was on top of them. I've gone through all the settings and don't see anything... was wondering of there was a way using an expression of some sort to allow clicking of objects under other objects or not..

This is expected behaviour anything transparent paced over another object will block it.

Could you add your frame onto the slide master so it is always below the other objects?

Hi Rusty

in SL its the order of objects in the timeline - like using Bring to front / send to back options

It would ruin the visual experience to haver objects animate in on top of what (in the real world) would be in front of it - however, as I stated, I did implement a solution - I was just curious if there was a faster way around it.

Rusty:

I just replicated your workaround, and it looks as though that's the only way you'll be able to animate those buttons underneath the frame. I don't think there's an easy fix like you want due to ordering on the timeline.

Just for you all to note. It seems transparent png's behave different again when in HTML5 mode, in that your able to click through anything which has png transparency. Which in my case I've used transparent png's as a button blocker, but the opposite is true if using the none html5 (flash) option. 

I do have the same problem. I only tested it in Review.

I have a slider on top of a png. When you move the slider, layers will be visible. On these layers are the same pngs (a little different of course). So, if a layer is visible, the transparent part of the png is above the slider and i can´t move it anymore. I had to put the slider next to the png now and it works, but is not satisfying. It would look better, if the slider was directly in the transparent corner.

So the fix here is to put the slider on its own layer.

However sadly that's not all you'll have to do. The way storyline deals with layers is that even though the order of a layers in the edit mode could be 1, 2, 3, if layer 1 gets called (show layer) then 3 and 2; the order shown will be 2/3/1.

We can use this to create your desired effect still. By every time the sliders variable changes get it to show the desired layer and then the layer containing the slider, even though slider layer is already shown it'll draw it back ontop. You may need to tweak the layer properties to ensure this works correctly. 

Thank you for your explanation! I understand the logic of this solution.

I´ll do it that way, but these workarounds are always the reason I get stuck when I re-open a project half a year later... then I wonder - Why would I do it that way? Or: What have I done here?

I hope in some future-updates there will be the possibility to "reach trough" transparent parts of a png.

Thanks again for your very fast answer!

Yeah I know what you mean. We often put notes on complicated interactions off screen but in a big red box to remind ourselves how the setup works. 

I am having similar problem

https://drive.google.com/file/d/18C3o_FkFtI6dS_SlsdWNvCdT3OyD0AxU/view

https://drive.google.com/file/d/1rf7DcLWUFLwlcOdV5x2G5rIFddtloUVa/view

only an issue if the user is using IE

Chrome is fine, whole button is clickable

What is going on?

Annoy see the content sorry, a button needs to be above the transparent area of a png

Sent from my iPhone

the buttons are part of the feedback layer in feedback master

they are not on the slide itself and there is no png in those question slides

Would you mind sharing either the .story file or a screenshot of what the feedback layers look like in Storyline 360?

Thanks for looking into it

my feedback layer doesn't have much in it, even using just the normal feedback template has this problem

Should be a software bug with the latest update

I already submitted all the files (tons for comparison) in the case #02152984. Do you have access to them?

Thanks, elearning MSH. 

I see that you were able to work with Gerald on this issue and it's being looked into further. I've attached this conversation to the report so that we can share any updates with you here as well.

Hi elearning MSH,

We've reached out to you in your case, but I wanted to chime in here as well that we've released another update for Storyline 360, and among the fixes is an issue where the continue button in feedback master was not working properly in IE 11 on Windows 7 machines.