Using Bitmaps in Flex Mobile Projects

Bitmap image assets typically only render optimally at the resolution for which they are designed. This limitation can present challenges when you design applications for multiple resolutions. The solution is to create multiple bitmaps, each at a different resolution, and load the appropriate one depending on the value of the application’s runtimeDPI property.

The Spark BitmapImage and Image components have a source property of type Object. With this property, you can pass a class that defines which assets to use. In this case, you pass the MultiDPIBitmapSource class to map different sources, depending on the value of the runtimeDPI property.

The following example loads a different image, depending on the DPI:

<s:Image>
  <s:source>
    <s:MultiDPIBitmapSource
      source160dpi="@Embed('assets/160.png')"
      source240dpi="@Embed('assets/240.png')"
      source320dpi="@Embed('assets/320.png')"/>
  </s:source>
</s:Image>
<s:Label text="applicationDPI = {FlexGlobals.topLevelApplication.applicationDPI}"/>


Normally, you would take the same content and scale (and/or design) it for each DPI. For clarity, I’ve created 3 different images for each DPIClassification. The source images are shown together here at their full resolution:


When run on a device, the MultiDPIBitmapSource class selects the appropriate asset based on the runtimeDPI, not the applicationDPI. The bitmap itself is present unscaled, even though the application itself may be using application scaling. The 2 photos below show nearly identical applications. The only difference is that the second application labeled “Bitmap Demo Scaling” is using applicationDPI=”160″. You’ll see that in both cases, the correct bitmap is used. And because of the screen DPI of each device, the physical size of each bitmap is approximately the same.

The main point here is that regardless of which scaling strategy you choose, you should always use MultiDPIBitmapSource when displaying bitmaps in mobile Flex projects.

No Scaling. iPod Touch 4th gen, HTC EVO and BlackBerry PlayBook

 

Scaling with applicationDPI="160". iPod Touch 4th gen, HTC EVO and BlackBerry PlayBook

 

Share on Facebook