14 Replies Latest reply on Apr 9, 2009 1:23 PM by RossRitchey

    centering Flash in an html doc

    nusphere01

      Hey Guys,

       

      I have a most frustrating question.  How do you center a Flash site in an html document? I wish to do it by modifying the generated html code from the Flash publishing function, rather than create a new html doc with a table, because flash adds cool features such as checking for Flash Player version.

       

      I am using Flash and dreamweaver cs3.

       

      Any help would be most apreciated Thanks in advance,

       

      Dave

        • 1. Re: centering Flash in an html doc
          kglad Adobe Community Professional & MVP

          after the <body> tag add:

           

          <center>

           

          and just before the </body> tag add:

           

          </center>

          1 person found this helpful
          • 2. Re: centering Flash in an html doc
            xchanin Level 2

            You could put your flash stuff in a <div> and center that to the browser window.

            • 3. Re: centering Flash in an html doc
              RossRitchey Level 4

              You can add a table to the generated HTML code.

               

              Or, if the flash is the only thing on the page, you can change the width and height to 100%, to completely fill the screen.  If you do this, go into the flash and add the script to keep it from scaling:

               

              AS2:

              Stage.scaleMode = "noScale";

               

              AS3:
              stage.scaleMode = StageScaleMode.NO_SCALE;

               

              In AS2, you will also want to add:

              Stage.align = "C";

               

              to make sure it goes completely centered (or "T" if you want it centered at the top of the page)

               

              AS3 automatically fully centers the swf.

               

              If you do the 100% thing, then remember, everything will be visible that is sitting off the stage, so you will want to hide it somehow (with a mask, or a graphic)

              • 4. Re: centering Flash in an html doc
                Dan.Smith Level 2
                <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                </head>
                <body>
                <div align="center">
                flash goes here
                </div>
                </body>
                </html>
                1 person found this helpful
                • 5. Re: centering Flash in an html doc
                  nusphere01 Level 1

                  Hey thanks for your response kglad,

                   

                  an elegant approach though this method seems to centrally align to the X axis only is there another command/funtion to make it align to the center on the Y axis also?

                  • 6. Re: centering Flash in an html doc
                    nusphere01 Level 1

                    Hey thanks for your time Dan, a similar elegant approach as suggested above but again this code appears to centrally align on the X axis and not align to the center on the Y axis!  Am I missing something

                    • 7. Re: centering Flash in an html doc
                      kglad Adobe Community Professional & MVP

                      you're welcome.

                       

                      there's no easy way to vertically center anything in a webpage.  i've done it with javascript and divs.

                      • 8. Re: centering Flash in an html doc
                        xchanin Level 2

                        You could add a style to the div:

                         

                        style="left: 50%; margin-left: -390px;

                        Where the -390px would represent half the width of your div itself
                        • 9. Re: centering Flash in an html doc
                          nusphere01 Level 1

                          Ah, oh well! lol... I would have put in a table or a div tag, but when I open the html doc in Dreamweaver I have no visible repressentation of the Flash movie in the design view as I would have if I had created an html document from scratch and draged the movie onto the page, all I can see is the "get flash" hypertext and some other text. I did actually experiment by creating a div tag and dragged my movie into it but ended up with two movies one sitting on top of the other when I ran it in a browser lol.  I'm quite intimdated by code and much prefer to work in the design view (wysiwyg and all that) which is quite restricting. Not really sure why the publish function in Flash does not sort this out in the first place?  Anyway if I create a div tag in the design view then drag or cut/paste the "get flash" hypertext into it would that work? Thanks again

                          • 10. Re: centering Flash in an html doc
                            kglad Adobe Community Professional & MVP

                            for horizontal centering is easy as you can see.  vertical centering is not easy, as far as i know.

                             

                            you might check the dreamweaver forum to see if there's something in dreamweaver that will vertically center your content.

                            • 11. Re: centering Flash in an html doc
                              xchanin Level 2

                              <div style="width:300px;height:300px;left:50%;margin-left:-150px;top:50%;margin-top:-150px;bac kground-color:#CC0000;position:absolute;"></div>


                              • 12. Re: centering Flash in an html doc
                                nusphere01 Level 1

                                Yay thanks Ross,

                                 

                                I thought initially that your methods sounded a little odd but hey they worked dude! You the man!!!

                                • 13. Re: centering Flash in an html doc
                                  nusphere01 Level 1

                                  Hey xchanin,

                                   

                                  I have been exploring the use a of <div> to center my Flash movie in DM but I'm confused as to why you are using pixcels as a form of measurement as well as percentage in your suggested code? surely using pixcels would only center if you knew the size of the screen resolution of the end user. Thanks for your suggestions.

                                   

                                   

                                  • 14. Re: centering Flash in an html doc
                                    RossRitchey Level 4

                                    xchanins code explained:

                                     

                                    <div style="width:300px;height:300px;left:50%;margin-left:-150px;top:50%;margin-top: -150px;background-color:#CC0000;position:absolute;"></div>

                                     

                                    width:300px - the width of the div

                                    height:300px - the height of the div

                                    left:50% - moves the left side of the div to the middle of the page. This alone will leave the div appearing to be sitting a bit to the right, as the left side is at the center.

                                    margin-left:-150px - this moves the left side half the width backwards, making the center of the div at the center of the page

                                    top: 50% - this does the same for the top of the div that the left did for the left

                                    margin-top:-150px - this does the same thing that margin-left did, but in the vertical

                                     

                                    So, what is happening with the code is, the left and top get set to the center point of the page via a percent, and then are moved by half the width/height of the div to make the center-point the center of the page.