Giving a webobject a transparent background
Aug 15, 2017
I would like to add transparency to my webobjects background. I need to do this to get the items in the webobjects to animate via their JavaScript ontop of my Articulate stage. I have tried every way possible - adding JavaScript to the index.html for the webobject, adding CSS to the script, changing the stage to have transparency. Nothing works!. Somebody must have been able to achieve this somewhere. I see a lot of potential for webobjects but not if the background stays white.
Can you help me.
Cheers
Luke
14 Replies
Hi there Luke, thanks for your post!
What version of Storyline are you using? We've seen some issues with web object transparency in Storyline 360 HTML5 recently, so I'm wondering if you're seeing the same thing.
If you are using Storyline 360, try publishing your file with Flash only to Articulate 360, and view it in a Flash-enabled browser. Do you see transparency there?
Hi,
Thanks for the feedback.
I am running Storyline 2, did that version have any problems?
Ah, okay! I haven't seen any issues reported in Storyline 2. Perhaps you could share a copy of the slide with the web object here, and folks in the community who have successfully done this before can assist!
OK So here is the webobject and the slide for people to play around with.
Appreciate the help BTW
Bumping this to encourage feedback regarding my transparency issue.
I have an issue as well with a web object not showing transparency in Storyline 360 published output. I've seen similar questions from 3 months ago. Is there any new thoughts on this?
Hello Ray!
We have the issue within 360 filed as a bug report to our team internally, so we are aware.
I will add this thread for tracking user impact as well as to be able to update here when we can. As Alyssa shared above, it seems to be working ok in the Flash version when published. Is that what you're seeing as well?
We can't count on any users to have flash plug-in installed any more so we have to have the HTML5 version as the default user experience.
To me, since its a functionality that previously existed it should be easy to figure out what has changed. Since BG transparency in HTML5 is a simple tag, there must be some error in how SL is importing and parsing the HTML5 output in the webobject.
Thanks for keeping this issue as top-of-mind; it really is a significant amount robust animiation capability that is being lost to your customers - even if they stay within your ecosystem and aren't aware of it for their needs.
Hi Ray
Absolutely - and I know a few other users mentioned experiencing this only in Flash, but you're seeing it in HTML5 as well? Are you experiencing that across browsers or only certain browsers?
This is in HTML5 output to all browsers I know of. I'm using SL 360. This is apparently known bug so I'm monitoring here and other threads for the bug fix.
Ray, did you see the workaround posted here? https://community.articulate.com/discussions/articulate-storyline/web-object-background-transparent
This might work for you until Articulate fixes the issue.
Thanks Ray for confirming, that'll help as our team investigates!
My solution with Storyline 3 :
add trigger to execute javascript on the begining of the timeline where is you webobject and
execute this javascript :
var myWebObject = document.querySelector(".webobject");
myWebObject.style.background = "transparent";
For me it's "ok"
This discussion is closed. You can start a new discussion or contact Articulate Support.