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. 您的應用可以在任何設備上正確填充整個屏幕。