10 Replies Latest reply on Feb 17, 2012 12:00 PM by kglad

    Screen Resolution and Scaling


      I have a project that's 1024x768. However, on screens with a resolution of 1024x768, the users still have to scroll (the project is too big to fit in the browser window).


      Is there a way to allow scaling of the project only if it's too big for the user's window? I don't want the project to always scale to fit the window size. I only want to scale it down if it's too large to fit on screen without scrollbars.

        • 1. Re: Screen Resolution and Scaling
          kglad Adobe Community Professional & MVP

          you can use javascript.

          • 2. Re: Screen Resolution and Scaling
            odedreturns1 Level 1

            Great.  How do I do that?  And, will it interfere with the SCORM 1.2 HTML template that I'm using?

            • 3. Re: Screen Resolution and Scaling
              kglad Adobe Community Professional & MVP

              i can't tell you anything about the template you're using.


              to use javascript to scale your swf, you'll either have to account for ie/non-ie browsers or use a framework (like jquery) that take care of this for you and place your swf within a div to ease resizing, if needed. 


              then you'll determine the viewport size so you can determine whether your swf will fit without down-scaling.  if it needs to be down-scaled, you'll determine your swf's aspect ratio and compare to the viewport's aspect ratio and then size either the width or height to match the viewport.  the other dimension you'll set by using the swf's aspect ratio.

              • 4. Re: Screen Resolution and Scaling
                odedreturns1 Level 1

                That sounds exactly like what I need.  Unfortunately, I'm not a coder, so I have no idea how to implement that solution.


                Thanks for your help.

                • 5. Re: Screen Resolution and Scaling
                  kglad Adobe Community Professional & MVP

                  you're welcome.


                  p.s.  please mark helpful/correct responses, if there are any.

                  • 6. Re: Screen Resolution and Scaling
                    adninjastrator Level 4

                    The reason that your 1024x768 project doesn't display even on 1024x768 monitors is that the available "window" on a Web browser using that resolution is actually much less than 1024x768. At best, you might get by with 990 wide... or even 960 to be safe. And as for height... of course every Web browser has some toolbars etc.... so the "effective" window may be only 600 or so in height.

                    If you do decide to target a set width... which often is a good idea, you can often just "scale" the Flash to get a pretty good fit.

                    Yes you can also use javascript... if you know how....

                    but since you have already created your project, you might be able to massage the fit a little with "scaling"... and next time you aim for the 1024x768 monitors, set your Flash doc size at no more that 990 width.

                    for your review:

                    Here are examples of different scaling parameters available in the Publish settings. You can also add these parameters directly in the html (<param name="scale" value="noscale"). All the examples replace the actual Flash dimensions with 100% for both width and height (width="100%" height="100%"). These examples use the old <object> and <embed> to illustrate the different ways to scale Flash. Once you understand how it works I’d recommend that you use swfobject to place the Flash in your final project.

                    View the source code for each page to see the full code.




                    "exactFit" scales the file to fit exactly within the confines of the screen, irregardless if the movie becomes consequently distorted. The original aspect ratio is not maintained. So round things are not round and squares are not square.




                    "noScale" is the default setting, and causes the movie to be displayed at the originally designed dimensions.



                    "noBorder" causes the movie to be scaled to what ever dimensions are needed to have no border surrounding the movie within the player, which consequently could result in some of the movie being cut off from view. In other words, the movie will maintain the original aspect ratio and will fill the screen completely. But if the movie has to be streched wider to fill both sides of the screen, it will also stretch taller, but then some of the top and the bottom of the movie may be cut off from view.




                    "showAll" scales the movie to the size of the screen (which could cause pixelation if the file contains raster information), the difference between showAll and exactFit is that showAll mantains initial movie size proportions. Because it maintains the original aspect ratio, there can be space to the sides or the top and bottom. But everything always shows and they are not distorted. But notice the photo in the center, it becomes pixilated at larger screen resolutions.

                    The trickiest part of trying to go full screen is that it’s difficult to make the Flash wider without making it taller also, that is, to maintain the correct proportions or aspect ratio of everything on the stage. These methods are just simple scaling accomplished with html. There are also methods to dynamically scale the stage and it’s elements using Actionscript… but that’s a much more complex undertaking.

                    Best wishes,

                    Eye for Video


                    Best wishes,


                    • 7. Re: Screen Resolution and Scaling
                      odedreturns1 Level 1

                      I understand the difference between screen resolution and viewable space.  I'm also very familiar with Flash's scaling options.  However, those options are this or that.  I'm looking for a JavaScript solution that will provide more than just this or that in regards to scaling.  Something like this:


                      If viewable width < 1100,

                           scale down to fit viewable width,


                           leave swf at published size.


                      I don't know the JavaScript syntax to create this code myself.  I'm also uncertain of where to place it in my HTML file.  In essence, I understand what needs to be done but not how to do it.

                      • 8. Re: Screen Resolution and Scaling
                        kglad Adobe Community Professional & MVP

                        it's more than a few minutes (but less than 1 hour) of work to code that for you especially if you want it to work with all sorts of browsers even if you don't mind a framework (like jquery) to be used.


                        because it doesn't seem like you appreciate what's been offered, so far, despite my explanation that javascript is needed and despite my outlining all the steps needed in my above message and because it's more than a few minutes of work, it's not likely someone will code this for you in a forum.


                        so, you'll probably need to hire someone to do this for you or you'll need to learn some javascript.


                        javascript is very similar to actionscript and there is a lot of online help.

                        • 9. Re: Screen Resolution and Scaling
                          odedreturns1 Level 1

                          I only want this to work on 2 browsers, but I understand that this is more than a few minutes of work.  This can’t be the first time the question has been brought up, so I was hoping I could be pointed in the right direction rather than being told to learn to write code myself.  ☺


                          I found the solution in another Flash forum.  Thanks!

                          • 10. Re: Screen Resolution and Scaling
                            kglad Adobe Community Professional & MVP

                            you're welcome.