Buttons under transparent PNG Are Not Clickable

Dec 16, 2014

I have a storyline project that has a frame around the outer edges created by making the center of a PNG file transparent. 

I did this so I could animate things in and out underneath that frame. The problem I have is nothing interactive on the stage can be clicked underneath that PNG file. 

Is there a way to fix that?

19 Replies
Rusty Worden

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

Claudia Scheel

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.


Stephen Hodge

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. 

Claudia Scheel

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!

Ren Gomez

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.

Just launch the Articulate 360 desktop app on your computer and click the Update button for each application. Details here.

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