10 Replies Latest reply on Nov 19, 2014 11:24 AM by ClayUUID

    Published HTML 5 has big grey border, fix?

    Gygex

      Whenever I publish or test an HTML 5 animation, the stage the animition is on is surrounded by a big grey border. Am I overlooking something? This is causing a tonne of issues when trying to add it to a website, as it puts in the grey border around the animation stage. Help!

        • 1. Re: Published HTML 5 has big grey border, fix?
          Aravind Utpat Vijendra Adobe Employee

          Hi,


          Could you please let us know which version of Flash are you using. Please go to Help -> About Flash

          Have you tried this out on the latest update of Flash CC 2014 (Version 14.1.0.96) ?


          Thanks!

          Aravind

          • 2. Re: Published HTML 5 has big grey border, fix?
            Gygex Level 1

            I am currently using that version of Flash CC 2014 (Version 14.1.0.96).

            • 3. Re: Published HTML 5 has big grey border, fix?
              Aravind Utpat Vijendra Adobe Employee

              Hi,

               

              Thanks for the info!

              Is it possible for you to share a sample FLA file where you are encountering the issue. This will help us to debug the issue better.

              Also, could you please list down the steps in detail that you are following before the issue occurs

               

              Thanks!

              Aravind

              • 4. Re: Published HTML 5 has big grey border, fix?
                Aravind Utpat Vijendra Adobe Employee

                Also, which browser are you using?

                • 5. Re: Published HTML 5 has big grey border, fix?
                  Gygex Level 1

                  Well its literally every single HTML canvas .fla that I publish. Publish settings have everything ticked but Multiframe bounds. But ticking that or unticking other things, doesn't make a difference. I've tried it all. I would share a .fla but I don't know where you upload it, there's no attachment selection for these replies.

                   

                  Also would like to point out that even the sample HTML 5 output from this website has this border on it too, so it's not just my .fla's that do this.

                   

                  In this link: Build HTML5 Canvas interactive games with Flash Professional CC | Adobe Inspire Magazine the puzzle does the same grey border/background behind the stage.

                   

                  I am using Chrome, but I have Firefox and IE installed and they both come out the same.

                  • 6. Re: Published HTML 5 has big grey border, fix?
                    Gygex Level 1

                    I would also like to add that I try an import the HTML5 published file into Articulate Storyline, and because of this big grey border around the animation, it pushes the animation off center and gives me scroll bars on the top and bottom because its not fitting in the Storyline document size. All because this 2mm border around the stage is also being imported over, just like it's being shown in a browser. On the browser the border is on the top and left of the stage and the rest of the webpage is completely grey.

                     

                    But let's say I publish HTML in Adobe Edge Animate, there is no grey border, its perfectly hugging the top and left of the browser page and can be imported into Storyline perfectly without importing weird borders with it. So its a Flash CC 2014 issue, but I am confused how 1. no one seems to notice or care, 2. no one is using it that it effects their work as much as it is mine. So there's a chance that its just me being a big noob and everyone have figured this out, or I am right and this is a big issue and people are just unaware that it can be such a big problem in work such as mine.

                    • 7. Re: Published HTML 5 has big grey border, fix?
                      Aravind Utpat Vijendra Adobe Employee

                      I now see what you are mentioning. However, the publish to HTML5 canvas option gives you a preview of the canvas and its embedded elements. This can always be changed by you since the canvas output will eventually be embedded as part of your parent HTML file.

                       

                      So, what you can do is, after publishing, go to the browser window, right click -> Inspect Element. You can see the HTML code shown. Click on the 'body' tag in the code. Now you can see a diagram shown at the right with the margin and border values.If you do not want the border for the left and top, simply double click on the value shown for margin (which is by default set to 8) in the figure and set it to 0.

                      Similarly, if you do not want a grey background, you can again select the 'body' element and double click on the 'style' attribute and then change the background color property to the color value that you need.

                       

                      Thanks!

                      Aravind

                      • 8. Re: Published HTML 5 has big grey border, fix?
                        Gygex Level 1

                        AHA!!! Lol!! Why on earth does Flash CC 2014 publish HTML5 with a margin of 8px?!?! Is there a way of disabling this for future work? Or am I going to have to edit this option in HTML every time? Thanks for your help by the way, this has been driving me nuts

                        • 9. Re: Published HTML 5 has big grey border, fix?
                          ole_p Level 1

                          Why on earth don't you write your HTML and CSS by hand?

                          • 10. Re: Published HTML 5 has big grey border, fix?
                            ClayUUID Adobe Community Professional

                            I'm battling this issue myself. Unbelievable that the HTML5 publish settings don't include a way to set the margin, or better yet specify an optional JS library or style sheet to include. Even worse, the HTML container page that Flash generates explicitly sets the body background to grey, no matter what you've actually set your stage background color to!

                             

                            The margin problem can be fixed by changing this line in the container page:

                            <body onload="init();" style="background-color:#D4D4D4">

                             

                            To this:

                            <body onload="init();" style="background-color:#D4D4D4;margin:0px">

                             

                            But that requires hand-editing the generated HTML every. single. time. Not a practical option if you're publishing and updating dozens or hundreds of pages. Alternatively, you can use this line of Javascript:

                            document.body.style.margin = "0px";

                             

                            But the problem is finding a good place to insert it. Sticking it at the top of easeljs.js (the library that's always included) doesn't work, because that's loaded before the body element exists. And sticking it in the first frame of the FLA is too late, because it doesn't execute until a fraction of a second after the page has loaded, so you get a visible flicker as the margin changes. At this point I'm pretty much resigned to our build process including a Perl script that scans all the generated HTML and automatically inserts the margin-fixing CSS.

                             

                            It would be nice if someone from actual Adobe would drop in and let us know if they intend to fix these shortcomings anytime soon.