20 Replies Latest reply: Apr 17, 2012 8:26 AM by sinious RSS

    Scrolling website

    rwhitner90 Community Member

      How would I allow the user to scroll down to the rest of the content on each page? I just want the content to all be able to be seen by scrolling down with the normal scroll bar provided by your web browser.

        • 1. Re: Scrolling website
          Ned Murphy CommunityMVP

          In your html page, see if a css setting such as the following helps...

           

          body { overflow:auto; }

          • 2. Re: Scrolling website
            rwhitner90 Community Member

            I'm using ActionScript2.0, where on my main time line would I place this?

            • 3. Re: Scrolling website
              Ned Murphy CommunityMVP

              Reread what I wrote... it doesn't go in your Flash file.

              • 4. Re: Scrolling website
                adninjastrator Community Member

                In addition to what Ned said, look in the HTML code and be sure to remove

                overflow:hidden;

                or it may override overflow:auto;

                Or just delete the overflow line entirely... with no "overflow" set at all, the page will scroll just fine as a default.

                The problem with Flash is that some brainiack at Adobe though it would be a good idea to add in "overflow:hidden"...... which is one of the dumbest ideas I've ever heard! No reputable Web page developer would ever default a Web page to overflow:hidden.

                Best wishes,

                Adninjastrator

                • 5. Re: Scrolling website
                  rwhitner90 Community Member

                  I'm sorry I am brand spanking new to this trying to teach myself. Can you please explain to me this process. The only thing I know i'm doing is designing in flash pro using the actions panel for my code.  I see that there is a swd file in my directory should I edit it in this file? Thank you for your help!

                  • 6. Re: Scrolling website
                    adninjastrator Community Member

                    How would I allow the user to scroll down to the rest of the content on each page?

                    As you can see from your question, it's not the flash .swf you are talking about.... it's the Web page that needs to scroll.

                    So the answer will be in how the Web page deals with scrolling.... it has nothing at all to do with the Flash part.

                    Check the "Publish Settings", HTML tab and see what the "dimension" settings are. Unless there is some good reason, don't use percent, instead use "Match Movie" then publish again, see if scrolling is still an issue.

                    If it's still a problem then you will need to edit the HTML on the Web page... not anything in Flash.

                    Do you have DreamWeaver or some other HTML editor? Here is a good free one:

                    http://notepad-plus-plus.org/

                    Open the HTML page that you "Published" and remove the "overflow" line from the html code.

                    Best wishes,

                    Adninjastrator

                    • 7. Re: Scrolling website
                      rwhitner90 Community Member

                      I used dreamweaver and got rid of the loveflow line completely. I double checked and i am already using Match Movie..Now the scroll bars show up but my content still doesn't show up.

                      • 8. Re: Scrolling website
                        adninjastrator Community Member

                        OK, part resolved.... now we can move on.

                        If it worked (but minus the scroll bars) before and now it doesn't, then you may have simply detected more than needed (for example, you deleted a closing tag.

                        Post a link to the actual page or there is no way for us to know for sure.

                        Best wishes,

                        Adninjastrator

                        • 9. Re: Scrolling website
                          rwhitner90 Community Member

                          This is my code from the published flash file. It is an XHTML file. I also have an index file created in Dreamweaver named index.html linking to my flash file. I set the overflow to auto and the scroll bars aren't showing up. Could it be that the height is set to a % instead of px?

                           

                           

                          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

                          <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

                              <head>

                                  <title>Saltys Mainfla</title>

                                  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                                  <script type="text/javascript" src="swfobject.js"></script>

                                  <script type="text/javascript">

                                      <!-- Adobe recommends that developers use SWFObject2 for Flash Player detection. -->

                                      <!-- For more information see the SWFObject page at Google code (http://code.google.com/p/swfobject/). -->

                                      <!-- Information is also available on the Adobe Developer Connection Under "Detecting Flash Player versions and embedding SWF files with SWFObject 2" -->

                                      <!-- Set to minimum required Flash Player version or 0 for no version detection -->

                                      var swfVersionStr = "9.0.124";

                                      <!-- xiSwfUrlStr can be used to define an express installer SWF. -->

                                      var xiSwfUrlStr = "";

                                      var flashvars = {};

                                      var params = {};

                                      params.quality = "medium";

                                      params.bgcolor = "#00256e";

                                      params.play = "true";

                                      params.loop = "true";

                                      params.wmode = "window";

                                      params.scale = "noscale";

                                      params.menu = "true";

                                      params.devicefont = "false";

                                      params.salign = "l";

                                      params.allowscriptaccess = "sameDomain";

                                      var attributes = {};

                                      attributes.id = "Saltys Mainfla";

                                      attributes.name = "Saltys Mainfla";

                                      attributes.align = "middle";

                                      swfobject.createCSS("html", "height:100%; background-color: #00256e;");

                                      swfobject.createCSS("body", "margin:0; padding:0; overflow:auto; height:450px;");

                                      swfobject.embedSWF(

                                          "Saltys Mainfla.swf", "flashContent",

                                          "auto", "auto",

                                          swfVersionStr, xiSwfUrlStr,

                                          flashvars, params, attributes);

                                         

                                  </script>

                              </head>

                              <body>

                                  <!-- SWFObject's dynamic embed method replaces this alternative HTML content for Flash content when enough JavaScript and Flash plug-in support is available. -->

                                  <div id="flashContent">

                                      <a href="http://www.adobe.com/go/getflash">

                                          <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />

                                      </a>

                                      <p>This page requires Flash Player version 9.0.124 or higher.</p>

                                  </div>

                              </body>

                          </html>

                          • 10. Re: Scrolling website
                            adninjastrator Community Member

                            No scroll bars...OK, but does the entire .swf display?

                            From what I see here the height of the <html> is 100% and the <body> is 450px....is that what you intended? is your .swf 450px high? If so, and then you set the <body> container to 450.. no scroll bars will show up on any monitor that has more than 450 px in height worth of display space.... in other words, if your monitor has space of 500 px in height to display the .swf... and the .swf only needs 450... no scroll bars will show up.

                            But really, you don't need to specify ANY height for the <html> or the <body>. Default is that the content will flow from the top of the page downward for as much space as is needed. So page content could be 450px high, 4500 px high or 45000px high with no problems... the default action (overflow:auto) will kick in if and when needed.

                            So there is no need to explicitly declare a height for either of these elements, neither is there a need to explicity declare "overflow:auto".... that is the default and will occur if no other overflow method is declared.

                            If you still have problems, post a link to the page/pages you are having problems with so we can see and test for ourselves.

                            Best wishes,

                            Adninjastrator

                            • 11. Re: Scrolling website
                              rwhitner90 Community Member

                              www.artistless.com/Rachel    (I warn you to turn your volume off the song is obnoxious) The entire swf does not display.

                              Thank you so much for helping by the way I sincerely appriciate it.

                              • 12. Re: Scrolling website
                                adninjastrator Community Member

                                The link above displays a page linking to :

                                http://www.artistless.com/Rachel/Saltys%20Mainfla.swf

                                which is NOT a Web page... it's just a .swf file.

                                And your entry page:

                                www.artistless.com/Rachel

                                doesn't even work in IE.

                                So here are a few suggestions.

                                Don't use a "Splash" page or "Click here to enter site".... that is soooo not user friendly. Go directly to your main Web page.

                                Next, you must display the .swf on a Web page... not directly downloading the .swf file as you are now.

                                So then the URL link will end in .html, not .swf.

                                On that Web page you will need to display the .swf in an <object> ... you can't just stick the .swf directly on the page.

                                Here is a very simple <object> code:

                                <object data="path_to_file/file.swf" type="application/x-shockwave-flash" width="insert_width_of_movie" height="insert_height_of_movie">

                                  <param name="movie" value="path_to_file/file.swf">

                                  <param name="SomeOtherParam" value="ParamValue">

                                </object>

                                Edit to match your dimensions.

                                Best wishes,

                                Adninjastrator

                                • 13. Re: Scrolling website
                                  rwhitner90 Community Member

                                  I just created a new html file. Named it index. Did a Insert>Swf file. Chose my swf and uploaded that index page and the other two things they told me to upload to my server. My swf file now plays in a webpage and it has the scroll bars I need! Now the question, get this to center, not display white around the edges and show  make my swf file show the rest of my content. I think i'm getting there?

                                  • 14. Re: Scrolling website
                                    adninjastrator Community Member

                                    Post a link to the updated page and we'll take a look.

                                    Adninjastrator

                                    • 15. Re: Scrolling website
                                      rwhitner90 Community Member

                                      still at www.artistless.com/Rachel

                                      • 16. Re: Scrolling website
                                        rwhitner90 Community Member

                                        I actually fixed most of my problems (the scrolling and the white) Of course some of the swf got messed up somehow and it still wont center no matter what code i put in.

                                        • 17. Re: Scrolling website
                                          sinious Community Member

                                          Haha I have a house in Cape Cod (MA, USA), is that where this place is?

                                           

                                          Anyhow you really should convert to HTML5. XHTML transitional is excessively old. XHTML strict is pretty old as it is.

                                           

                                          If you want to center any item and it has a defined width it's pretty easy overall. Just add any tag around it that is a block, set the width and set the margins.

                                           

                                          e.g.:

                                           

                                          <div style="display:block;width:990px;margin: 0 auto;">

                                              <object ....... >

                                              </object>

                                          </div>

                                          • 18. Re: Scrolling website
                                            adninjastrator Community Member

                                            You have duplicate <objects> resulting in the .swf being displayed twice, sound muddled, etc.

                                            Completely remove the first <object>.... remove all this:

                                            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" align="middle" id="FlashID">

                                              <param name="movie" value="Saltys Mainfla.swf" />

                                              <param name="quality" value="high" />

                                              <param name="wmode" value="transparent" />

                                              <param name="swfversion" value="9.0.45.0" />

                                              <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->

                                              <param name="expressinstall" value="Scripts/expressInstall.swf" />

                                              <param name="LOOP" value="false" />

                                              <param name="BGCOLOR" value="#00256E" />

                                              <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->

                                              <!--[if !IE]>-->

                                              <object data="Saltys Mainfla.swf" type="application/x-shockwave-flash" width="100%" height="100%" align="middle">

                                                <!--<![endif]-->

                                                <param name="quality" value="high" />

                                                <param name="wmode" value="transparent" />

                                                <param name="swfversion" value="9.0.45.0" />

                                                <param name="expressinstall" value="Scripts/expressInstall.swf" />

                                                <param name="LOOP" value="false" />

                                                <param name="BGCOLOR" value="#00256E" />

                                                <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->

                                                <div>

                                                  <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>

                                                  <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>

                                                </div>

                                                <!--[if !IE]>-->

                                              </object>

                                              <!--<![endif]-->

                                            </object>

                                            and then near the very bottom, remove this one line of code:

                                            swfobject.registerObject("FlashID");

                                            Now you will have just one <object> displaying your .swf.

                                            To center in browser, change this:

                                            body {

                                            background-color: #00256E;

                                            }

                                            to this:

                                            body {

                                            background-color: #00256E;

                                            width: 990px;

                                            margin-top: 0px;

                                            margin-right: auto;

                                            margin-left: auto;

                                            }

                                            Best wishes,

                                            Adninjastrator

                                            • 19. Re: Scrolling website
                                              rwhitner90 Community Member

                                              Holy crap I got it! The body code didn't work so I tried adding <div align="center"> and BAM it works! Perfevtly centered, blue background and all. Also did convert it to HTML5 and got rid of the second object code (which I realized as soon as i posted on here). And yes it is on Cape Sinious haha I bartend there and wanted to take a challange in learning all this crap so I re did his website. Thanks everyone for your help!

                                              • 20. Re: Scrolling website
                                                sinious Community Member

                                                If you convert it to HTML5 then you really want to rely on styles to center your content. align="center" is a legacy fallback. Please adjust it to what I mentioned above and you won't see any difference between the two except your file will validate.

                                                 

                                                Here's a link to your validation page showing you align is not a valid attribute:

                                                http://validator.w3.org/check?uri=http%3A%2F%2Fwww.artistless.com%2FRachel%2F&charset=%28d etect+automatically%29&doctype=Inline&group=0

                                                 

                                                There's also a chance to fix other validation issues if you wish, most of which are just pointing out align is not a valid attribute and to use CSS instead.

                                                 

                                                Hope that helps.