iPhone different screen sizes in flash? (Getting Black Bars)

Question

I'm new to the whole world of coding, and actionscript 3 is my first real experience, so sorry if I don't understand your answer straight away.

I've built an iPhone app using Adobe Flash CC in AIR for iOS. All the code is either in the timeline or separate .as files (so not using documents classes).

The core concept of the game is randomly generated objects fall from the top of the screen and the user has to tap them to make them disappear before they touch the bottom.

My problem is my document size is 640 x 960 . I think this fits the iPhone 4 (haven't tested that) but when I test it on my iPhone 5s I get back bars at the top and bottom. Obviously they have different screen sizes but I want the app to be able to run on many all the different size iPhones.

I have spent hours googling this and still don't understand what I'm meant to do. I've tried playing around with the stage.scaleMode settings but nothing changes. I have also added a file called default-568h@2x.png (just a green rectangle with the dimensions 640 x 1136 ) in the included files but this doesn't show either.

So essentially I want to know how to change my app and AS3 code to allow my app to fit all the different size iPhones?

Any help would be very much appreciated.

Answer 1

LAUNCH IMAGES

First, before anything else, you need to make sure you have the correct launch images included in your project.

Here is a table from Adobe's website :

• Default~iphone.png | iPhone 4 (non-retina) 640 x 960 Potrait
• Default@2x~iphone.png | iPhone 4, 4s 640 x 960 Potrait
• Default-568h@2x~iphone.png | iPhone 5, 5c, 5s 640 x 1136 Potrait
• Default-375w-667h@2x~iphone.png | iPhone 6/7/8 750 x 1334 Potrait
• Default-414w-736h@3x~iphone.png | iPhone 6+/7+/8+ 1242 x 2208 Potrait
• Default-Landscape-414w-736h@3x~iphone.png | iPhone 6+/7+/8+ 2208 x 1242 Landscape
• Default-Landscape-812h@3x~iphone.png | iPhone X 2436 x 1125 Landscape
• Default-812h@3x~iphone.png | iPhone X 1125 x 2436 Portrait

Once you have those images made (and named exactly as shown), include them in your project (They have to be in the root of your application) by doing the following:

In FlashPro

• go to your publish settings
• go to the AIR for iOS Settings.
• Go to the "General" tab
• add all those images to the "included files" list (the root)

---

SCALING YOUR CONTENT

• OPTION 1, FILL AND CROP

If you don't mind cropping your content a little bit, you can just do this when your app starts:

stage.scaleMode = StageScaleMode.NO_BORDER

This will scale your swf so it fills the whole screen while keeping aspect ratio. It's pretty easy to figure out how much padding you need to make this method work well for the small variations in aspect ratios for the various iPhones.

However, if you want to allow orientation changes (portrait to landscape), the cropping will likely be too severe.

• OPTION 2 - RESPONSIVE DESIGN

The best way to accommodate varying screen resolutions and aspect ratios though, is to make your application responsive. This involves the following code at the start of your application:

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align     = StageAlign.TOP_LEFT;

Now your stage bounds ( stage.stageWidth & stage.stageHeight ) will be the full width and height of the device*. (some devices still have a software toolbar at the bottom or the top band)

You can then position things through code.

If you want an easy way convert what you have (you don't want to use code to resize and align absolutely everything), just put all your content in a container MovieClip with an instance name of container , you could then size and position it like this:

//scale the container as big as possible while still fitting entirely in the screen:

//figure out which dimension should match the stage (widht or height)
if(container.width - stage.stageWidth >= container.height - stage.stageHeight){
    container.width = stage.stageWidth;
    container.scaleY = container.scaleX;
}else {
    container.height = stage.stageHeight
    container.scaleX = container.scaleY;
}

//center it on the screen:
container.x = (stage.stageWidth - container.width) * 0.5;
container.y = (stage.stageHeight - container.height) * 0.5;

It's also a good idea to listen for resize events, in case the screen size changes (eg you maximize/restore on desktop, or go from portrait to landscape on mobile).

You do that by listening for the resize event on the stage:

stage.addEventListener(Event.RESIZE, redrawScreen);

function redrawScreen(e:Event):void {
    //resize everything as the window size has changed.
}

Answer 2

You the coder are in charge of providing different solutions for different screen sizes. You check the device size and then you present the content accordingly. All in all it is not that different from showing different content based on rotation. If you hope for a magical solution that would do all that for you in AIR you are out of luck cos there's none.

Messing with the stage scalemodes is not recommended (you should always use no scale on mobile) as you then give up completely the ability to compare the position of your displayobject according the the real physical device size (basically you won't know for sure if whatever you display is in the screen or completely out of it).

If you thought developing for mobile was easy (not just using AIR but using any technology) then sorry, it's not especially cos you have to handle all those sizes.

The basic principle on how to deal with it:

1. get the real device size.
2. calculate the real density/ratio.
3. Compare that size to the size of your app. (again scale mode to no scale)
4. Extract a general ratio (size of your app compared to size of device)
5. Use that ratio to either, scale and place your main container (a container that contain your entire app), hard: scale and place all your DisplayObject in your app.
6. Since the app ratio is maintained fill the blank space with whatever.
7. Your app is filling correctly the entire screen on any device.