iphone x issue

Hi.

There are several approaches to create a responsiive UI. What I suggest is to:

- Set the stage to not scale automatically and to align from the top left corner;

- Set the stage scale according to the current stage height divided by the initial stage height - if the actual document height is bigger than the document width;

- Calculate the position of each object based on the stage width and height divided by the stage scale.

Preview:

AS3 code:

[Frame 1]

import fl.motion.easing.*;
import fl.transitions.Tween;
import flash.display.MovieClip;
import flash.display.StageAlign;
import flash.display.StageDisplayState;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Rectangle;
var scale:Number;
var fullWidth:Number;
var fullHeight:Number;
var minWidth:uint = 300;
if (!this.started)
{
     var initialStageWidth:int;
     var initialStageHeight:int;
     var menuToggled:Boolean = false;
}
var onResize:Function = function(e:Event):void
{
     homeText.x = (fullWidth - homeText.width) * 0.5;
     homeText.y = (fullHeight - homeText.height) * 0.5;
     highlight.x = homeButton.x;
     highlight.y = homeButton.y + homeButton.height * 0.65;
};
var start:Function = function():void
{
     resizeHandler(null);
     stop();
};
function resizeHandler(e:Event):void
{
     // resize code for all screens
     var headerMiddleY:Number;
     fullWidth = stage.stageWidth / scale;
     fullHeight = stage.stageHeight / scale;
     scaleX = scaleY = scale;
     header.width = fullWidth;
     header.y = fullHeight - header.height;
     headerMiddleY = header.y + header.height * 0.5;
     menu.protection.width = fullWidth;
     menu.protection.height = fullHeight;
     if (fullWidth >= minWidth)
          menu.x = menuToggled ? 0 : -fullWidth;
     homeButton.x = fullWidth * 0.2;
     homeButton.y = headerMiddleY;
     searchButton.x = fullWidth * 0.4;
     searchButton.y = headerMiddleY;
     playlistButton.x = fullWidth * 0.6;
     playlistButton.y = headerMiddleY;
     filesButton.x = fullWidth * 0.8;
     filesButton.y = headerMiddleY;
     if (menu.scroll.height <= fullHeight)
          menu.scroll.y = 0;
     // resize code for the current screen
          onResize(e);
}
function toggleMenu(e:MouseEvent):void
{
     var finalX:int = menuToggled ? -stage.stageWidth : 0;
     const TWEEN:Tween = new Tween(menu, "x", Sine.easeInOut, menu.x, finalX, 0.35, true);
     if (menuToggled)
          menu.scroll.y = 0;
     resizeHandler(null);
     menu.mouseChildren = !menuToggled;
     menuToggled = !menuToggled;
}
function changeScreen(e:MouseEvent):void
{
     const TWEEN:Tween = new Tween(highlight, "x", Sine.easeInOut, highlight.x, e.currentTarget.x, 0.35, true);
     gotoAndStop(e.currentTarget.name.replace("Button", ""));
}
function beginScroll(e:MouseEvent):void
{
     if (menu.scroll.height > fullHeight)
     {
          e.currentTarget.startDrag(false, new Rectangle(0, 0, 0, -menu.scroll.height * 0.35));
          stage.addEventListener(MouseEvent.MOUSE_UP, endScroll);
     }
}
function endScroll(e:MouseEvent):void
{
     stopDrag();
     stage.removeEventListener(MouseEvent.MOUSE_UP, endScroll);
}
if (!this.started)
{
     stage.align = StageAlign.TOP_LEFT;
     stage.scaleMode = StageScaleMode.NO_SCALE;
     initialStageWidth = 540;
     initialStageHeight = 960;
     scale= stage.stageHeight / initialStageHeight;
     menu.mouseChildren = false;
     stage.addEventListener(Event.RESIZE, resizeHandler);
     menuButton.addEventListener(MouseEvent.MOUSE_DOWN, toggleMenu);
     menu.protection.addEventListener(MouseEvent.MOUSE_DOWN, toggleMenu);
     homeButton.addEventListener(MouseEvent.MOUSE_DOWN, changeScreen);
     searchButton.addEventListener(MouseEvent.MOUSE_DOWN, changeScreen);
     playlistButton.addEventListener(MouseEvent.MOUSE_DOWN, changeScreen);
     filesButton.addEventListener(MouseEvent.MOUSE_DOWN, changeScreen);
     menu.scroll.addEventListener(MouseEvent.MOUSE_DOWN, beginScroll);
     this.started = true;
}
start();

[Frame 2]

start = function():void
{
     onResize = function(e:Event):void
     {
          searchText.x = (fullWidth - searchText.width) * 0.5;
          searchText.y = (fullHeight - searchText.height) * 0.5;
          highlight.x = searchButton.x;
          highlight.y = searchButton.y + searchButton.height * 0.65;
     };
     onResize(null);
};
start();

[Frame 3]

start = function():void
{
     onResize = function(e:Event):void
     {
          playlistText.x = (fullWidth - playlistText.width) * 0.5;
          playlistText.y = (fullHeight - playlistText.height) * 0.5;
          highlight.x = playlistButton.x;
          highlight.y = playlistButton.y + playlistButton.height * 0.65;
     };
     onResize(null);
};
start();

[Frame 4]

start = function():void
{
     onResize = function(e:Event):void
     {
          filesText.x = (fullWidth - filesText.width) * 0.5;
          filesText.y = (fullHeight - filesText.height) * 0.5;
          highlight.x = filesButton.x;
          highlight.y = filesButton.y + filesButton.height * 0.65;
     };
     onResize(null);
};
start();

Please notice how I reused the resize function instead of adding the resize event listener multiple times. Also notice that I could have calculated the position of the highlight and the text fields in a single frame but I chose to calculate in each individual frame so you can understand how you can apply responsive code for objects that are always available and for objects that may be not available.

FLA download:
animate_cc_as3_responsive_layout.zip - Google Drive

* I don't have an Apple device so I based my sample on my Android phone.

I hope this helps.

Regards,

JC