Web Objects limited
Jun 19, 2014
Ok so I made an animation in Edge cause it does nice and easy animations in HTML5. I wanted to try and get the background transparent but there is no place in the settings of a Web Oject to set it this way. Only way I've seen online to do this is using Edge, importing it into InDesign using the .oam file and have InDesign recognise it as HTML5 and gives me options to set the background to transparent. Then import that into Articulate Storyline. Now I simply don't have InDesign, this is just the only way I've found online to maybe get this to work, which is extremely long winded.
So maybe I am missing something, maybe there is a setting I'm not seeing, either way I would love to know how others got around this issue.
Also, no matter the size of the stage I use in Edge Animate or the size of the web object, they never sync up. So for example I'd have the dimensions 400x300 for the Edge stage and the web object is 400x300 also, but when I SCORM it and upload it to my server to view, it comes up too big all the time. Like, the animation is always too large and scrolling options show up in order to view it all. Its very strange.
Any help on either or both of these issues would be very helpful.
6 Replies
bump o'clock!
Hard to believe there is no answer for this, BUMP!!
Hi Ros,
I've pinged some folks to see if they might have some insight. Is your goal to get the animation to play in Storyline with the Storyline background showing? I'm not sure if this is possible using a web object...but I'll let the community chime in.
Mike
You can make a Web Object background transparent for a Web Object. I've used this before to block out the seek bar. It worked in a few browsers but not others so I gave up on it. In your case, since you're looking at HTML5 and using web objects for content, it shouldn't be a problem. It's been over a year, I remember it being relatively simple to modify for transparency.
I believe all you need to do is need to set your background to transparent within your web object. Something like this in your published Edge output should work within your style tag.
body {
background-color:transparent;
}
Give this a shot.
I assume you are using Edge Animate; the properties panel has the settings for the stage color/transparency that can be adjust as well as responsive scaling to prevent the overflow that I notice often occurs when importing the published output.
Hi Ros,
By default web objects are transparent in most browsers. IE8 will give you a hard time with this. That being said there are a few variables that go into the occasion... Like maybe your WO is setting a body background color?
As for the size issue... there is a good chance the WO's Body padding and margin are push the size up a bit. Use CSS to set those at 0px.
This discussion is closed. You can start a new discussion or contact Articulate Support.