Flex mobile apps for iPhone 5 screen

Question

I just tested my first Flex mobile app on iPhone 5, but as I was assuming it doesn't fit to the new 4" screen. Does anybody know if this is already possible? (using Flex 4.6 SDK)

To use the new screen sizes in iOS; I believe you'll need to update your iOS SDK. You can get the SDK from Apple in their developer portal. And there is a spot to specify the iOS SDK in Flash Builder. In Flash Builder 4.6 I believe you'll need to be on a MAC to change the iOS SDK. — JeffryHouser, Nov 03 '12 at 13:52

score 3 · Accepted Answer · answered May 16 '13 at 13:18

This is a little goofy, but it works. First, make sure you've got the latest AIR SDK installed in your Flash Builder eclipse plug in directory. That will make sure that the following trick actually works.

Now, go to your projects main MXML file (if you're building a view based project that will be a ViewNavigatorApplication class instance). In the opening ViewNavigatorApplication tag place a property for splashScreenImage with a value of "@Embed('Default-568h@2x.png')". It should look something like this…

<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                        xmlns:s="library://ns.adobe.com/flex/spark"
                        firstView="views.myFirstView"
                        splashScreenImage="@Embed('Default-568h@2x.png')">

Now, make a 640w x 1136h splash screen png and name it "Default-568h@2x.png". Place that image file in the root (probably your "src" directory) of your project. Compile for your iPhone 5 target and voila!

It turns out that AIR looks for that larger splash screen file as an indicator that you're targeting an iPhone 5 screen size. No setting in the app.xml file. No property in code. Just that splashScreenImage file name.

THAT'S obvious, huh?

As far as creating different layouts for different screen sizes Rich Tretola has a great and cheap book, iOS Applications with Flex 4.5, that discusses responsive design using @media queries. His website has an excerpt that might help… but the book is cheap, useful and quick to read.

I did not add the Embed info to the Application splashScreenImage (because I'm using a component to provide different images to different resolutions) but I did place the "Default-568h@2x.png" image in the src directory and built the app with the iOS 6.1 SDK and this correctly displayed using the full resolution on an iPhone 5. So hopefully this is useful to those of you using a component like me without having to build an app to test first, etc. I used Flash Builder 4.7 and AIR 3.8. — Tyler, Aug 29 '13 at 16:31

score 2 · Answer 2 · answered Sep 01 '13 at 07:25

You can dynamically change the splash screen like this:

<?xml version="1.0" encoding="utf-8"?>
<s:SplashScreenImage xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">  

    <fx:Script>
        <![CDATA[
            override public function getImageClass(aspectRatio:String, dpi:Number, resolution:Number):Class 
            {
                var x:Number = Capabilities.screenResolutionX;
                var y:Number = Capabilities.screenResolutionY;


                // HTC
                if ((x == 480) && (y == 800)) return img_480_800.source;

                // iPhone 5
                if ((x == 640) && (y == 1136)) return img_1080_1920.source;

                // iPhone 4
                if ((x == 640) && (y == 960)) return img_640_960.source;

                // Samsung galaxy s3
                if ((x == 720) && (y == 1280)) return img_720_1280.source;

                // Samsung galaxy s4
                if ((x == 1080) && (y == 1920)) return img_1080_1920.source;

                // Default
                return img_1080_1920.source;
            } 
        ]]>
    </fx:Script>


    <s:SplashScreenImageSource id="img_480_800" source="@Embed('Default_480_800.png')"/>
    <s:SplashScreenImageSource id="img_640_960" source="@Embed('Default@2x.png')"/>
    <s:SplashScreenImageSource id="img_720_1280" source="@Embed('Default_720_1280.png')"/>
    <s:SplashScreenImageSource id="img_1080_1920" source="@Embed('Default-568h@2x.png')"/>

</s:SplashScreenImage>

....

splashScreenImage="DynamicSplashScreen"

Flex mobile apps for iPhone 5 screen

2 Answers2