1 Reply Latest reply on May 5, 2010 2:18 AM by Karl_Sigiscar_1971

    Image resizing in Flex

    kiran7881 Level 1


      Hi


      We need to add many images to our Appplication , got fed up with adjusting its Height and Width .


      Can anybody help me in knowing what is the best way to resize images in Flex .

       

       

      Thanks in advance .

        • 1. Re: Image resizing in Flex
          Karl_Sigiscar_1971 Level 3

          If your images are of various width and height, you can constrain the width to the height or the height to the width in order to keep the image ratio.

           

          The default behavior of the image component is to scale proportionnaly. So, if you set the width only (e.g to 100%), the height will be set to preserve proportions.

           

          That's in the case where you want to have a constant Image control size whatever the size of the images.

           

          Since your images are likely to be stretched, they need to be smoothed out by Flash Player in order to look good in all cases. Look here:

          http://cookbooks.adobe.com/post_Smooth_Image-4001.html

           

          Now, if you want to have something a la AJAX, where the image control resizes depending on the image you look at, you can still do this:

           

          You do not specify a size for the component, so by default, it will size to the image it displays. When you change the source of the image, the Image component will resize cut. If you want a nice transition between images, use the Resize effect. You just need to maintain the size of your images somewhere so they can become the target size for the Resize effect.

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

           

              <mx:Script>
                  <![CDATA[
                     
                      [Bindable]
                      private var imgWidth:uint;
                     
                      [Bindable]
                      private var imgHeight:uint;
                     
                  ]]>
              </mx:Script>

           

              <mx:Resize id="imgFx" target="{img}" widthTo="{imgWidth}" heightTo="{imgHeight}"/>
             
              <mx:Button bottom="10" right="50" click="img.source='matrixpic2.jpg'; imgWidth=383; imgHeight=373; imgFx.play()" />
              <mx:Button bottom="10" right="10" click="img.source='matrixpic3.jpg'; imgWidth=353; imgHeight=360; imgFx.play()" />
             
              <mx:Image id="img" horizontalCenter="0" verticalCenter="0" />
             
          </mx:Application>