Skip to main content
K
kenshin81x
Participant
January 22, 2013
Question

How do I develop for multiple screen resolutions using Adobe Air

  • January 22, 2013
  • 4 replies
  • 810 views

Hi,

I'm looking at developing mobile apps using Adobe Air but there's something I'm not quite sure. Sorry if this is a newbie question or has been repeated but I have looked at tutorials, etc but just want to get a general idea on how to prepare the assets. Here are some of my questions:-

1) If I want to develop for the iPhone non-retina and retina resolution, do I actually need to only write the code and layout the graphics in retina(960 x 640) stage size and it will automatically scale down for non-retina resolution?

2) How do I cater for iPhone 5 resolution? Do I actually need to swap say the background images through code by detecting the resolution size it was in? or do I actually just leave the background image longer it exceeds the stage height so when it's iPhone 5 it will show everything?

thanks for the help!

This topic has been closed for replies.

4 replies

Colin Holgate
Colin Holgate
Inspiring
January 22, 2013

If you are talking about regular Flash work, and not your own code-layout application, then what happens depends on the scale mode of the stage. Typically, when doing code layout the stage is set to no_scale, and you have to do all the hard work yourself, calculating the size of things, and laying them out with ActionScript.

If it's more of a typical Flash graphical scene there are two other scale modes that make life easier for you.

The default scale mode is show_all. With that you will be certain to see all of the content of your original Flash stage, and if the screen is a wider ratio than your stage, the content that is off the sides of the stage will be revealed. See this app I made, that uses that technique:

https://itunes.apple.com/us/app/meet-heckerty-funny-interactive/id514220257?mt=8

It works well enough, I have enough extra background graphics to go out to a 16:9 screen, including iPhone 5. That particular stage is 1024x768, and it will scale all the way from iPad 3 Retina down to iPhone 3gs.

The other scale mode that is useful is no_border. In that mode you are certain to not have any black borders around the stage. It achieves that by cropping into either the left and right, or the top and bottom, of the stage. See these apps I made, that work that way:

https://itunes.apple.com/us/app/milkshake-mayhem/id556962979?mt=8

https://itunes.apple.com/us/app/p.s.-snowflake-yourself/id571384475?mt=8

In both of those cases I have content that is correct for half way between the ratio limits of 16:9 and 4:3 (or 9:16 and 3:4 for the portrait case). When the app runs on your device, some amount of the left and right, or the top and bottom, of the stage is cropped. I have enough background content for that to be ok, and all of the important content is within the middle 14:9 or 9:14 area of the screen. The stage size for the landscape app is 1680xx1080, exactly 14:9. This approach is better than the show_all one, in that the user doesn't feel like they are seeing a lot of blank space, as can be the case when viewing a 4:3 stage on a 16:9 screen.

One last thing, even with either of those techniques the app won't fill the iPhone 5 screen. To get that to work you have to include a splash screen that is 640x1136, and name Default-568h@2x.png. With that in place iOS knows to make your app use the full width or height of the iPhone 5.

K
kenshin81xAuthor
Participant
January 23, 2013

Hi Colin,

Thanks for the explanation. It was helpful.

Lars Laborious
Lars Laborious
Legend
January 24, 2013

If you choose to go for show_all, you could place certain elements - such as menu buttons - in the corners off stage (when viewing a 4:3 stage on 16:9 screen) to fill out the "blank space". Just find out how much space there are on the sides, bottom and top. Something like this: 

var sW:uint = stage.stageWidth;

var sH:uint = stage.stageHeight;

var fW:uint = stage.fullScreenWidth;

var fH:uint = stage.fullScreenHeight;

var prs:Number = fH/sH * 100;

var prs2:Number = fW/sW * 100;

var pW:Number = sW/100 * prs;

var pH:Number = sH/100 * prs;

var difW:Number = (fW-pW);

var difH:Number = (fH-pH);

var xtraSpaceWidth:uint = (difW/2) * 100 / prs;

var xtraSpaceHeight:uint = (difH/2) * 100 / prs;

Firefly Community Gallery
Adobe Firefly

Remix with Firefly Community Gallery

Thousands of free creations to fall in love with and remix in Firefly.

Explore now
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices