9 Replies Latest reply on Apr 30, 2010 11:39 PM by Ansury

    Flex apps and monitor resolutions

    BosDog Level 1

      Hi. I've noticed that my Flex apps look great on the machine I'm developing them on... but I tested it out on a 22inch widescreen high def monitor at my house and noticed that the font and app is extremely small due to the resolution being so high.

       

      I know Flash has a ZOOM feature so i'd like to see if i can leverage that... but when I right click the Flex app (the compiled SWF in Flash format) I don't see a ZOOM option available?

       

      Is there a way to auto-scale the app based on user resolution?

       

      You know how in browsers you can hold the CTRL button on the keyboard and scroll up on the mouse wheel to increase the page size (or select from the magnifying glass in the bottom right of IE 7? If I do this the Flex app never increases in size, only HTML around it... how can I get it to do that?

       

      Am I going about this wrong? What about users with accessibility issues (bad eyesight, etc). there must be a way to increase the app visually?

        • 1. Re: Flex apps and monitor resolutions
          Flex harUI Adobe Employee

          Flex removes the zoom option from the context menu.  You can put it back in.

          • 2. Re: Flex apps and monitor resolutions
            BosDog Level 1

            how do i do that?

            • 3. Re: Flex apps and monitor resolutions
              Ansury Level 3

              You could try experimenting with the scaleX and scaleY attributes to automatically set the scaling/zoom values on startup.

               

              Something like this:

               

              ("actual" size in my case is usually 1024x768 which is what I tend to target)

               

              private function applicationComplete():void {

               

               

                   this.scaleX = this.width / ACTUAL_APPLICATION_WIDTH;

                   this.scaleY = this.height / ACTUAL_APPLICATION_HEIGHT;

               

              }

               

              (this being your highest level mxml container)

               

              This generally works well, but a word of warning - make sure you TEST before you trust it to work for your app.  I've seen this scaling cause annoying issues with some custom components before, so if you're doing anything fancy like writing non-standard components (which may do things like show popups, etc that may not take scale into account when calculating positions), make sure they still calculate the locations of anything they display correctly.  It may not be a very common concern but I thought I should at least mention it.

               

               

              You can even have the app detect when the size changes and re-scale accordingly, but again I've not used this technique extensively so I'd consider it somewhat "experimental".

              • 4. Re: Flex apps and monitor resolutions
                BosDog Level 1

                thanks for that. i tried it but my app didn't understand ACTUAL_APPLICATION_WIDTH & ACTUAL_APPLICATION_HEIGHT

                so i tried hard coding a number. at first i tried dividing / 10 at first... the multiplying by .2

                 

                both times the app loaded (i put this in the initApp function called in the creationComplete command) and i saw something real quick on the screen and then my all my flex components disappeared leaving me with just the grayish blue background

                • 5. Re: Flex apps and monitor resolutions
                  Ansury Level 3

                  Sorry I didn't specify - what I meant was to declare constants named ACTUAL_APPLICATION_WIDTH/HEIGHT to specify the 'original' size that you targeted when you designed your layout.

                   

                  Like this:

                   

                  private const ACTUAL_APPLICATION_WIDTH:int = 1024;

                  private const ACTUAL_APPLICATION_HEIGHT:int = 768;

                   

                  If you want to see what's going on try using trace() statements to output the scale values (and this.width this.height if you want to verify how they change based on the size of the Flex application).

                   

                  The goal is just to get a value somewhere between say 1.0 and 2.0 for the scale values (2.0 would resize everything twice as big, 1.0 wouldn't scale anything), the specifics of how you calculate that don't really matter.  Hope that helps.

                  • 6. Re: Flex apps and monitor resolutions
                    BosDog Level 1

                    i tried following your advice but hat only seems to affect the canvas size in my app (not the size of the fonts, datagrids, buttons, graphics, and control panels). i wish there was 1 universal variable that controlled the zoom in feature.

                    • 7. Re: Flex apps and monitor resolutions
                      Ansury Level 3

                      Oh no, it does resize fonts, graphics and so on.  You have to place that applicationComplete handler in your top most container.  i.e. "this" must be your Application or WindowedApplication so it sets the scaleX and scaleY values for the application container.

                       

                      If you're really sure that it's not working the way it should (not resizing everything)... are you dynamically creating components via ActionScript or something?  One thing to consider with this is that if you use PopupManager to create a TitleWindow "dialog", that dialog will be the normal small size (I've not tried it, but I'd very much bet that you can just set scaleX and scaleY on a TitleWindow and have it similarly resize however.)

                       

                      If it's only working on your canvases, I'm not sure why it wouldn't work without more information.  Are you using the Flex 4 beta SDK?  I'm on Flex 3.  Are you able to post a small working example demonstrating what you're seeing?  I've tested doing this in a Flex 3 app before, and I've also tested within a Flex3/AIR app a little more extensively, and it seems to behave fine other than what I've already mentioned.

                      • 8. Re: Flex apps and monitor resolutions
                        George S. Christopher

                        Hi Ansury

                         

                        Thanks for the solution. I tried and it works fine. It does resize fonts and graphics.

                         

                        Thanks

                        George

                        • 9. Re: Flex apps and monitor resolutions
                          Ansury Level 3

                          Glad it's helpful, but do do yourself a favor and test thoroughly to make sure you don't have any compatibility issues.  It's possible that if you're using (or writing) custom components that do fancy stuff (particularly with graphics drawn in higher-level containers, etc, positioned via global coords and such), they could behave poorly.

                           

                          Ex. I have some form 'error indicators' to improve on error feedback, and setting different zoom levels causes the locations of the indicators to be off slightly.  I'm sure it's fixable and just a matter of making the needed adjustments, but zoom level is something that has to be considered when doing such fancy stuff.