AS3 Issues with Rotation

Question

I have a fairly basic app where you navigate menus and then access videos and demos.

My issue is that when you access a video, it forces you to rotate the screen first.

By using stage.scaleMode = Stage.ScaleMode.NO_SCALE I was able to make it work perfectly on my iPhone 7, but I can't find a way to scale up for iPhone 8 or 10.

I've been trying to use other StageScaleModes, and they work perfectly for the menus but when the screen is rotated, the scale becomes insanely wonky.

It either stays within the original aspect ratio or becomes much to big for the screen.

I've tried using stage.stageWidth and stage.stageHeight to correct this but they never return the correct size.

Any help in either fixing the issue in rotation or making NO_SCALE work would be greatly appreciated.

EDIT:

public function playVideo(path2: String): Function {
        path = path2;
        var listener: * ;
        listener = function (e: MouseEvent = null): void {
            stage.addChild(pleaseRotateScreen);
            stage.autoOrients = true; 
            stage.addEventListener(StageOrientationEvent.ORIENTATION_CHANGING, orientationChangeListener_Videos);
        }
        return listener;
    }


    function orientationChangeListener_Videos(e: StageOrientationEvent) {
        if (e.afterOrientation == StageOrientation.ROTATED_RIGHT || e.afterOrientation == StageOrientation.ROTATED_LEFT) {
            stage.removeEventListener(StageOrientationEvent.ORIENTATION_CHANGING, orientationChangeListener_Videos);
            stage.autoOrients = false;
            stage.removeChild(pleaseRotateScreen);
            startVideo();
        }
    }

EDIT2

public function startVideo(): void { //bring up the video UI. stage.displayState = StageDisplayState.FULL_SCREEN;

        headerTextField = new TextField();
        headerTextField.autoSize = TextFieldAutoSize.LEFT;
        var theFont = new BrownReg();
        var rectClip: Sprite = new Sprite();
        headerTextField.autoSize = "left";
        //headerTextField.text = pageClip2.uiText;
        headerTextField.text = "Stage Width: " + stage.width + " Stage.Height: " + stage.stageHeight;
        headerTextField.selectable = false;


        backPlate = new MovieClip;
        backPlate.graphics.beginFill(0x000000);
        backPlate.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
        backPlate.graphics.endFill();
        overlay = new blackOverlay;
        video_UI.addChild(overlay);
        overlay.addEventListener(MouseEvent.CLICK, bringUpVideoUI);

        mcScroll.addChild(backPlate);

        TweenLite.to(menu_clip, .4, { alpha: 0, ease: Expo.easeOut });
        TweenLite.to(screen_clip, .4, { alpha: 0, ease: Expo.easeOut });
        TweenLite.to(pageClip, .4, { alpha: 0, ease: Expo.easeOut });
        TweenLite.to(mcScroll, .4, { alpha: 0, ease: Expo.easeOut });
        TweenLite.to(topbar_clip, .4, { alpha: 0, ease: Expo.easeOut });

        video_UI.addChild(gradientVid);
        gradientVid.y = 750 - 100;

        X_UI = new videoX;       
        X_UI.x = (1254+24); X_UI.y = (678+24);
        video_UI.addChild(X_UI);
        X_UI.addEventListener(MouseEvent.CLICK, closeVideo);

        pauseUI = new MovieClip;  
        pauseUI.addChild(pauseClip); 
        pauseUI.x = (140+24);   pauseUI.y = (672+30);
        video_UI.addChild(pauseUI);
        pauseUI.addEventListener(MouseEvent.CLICK, pauseVid);

        jumpBackUI = new mcFastForward;   
        jumpBackUI.rotation = 180;
        jumpBackUI.x = (32+30); jumpBackUI.y = (672+30);
        video_UI.addChild(jumpBackUI);
        jumpBackUI.addEventListener(MouseEvent.CLICK, seekBack);

        jumpForwardUI = new mcFastForward;   
        jumpForwardUI.x = (248+30);     jumpForwardUI.y = (672+30);
        video_UI.addChild(jumpForwardUI);
        jumpForwardUI.addEventListener(MouseEvent.CLICK, seekForward);


        var f: TextFormat = new TextFormat();
        headerTextField.x = 32;     headerTextField.y = 60;

        f.size = 48; 
        f.font = theFont.fontName;
        f.color = 0xffffff;

        headerTextField.embedFonts = true;
        headerTextField.setTextFormat(f);
        video_UI.addChild(headerTextField);

        video_UI.alpha = 0;

        videoRect.width = stage.stageWidth;  
        videoRect.height = stage.stageHeight;
        //videoRect.scaleX = videoRect.scaleY;
        initVideo();

        bringUpVideoUI();
    }

Before Rotate

After Rotate

Edit 3:

public function initVideo(): void {
        var obj: MovieClip = new MovieClip();
        var nc: NetConnection = new NetConnection();
        nc.connect(null);
        netstream = new NetStream(nc);
        netstream.client = obj;
        obj.onMetaData = onMetaData;

        stageVideo = stage.stageVideos[0];
        stageVideo.addEventListener(StageVideoEvent.RENDER_STATE, onRender);
        stageVideo.attachNetStream(netstream);

        netstream.play(path);
        netstream.seek(0);

        netstream.removeEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
        netstream.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
        netstream.addEventListener(AsyncErrorEvent.ASYNC_ERROR, doAsyncError);
        netstream.addEventListener(NetStatusEvent.NET_STATUS, doNetStatus);
        netstream.addEventListener(IOErrorEvent.IO_ERROR, doIOError);

        if (netstream != null) { 
            netstream.removeEventListener(AsyncErrorEvent.ASYNC_ERROR, doAsyncError);
            netstream.removeEventListener(NetStatusEvent.NET_STATUS, doNetStatus);
            netstream.removeEventListener(IOErrorEvent.IO_ERROR, doIOError);
        }
    }


    //Video Functions
    public function shrinkVideo() { }
    public function enlargeVideo() { }
    protected function doSecurityError(evt: SecurityErrorEvent): void {     trace("AbstractStream.securityError:" + evt.text);      }
    protected function doIOError(evt: IOErrorEvent): void {     trace("AbstractScreem.ioError:" + evt.text);        }
    protected function doAsyncError(evt: AsyncErrorEvent) {     trace("AsyncError:" + evt.text);        }
    protected function doNetStatus(evt: NetStatusEvent): void {     }
    private function onMetaData(e: Object): void {      duration = e.duration;      }
    private function onRender(e: StageVideoEvent): void {   
        if(videoDemo == true){ 
            addEventListener(Event.ENTER_FRAME, onEnterFrame);
            cl.addEventListener(MouseEvent.CLICK, _handleClick); //add the clickforward to the the rectangle. 
        }
        stageVideo.viewPort = videoRect;        
    }

    private function netStatusHandler(e: NetStatusEvent): void { //get the end of a video
        if (e.info.code == "NetStream.Play.Stop") {
            if (demo == true) {
                netstream.play(path); //loop the video if its in a demo
            } else if (videoDemo == true) { 
                returnFromDemo(); 
            }else{
                exitVid();
            }

        }
    }

Answer 1

When developing a multiscreen game or app, developers need to read device's screen size to correctly rescale and reorganise screen elements. These sizing issues can be very frustrating, especially as behavior is not the same across OSes and devices. My personal preference is to always have my apps run in fullscreenMode = true / aspectRatio = portrait / autoOrients = false, only.
If there is a need to redraw/resize stuff based on a change in orientation, then a handler should be able to 'fake' it, rather than actually modifying the stage.