0

I'm just trying to figure out a way to use a swiffy outputted HTML5 animation in an iOS app but I can't drop the grey background. I thought this would be a way to drop animations in and circumvent the storage issues of using a png on a retina iPad display. Now I can't make the background clear. What should I do?

L'esh Aim Show May Eam
  • 1
  • 1
  • 1
  • 1
    Unless you want to use a transparent background for the Xcode application itself (which I doubt is what you want), this question has absolutely nothing to do with Xcode. –  Oct 07 '12 at 05:43

6 Answers6

3

In the code that Swiffy generated, look for backgroundColor and remove it including its value.

Sam Granger
  • 401
  • 5
  • 10
  • FTR, using a transparent "backgroundColor", i.e. -16777215, does _NOT_ work. the value *must* be removed as specified in this answer. – Nirvana Tikku Apr 22 '13 at 19:45
0

Removing the backgroundColor: element did not work for me until I discovered that Google have broken the ability to do this in the current version of the Swiffy runtime. If you also change:

src="https://www.gstatic.com/swiffy/v5.2/runtime.js"

to

src="https://www.gstatic.com/swiffy/v5.1/runtime.js"

at the top of the file you should find that the transparent background works correctly (although, of course, any enhancements in the 5.2 library won't be available any more).

EDIT: It has been pointed out by Michael Prescott that this solution won't work reliably because of a mismatch between the Swiffy converter version and the runtime. An alternative solution that doesn't depend on the presence of the 5.1 exporter is to build on the other solutions suggested here. Try adding the following function to the script. It polls to see when the Swiffy object has installed it's preferred background color and then it replaces it. 

(function() {
    var firstNode=document.getElementById('swiffycontainer').childNodes[1];
    //firstNode.style.visibility = "hidden";
    if (firstNode.style.background=="") {
        setTimeout(arguments.callee, 10);
    } else {
        firstNode.style.background = "none";
        //firstNode.style.visibility = "visible";
    }
})();

This doesn't seem to show a glitch when Swiffy first sets a solid background and then it gets replaced. However to be more certain you can enable the commented out lines to hide the first node until the correct transparency has been set.

best regards

bowerandy
  • 43
  • 1
  • 6
0

Try to locate element with solid background and change it dynamically to transparent, like this:

document.getElementById('swiffycontainer').childNodes[1].style.background = "rgba(255, 255, 255, 0)";

or to none

document.getElementById('swiffycontainer').childNodes[1].style.background = "none";
user2401543
  • 1,059
  • 11
  • 19
  • You'll need to delay doing this till after Swiffy runtime has set the style. Sam Granger's method worked till v5.2 as noted by bowerandy. If anyone finds a more solid way to deal with the changes, I'd be grateful. –  Jun 11 '13 at 17:19
0

None of this worked for me (using ver 5.2), solved by setting new style:

<script>
    var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),swiffyobject);      
    stage.start();
</script>
<style> 
    div {background: url("../bgimg.jpg") repeat scroll 0 0 transparent !important;} 
</style>
Beri75
  • 461
  • 1
  • 4
  • 10
0

According to http://css-tricks.com/override-inline-styles-with-css/ , you can use this CSS hack

div[id=swiffycontainer] > div{
    background-color: transparent!important;
}
Danetag
  • 496
  • 6
  • 9
0

Add this to your css or something similar.

#containerdivid svg > g > g > rect {
    display: none;
}
donnha
  • 1
  • 1