Building for iPad3 Retina with FB4.7 & AIR 3.5

[ZIshani]

If I build a basic application with only a button and deploy it to an iPad 3, the size of the button appears smaller then If I were to build the same application and run it on an iPad2 (where the button appears the normal size).

This is do not understand. I can't find a single bit of info on deploying to an iPad with a retina display anywhere on the net when using Air3.5 and FB4.7.

I was under the impression that AIR3.5 can deploy for iOS5.1 and hence support retina displays fine (which 3.1 could not on a windows machine).

What are the basic steps to creating an appication usng FB4.7 and AIR3.5 that scale items correctly when viewed on a retnina display please?

Thanks

[Nabren]

Well the first thing to understand:

iPad 1 & 2 have a resolution of 1024x768.

iPad 3 & 4 (Retina) have a resolution of 2048x1536 but the same physical size.

What this means is the pixel density on the iPad Retina resolution is twice as much. This is often referred to as DPI. http://en.wikipedia.org/wiki/Dots_per_inch

What this means is you either need to make your app scale based on resolution or perform your size calculations based on DPI so it's always the same size no matter the DPI. The right method depends upon the app.

[ZIshani]

Thanks for this - I'm happy with your first 3 points.

Point 4 - 'make your app scale based on resolution' do you mean design for 1024 x 768 and let the retina scale up (which results in pixelated results obviously)

'perform your size calculations based on DPI ' - do you mean check what the DPI is as soon as the app is run on the device, then deploy a different set of images (x2 in resolution) if retina is detected?

THanks for you help.

[5898845]

Yes, you need a DPI provider that calculates how to scale your UI based on the device's screen properties during the initialization process, so before your UI is being rendered.

[Nabren]

Both methods are valid. I think you will be surprised how crisp things look on iPad retina scaled 200% but if quality is a concern then yes you can definitely have different images for the different resolutions.

This is a good article to read on that: http://developer.apple.com/library/ios/#documentation/2DDrawing/Conceptual/DrawingPrintingiOS/Suppor...

I would start with scaling everything up first and then if you are not pleased with the look I would move on to making higher quality images for the higher resolutions.

[ZIshani]

Thanks for all this - one more question then. I understand that one needs to produce '2 sets' of images (if not going down the scaling route) - however, what about components.

If I use a button component in an application with FB4.7 - surely if a view the app on an iPad 3, the size of the button should be the same size (but crisper) as if i were to view the app on an iPad 2? However it is not. The button appears as one would expect on the iPad 2, and on the iPad 3 - the button appears crisper BUT smaller?

Please could you explain this for me? thanks!

[Nabren]

You would either have to scale the button or create two versions of it.

[ZIshani]

You are kidding. Your saying I basically need to create a custom renderer for the sark button component and customise it for a retina display???? Is that not something that flash builder should be doing automatically by now?!

[David_Welch3]

If you want the size to stay the same on all your devices, then, I would suggest you set the applictionDPI in your top level application to 160.  Then, the components stay the same size.  There are many posts about why this is the case.  Or, you could avoid pixel size when you size components, but, this would also be difficult, also many posts about sizing/dpi for Flex mobile apps.  This isn't any different than doing web development formatting for monitors that have super high density vs a 640x480 monitor.