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

6 Responses to Using Bitmaps in Flex Mobile Projects

  1. Pingback: Flash Tutorial: How to use Bitmaps in Flex Mobile Projects | Adobe Flash Lite

  2. Max says:

    Thank you. Great post about dpi sizes. It really helped me a lot. My only remaining issue is with the application splash screen image. Do you know if we can also set different images for the splash screen based on dpi?

  3. Where can I find your sample code?

    You say that it’s near the end, but I have looked through this entire blog post several times and I cannot see it anywhere.

    I’m having difficulties getting my images shown when I use MultiDPIBitmapSource. I see a big questionmark shown instead. I suspect that my images aren’t bundled correct.

    I was hoping that I could look at some sample code to see how it properly includes images.

  4. Ah.. I just realized what was wrong I had to use @Embed

  5. Tim says:

    How did you get them (240 & 320) to display the full width of the display? I used the images you have above, they are like 1/4 of the screen width.

    If I scale it to 480 wide… on a 160/app and 160dpi device it looks fine. But on a 240 or 360 it becomes waaaay to large.

    What am I doing wrong?