Flex and ScaleMode
Flex’s underlying Flash Player has various ScaleModes that dictate how the screen should respond when the Flash ‘window’ is resized. By default, Flex apps use the NO_SCALE, which means that the screen area gets larger or smaller and can clip off the right and bottom of the screen. Flex will put up scrollbars in that case. It is the most common way applications respond to changes in screen size.
Every once in a while, someone wants to use one of the other ScaleModes which essentially magnify or reduce what you see in the Flash ‘window’. There is a trick to getting this to work correctly in Flex.
The problem is that the magnification is based on the ‘default’ size of the application. For Flex, the default size is based on the width and height attributes of the application tag. If none are specified, or percentages are used, the default is 500×375. If your applications visuals are different from that size, the magnification will look funny as the Flash Player will be trying to resize the upper 500×376 of your application into the current window size.
However, if you specify a width/height that just bounds your visuals, the HTML template generated by FlexBuilder will not allow resizing. What you have to do is choose the correct size for your application, and customize the HTML template. Here’s the recipe:
1) Create your app with the default scale mode.
2) Figure out how big the app is. In the example, I placed a label at 600,600, but it extends beyond that. One way is to just guess at numbers and see when there isn’t scrollbars or too much excess space. Otherwise, use the debugger or trace out positions and sizes on creationComplete.
3) Set the application’s width/height tags to those exact dimensions
4) Open the html-templates folder. Right-click the index.template Choose: Open with -> text editor
You’ll see this:
} else if (hasRequestedVersion) { // if we’ve detected an acceptable version
// embed the Flash Content SWF when all tests are passed
AC_FL_RunContent(
“src”, “${swf}”,
“width”, “${width}”,
“height”, “${height}”,
Change the width/height tags back to use %:
} else if (hasRequestedVersion) { // if we’ve detected an acceptable versionThere are also other ${width} and ${height| tags for non-scripting browser that you can change as well.
// embed the Flash Content SWF when all tests are passed
AC_FL_RunContent(
“src”, “${swf}”,
“width”, “100%”,
“height”, “100%”,
5) Clean re-build
That should do it. As long as the application fully covers the size you specified, you should see the correct scale effect as you resize the window.
Usual caveats apply.
Comments
I believe you can set the width/height of the application tag to 100% within Flex Builder itself and achieve the same effect.
---------
That typically will not work with different scalemodes, that just lets the app resize by showing more screen area. The scalemodes zoom in and out.
Posted by: Andrew Traviss | January 5, 2008 5:49 AM
I tried loading this in Firefox where the Ctrl+F find bar at the bottom of the browser was open. It displays fine. Then close the find bar and the text is resized to "This is the bottom left corn" (similar for all corners) with the rest clipped.
Posted by: Blake | January 7, 2008 5:13 PM
Many thanks for share the usefully Examples and Informations.
Posted by: Online Druckerei | February 27, 2008 12:21 PM
i was having a problem with scalemode and 100% width/height in flex applications. after reading this, it seems its due to the default 500x375. i used your approach and solved it :)
thanks a lot.
Posted by: Amarghosh | June 20, 2008 12:15 AM
To center the application horizontally in the browser you can add the following line to the applicationComplete event:
stage.align = StageAlign.TOP;
Posted by: rovargas | September 24, 2008 12:16 PM
Thanks for the tip Amy! Do you know if there is anyway to have a Flex app dynamically fit the screen-size by using relative percentages for inside the application, rather than have it magnified? This way, if someone is looking at a table on a larger screen, they would be able to view more rows at once.
Thanks!
Keith
-------------------------
Alex responds:
If you use width="100%" height="100%" on the Application and DataGrid and intermediate containers, you should see the DataGrid grow
Posted by: Keith | February 17, 2009 12:17 PM
Suppose I have 3 canvas in my application. But I want to scale only one, other two should always remain as fixed size. Can we do this? Any Idea?
--------------------------
Alex responds:
I would leave scaleMode untouched and when you get a RESIZE event, scale the one canvas as needed
Posted by: Paritosh Bisi | May 7, 2009 12:20 AM