Flex videodisplay fullscreen like youtube

Videodisplay in whole screen / Full screen particular component

After a long time I came with a new post in flex. Yes fullscreen in flex..!!! Fullscreening a whole app is very simple. You can full screening by simply changing the display state of your application. But it will be tricky if you are try to fullscreen a particular component in an application. In this post I am taking videodisplay component in a video chat application.

Still you can fullscreen a component using fullScreenSourceRect property of stage.

stage.fullScreenSourceRect = new Rectangle (0,0,320,240);

But It is like zooming a component. Its not good such as videodisplay component. So I came up with an idea. Here its

  • Get that object of element which you are going to make fullscreen.
  • Remove it from parent object.
  • Add that element into stage.
  • Then resize that element to stage width and height.
  • While existing from fullscreen remove from stage and add back to parent component.
protected function fullScreenButton_clickHandler(event: MouseEvent): void {
 var liveVideo: Object = liveVideoDisplay.getChildByName("liveVideo");
 stage.displayState = StageDisplayState.FULL_SCREEN;
 liveVideo.width = stage.width;
 liveVideo.height = stage.height;
 stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenHandler);

View source is enabled.

Show Comments