Trying to obtain a transparent background with Swiffy

Question

I'm trying to use Google Swiffy to convert some simple Flash to HTML5. I need the resultant output to have a transparent background. I've read on other sites and here on SO that removing the ("backgroundColor":-65536,) text from the HTML should work. However, for me this just turns the background black.

Perhaps the Swiffy converter has changed and this solution no longer works. Does anyone have any other alternatives.

(I'm using Safari and Mobile Safari for testing)

score 12 · Answer 1 · answered Oct 07 '13 at 05:56

google's answer-

If you need to make the background transparent, as done by the wmode="transparent" attribute, you can insert the following code snippet in the Swiffy output, just before the call to stage.start():

stage.setBackground(null);

You can also replace the null with any valid CSS color specification string to override the background color from the one defined in the conversion.

https://www.google.com/doubleclick/studio/swiffy/faq.html

worked for me good luck

Awesome. Worked for me. Thanks for pointing this out. *sigh*, I should read the documentation better. — lislis, Dec 11 '13 at 15:58

score 6 · Answer 2 · answered Oct 03 '13 at 22:48

6

Here's another CSS trick that worked for me with the 5.2 runtime. I added class="swiffy-transparent" to the #swiffycontainer div and applied this css:

.swiffy-transparent svg g > g > rect {
    fill: transparent !important;
}

answered Oct 03 '13 at 22:48

rmarscher

5,596
2
28
30

Thanks I used to used local version of swiffy JS and modified certain line to get transparency yours is better. – Mahmoud Fayez Dec 02 '13 at 20:35

score 4 · Answer 3 · edited Nov 28 '13 at 11:41

4

is easier than you think, only identify this line in your html script:

<script>

  var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
                               swiffyobject);

  stage.start();
  stage.setBackground(null); <!--and only have to add this line-->
</script>

edited Nov 28 '13 at 11:41

Nazik

8,696
27
77
123

answered Nov 28 '13 at 11:22

user3045616

41
1

score 2 · Accepted Answer · answered Jun 11 '13 at 17:47

For the very simplest usage of Swiffy service or the *.swf.html that they output (assuming you're using jQuery somewhere in your web app):

setTimeout(function() {
    $('#swiffycontainer *:first-child').css("background", "transparent");
}, 100);

The delay is to wait until Google writes their style to the container div. This is an awful solution because it will cause flickers if you don't manage the presentation of the div; however, I imagine most developers are managing the swiffyobjects and creating their own API for controlling it.

score 2 · Answer 5 · answered Jun 14 '13 at 21:56

2

Try setting the background-color to transparent in your CSS with !important. This worked for me.

#swiffycontainer div {
  background-color: transparent !important;
}

answered Jun 14 '13 at 21:56

Rvrbr8

21
2

bowerandy · Answer 6 · 2013-06-11T19:24:32.323

Sorry to answer my own question but I've now discovered that method of deleting "backgroundColor: nnnn" in the Swiffy output has been broken by Google in the current version of the Swiffy runtime. If you also revert to the previous version of the runtime by changing:

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.

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

This may not work in all cases because Google couples the swiffyobjects that their online compiler creates to the runtime version. Matter of fact, none of our previously compiled animations work with 5.2 runtime. We often need to recompile animations as parts change, so we're forced to move to 5.2. And as noted, 5.2 is setting the background colors even when swiffyobject.backgroundColor=undefined. — , Jun 11 '13 at 17:39
Thanks Michael. I agree that my original solution was unsafe. I've taken your suggestion and that of [user2401543](http://stackoverflow.com/users/2401543/user2401543) to update my answer here and at [this thread](http://stackoverflow.com/questions/12766385/swiffy-output-transparent-background) — bowerandy, Jun 11 '13 at 19:16

Trying to obtain a transparent background with Swiffy

6 Answers6