如何控制手機應用程式直看或橫看效果

製作Android 手機應用程式 (App)和電腦桌面應程式有一點最大不同的地方, 就是屏幕(顯示器)的觀看方向。所有桌面電腦的顯示器都是橫放在桌上觀看的, 而手機的屏幕卻可以隨意直看或橫看, 有些使用者更喜歡不時的改變屏幕的方向。所以, 製作的 Android 手機應用程式必須可以方便的直看或橫看, 這點在設計是手機應用程式時必須要留意的。

今天就討論在使用 Flash CS6 製作Android 手機應用程式時, 如何控制應用程式的直看或橫看時的效果。

在設定 Flash CS6 製作 Android 手機應用程式時, 因為方便使用者可以隨意直看或橫看, 一般都會作以下設定。

要設定發佈在 Android 智能手機的平台, 選擇 File – AIR 3.4 for Android Setting, 如下圖:

在 General 設定中都會在 Aspect Ration 選擇 Auto 及勾選 Auto Orientation, 如下圖所示:

這樣, 應用程式的內容會按照手機屏幕直看或橫看而自動的調整。以下我會用一個簡單的例子來討論這特性。

現時大部份智能手機屏幕的解像度 (Resolution)都是 480 x 800 pixels, 所以我也以這尺寸來製作 Android 手機應用程式。

應用程式的內容十分簡單, 是一個小丑的面孔。

橙色方框是 Flash 的舞台 (Stage), 尺寸是 800 x 480 pixels, 你可以視為手機屏幕的橫看方向。

為了清楚知道應用程式的內容如何按照手機屏幕直看或橫看而自動調整, 我額外做了一個藍色的方框, 尺寸是 480 x 800 pixels, 你可以視為手機屏幕直看時的方向。

記得設定發佈在 Android 智能手機的平台, 在 Aspect Ration 選擇 Auto 及勾選 Auto Orientation, 如下圖所示:

接著使用 Flash CS6 本身的 Android 模擬器檢視 Android 應用程式執行結果。

按下 [CTRL] + [Enter] 鍵盤測試動畫後, Android 模擬器便會自動開啟, 十分方便。

手機屏幕橫看應用程式的效果

因為 Flash 舞台的尺寸是 800 x 480 pixels, 和手機屏幕橫看方向的情況是一樣, 所以顯示效果和預計是相同的, 如下圗所示:

手機屏幕直看應用程式的效果

現在將 Android 模擬器旋轉 90度, 手機屏幕馬上變成直看, 如下圗所示:

Flash CS6 是十分聰明的, 當感應到手機屏幕是直看時, 便會將內容按比例的縮小, 令內容剛好全部顯示在屏幕內。

這樣的做法有一個最大的優點, 就是可以確保所有內容都顯示在屏幕內。但是, 缺點是內容縮細了。

如何令程式內容尺寸無論橫看和直看都是一樣?

如果希望應用程式內容在屏幕橫看和直看的尺寸是都是一樣的, 這樣有沒有辦法呢?

當然可以, 而且是十分的容易便做到, 只要在 Flash CS6 加入以下簡單的 AS3 程式碼, 取消調整舞台的尺寸便可以了 :

// Turn off scaling of stage
stage.scaleMode = StageScaleMode.NO_SCALE;

重新檢視 Android 應用程式執行結果, 現在無論屏幕橫看和直看, 應用程式內容的尺寸應該都是一樣的。下圗是手機屏幕直看的效果:

手機應用程式的「有效內容」面積

如果是採取這方法, 在設計時必須留意「有效內容」的面積, 如下圖所示:

所謂「有效內容」, 即是無論屏幕橫看和直看, 應用程式的內容都可以看到的。 就以上述例子, 中間重疊的地方, 也就是橫看和直看重疊的地方 (Intersection Area), 便是「有效內容」的面積了。 所以, 在設計時, 主要內容都要放在「有效內容」內,  而「有效內容」外的地方主要擺放一些裝飾的附設內容, 以免令部分畫面空白而沈悶。