Search

 

August 2011
S M T W T F S
« Jul   Sep »
 123456
78910111213
14151617181920
21222324252627
28293031  

Tags

Archives


« | Main | »

Styling AIR applications for iOS – part 1

By Rich Tretola | August 18, 2011
9,104 views

Apple’s iOS operating system appears on several devices that support Adobe AIR compiled applications. This is a great thing however can lead to some challenges for multiple reasons. First, iOS devices range widely in their screen resolutions and pixel density of those screens. Second, Apple has pretty rigid requirements for the design of your application and routinely rejects applications for design reasons.

This series includes excerpts from my newest book titled Developing iOS Applications with Flex 4.5.

The first part deals with bitmap resolutions for your iOS applications.

The resolution of an iOS device varies depending on the device. The devices with higher resolutions have a greater DPI (pixel density). To allow your application images to display correctly across these resolutions, you can use MultiDPIBitmapSource to define multiple versions of your bitmaps and ensure that the appropriate bitmap is used. The example below defines 3 versions of an image. The first is 36×36 pixels in size, the second is 54×54 pixels, and the third is 72×72 pixels. If the operating system’s DPI is less than 200 (like on the iPhone 3G), the 36×36 image will be used; if the DPI is greater than or equal to 200 and less than 280, the 54×54 will be used; and if the DPI is greater or equal to 280 (like on the iPhone 4), the 72×72 will be used.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.core.FlexGlobals;
99
protected function button1_clickHandler(event:MouseEvent):void
{
log.text = "Image: " +
myImage.source.getSource(
FlexGlobals.topLevelApplication.runtimeDPI)
.toString() +
"\nDPI: " + Capabilities.screenDPI +
"\nResolution" +
Capabilities.screenResolutionX + " x " +
Capabilities.screenResolutionY;
}
]]>
</fx:Script>
<s:VGroup verticalCenter="0">
<s:Image id="myImage">
<s:source>
<s:MultiDPIBitmapSource
source160dpi="icons/logo36.png"
source240dpi="icons/logo54.png"
source320dpi="icons/logo72.png"/>
</s:source>
</s:Image>
<s:Button label="getSource" click="button1_clickHandler(event)"/>
<s:TextArea id="log"/>
</s:VGroup>
</s:Application>

The next post (part 2) will dive into using CSS to style your iOS application.

Topics: Adobe AIR, Flex, iOS | 5 Comments »

5 Responses to “Styling AIR applications for iOS – part 1”

  1. Styling AIR applications for iOS – part 2 | EverythingFlex: Flex & AIR Says:
    August 19th, 2011 at 7:46 am

    [...] Styling AIR applications for iOS – part 1 [...]

  2. Vic Says:
    August 20th, 2011 at 7:48 pm

    People don’t user pure .as for mobile??

    Reply to this comment

  3. Cool Stuff with the Flash Platform - 8/19/2011 | Remote Synthesis Says:
    August 22nd, 2011 at 12:03 am

    [...] excerpts from his new book on Flex development for iOS covering styling AIR applications for iOS. Part 1 focuses on handling the various DPI's of iOS devices using MultiDPIBitmap. While part 2 deals with [...]

  4. Styling AIR applications for iOS – part 3 | EverythingFlex: Flex & AIR Says:
    August 22nd, 2011 at 7:37 am

    [...] The first part demonstrated the MultiDPIBitmap property for including bitmaps that target screen den…. [...]

  5. Reid Says:
    December 28th, 2011 at 1:30 am

    I’m trying to use a dimension specific image as the background of my app. Using the approach above my iPad background image (sized to 1024×768) shows up when running on an older iPhone with a DPI of 163.

    How would I get it to display an iPhone3GS background image (sized to 320×460)?

    Reply to this comment

Comments