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.
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.
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.
Many thanks for share the usefully Examples and Informations.
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.
To center the application horizontally in the browser you can add the following line to the applicationComplete event:
stage.align = StageAlign.TOP;
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
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
So, isn't it possible to still show stuuf of your flex app that fall outside the specified resolution in the application tag.
For instance on wide screen monitors I would like to have the visitors see more of a background image I use...
-------------------------------------
Alex responds:
If you specified 800x600 in the Application tag, the application will not look for Stage resize events. You can look for them yourself and call setActualSize on the application.
Oh sry, it is simply just putting horizontalScrollPolicy="off" verticalScrollPolicy="off" clipContent="false" in my application tag that does it...
Thanks Alex. We are using this in our app but I've run into a problem. I have a background image that needs to repeat across the entire app. I'm using a Degrafa class to do that, but it only extends to the width and height specified in the application tag - leaving a "border" on each side of the app. Any idea on how to implement the scale method you mention here, while using a repeated background that extends across the full visible area in the browser?
Currently I am developing a Video app with Flex-AIR and the videos are of .mov type. My videos are of 480p/720p and 1080p resolution.
While going to fullscreen I am using hardware scaling by passing a rectangular video area to the stage.fullScreenSourceRect. My video is scaling fine but along with it the videoControls are also scaling which I dont need.
I have gone through lot of blogs but couldn't find any solution. I was actually referring youtube sort of fullscreen with HD videos.
Please let me know if any solution exists to stop scaling of the video controls and control it by the code.
Thanks in Advance
Siva.
If you want something to repeat more as size grows, then you don't want scalemode. You just want to make your app resizable. Listen for resize events and change the size of the application.
The only other way might be to check the concatenatedmatrix and set an inverse scale and resize the background image
You can try reversing the scale on the video controls or their parent container
Thank you so much for this solution!
Thank you VERY much for this!!!