Creating an app for different screen resolutions/sizes

Hi,

So far I've only been developing for iOS devices using Flash CS5.5 and publishing to AIR for IOS.

To date I've only been developing for the lowest res - which I believe is the iPod Touch 3G / iPhone 3G - a res of 320 x 480 px.

I've seen one of the apps I produced this way running on an iPod Touch 3G, iPad1, and an iPhone 4.

Considering this is the lowest res, the results aren't bad.  The iPad gives you the option to run it at it's native size, or to scale it up (which basically applies some sort of zoom).  Obviously, when scaled, some pixelation occurs.

This isn't a perfect solution by far - but it will at least mean that your app should be viewable on every iOS device (that's my theory anyway).

Cheesrs.

Hi Vic,

The biggest advantage of building apps in Flash CS5.5 or Flex is the ability to target multiple devices and the 2 major platforms, iOS and Android oh and also Blackberry (anyone?).

Best way to approach a build is to assume you do not know the screen size your app will be used on, since Android is so all over the place.

I have been using stage.stageHeight and stage.stageWidth religiously for all my scaling although I have heard that method has its problems, it has worked well for me, I have put out 2 apps personally and 3-4 for work using this method both in Landscape and Portrait orientations and this method has worked well.

The easiest way to build a multi screen app is to design it for an average ratio, 3:4 being the lowest = iPad so lets say you pick some decent size that wont be too big for smaller screens like the iPhone 3gs 480x320 and wont be too low for high res screens like the new Google Nexus or the Motorola Xoom 1280x800. I usually target the iPhone 4 screen 960x640 right now it seems to fall in the middle between older phones and tablets.

The real quick and dirty way of doing it is to build all your assets inside a movie clip and then scale that movie clip proportionally to the stage, first checking to make sure none of it would be cut off due to different screen ratios, this is not the best way of doing it but it works well and its the easiest method.

A better way is to scale and place your content in relation to the stage, again the stage.stageWidth and Height properties are your friends so if you have an element that always goes in the middle you would place it my_mc.x = stage.stageHeight / 2 and same with the y, you can also scale it to the stage my_mc.width = stage.stageWidth/4 this way the movie clip is always 1/4th of the stage width regardless of the screen, its a lot planning up front but this method allows you to cover the entire screen instead of just cramming your movie clip in there however it fits.

Let me know if any of that helped I can go into further detail but I feel like I am rambling on.

Are you considering Flex Application or pure AS application?