actionscript-3flashairstarling-frameworkstagewebview

AS3: Resize StageWebView on Event.RESIZE when using Starling


I'm building a mixed interaction AS3/AIR application. Some of my scenes use the regular CPU rendered display classes (flash.display.Sprite, flash.display.MovieClip) and another high-density graphics mode uses Starling. I can switch between and use these happily, and I can switch between windowed mode at 720p to fullscreen mode just fine.

However, I just added a StageWebView to easily add some HTML based content, and I'm having trouble with resize. If I don't call "new Starling()" then the StageWebView instance will correctly resize to maintain the same relative screen dimensions when I switch from windowed to FullScreen. However, as soon as I create a Starling instance, the StageWebView will not correctly resize on fullscreen; it retains the absolute dimensions originally specified. If I don't instantiate Starling, the StageWebView resizes perfectly.

Do I need an event handler for Event.RESIZE to specifically adjust the viewPort member of the StageWebView object? How do I get the correct relative dimensions from the original fixed windowed size? (I tried looking at stage width/height and the numbers were oddly large, with AIR failing to build a new Rectangle correctly).

I would appreciate any sample code for anyone who has solved this problem. Thanks.


Solution

  • Okay, fixed this. While without Starling, the regular Flash Renderer will handle resizing the StageWebView class correctly, with Starling, we must handle our own resize events.

    Thus, in the onAddedToStage method (which is itself a handler for Event.ADDED_TO_STAGE) of my Sprite-derived container class, I add this:

    addEventListener(Event.RESIZE, onResize);

    And then have this function:

    private function onResize(e:Event):void
    {
        var origH:Number = 720;
        var origW:Number = 1280;
    
        var baseRect:Rectangle = new Rectangle(40,40, 1200, 640);
    
        var newX:Number = baseRect.x * stage.stageWidth / origW;
        var newY:Number = baseRect.y * stage.stageHeight / origH;
    
        var newW:Number = baseRect.width * stage.stageWidth / origW;
        var newH:Number = baseRect.height * stage.stageHeight / origH;
    
        m_webView.viewPort = new Rectangle(newX,newY,newW,newH);
    }
    

    Of course, I shouldn't hardcode the 720 and 1280, nor the base size of the viewPort, but you get the idea.