12 Replies Latest reply on Feb 23, 2007 3:48 PM by MrBritton

    Flex Project Form Scaling

    jrpruitt
      Is it possible to use StageScaleMode (or any other method) to set "SHOW_ALL" as the scaling method when using a Flex Project? I just downloaded the trial version of Flex a couple days ago and have spent all my free time since then trying to get ScaleMode to work. I've found many examples on the web, but none of them work. I can only assume they are designed for an "ActionScript Project" instead of a "Flex Project." The following code compiles, but it comes up with a blank page.

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">
      <mx:Script>
      <![CDATA[
      StageScaleMode("showAll");
      ]]>
      </mx:Script>

      <mx:Label x="10" y="10" text="My Label" fontFamily="Arial" fontSize="14"/>
      <mx:TextInput x="191" y="10" fontSize="14"/>
      </mx:Application>

      If I remark out the StageScaleMode call, the application displays, but defaults to "noScale" mode.
      Flex Builder 2 seems to be an ideal IDE for designing my project, except for this one issue.
      Any help would be appreciated.

      John
        • 1. Flex Project Form Scaling
          leotemp Level 1
          What are you trying to accomplish using scaleMode?
          • 2. Re: Flex Project Form Scaling
            jrpruitt Level 1

            This page shows a FLASH 8 application that demonstrates what I'm trying to do:
            http://r4k.com/login.html

            Notice how when you resize the window, the Flash window rescales itself. The font sizes shrink or grow to reflect the current window size and everything stays in perfect proportions. This happens because scaleMode is set to "showAll".

            http://r4k.com/login.swf
            This page does the EXACT same thing, which proves it's a function of the swf in Flash itself that is doing the scaling, and has nothing to do with the HTML wrapper.

            If I do the same thing in Flex Builder2, the Flash window remains the same size it starts out as, and the borders around it simply gets bigger or smaller. This is because scaleMode in Flex applications default to "noScale" and THAT is what I am trying to change.
            I realize Flex has it's own "Fluid" scaling that you can apply via hBox, vBox, Panel, etc, and I will use that method for some of the forms of this project, but one of the forms is very complex and everything is statically located. It would be so much easier and professional looking if the whole form simply scaled as the user resized it.
            • 3. Re: Flex Project Form Scaling
              jrpruitt Level 1
              Apparently this is an issue with Flex 2 that can not be solved. I read someplace that this was a bug that would hopefully be fixed by release time. Looks like it didn't make it. It's time to move on.. too much to get done... I'll have to stick to FLASH.

              Thanks anyway.
              John
              • 4. Re: Flex Project Form Scaling
                Rachel_Adams
                I ran across your question while trying to figure this out myself, so I thought I'd be nice and answer it so when someone else searches and finds this forum, they won't hit a dead-end, like I did.

                Not only is is possible, here is a totally working sample.

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
                layout="absolute"
                autoLayout="false"
                creationComplete="initApplication()">
                <mx:Script>
                <![CDATA[

                private var ac:Canvas = new Canvas();
                private function initApplication():void
                {
                addChild(ac);
                ac.addEventListener("addedToStage", stageEventListener);
                }

                function stageEventListener(event:Event):void
                {
                ac.stage.scaleMode=StageScaleMode.SHOW_ALL;
                ac.stage.align = StageAlign.TOP_LEFT;
                }
                ]]>
                </mx:Script>
                <mx:Canvas x="4" y="4" width="600" height="360" cornerRadius="20"
                borderStyle="solid" borderColor="#00ffff" backgroundColor="#80ffff">
                <mx:Canvas x="20" y="20" width="560" height="320" cornerRadius="20"
                borderStyle="solid" borderColor="#dffeff" backgroundColor="#ffffff">
                </mx:Canvas>
                </mx:Canvas>
                </mx:Application>

                I've found it works best with a canvas as your bottom layer and doesn't seem to resize correctly if the initial size is much above 600 x 360.

                Perhaps someone here can explain to me why that is. It's so tedious working with a 600x360 canvas. I may have missed some important step here.

                Anyway, hopefully this will point other people in the right direction.

                Rachel.
                • 5. Re: Flex Project Form Scaling
                  jrpruitt Level 1

                  I tried that script and it worked great for me, but it didn't work for any of my Alpha Testers. For my PC, the form rescales and the text I added switches to a bigger or smaller font as I resize, but for them the form stays a fixed size and the font doesn't resize at all. I'm not sure what's different between my PC and theirs.
                  • 6. Re: Flex Project Form Scaling
                    Rachel_Adams Level 1

                    I discovered that same problem. It seems to be a bug in the standard version of Flash player 9. It works with the debug version. Only applications written in Flex seem to have this problem. I have a test application I wrote using Flash 8 that uses the ScaleMode of Show_All by default and that one resizes perfect on both the debug and the standard version of Flash player 9. Perhaps there is some other flag that needs to be set in Flex. If not, this is a bug in Flash Player that Adobe needs to be fixing. I asked questions about it on another forum, but have not received any reply from anyone. Sorry to get your hopes up.

                    Rachel
                    • 7. Re: Flex Project Form Scaling
                      jrpruitt Level 1
                      You appear to be correct. I had a few people try the Debug version of Flash Player 9 and that did make it scale correctly. I really doubt it's a bug in the version that most people are using though. Especially since my example above works correctly on either version. More likely there's more to activating scale mode than meets the eye.

                      Can someone PLEASE help us figure this out?

                      Thanks.
                      • 8. Re: Flex Project Form Scaling
                        Level 7
                        You appear to be correct. I had a few people try the Debug version of Flash
                        Player 9 and that did make it scale correctly. I really doubt it's a bug in
                        the version that most people are using though. Especially since my example
                        above works correctly on either version. More likely there's more to
                        activating scale mode than meets the eye.

                        Can someone PLEASE help us figure this out?

                        Thanks.

                        • 9. Re: Flex Project Form Scaling
                          jrpruitt Level 1
                          Ok, here is the answer.

                          ScaleMode does not work correctly on Flash Players less than version 9,0,24,0.

                          Changing the HTML wrapper to require version 9,0,24,0 or above will force a download of a version that will work.

                          To change the wrapper that Flex Builder generates, click on Project -> Properties -> Flex Compiler -> and change the "Detect Flash Player Version" to 9.0.24.
                          • 10. Re: Flex Project Form Scaling
                            Rachel_Adams Level 1

                            Thanks. That worked.
                            You are a lifesaver.

                            Rachel
                            • 11. Re: Flex Project Form Scaling
                              jrpruitt Level 1

                              Rachel Adams wrote:
                              I've found it works best with a canvas as your bottom layer and doesn't seem to resize correctly if the initial size is much above 600 x 360.
                              Perhaps someone here can explain to me why that is. It's so tedious working with a 600x360 canvas. I may have missed some important step here.

                              I don't know why the higher resolutions don't scale correctly, but here's something that worked for me.

                              Setup your base layer as follows:
                              <mx:Canvas id="baseLayer" width="1200" height="720">

                              This allows you to design in 1200 x 720 resolution

                              Then, add these two lines to your InitApplication() routine.
                              baseLayer.scaleX=.5;
                              baseLayer.scaleY=.5;

                              This will rescale it to 600 x 360

                              Note, you can use different design resolutions depending on what will will fit in your design window.
                              For instance:
                              <mx:Canvas id="baseLayer" width="800" height="480">

                              baseLayer.scaleX=.75;
                              baseLayer.scaleY=.75;
                              Still ends up with a Run Time resolution of 600 x 360

                              Hope this helps.
                              • 12. Re: Flex Project Form Scaling
                                MrBritton Level 1
                                I raised this issue again, with some new information and a simpler approach to setting scaleMode, in new thread: http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=60&catid=585&threadid =1245655&enterthread=y

                                I