-
1. Re: Developing for all four iPhone resolutions - how do you go about it?
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.
-
2. Re: Developing for all four iPhone resolutions - how do you go about it?
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?
-
3. Re: Developing for all four iPhone resolutions - how do you go about it?
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.
-
4. Re: Developing for all four iPhone resolutions - how do you go about it?
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?
-
5. Re: Developing for all four iPhone resolutions - how do you go about it?
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.
-
6. Re: Developing for all four iPhone resolutions - how do you go about it?
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
-
7. Re: Developing for all four iPhone resolutions - how do you go about it?
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.
-
8. Re: Developing for all four iPhone resolutions - how do you go about it?
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?
-
9. Re: Developing for all four iPhone resolutions - how do you go about it?
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).
-
10. Re: Developing for all four iPhone resolutions - how do you go about it?
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?
-
11. Re: Developing for all four iPhone resolutions - how do you go about it?
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%).