Stage.scaleMode = StageScaleMode.EXACT_FIT

Question

Hey all... first time posting here, long time lurker.  I have a problem with a personal project (home automation) that I have yet to figure out a solution.  In essence, I cannot get stageScaleMode EXACT_FIT to work as I would hope.  There is just something about the way the stage is handled in Flex that I'm missing.  I have searched for a solution to this issue for hours and hours around the web, with very little help being provided.  This project has just been in my free time and I have actually gotten so frustrated a number of times at this problem, that it has caused me to give up work on it for a while, however I'm motivated once again to try.
In a nutshell, I have developed a Flex application with a set width and height.  What I need is for the application to zoom (scale or whatever) to fit whatever container it is in, allowing distortion to occur, and scaling all components, fonts, images, etc accordingly.
I have tried a number of methods and the only method I have found that works the way I want is to use the Flash debug player, load a wrapper SWF (stub essentially) I created in Flash, which in turns loads the built Flex SWF.  Doing that, I can resize the flash player window or even go full screen and the flex app scales to always fit the container... buttons, fonts, everything scales.  Essentially, the application looks exactly the same at 640x480 and at 1024x768 (albeit smoother fonts, etc).  Understand that this is different that how one would probably develop a Flex app, where the actual UI components expand/contract... I want them to stay the same size, same number of rows, etc... just get bigger... fonts and all.
Loading just the Flex SWF in the debug player without the wrapper, however, doesn't work.  I can get it to stick to the defined width and height or sometimes get it to scale to an (unknown) stage size, where all that is visible is essentially the top left quarter of the app and resizing the window does cause the app to scale, however only pretty much that 1/4 of the app is visible in the window.  Loading the app directly in a browser (through a page) or even through the stub wrapper SWF provides the same screwy results.  It's almost as if the Flex app has no idea what the size of the actual container it is in, unless it is in the debug player.  Publishing it as an AIR app does the same thing.
Using the Flash debug player, along with the wrapper, actually gets the job somewhat done for my little project's purposes, however I am really at the point where I need to move this is into either a full on AIR install or be able to run this in the browser (either case scaled correctly), so that I may do other things (launch new windows, possibly interact with the desktop, etc).
I apologize I'm not a Flex/Flash developer for my day job, so I'm not using the correct terminology (however I am a programmer), but I hope my description of what is occurring will suffice.  I've seen others online with a similar problem and have heard mentions of using some form of scalex/scaley to accomplish a solution, but couldn't find any actual examples of working code.
Any help would sincerly be appreciated.  I would like to finally get past this, so I can go back to having fun working on the actual parts of the application (and not just getting it to fit the dang screen)... haha.
Thanks.

Answer 1

Thanks for that pointer.  I tried playing with finding the (what I would call) "natural" size of the app, as you describe.  When laying out the UI, I always set the viewer to 800x600.  I removed the app's width/height, added some trace statements and here was the output (stageWidth is stage.stageWidth & "width" is stage.width):
stageWidth = 500
stageHeight = 375
width = 548
height = 596
If I set the app's width/height to 548x596, this somewhat worked, however it caused proportions on individual components to be off (of course they would scale with these off proportions).
So that got me thinking.  The app has a viewStack as it's main "base", which was defined having width/height = 100%.  I changed that to an absolute width/height of 800x600.  Without setting an app width/height and running, I then got:
stageWidth = 500
stageHeight = 375
width = 800
height = 600
So, naturally then I changed the apps width/height to 800x600 and wholla!  Works/scales (all by itself with no wrapper) in both the debug player and the browser just fine and looks the way I intended.  Neato!  Trace gives me:
stageWidth = 800
stageHeight = 600
width = 800
height = 600
Now, getting the same job done in AIR is a different story.  I immediately went to my AIR project and tried, but it still suffers from the same (~1/4 corner of the app) showing up, albeit it tries to scale up with the window resize.  My guess is there is something different with the timing/order of the stage/display elements here, as the code itself (other than it's a windowedApplication") is exactly the same.  Without any app width/height (but setting the viewStack width/height to 800x600), the trace gives me:
stageWidth = 500
stageHeight = 375
width = 800.5
height = 600
Now, here is what is strange with the AIR app and what may lead someone that knows this better to tell me how to fix it.  I am setting the stage.scaleMode using the reference from that base viewstack I described earlier.  When I run the AIR App and resize the window smaller, what looks to be the actual app scales down to the point where it actually is smaller than the window it is contained in (albeit still only showing about 1/4 corner of the actual application).  There are borders (padding/blank space) on the right/bottom (I also set stageAlign top left).  Scaling the window larger and larger, just scales that corner that is visible larger and larger (similar to what the browser version was doing), but actually fulls the window with this 1/4 corner of the app.  I know I am missing a "gotcha" about AIR somewhere here.