Skip to main content
Known Participant
February 6, 2012
Question

Basic questions about graphics on different devices

  • February 6, 2012
  • 4 replies
  • 1950 views

I've googled this, and read articles, but I'm still not clear on how it works in regards to creating graphics for apps that are suited for different screen sizes. When you create the iOS file, it sets it up as a certain screen dimensions, so am I right in presuming that you have to have different .fla's for different devices? one for the iPhone one for the iPad etc? because I keep seeing games that's that are advertised as compatible with the iPhone and iPad, does the app somehow know that what screen it's on and then resize the graphics automatically?

Thanks for any advice.

Regards

Phil

This topic has been closed for replies.

4 replies

Participating Frequently
April 7, 2012

Hello, I would like to ask somebody who have already submited their apps to the android market on how many devices you have tested you app before submiting it? Basicly how many devices you have to test on?

Colin Holgate
Inspiring
February 7, 2012

You have two main choices. Either set the stage to no scale, and then do all the laying out of things using code, to look right for the screen that the app is running on. Or, don't set the stage scale at all. With the default setting the stage will scale itself to be as big as it can be, and still be all in view.

So, make your FLA be iPad sized, but with extra content on the left and right of the stage. If you have enough extra content to fill a width of 1366 pixels, that's enough to take care of all current devices. On iPad you'll get exactly what you saw in the stage area. On Retina you'll get the 768 height scaled to be 640 tall, and you'll see a bit of the extra content on the sides. For typical Android you'll get the 768 scaled to 480, and you'll see even more of the contents from the sides.

The widest current device is the Galaxy Nexus, which is 1280x720. The iPad content would be scaled to a height of 720, and all of the 1366 wide spare content you made would be visible. You do have to have interesting but not important stuff off to the sides. Also, when animation things on and off the sides, make sure they go far enough to go beyond the extra content before being removed.

If you're doing a utility like application, doing the code layout may be the right way. If it's a graphically laid out application, then the way I just described works very well, and you end up supporting all sizes using one FLA.

February 7, 2012

Colin I am going to try your method on my next app, you keep preaching it and it seems to work for you I like the idea of just one file and everything is exactly where you  expect it.

February 7, 2012

I would set the stage size  to what ever device you consider your primary for me it seems to be the iPhone 4 so thats my stage size, although my stage size is usually 480 x 320, which is the older iphone resolution, but its perfectly 1/4 of the iPhone 4 so it works out.

The graphics are usually scaled for somewhere middle of the road so on the iPhone 4 they might look just right, on the tablets they get scaled up a bit but its really unnoticeable and on the older phones they shrink a bit so sometimes you get little weird pixelation going on but its better to target future devices than older ones that are phasing out.

I tend to use bitmaps for everything visible since gpu tends to work best for me and vectors dont mix with gpu mode very well.

Colin Holgate
Inspiring
February 7, 2012

The first time I used the trick I described, I did make the stage be 480x320, and with graphics that were iPad resolution but scaled down on the stage. They looked great on iPad. But, the problem is that with 480x320 you would have extra content above and below the stage to be revealed on the iPad, which is the only screen ratio that is narrower than iPhone. By making the content be iPad ratio, you can then support any number of wider ratios just by having extra content off to the sides.

February 7, 2012

The only thing that would mess up that method is if somebody came out with a perfectly square tablet.

Colin when you design with that method don't you also have to consider the most narrow / wide screen device (depending on orientation) because your content will essentially get cropped on other devices, so you cant have any crucial elements outside that live area is this a correct assumption?

February 7, 2012

Yes that app does know, you can use stage.stageWidth and stage.stageHeight to scale your movie clips and place them accordingly. Both of the apps I have out orient all the elements to the stage. This allows me to build one app and distribute it on multiple OSs and all screen sizes. As far as graphics go, pick something middle of the road, iPhone 4 is a good jumping off point, its high res enough to be scaled up to an iPad or a Xoom but low res enough to still look good on the smaller 3gs screen and its almost the same size as most android phones 840 x 400.

Known Participant
February 7, 2012

Ok, so you're saying change the standard iOS .fla stage width/height to 840x400? or just set the stageWidth/Height to whatever the device is that it's on anyway, so it doesn't matter what the starting .fla stageWidth/height is? in regards to the graphics, what do you design them for though? the iPad? and then just shrink down (bitmap or vector) or design them say the iPhone 4 as vector, and then scale up/convert to bitmap on the fly when needed?