Search code examples
iosiphoneactionscript-3flash

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

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.

Solution

  • 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) enter image description here

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