1 Reply Latest reply on Aug 22, 2011 5:20 AM by Anirudh Sasikumar

    Graphics scaling issues in Flash Builder 4.5.1

    rtalton Level 4

      Please review this screen shot. Details follow the image.


      scaling.jpg

       

      FB 4.5.1

       

      applicationDPI = "160"

       

      Graphics using MultiDPIBitmapSource scale fairly well.

       

      Graphics used for these properties do not scale well at all:

       

      1) ViewMenuItem's "icon" property.

       

      2) List itemRenderer IconItemRenderer "decorator" property.

       

      3) TabbedViewNavigatorApplication's "splashScreenImage" property.

       

      These graphics assets end up with horrible scaling artifacts, making them unusable. So, I cannot use icons with Menus or Lists or a splash image.

       

      I've reviewed all of Adobe's documentation and followed all of their recommendations for creating graphics assets for use in a mobile applications. Simple graphics with no curved lines or angles less than 90 degrees scale well. Anything else does not.

       

      Attached is a screen shot comparing the scaling issues at 160, 240 and 320 dpi with applicationDPI = "160". It is using an FXG graphic created in Illustrator CS5.5.

       

      The FXG graphic was embedded in the s:IconItemRenderer  like this: decorator = "{images.arrow_list_icon}".

       

      For testing purposes, I also tried switching the decorator at runtime based on the applicationDPI, but of course this fails as the application still scales the graphic whenever the application's applicationDPI property is specified.

       

      <s:List>
      <s:itemRenderer>
      <fx:Component>
      <s:IconItemRenderer
      decorator = "{chooseDecorator()}"

       

      <fx:Script>
      //This code selects a different FXG asset based on the DPI reported at runtime.

       

      import images.arrow_list_icon160;
      import images.arrow_list_icon240;
      import images.arrow_list_icon320;
      import mx.core.FlexGlobals;

       

      protected function chooseDecorator():Class {
          var rtnVal:Class;
          switch (FlexGlobals.topLevelApplication.runtimeDPI) {
              case mx.core.DPIClassification.DPI_160:
                  rtnVal=images.arrow_list_icon160;
                  break;
              case mx.core.DPIClassification.DPI_240:
                  rtnVal=images.arrow_list_icon240;
                  break;
              case mx.core.DPIClassification.DPI_320:
                  rtnVal=images.arrow_list_icon320;
                  break;
          }
          return rtnVal;
      }
      </fx:Script>
      ...

       

      Has anyone come up with methods which can be used to avoid scaling issues with these items when setting the applicationDPI property?