Highlighted

Developing for all four iPhone resolutions - how do you go about it?

Participant ,
Nov 02, 2014

Copy link to clipboard

Copied

With iPhone 6 out, developing for both iPhone 4, 5, 6 and 6 plus is a must. I'm pretty new to considering adaptive interfaces / content when developing apps, so I'm looking for strategies on how to approach it.

My current case example is a graphic novel-type app. The development process is going to be short, so I'm looking to make an app that just displays in fullscreen on all phones, not necessarily taking advantage of the higher pixel densities. A lot of the content is bitmap pages that need to take up the full screen on all resolutions.

So what are your general strategies for going about this? As I see it, the first issue is the two different aspect ratios. The iPhone 4 is 3:2 whereas all the others are 16:9, so my idea is to first detect if the ratio is 3:2 or not, and make the app either adapt to iPhone 4 or iPhone 5 depending on the result. Apple's automatic scaling of older apps should then take care of scaling up to iPhone 6 and 6+. Correct?

Secondly, what is the next step? Do I save all the bitmap pages of my graphic novel in a 640x960 version (iPhone 4) and a 640x1136 version (iPhone 5) separately, then load the right one at runtime depending on the aspect ratio detected?

Thirdly, if I work in Flash Pro with a 960x640 canvas size, do I then load the correct bitmap version and place it in the top left corner of the canvas because it will then extend to all the edges of the screen - or do I 'center' the iPhone 5 version outside the canvas to make it fit? (Meaning do I place the content at x = 0 for the iPhone 5 version, or at x = - ((1136 - 960) / 2) ?

I hope these questions make sense, especially the last one, and would like to hear how you would approach a project with a short deadline which just needs to run fullscreen on all iPhones.

TOPICS
Development

Views

644

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Developing for all four iPhone resolutions - how do you go about it?

Participant ,
Nov 02, 2014

Copy link to clipboard

Copied

With iPhone 6 out, developing for both iPhone 4, 5, 6 and 6 plus is a must. I'm pretty new to considering adaptive interfaces / content when developing apps, so I'm looking for strategies on how to approach it.

My current case example is a graphic novel-type app. The development process is going to be short, so I'm looking to make an app that just displays in fullscreen on all phones, not necessarily taking advantage of the higher pixel densities. A lot of the content is bitmap pages that need to take up the full screen on all resolutions.

So what are your general strategies for going about this? As I see it, the first issue is the two different aspect ratios. The iPhone 4 is 3:2 whereas all the others are 16:9, so my idea is to first detect if the ratio is 3:2 or not, and make the app either adapt to iPhone 4 or iPhone 5 depending on the result. Apple's automatic scaling of older apps should then take care of scaling up to iPhone 6 and 6+. Correct?

Secondly, what is the next step? Do I save all the bitmap pages of my graphic novel in a 640x960 version (iPhone 4) and a 640x1136 version (iPhone 5) separately, then load the right one at runtime depending on the aspect ratio detected?

Thirdly, if I work in Flash Pro with a 960x640 canvas size, do I then load the correct bitmap version and place it in the top left corner of the canvas because it will then extend to all the edges of the screen - or do I 'center' the iPhone 5 version outside the canvas to make it fit? (Meaning do I place the content at x = 0 for the iPhone 5 version, or at x = - ((1136 - 960) / 2) ?

I hope these questions make sense, especially the last one, and would like to hear how you would approach a project with a short deadline which just needs to run fullscreen on all iPhones.

TOPICS
Development

Views

645

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 02, 2014 0
Adobe Community Professional ,
Nov 02, 2014

Copy link to clipboard

Copied

Do you have different versions of the graphic novel pages, or is there just one version of the page? If there is one version, can you crop into the page without losing anything important?

I would guess that there is one version, and that cropping into the page will lose something important. If that's the case, here's how I would handle it:

Make a stage that is 14:9. The size doesn't matter, but 1400x900 could be a good starting point.

Put down a background texture that fits well with the look of the other images. Make that fill the 1400x900 stage.

Place your page graphics so that they are within the center 1200x788 area of the stage.

Set the stage scalemode to "noBorder".

You now have a layout that will work on all devices, as narrow as iPad, and as wide as iPhone 5. All without any code. On the widest devices you'll see a bit of your background pattern to the left and right of the page graphic. On the narrowest devices you'll see a bit of background pattern above and below the page graphic. But you won't lose sight of anything important.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 02, 2014 0
Participant ,
Nov 02, 2014

Copy link to clipboard

Copied

This was immensely helpful. I like the idea of using a large background outside the canvas and centering the content on it to make the app fullscreen, if I understand you correctly.

I *could* work with two versions (resolutions) of the page. One 640x1136 and one 640x960. Once I've detected the aspect ratio and loaded the proper version, is it just a matter of placing the 1136 version so that an equal amount 'sticks out' to the left and the right of the canvas to make it show in full screen? (If my canvas is 960x640, that is.)

Also, I don't understand why I would use "noBorder", if I understand the scalemodes correctly. Shouldn't I use "noScale" to make sure everything stays in its original resolution?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 02, 2014 0
Adobe Community Professional ,
Nov 02, 2014

Copy link to clipboard

Copied

If you're going to create two sets of images, drawn to suit 9:16 and 2:3, you could work out the nearest ratio for the device and load the right one. If that's how you went you could have a stage that is say 640x1136, that exactly matches the 9:16 version, and the 2:3 version would be the height of the stage and centered on the stage horizontally. You hopefully can imagine that means that some of the picture goes off the edges of the stage. If you then use the stage scalemode of "showAll" (which is the default scalemode for Flash), that extra stuff would be revealed on iPhone 4.

Using noScale would mean that only the top left quarter of your graphics would appear on non-Retina phones. You can solve that by putting everything into a movieclip and scaling the movieclip to fit the screen size, but that's exactly what stage scalemode does for you. With either showAll or noBorder the stage gets scaled in a way that works on Retina and non-Retina.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 02, 2014 0
Participant ,
Nov 04, 2014

Copy link to clipboard

Copied

I've seen others suggest that the 0,0 coordinate is the "starting point" for all screens, and that the content extends down and right from that point to wherever the device's screen ends. In your example, the content seems to extend out from the center, if that makes sense. Does this have to do with the stageAlign property, and is the default value "center" - or am I off the mark here?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 04, 2014 0
Adobe Community Professional ,
Nov 04, 2014

Copy link to clipboard

Copied

If you're using noScale, then most time you would also do top left align. If you're using the default of showAll, or you're using noBorder, it does act as if it's centered.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 04, 2014 0
Participant ,
Nov 05, 2014

Copy link to clipboard

Copied

The paragraph "Scaling the app" in this article from the BBC about why they chose AIR for their app "CBeebies Storytime" may be interesting for you:

BBC Academy - Technology - Making CBeebies Storytime: part one

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 05, 2014 0
Adobe Community Professional ,
Nov 05, 2014

Copy link to clipboard

Copied

They use the noBorder approach, but also with some code to place the text elements at the bottom of the device screen, and scaled up to be readable. But as far as the background art goes, it's exactly what I was describing for noBorder.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 05, 2014 0
Participant ,
Nov 05, 2014

Copy link to clipboard

Copied

Colin Holgate skrev:

If you're using noScale, then most time you would also do top left align. If you're using the default of showAll, or you're using noBorder, it does act as if it's centered.

So does this mean that you do use stage.align to determine the "starting point" of the app on the device screen? This is the part I'm still confused about?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 05, 2014 0
Enthusiast ,
Nov 06, 2014

Copy link to clipboard

Copied

Hi, I'm not sure whether you should use stage.align or not in this case, but thought I'd just mention the simple full screen approach. Create a stage for the screen size closest to a square (960x640 for a landscape app that targets iphone). Then make 16:9 graphics (1136x640) with the most important elements centered within 3:2 (the middle 960x640 of the graphics), and place the graphics so that it stretches equally out on both sides of the stage (x coordinate would be -88 in this example). Finally hook the full screen option in the AIR for IOS setting. No need for additional code.

This approach means that there will be a bigger difference in what is shown for the various aspect ratios, than if you go with the noBorder solution, but it works. For higher pixel densities you could make the graphics larger (for instance 1334x750) and manually scale it back down (1136x640).

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 06, 2014 1
Participant ,
Nov 06, 2014

Copy link to clipboard

Copied

This is exactly the kind of practical how-to advice I'm looking for. It made me curious about scaling though. Most of my graphics comes from bitmaps. I haven't really used Flash for scaling for a long time, but I'm assuming you're talking about vector graphics? Or is Flash capable of scaling down too large bitmaps nowadays while maintaining an acceptable quality?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 06, 2014 0
Enthusiast ,
Nov 06, 2014

Copy link to clipboard

Copied

Yes, flash scales down bitmaps fine. For Android you would need to set "allow smoothing" on bitmaps (right click the bitmaps in the library and choose properties), while IOS devices add smoothing to all bitmaps. I usally use bitmaps and GPU, and since I also target iPad I start with a 4:3 stage (1024x768), make all graphics doubled the size and scale it down (50%).

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 06, 2014 1