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.



      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.


      decorator = "{chooseDecorator()}"


      //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:
              case mx.core.DPIClassification.DPI_240:
              case mx.core.DPIClassification.DPI_320:
          return rtnVal;


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