Web Object overlay in Flash output

Apr 20, 2016

Hello @all, I`ve imported a html5 animation in storyline as web object. The animation were built in Animate CC and exported as html5.
After publishing the Storyline project as Flash and html5 version, there is an issue within the Flash version. The div element which contains the iframe of the web object has an z-index of -1. When the mouse hovers over the web object, the z-index is changing to 100 and overlays all other objects.
Firefox additionally comes along with a flickering of the web object, when the mouse hovers over the web object.
This behaviour affects only the Flash output. The html5 output of Storyline works perfect.

The main problem is, that we have an individually build Player an Navigation and the flipped out menue is overlayed by the web object on mouse over (See the two attached pictures).

I hope, anyone can help.

Regards, Stephan

6 Replies

Ashley Terwilliger-Pollard
Staff

8 years ago04/20/16 at 4:17 pm (UTC)

Hi Stephan,

Thanks for sharing the images here - but I'm not sure I'm clear on what you're experiencing with what you have shown here. As far as the web objects, when inserted into Storyline if you hover over them they'll be the top most item. Also, it's worth noting that the Flash content is supported in a number of browsers, but HTML5 content in Storyline is not supported in Firefox and you can see the information about all of our browsers here. Firefox is known to block Flash content as detailed here, so you may want to confirm that you are seeing the Flash output vs. the HTML5 there.

Lastly as I couldn't tell from your image, are you viewing the content locally or have you uploaded to your server or LMS to test? Testing it locally could cause you to encounter security restrictions as detailed here.

Stephan Burkhardt
Author

8 years ago04/21/16 at 11:50 am (UTC)

Hi Ashley,

Thanks for your answer. I think, the most important point was your first Link. I didn´t know that web objects were temporarily moved to the topmost layer on mouse over.

Is there any way to prevent this behaviour?

I will test my project in an LMS.
The screens were taken from an online version.

BR,
Stephan

Richard Hill

8 years ago04/21/16 at 12:16 pm (UTC)

Stephan,

A trick some of us use is to place an invisible square over the content we don't want clicked, or hovered over- like video or webObjects. It's simply a colored square with formatting set to full transparency. This will prevent the mouse over on which areas you might need to protect. If at a point you need to click in that area change the state of the square to hidden(with a trigger), and you will be able to click. It's hard to tell exactly what you're after in the pictures, but I hope this tip might help out anyway.