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 iPho

Answer 1

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.

Answer 2

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.
}