Deploying AIR Apps on iPhone 5

Apple recently released 5th generation of iPhone and iPod Touch. The 5th generation of iPhone and iPod Touch boasts of a 4 inch(diagonal) retina display screen with a resolution of 1136×960 pixels. The 4th generation of iPhone and iPod Touch  sported a 3.5 inch (diagonal) retina screen  with a resolution of 960×640 pixels, in comparison. The table below compares the screen size and resolution of 5th generation devices with the 4th generation devices.

Device Name

Screen Size

Resolution

iPhone and iPod Touch    ( 4th Generation)

3.5 inch (diagonal)

960*640

iPhone and iPod Touch    ( 5th Generation)

4 inch (diagonal)

1136*640

What happens to the existing applications on iPhone and iPod Touch 5th Generation?

The applications that have not been updated to accomodate the new iPhone and iPod Touch screen size  will still run on the new devices. However, they will appear letter boxed. In other words, they will not occupy the entire screen area and the application will be centered amongst two black bars. The black bars will appear horizontally for portrait applications and vertically for landscape applications. The image below shows an letter boxed application running on iPhone 5.

 

iPhone 5 compatibale Application v/s Letterboxed Application running on iPhone 5

iPhone 5 compatibale Application v/s Letterboxed Application running on iPhone 5

How to make existing applications compatible with iPhone 5?

One does not need to write even a single line of code to make your applications compatible with 5th generation iPhone/iPod Touch. One just needs to do the following steps to prevent letter boxing of the application on iPhone 5.

  • Redesign your assets according to the new screen resolution.
  • Add a launch image named Default-568h@2x.png to the package. The resolution of this launch image should be 1136*640 pixels. In case you are already using a namespace schema for your launch images, you can just append “-568h@2x” to the namespace schema.
  • Package your application with AIR 3.5 and above. The latest AIR 3.5 SDK is available here.

Apple only uses the above mentioned parameters to identify whether  an application is iPhone 5 compatible or not. Once done, your application if now fully compatible with 5th generation of iPhone and iPod Touch.

46 Responses to Deploying AIR Apps on iPhone 5

  1. Ked says:

    I read various articles to include the Default*.png in the project, However I’m not sure where to include it, is it specific path relative in your project.

    Also in my mobile app I’m using ViewNavigatorApplication and I’m setting the “splashScreenImage” to my custom class so I load the splash screen, so where does the Default*.png come into picture ?

    Also if they need to be at some location relative in your project will making the ipa on windows machine pick it automatic while packaging the ipa ?

    -
    Ked

    • Varun Bhatia says:

      including it means to keep it the top level directory along with the swf and app-xml files and package it. You dont have to write any piece of code to display it. iOS and AIR automatically search for launch images in top level directory provided they are named in the expected manner.

  2. Greg says:

    I tried it and it’s not working – it is still letter boxed. Does it matter which version is set in the “-swf-version=” parameter?

    I have the [SWF] tag dimentions set to:
    [SWF(width="1024", height="768", backgroundColor=0x000000)]
    Does it matter how these parameters are set?

    — Greg

    • Varun Bhatia says:

      This is not version checked! If the image is in your package it will get displayed. Try to unzip the ipa and check whether the image is available on top level folder or not? Your app must be compiled with AIR 3.5 sdk. In case you are using AIR 3.4 or earlier, you are bound to get your app letterboxed.

  3. Pingback: Apache Flex & iphone 5? first problem: assets | Solu-pedia.com: a place where problems get solutioned

  4. In order to compile an app for iphone3,4 and 5 I just basically check for its Capabilities.screenresolutionY which checks for the device height and just resize and replace my assets accordingly. Maybe, this helps someone.

    Rudy

  5. cybercow says:

    That works perfectly! Thank you. BTW -> by default the “top level directory” to include the splash image is your /src directory where your app descriptor xml file resides.

  6. judah says:

    Hi Varun,

    The typical convention is to list width then height. So instead of 1136×640 it should be 640×1136 pixels. Also, you may need to refresh the root directory and run Project > Clean in Flash Builder. In my case the splash image is displayed despite setting the splashScreenImage property on the application.

  7. mars says:

    I’m not too sure if I understand it correctly but when you mention redesigning assets according to the new screen resolution, do you mean all the in-game graphics? If yes, it also means that all hard coded values would also need to change according to the new resolution?

    I’m currently developing a universal app and managed to get it working fine on iPhone4, 4S, iPad, iPad2, iPad mini. On iPad3, the game display gets scaled down and for iPhone5, the game plays letterboxed.

    • Varun Bhatia says:

      To prevent letterboxing you would have to package the Default-568h@2x.png. Any redesigning the assets as per the new screen resolution, I meant all those assets that were designed only to cater the earlier iPhone resolution. Hard coded values may also required to be changed depending on the usage.

  8. Cedric says:

    So I’ve done everything and it works. When I re-published my apps for the iPhone 5 all the apps worked except for iPhone 4s downwards. There are black bars for lower devices after iPhone 5. What do I do. Is there a code with “Capabilities.screenresolutionY” that someone can link me too or is there another way to fix it for devices lower than iPhone 5. Any comments would be greatly appreciated. Thank you!

    • Varun Bhatia says:

      Have you changed anything else apart from adding launch image for iPhone 5?

      • Cedric says:

        I have changed the assets to iPhone 5 resolution, added the iPhone 5 launch image and used AIR SDK 3.6. Do I need to add iPhone 4S, 4, 3GS launch screens in order for the newly updated iPhone 5 app to resize to iPhone 4S downwards? From my understanding is that there is a different aspect ratio from iPhone 5 compared to the rest which may be causing this. Would this issue for iPhone 4S downwards normally happen when following the steps in your blog?

        • Varun Bhatia says:

          You need to add the launch images you were using previously for iPhone 4S downwards. This should make things work for you.

  9. Fenil says:

    Hi,
    I tried it as to set the default image as per given name,but i am still getting bars at top and bottom.

    • Varun Bhatia says:

      You have to include an extra launch image named as Default-568h@2x.png of resolution 1136*640 in the package. I think you are just renaming the old launch image as per the new naming conventions.

  10. Nhạc DJ says:

    dụng AIR SDK 3.6. Tôi có cần phải thêm iPhone 4S, 4, 3GS ra mắt màn hình để cho các ứng dụng iPhone 5 mới được cập nhật để thay đổi kích thước cho iPhone 4S xuống? Từ sự hiểu biết của tôi là có một tỷ lệ khía cạnh khác nhau từ iPhone 5 so với phần còn lại có thể được gây ra điều này. Sẽ vấn đề này cho iPhone 4S xuống thường xảy ra khi làm theo các bước trong blog của bạn?

  11. Alex Yamane says:

    Dear Adobe Community,
    I have an Adobe Air iOS app that I’m compiling using Flash Pro CS6 and AIR SDK 3.7. I’ve included a 640×1136 sized splash file called Default-568h@2x.png, and in ad-hoc testing on my iPhone 4, I can see that the new splash page is coming up. However, when I compiled for app_store release, after I submit to iTunes Connect on my Macbook Air, I keep getting kicked out with the “iPhone 5 Optimization” notice. Is there something that I am missing here (such as editing the app.xml file with a few lines to adjust for the iPhone 5, etc.) that I am missing here? I would really appreciate any input from anyone that may have suggestions/help!
    Thank you in advance,
    Alex

  12. basanta says:

    Hi Varun,

    I having problem with iphone5 optimization. I tried with lunch image as following
    Default.png of 320 X480px
    Default@2x.png of 640*960 px;
    Default-568h@2x.png of 640*1136

    Still app is not upload to the app store
    Plz help me out

    • Varun Bhatia says:

      You should not get this error with AIR 3.5 onwards. Please try it with latest version of AIR and let us know.

  13. basanta says:

    And one thing how we can fixed the problem with apple store PIE error

  14. Raffi says:

    Hi Varun;

    Thanks for the great tutorial. I added the Default-568h@2x.png image 640×1136 to the root directory, then made sure it is checked when packaging with FB4.7. However that image is not touched by Actionscript. The main app file has a custon splash screen.
    I got an email from apple rejecting the app for the iphone 5 issue, could this be related to the fact that am using 3.4 air sdk?

    • Varun Bhatia says:

      Raffi, You will certainly be able to get your app approved by using AIR 3.5 or later. I would recommend you to use AIR 3.7.

  15. Raffi says:

    Thank you Varum for your reply. I did add the 3.7 sdk as detailed in this link: http://helpx.adobe.com/flash-builder/kb/overlay-air-sdk-flash-builder.html

    I also added the 3.7 to the app xml file as “../air/application/3.7″ (am using a mac in the cloud), FB through an error complaining about the SDK. Now get this, I just changed the line to “../air/application/3.1″ and it did compile, mind you this is without restoring the original SDK files. Final note, the old SDK is 3.4, new is 3.7 but if I put anything other than 3.1 (“../air/application/3.1″), FB complains

    Regards
    Raffi

  16. Raffi says:

    I think I didnt realize that the instructions are for AS projects, am gonna try the flex project air update instructions here:
    http://helpx.adobe.com/x-productkb/multi/how-overlay-air-sdk-flex-sdk.html

  17. Raffi says:

    Hi Varum;

    Seems I just ran into bigger trouble. I just updated to the 3.7 sdk for windows , and a bunch of errors are generated in the FB project. It is now not recognizing the Busy Indicators, and the spark HTTPService. Is this possible?

  18. Raffi says:

    Hi Varum;

    I just managed to install FB 3.7 SDK on a mac and submitted the app, seems I didn’t get any emails from Apple about the iPhone 5 compatibility.

    Thanks a lot.

  19. virender says:

    Hello Varun sir ,
    I am new in adobe ios application development and using CS6 for develop Ios application, whenever i publish my application with AIRSDK 3.2 its work fine but when i publish my app with AIRSDK 3.7 a white screen is appear.
    if you know what’s the problem then please reply me.
    thanks

  20. Varun Bhatia says:

    By white screen do you mean the launch screen or something else? Is this device specific issue? Kindly provide more details.

  21. Josh says:

    Hey Varun,
    I don’t seem to be understanding what to do. I am using Adobe Flash CS6. I have a splash screen image named Default-568h@2x.png. I then went to the Publish the app. On the bottom of the window that pops up, I added this image under “Included Files.” However, I still receive that dreaded email that says it is not optimized. Also, I unpackaged the .ipa file and found that my included file is in a folder called “Pics” and nowhere else. Essentially, I do not seem to understand where to go to add this file to the top level directory. Could someone please explain in more step-by-step detail?

    Note: I am publishing with AIR 3.7

    • Varun Bhatia says:

      The problem is that your launch image is bundled in the pics folder. By top level I mean that launch image should be present in the directory in which the swf is present. You can keep it at the same place where your other launch images are present. This will certainly fix your problem.

      • Josh says:

        That is the problem I seem to be having. I cannot find exactly where to go to add it to the directory. I tried searching everywhere in CS6 and the only places I can see where you would add something is in the Library or Included Files when you publish it. I must be missing where this directory is. If I can get to this directory, I am sure my problem, along with other new iOS developers, would be solved.

      • Josh says:

        I think the issue has been resolved. What I was doing wrong was that I was doing everything right, but the problem was that I had Default-568h@2x.png in a folder that was not the same folder that had the .fla

        To anyone else that had this same problem, make sure you have Default-568h@2x.png in the same folder that you have your .fla. It cannot be in a separate folder. When you go to publish your project, at the bottom of the window, be sure to include the Default-568h@2x.png with your included files. After you publish it, unpack the .ipa file and it will be in the top directory.

        • Dave says:

          I tried this but still can’t get my app to be fullscreen on iPhone 5. I even checked the ipa file and verified that the Default-568h@2x.png file was packaged.

          I’m using Flash Professional CS5.5. Is fullscreen in iPhone 5 possible with this version?

          Thanks in advance.

          • Dave says:

            I’m really not sure what changed in between me posting this and it working…. but it works now. It may have been that the App ID was incorrect in my publishing settings, but I’ve tried so many different things and am so tired at this point, that my brain is a bit scrambled, and I’m not sure if that’s really what got it working. During one of my many attempts at publishing, I changed the resolution setting to high, but I can’t remember if I changed that AND fixed the App ID in the same attempt. In any case, it works even with the standard resolution setting, so… sorry for my uneducated rambling. I wish this process was easier.

            Please delete this and my previous post. Sorry for the inconvenience.

  22. virender says:

    varun sir
    sir by white screen mean i think only stage is showing.
    I am using AIR SDK 3.2 for publish my application in CS6, and it’s running on my device very well.
    after completing my app i try to publish my application on APPLIE APP Store where my application rejected dew to iphone 5 launch image and invalid PIE binary issue. i read this blog and download AIR SDK 3.7 and publish with cs6 and then try to run on my device a launcher images show then only a blank screen shown to me.
    i can’t what is actual problem with my device or AIR SDk 3.7.
    i have also add Default-568h@2x.png image with 640*1136 (width*height ) and when i explore my ipa i found it. and still my application is rejected.
    please help me

  23. anti snoring says:

    Awesome blog! Is your theme custom made or did you
    download it from somewhere? A design like yours with a few simple adjustements
    would really make my blog shine. Please let me know where you got your design.
    Many thanks

  24. theo says:

    excellent post, we certainly really like this website, keep on it

  25. Pingback: Uploading AIR app into Apple App Store at Jozef Chúťka's blog