1 Reply Latest reply on Apr 4, 2010 4:58 PM by Nicholas Pufal

    [solved] Make content fit the TitleWindow's size proportionally

    Nicholas Pufal

      Hi everyone,

       

      I have a component which has the super class TitleWindow. It's basically used as a popUp for my application. So it receives a file name and adds it to the popUp using the MXML tag Image.

       

      This content received is a SWF file, and I had no problems using the tag Image to import it (I'm new to Flex, but I guess there is nothing wrong with it).

       

      My problem is that my application has a sort of "PowerPoint" style, and is going to be used in some presentations, so I want to make sure it works on all screen resolutions, from 800x600 till 1280x1024. And that's where the problem begins.

       

      I could simply let Flex determinate the size of my popUp (depending on what is the size of the content, the SWF file), but I simply can't. That's because all of the SWF files are going to be 800x600, and so when you run this app in a 800x600 screen, things get messy. The popUp gets too big (in order to contain the content).

       

      So the solution was to manually set the size this popUp, based on the user's screen resolution. I did this simply by using:

       

       

      this.width = stageWidth * 0.9; 
      this.height = stageHeight * 0.8;
      

       

       

      This works great and is exactly what I want.

       

      However, the content is not being fitted into the popUp correctly anymore. It seems after setting manually the width and height of my popUp, all of those wonderful properties, such as horizontalAlign="center" and verticalAlign="middle",  were lost also. The content is too big when seeing the app in a 800x600 computer, while the popUp is on a correct size.

       

      So I tried to resize the content also, based on the this.width and this.height. That solves some trouble, but then the problem is that X and Y positions are all messed, and so my content appears on wrong places, depending on the user's resolution.

       

      Straight to the point: after customizing the width and height of my popUp (TitleWindow) how can I set the content to keep the aspect ratio (don't get distorted, since it's a 800x600 file) and also to be resized according to the dimensions that popUp has? I'm here for like 6 hours just trying and failing to do it, and it must be an easier way to do it in Flex.

       

      Appreciate any advice.

       

      Thanks!

       

      Solved: I changed the Image tag for the SWFLoader tag. Also, added the property horizontalAlign="center". The rest was the same, and this solved my problem :D Weird.. I saw on some tutorials that Image could be used without problems to load SWF files... Well, works, and for sure it must be more correct also.