How to make an exported project transparent?

Get help using Construct 2

Post » Mon Feb 18, 2013 5:34 pm

I have a website where I have embedded my html5 project as an <iframe> using HTML.

My website also has a background image. I have tried making all the layers transparent and/or set opacity to 0 but that just gave visual errors, none of them even got close to me seeing my website background.

How do I do this, is it even possible?
B
11
S
5
G
3
Posts: 19
Reputation: 2,969

Post » Mon Feb 18, 2013 8:15 pm

Setting all layers to transparent is the correct way to do this. You may also need to check the project property 'Clear background' is set to 'Yes'.
Scirra Founder
B
359
S
214
G
72
Posts: 22,951
Reputation: 178,578

Post » Mon Feb 18, 2013 8:32 pm

Not meaning to be rude; are you sure your iframe is transparent itself?

http://stackoverflow.com/questions/1234127/iframe-transparent-background
mrchay2013-02-18 20:33:24
B
6
S
1
G
1
Posts: 15
Reputation: 938

Post » Sat May 18, 2013 5:51 pm

replace
<style type="text/css">
     * {
          padding: 0;
          margin: 0;
     }
     body {
          background: #000;
          color: #fff;
          overflow: hidden;
          -ms-touch-action: none;
     }
     canvas {
          -ms-touch-action: none;
     }

on index.html with
<style type="text/css">
     * {
          padding: 0;
          margin: 0;
     }
     body {
          background:none transparent;
          overflow: hidden;
          -ms-touch-action: none;
     }
     canvas {
          -ms-touch-action: none;
     }
</style>

and add allowtransparency="true"
to your iframe
B
8
S
1
Posts: 5
Reputation: 760

Post » Tue Oct 15, 2013 1:14 pm

@daoluong

that did the trick for me, thank you!
composer - multimedia artist
www.eli0s.com/en/
B
53
S
21
G
3
Posts: 1,127
Reputation: 8,095

Post » Wed Jan 22, 2014 2:29 pm

Hmm. I can't seem to get this to work. I'm trying to export a html5 animation with a transparent background to a website using an iframe.

I have one layer with the background set to transparent

Clear background is set to 'yes' in the project properties.

My iframe code is (though I have tried other variations as per the stackoverflow suggestion above):
<iframe width="750" height="460" src="http://www.site.com/subfolder/index.html"frameborder="0" allowtransparency="true"scrolling="no"></iframe>

The project tests just fine but once I upload it and put it into an iframe it comes over with a back backround.

Is there a project setting I am missing?

Many thanks for reading this and for any hints or tips you can provide

Huge Regards
Dave.
Ideally I want to keep the html files minified as it is already a bit of a hefty project.Squeakydave2014-01-22 14:30:53
B
9
S
3
G
1
Posts: 23
Reputation: 828

Post » Wed Jan 22, 2014 4:09 pm

Hmmm. well it seems like you need to edit the index html file of the exported project and change the background colour from black to transparent.

          body {
               background-color: transparent;
               color: white;
               padding: 0;
               margin: 0;
               overflow: hidden;
          }
     
I'm surprised that there isn't a project setting in Construct2 to set this or that it isn't mentioned in any of the tutorials. Mind you I am exploring C2 as a flash replacement and not currently for making games.
Dave     
B
9
S
3
G
1
Posts: 23
Reputation: 828


Return to How do I....?

Who is online

Users browsing this forum: mallorcaredes, ultrafop and 2 guests