4 Replies Latest reply on Feb 27, 2008 8:17 AM by Ansury

    Scalable Flex Application

    David_M..
      Hi,

      I have developped an application which will be used on 24" screens, and I would like users with smaller screens to be also able to use it. More precisely my application contains a tag <mx:canvas width=" 1600" height=" 900"> and the problem is that starting it on a smaller screen generates scrollbars.

      My objective is to have my application nearly work the same way on every resolutions, and this without having to build different swf with all the possible resolutions.

      That's why I was looking on the Zoom feature of the Flash player which seems to be the answer to my question. Unfortunately I was unable to make it works correctly.


      I thought the solution was to put an event on the ApplicationComplete which sets the stage's scale mode to SHOW_ALL. But if do that, I have some strange results.

      • If I open the application in a browser with a resolution nearly equals to 1600x900, the application work as expected ( image )and if I resize my browser window to a smaller resolution, the application is correctly resized and thus it's ok. ( image)
      • But if I open in a smaller browser, the resizing doesn't seem to work and the result is really strange. ( image)

      I have tried to add javascripts to my index_template file and something nearly did the trick, it was something like:
      - Saving the size of the window
      - Resizing the window to 1600*900
      - Using Flash player API functions : Zoom(100) ; SetZoomRect (0,0,(20*1600),(20*900)) ;
      - Resizing the window to the old size

      The problem of this solution is that it worked only on a screen with high resolution. I think Windows doesn't let you open windows bigger than the current resolution of the screen. Furthermore, my application will be embedded in an IFrame and thus I won't be able to use the Resize function.

      I have tried to put the swf inside a <div> and I played with his size but it didn't work.

      I don't see any other solution so any help and advice will be welcome.

      Thanks!

      David

      EDIT: here is a piece of code that show my problem.
      Run it on a browser with a resolution bigger than 800*600, and resize the window: it will work well.
      Then resize the browser to something like 200*200 and hit F5.

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
      width="100%" height="100%" applicationComplete="onInit()"
      horizontalAlign="center" verticalAlign="middle"
      backgroundGradientColors="[#ffffff, #ffffff]">

      <mx:Script>
      <![CDATA[
      private function onInit():void {
      application.stage.scaleMode = StageScaleMode.SHOW_ALL;
      }

      ]]>
      </mx:Script>

      <mx:VBox width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
      <mx:HBox width="100%" height="100%" verticalAlign="middle" horizontalAlign="center" >
      <mx:Canvas width="1024" height="768">
      <mx:Text text="bla bla bla bla bla bla bla bla vla bla bla bla bla" width="100%"
      x="20" y="50" fontSize="14" />

      </mx:Canvas>
      </mx:HBox>
      </mx:VBox>

      </mx:Application>
        • 1. Re: Scalable Flex Application
          batmitra Level 1
          hi
          use 100% width and height on you application tag too and on the controls you have on screen you must put % accordingly width the amount of space you want them to occupy . Also you can use constraints in controls, the layout should be in absolute mode.
          • 2. Re: Scalable Flex Application
            David_M.. Level 1
            Hi, thanks for your answer but even if t works for a lot of things there is still a problem with the font size. In fact, I want the size of the fonts to grow when the size of the window is raised.

            But the good new is that I found a working solution. I don't use anymore the scaleMode property but I do compute manually the scaleX and scaleY of the application object and it works perfectly.
            • 3. Re: Scalable Flex Application
              kricker
              quote:

              Originally posted by: David M..
              Hi, thanks for your answer but even if t works for a lot of things there is still a problem with the font size. In fact, I want the size of the fonts to grow when the size of the window is raised.

              But the good new is that I found a working solution. I don't use anymore the scaleMode property but I do compute manually the scaleX and scaleY of the application object and it works perfectly.
              Can someone clarify this for me. I am a brand new flex user and need to accomplish the same thing. I just don't understand his explanation of the solution.

              • 4. Re: Scalable Flex Application
                Ansury Level 3
                This is an interesting idea - but how is the performance effected? Noticable at all?