FullScreenEvent class - overlaying elements - actionscript-3

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: http://imgur.com/a/1QZXa
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.