iPhone不同屏幕尺寸的Flash?(获得黑条) [英] iPhone different screen sizes in flash? (Getting Black Bars)

问题描述

我是整个编码世界的新手，ActionScript 3 是我的第一次真实体验，如果我不能立即理解您的答案，请见谅.

我在 AIR for iOS 中使用 Adob​​e Flash CC 构建了一个 iPhone 应用程序.所有代码都在时间线中或单独的 .as 文件中(因此不使用文档类).

游戏的核心概念是随机生成的物体从屏幕顶部落下，用户必须点击它们才能让它们在触到底部之前消失.

我的问题是我的文档大小是 640 x 960.我认为这适合 iPhone 4(还没有测试过)，但是当我在 iPhone 5s 上测试时，顶部和底部都出现了条纹.显然它们有不同的屏幕尺寸，但我希望该应用程序能够在许多不同尺寸的 iPhone 上运行.

我花了好几个小时在谷歌上搜索这个，但仍然不明白我要做什么.我尝试使用 stage.scaleMode 设置但没有任何变化.我还在包含的文件中添加了一个名为 [e-mail] 的文件(只是一个尺寸为 640 x 1136 的绿色矩形)，但这没有显示要么.

所以基本上我想知道如何更改我的应用程序和 AS3 代码以允许我的应用程序适合所有不同尺寸的 iPhone?

非常感谢任何帮助.

解决方案

LAUNCH IMAGES

首先，您需要确保项目中包含正确的启动图像.

这是<小时>

扩展您的内容

• 选项 1，填充和裁剪

如果您不介意稍微裁剪一下内容，您可以在应用启动时执行此操作:

stage.scaleMode = StageScaleMode.NO_BORDER

这将缩放您的 swf，使其填满整个屏幕，同时保持纵横比.很容易计算出需要多少填充才能使此方法适用于各种 iPhone 的纵横比的微小变化.

但是，如果您想允许方向更改(纵向到横向)，裁剪可能会太严重.

• 选项 2 - 响应式设计

不过，适应不同屏幕分辨率和纵横比的最佳方法是使您的应用程序具有响应性.这涉及到应用程序开始时的以下代码:

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

现在您的舞台边界 (stage.stageWidth & stage.stageHeight) 将是设备的全宽和全高*.(部分设备底部或顶部仍有软件工具栏)

然后您可以通过代码定位事物.

如果您想要一种简单的方法来转换您拥有的内容(您不想使用代码来调整大小和绝对对齐所有内容)，只需将您的所有内容放入容器 MovieClip 中，实例名称为 container，然后您可以像这样调整大小和位置:

//将容器缩放到尽可能大，同时仍然完全适合屏幕://找出哪个尺寸应该与舞台匹配(宽度或高度)if(container.width - stage.stageWidth >= container.height - stage.stageHeight){container.width = stage.stageWidth;容器.scaleY = 容器.scaleX;}别的 {container.height = stage.stageHeight容器.scaleX = 容器.scaleY;}//它在屏幕上居中:container.x = (stage.stageWidth - container.width) * 0.5;container.y = (stage.stageHeight - container.height) * 0.5;

侦听调整大小事件也是一个好主意，以防屏幕尺寸发生变化(例如，您在桌面上最大化/恢复，或在移动设备上从纵向变为横向).

您可以通过监听舞台上的调整大小事件来做到这一点:

stage.addEventListener(Event.RESIZE, redrawScreen);函数 redrawScreen(e:Event):void {//随着窗口大小的变化调整所有内容的大小.}

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 [e-mail] (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.

解决方案

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

这篇关于iPhone不同屏幕尺寸的Flash?(获得黑条)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！