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

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