FullScreenEvent class - overlaying elements

Question

Updated:

I'm using BitmapImage to overlay two png files & GlowFilter to Overlay text over an element called remoteVideoDisplay. When I click my Full Screen button (the function is below) my BitmapImage overlays are not in the bottom right hand corner in full screen mode: https://i.sstatic.net/36UJK.jpg

Source without my additions: https://github.com/MonaSolutions/MonaClients/blob/master/VideoPhone/src/VideoPhone.mxml

Full Screen Function:

        protected function fullScreenButton_clickHandler(event:MouseEvent):void
        {
            videoBox.removeElement(remoteVideoDisplay);
            videoBox.removeElement(overlayBox);

            stage.addChild(remoteVideoDisplay);
            stage.addChild(overlayBox);

            stage.displayState = StageDisplayState.FULL_SCREEN;
            stage.scaleMode=StageScaleMode.NO_SCALE;

            overlayBox.width = stage.stageWidth;
            overlayBox.height = stage.stageHeight;
            overlayBox.validateDisplayList();

            remoteVideo.width = stage.stageWidth;
            remoteVideo.height = stage.stageHeight;
            remoteVideoDisplay.width = stage.stageWidth;
            remoteVideoDisplay.height = stage.stageHeight;

            stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenHandler);                 
        }

        protected function fullScreenHandler(event:FullScreenEvent):void
        {
            if(!event.fullScreen)
            {
                stage.removeChild(remoteVideoDisplay);
                stage.removeChild(overlayBox);

                videoBox.addElement(remoteVideoDisplay);
                videoBox.addElement(overlayBox);

                overlayBox.width = 320;
                overlayBox.height = 40;

                remoteVideo.width = videoBox.width;
                remoteVideo.height = videoBox.height;
                remoteVideoDisplay.percentWidth = remoteVideoDisplay.percentHeight = 100;

                stage.removeEventListener(FullScreenEvent.FULL_SCREEN, fullScreenHandler);                  
            }
        }

Overlay:

<s:HGroup>
    <s:Group id="videoBox" width="320" height="240">
        <s:Group id="overlayBox" width="320" height="40" depth="1">
            <mx:Label alpha=".8" color="0xffffff" 
                filters="{[new GlowFilter(0x0167bb,1,4,4,8,1)]}"
                text=" Version: 123456"/>                
            <s:BitmapImage id="runtimeimg1" right="81" bottom="2" width="23" height="24" alpha=".6" source="01.png"/>
            <s:BitmapImage id="runtimeimg2" right="56" bottom="2" width="24" height="24" alpha=".6" source="02.png"/>
        </s:Group>
        <mx:VideoDisplay id="remoteVideoDisplay" width="100%" height="100%" depth="0"/>
    </s:Group>
</s:HGroup>

Button:

    <s:HGroup includeIn="CallEstablished" verticalAlign="middle">
        <s:Button id="fullscreenButton" includeIn="CallEstablished" label="FULLSCREEN"
                  click="fullScreenButton_clickHandler(event)" enabled="true"/>
    </s:HGroup>

Libraries (imports):

        import flash.events.SampleDataEvent;

        import mx.charts.chartClasses.StackedSeries;
        import mx.collections.ArrayList;
        import mx.controls.Alert;
        import mx.core.FlexGlobals;
        import mx.formatters.DateFormatter;
        import flash.filters.GlowFilter;
        import flash.filters.BitmapFilterQuality;
        import flash.filters.BitmapFilterType;
        import mx.rpc.http.HTTPService;

        import flash.display.Sprite;
        import flash.net.navigateToURL;
        import flash.net.URLRequest;
        import flash.net.URLRequestMethod;
        import flash.net.URLVariables;


        // Libraries for Brightness Contrast Hue Saturation

        import flash.display.Sprite;
        import fl.motion.AdjustColor;
        import flash.filters.ColorMatrixFilter;
        import fl.events.SliderEvent;   
        import flash.external.ExternalInterface;

Answer 1

OK, I think that the simplest method is to use a Group to put your overlays, then add and remove it from the stage as your video object :

<s:HGroup>
    <s:Group id="videoBox" width="320" height="240">
        <s:Group id="overlayBox" width="320" height="40" depth="1">
            <mx:Label alpha=".8" color="0xffffff" 
                filters="{[new GlowFilter(0x0167bb,1,4,4,8,1)]}"
                text=" Version: 123456"/>                
            <s:BitmapImage id="runtimeimg1" right="81" bottom="2" width="23" height="24" alpha=".6" source="01.png"/>
            <s:BitmapImage id="runtimeimg2" right="56" bottom="2" width="24" height="24" alpha=".6" source="02.png"/>
        </s:Group>
        <mx:VideoDisplay id="remoteVideoDisplay" width="100%" height="100%" depth="0"/>
    </s:Group>
</s:HGroup>

Then

protected function fullScreenButton_clickHandler(event:MouseEvent):void
{
    videoBox.removeElement(remoteVideoDisplay);
    videoBox.removeElement(overlayBox);

    stage.addChild(remoteVideoDisplay);
    stage.addChild(overlayBox);

    stage.displayState = StageDisplayState.FULL_SCREEN;
    stage.scaleMode=StageScaleMode.NO_SCALE;

    remoteVideo.width = stage.stageWidth;
    remoteVideo.height = stage.stageHeight;
    remoteVideoDisplay.width = stage.stageWidth;
    remoteVideoDisplay.height = stage.stageHeight;

    stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenHandler);                 
}

protected function fullScreenHandler(event:FullScreenEvent):void
{
    if(!event.fullScreen)
    {
        stage.removeChild(remoteVideoDisplay);
        stage.removeChild(overlayBox);

        videoBox.addElement(remoteVideoDisplay);
        videoBox.addElement(overlayBox);

        remoteVideo.width = videoBox.width;
        remoteVideo.height = videoBox.height;
        remoteVideoDisplay.percentWidth = remoteVideoDisplay.percentHeight = 100;

        stage.removeEventListener(FullScreenEvent.FULL_SCREEN, fullScreenHandler);                  
    }
}

EDIT :

To avoid the spark Group resizing problem, you can use validateDisplayList()

Validates the position and size of children and draws other visuals ...

So in your case you can do :

protected function fullScreenButton_clickHandler(event:MouseEvent):void
{
    videoBox.removeElement(remoteVideoDisplay);
    videoBox.removeElement(overlayBox);

    stage.addChild(remoteVideoDisplay);
    stage.addChild(overlayBox);

    stage.displayState = StageDisplayState.FULL_SCREEN;
    stage.scaleMode=StageScaleMode.NO_SCALE;

    overlayBox.width = stage.stageWidth;
    overlayBox.height = stage.stageHeight;
    overlayBox.validateDisplayList();

    remoteVideo.width = stage.stageWidth;
    remoteVideo.height = stage.stageHeight;
    remoteVideoDisplay.width = stage.stageWidth;
    remoteVideoDisplay.height = stage.stageHeight;

    stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenHandler);                 
}

protected function fullScreenHandler(event:FullScreenEvent):void
{
    if(!event.fullScreen)
    {
        stage.removeChild(remoteVideoDisplay);
        stage.removeChild(overlayBox);

        videoBox.addElement(remoteVideoDisplay);
        videoBox.addElement(overlayBox);

        overlayBox.width = 320;
        overlayBox.height = 40;

        remoteVideo.width = videoBox.width;
        remoteVideo.height = videoBox.height;
        remoteVideoDisplay.percentWidth = remoteVideoDisplay.percentHeight = 100;

        stage.removeEventListener(FullScreenEvent.FULL_SCREEN, fullScreenHandler);                  
    }
}

Hope that can help.