5 Replies Latest reply on Mar 11, 2010 7:51 AM by KillingMedia

    How to remove the scaled images gap?

    KillingMedia

      Hi everybody,

       

      view this little application, which displays 4 images in 2 cols and 2 rows.

       

      <?xml version="1.0" encoding="utf-8"?>

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

                              layout="vertical"

                              xmlns:local="*"

                              applicationComplete="onApplicationComplete()">

        <mx:Script>

              <![CDATA[

                    // creating an image, ignore that ...

                    private function onApplicationComplete():void

                    {

                          var bitmapData:BitmapData=new BitmapData(400, 200, false, 0x000000);

                          bitmapData.perlinNoise(400, 200, 4, 12345, false, false, 7, false);

                          var bitmap1:Bitmap=new Bitmap(bitmapData);

                          var bitmap2:Bitmap=new Bitmap(bitmapData);

                          var bitmap3:Bitmap=new Bitmap(bitmapData);

                          var bitmap4:Bitmap=new Bitmap(bitmapData);

                          img1.source=bitmap1;

                          img2.source=bitmap2;

                          img3.source=bitmap3;

                          img4.source=bitmap4;

                    }

              ]]>

        </mx:Script>

       

        <mx:VBox height="90%" width="90%">

            <mx:HBox height="50%" width="100%" borderStyle="solid" borderColor="0xFF0000">

                <mx:Image verticalAlign="middle" horizontalAlign="left" height="100%" width="100%" id="img1"/>

                <mx:Image verticalAlign="middle" horizontalAlign="left" height="100%" width="100%" id="img2"/>

            </mx:HBox>

            <mx:HBox height="50%" width="100%" borderStyle="solid" borderColor="0x0000FF">

                <mx:Image verticalAlign="middle" horizontalAlign="left" height="100%" width="100%" id="img3"/>

                <mx:Image verticalAlign="middle" horizontalAlign="left" height="100%" width="100%" id="img4"/>

            </mx:HBox>

        </mx:VBox>

       

      </mx:Application>

       

      These images are scalable, but they keep their aspect ratio. Now have a look at these two screens, which are made at different browserwindow-sizes:

      http://www.abload.de/image.php?img=gap34tu.png

       

      How can this gap inside the boxes be eliminated, so that the scalable images flow together at any window-scaling?

       

      Thanks a lot

        • 1. Re: How to remove the scaled images gap?
          Matt Le Fevre Level 4

          you can utilise the horizontalGap property

           

          for example try this:

           

           <mx:VBox height="90%" width="90%" horizontalGap="0">
                <mx:HBox height="50%" width="100%" borderStyle="solid" borderColor="0xFF0000" horizontalGap="0">
          
                    <mx:Image verticalAlign="middle" horizontalAlign="left" height="100%" width="100%" id="img1"/>
          
                    <mx:Image verticalAlign="middle" horizontalAlign="left" height="100%" width="100%" id="img2"/>
          
                </mx:HBox>
          
                <mx:HBox height="50%" width="100%" borderStyle="solid" borderColor="0x0000FF"  horizontalGap="0">
          
                    <mx:Image verticalAlign="middle" horizontalAlign="left" height="100%" width="100%" id="img3"/>
          
                    <mx:Image verticalAlign="middle" horizontalAlign="left" height="100%" width="100%" id="img4"/>
          
                </mx:HBox>
          
            </mx:VBox>
          
          

           

           

           

          That'll keep the images together horizontally until they run out of height to expand, due to scaling being turned on.

          • 2. Re: How to remove the scaled images gap?
            KillingMedia Level 1

            Hi,

             

            i dont mean the horizontalGap-property.

             

            Look at this screen, i have marked the space i mean with white arrows:

            http://www.abload.de/image.php?img=gapayx6.png

             

            Thanks

            • 3. Re: How to remove the scaled images gap?
              Matt Le Fevre Level 4

              oh right sorry, mis-understood you. It'll be the maintainAspectRatio property you want to switch to false then,

               

              try this

               

                <mx:VBox height="90%" width="90%">
              
                    <mx:HBox height="50%" width="100%" borderStyle="solid" borderColor="0xFF0000" horizontalGap="0">
              
                        <mx:Image verticalAlign="middle" horizontalAlign="left" height="100%" width="100%" id="img1" maintainAspectRatio="false"/>
              
                        <mx:Image verticalAlign="middle" horizontalAlign="left" height="100%" width="100%" id="img2" maintainAspectRatio="false"/>
              
                    </mx:HBox>
              
                    <mx:HBox height="50%" width="100%" borderStyle="solid" borderColor="0x0000FF" horizontalGap="0">
              
                        <mx:Image verticalAlign="middle" horizontalAlign="left" height="100%" width="100%" id="img3" maintainAspectRatio="false"/>
              
                        <mx:Image verticalAlign="middle" horizontalAlign="left" height="100%" width="100%" id="img4" maintainAspectRatio="false"/>
              
                    </mx:HBox>
              
                </mx:VBox>
              
              • 4. Re: How to remove the scaled images gap?
                KillingMedia Level 1

                Hi,

                 

                sorry, but also dont mean the maintainAspectRatio, the images need to keep their ratio.

                 

                The point is, i want the surrounding container to be fitted to the scaled image to remove the unused space. But i dont know how, because the 100% settings are needed for scaling.

                • 5. Re: How to remove the scaled images gap?
                  KillingMedia Level 1

                  The solution is not to work with scaleContent=true.

                  I have to calculate the size of the scales images and set it manually with scaleX and scaleY. Then, there is no bounding-box surrounding and wasting space.