iPhone不同屏幕尺寸的Flash？ （获得黑条）

Question

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

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

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

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

我花了好几个小时在谷歌上搜索这个，但仍然不明白我的意思。 我试过使用stage.scaleMode设置，但没有任何变化。 我还在包含的文件中添加了一个名为default-568h@2x.png的文件（只是一个尺寸为640 x 1136的绿色矩形），但这也没有显示。

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

任何帮助将不胜感激。

Answer 1

发布图片

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

这是来自Adobe 网站的表格：

• 默认~iphone.png | iPhone 4（非视网膜）640 x 960 Potrait
• 默认@2x~iphone.png | iPhone 4、4s 640 x 960肖像
• Default-568h@2x~iphone.png | iPhone 5、5c 、5s 640 x 1136肖像
• Default-375w-667h@2x~iphone.png | iPhone 6/7/8 750 x 1334肖像
• Default-414w-736h@3x~iphone.png | iPhone 6+/7+/8+ 1242 x 2208肖像
• Default-Landscape-414w-736h@3x~iphone.png | iPhone 6+/7+/8+ 2208 x 1242横向
• Default-Landscape-812h@3x~iphone.png | iPhone X 2436 x 1125横向
• 默认-812h@3x~iphone.png | iPhone X 1125 x 2436纵向

一旦您制作了这些图像（并完全按照所示命名），通过执​​行以下操作将它们包含在您的项目中（它们必须在您的应用程序的根目录中）：

在 FlashPro 中

• 转到您的发布设置
• 转到 AIR for iOS 设置。
• 转到“常规”选项卡
• 将所有这些图像添加到“包含的文件”列表（根）

---

扩展您的内容

• 选项 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 ，然后您就可以调整它的大小和位置像这样：

//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;

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

你可以通过监听舞台上的 resize 事件来做到这一点：

stage.addEventListener(Event.RESIZE, redrawScreen);

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

Answer 2

编码员负责为不同的屏幕尺寸提供不同的解决方案。 您检查设备大小，然后相应地显示内容。 总而言之，这与基于旋转显示不同的内容没有什么不同。 如果您希望有一个神奇的解决方案可以在 AIR 中为您完成所有这些工作，那么您就不走运了，因为没有。

不建议使用舞台缩放模式（您应该始终在移动设备上不使用缩放），因为您将完全放弃根据实际物理设备大小比较显示对象位置的能力（基本上您不会确定是否无论您显示的是在屏幕中还是完全在屏幕外）。

如果您认为为移动设备开发很容易（不仅仅是使用 AIR 而是使用任何技术）那么抱歉，这并不是因为您必须处理所有这些大小。

如何处理它的基本原则：

1. 获取真实设备尺寸。
2. 计算实际密度/比率。
3. 将该大小与您的应用程序的大小进行比较。 （再次缩放模式为无缩放）
4. 提取一般比率（您的应用程序大小与设备大小相比）
5. 使用该比率，缩放并放置主容器（包含整个应用程序的容器），硬：缩放并将所有 DisplayObject 放置在应用程序中。
6. 由于应用程序比率保持不变，因此可以用任何东西填充空白空间。
7. 您的应用可以在任何设备上正确填充整个屏幕。